溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近使用vue-cli做了一個小小的項目，在項目中需要使用vue-resource來與后臺進行數據交互，所以我使用了本地json數據來模仿后臺獲取數據的流程。
至于vue-resource的安裝和json的準備我就不贅述了、、、
下面是操作方法：
1、首先介紹一下項目的結構：將本地的json文件放在最外層和index.html在一起，姑且叫做data.json。
我的json數據文件大概如此：
{
"seller": {
"name": "粥品香坊（回龍觀）",
"description": "蜂鳥專送",
"bulletin": "會指定餐飲服務商。",
"avatar": "https://cache.yisu.com/upload/information/20200622/114/69469.jpg",
},
"goods": [
{
"name": "熱銷榜",
"type": -1
},
{
"name": "熱銷榜",
"type": -1
}
],
"ratings": [
{
"username": "3******c",
"avatar": "https://cache.yisu.com/upload/information/20200622/114/69470.png",
"recommend": [
"南瓜粥",
"皮蛋瘦肉粥"
]
},
{
"username": "2******3",
"avatar": "https://cache.yisu.com/upload/information/20200622/114/69470.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
}
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
