最近使用vue-cli做了一個小小的項目，在項目中需要使用vue-resource來與后臺進行數據交互，所以我使用了本地json數據來模仿后臺獲取數據的流程。
至于vue-resource的安裝和json的準備我就不贅述了、、、
下面是操作方法：
1、首先介紹一下項目的結構：將本地的json文件放在最外層和index.html在一起，姑且叫做data.json。
我的json數據文件大概如此：
{ "seller": { "name": "粥品香坊（回龍觀）", "description": "蜂鳥專送", "bulletin": "會指定餐飲服務商。", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg", }, "goods": [ { "name": "熱銷榜", "type": -1 }, { "name": "熱銷榜", "type": -1 } ], "ratings": [ { "username": "3******c", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png", "recommend": [ "南瓜粥", "皮蛋瘦肉粥" ] }, { "username": "2******3", "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png", "recommend": [ "扁豆燜面" ] } ]}2、接著在build的dev-server.js中進行加入代碼：
//模擬服務器返回數據--開始var appData = require('../data.json');var seller = appData.seller;var goods = appData.goods;var ratings = appData.ratings;var apiRoutes = express.Router();apiRoutes.get('/seller', function (req, res) { res.json({ errno: 0, data: seller });});apiRoutes.get('/goods', function (req, res) { res.json({ errno: 0, data: goods });});apiRoutes.get('/ratings', function (req, res) { res.json({ errno: 0, data: ratings });});app.use('/api', apiRoutes);//模擬服務器返回數據--結束特別注意：修改好后重新進行cnpm run dev(注意當dev-server.js和db.json改變后都需要進行該步驟)。
解釋下以上代碼：
1》首先請求根目錄下的data.json文件，獲取到文件內容并將其賦值給appData變量，然后獲取其中的各個字段數據，分別定義變量seller、goods,ratings來賦值。
2》之后，通過express提供的Router對象及其一些方法（這里用的get方法）來設置接口（請求路徑）以及請求成功后的回調函數來處理要返回給請求端的數據。（errno這個類似以js請求中的code值）
3》最后，我們要“使用”這個Router對象，為了統一管理api接口，我們在要請求的路由前邊都加上‘api/'來表明這個路徑是專門用來提供api數據的。在這個“接口”中，當我們訪問“http://localhost:8080/api/sites”路徑的時候，就會返回db.json里的sites對象給我們。
3、使用resouce獲取這些數據，并使用
export default{ data () { return { seller: {} }; }, created () { this.$http.get('/api/seller').then((response) => { // console.log(response); response = response.body; const ERR_OK = 0; if (response.errno === ERR_OK) { let data = response.data; console.log(data); } }); }, components: { 'v-header': header }};以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
