1. 程式人生 > >mock數據(模擬後臺數據)

mock數據(模擬後臺數據)

route 返回 方法 輸入 gpo 顯示 pla node 獲取數據

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

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

技術分享圖片技術分享圖片

2.在 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中的數據,再分別將商家,商品,評論數據寫入相應變量中:

技術分享圖片

2)編寫路由及相應接口

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

技術分享圖片

3)調用express的變量app,使用 use 方法,第一個參數是path,所有與接口相關的 api 都會通過 api路由,再路由到具體的路由。

  比如:商家就是先通過api路由,再到seller路由。

技術分享圖片

4)運行

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

PS:Google可以用 jsonview 插件將返回數據格式化

mock數據(模擬後臺數據)