mock數據(模擬後臺數據)

作爲前端經常需要模擬後臺數據,我們稱之爲mock。通常的方式爲自己搭建一個服務器,返回我們想要的數據。

項目中遇到的請求鏈接是類似這樣子的:www.abc.com/user/login,而不是請求某個文件,如果採用PHP+Apache的方式就需要做路徑重寫,太麻煩。這裏用的是nodejs搭建。

前提

1、Web應用前後端(臺)分離:
後臺向前臺提供API接口,只負責數據的提供和計算,而完全不處理展現
前臺通過Http(Ajax)請求獲取數據, 在瀏覽器端動態構建界面顯示數據

2、設計JSON數據結構

3、利用Node+express提供模擬數據
優點:可以在瀏覽器端訪問
缺點:如果是打包發佈就無法訪問模擬數據, 只能是測試時使用

與以往的自己模擬的假數據不同,mockjs可以帶給我們的是:在後臺接口未開發完成之前模擬數據,並返回,完成前臺的交互;在後臺數據完成之後,你所做的只是去掉mockjs:停止攔截真實的ajax,僅此而已。

具體操作

步驟一.將 data.json 文件拷貝到 sellapp 目錄下(與 index.html 同級)

模擬的數據請求是從 data.json 中讀取數據,接下來就來編寫這些接口。
mock數據(模擬後臺數據)mock數據(模擬後臺數據)

步驟二.在 webpack.dev.conf.js 中添加以下代碼:

此次開發過程需要去本地數據地址進行請求,而原版配置在 dev-server.js 中,新版 vue-webpack-template 已經刪除 dev-server.js,改用webpack.dev.conf.js代替,所以配置本地訪問在 webpack.dev.conf.js 裏配置即可。這裏使用 express 框架去寫一個 nodeserver,也可以用 express-router 來編寫這些接口請求。

1)先獲取數據:獲取data.json中的數據,再分別將商家,商品,評論數據寫入相應變量中

mock數據(模擬後臺數據)

2)編寫路由及相應接口

解析:調用 get 方法,傳入 seller 接口,發送請求,服務端接受請求,返回給客戶端一個json類型的數據(包括 errno 及數據),其中 errno 是開發規範所有,當其值爲0時,表示返回的數據正常,當遇到一些比如權限限制時,errno 可能不爲0,具體值是由也業務方規定的。因爲本次項目使用的是模擬數據,所以 errno 一定爲0。

mock數據(模擬後臺數據)

3)運行

npm run dev,啓動後輸入http://localhost:8080/api/seller,如果數據正常顯示,則數據能正常返回

參考原文:https://www.cnblogs.com/enboke/p/vue.html

PS:

1.Google可以用 jsonview 插件將返回數據格式化

2.express相關語法:https://github.com/expressjs/express/blob/master/Readme.md

3.app.use和app.get的區別及解析:http://blog.csdn.net/wthfeng/article/details/53366169

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章