現(xiàn)在都在強(qiáng)調(diào)前后端分離冕象，所以開發(fā)過程中拨拓，可以準(zhǔn)備好一些json數(shù)據(jù)绣溜，
開啟個(gè)web本地服務(wù)，利用nodejs的express模塊，做臨時(shí)的接口提供數(shù)據(jù)次绘。
最近學(xué)習(xí)使用vue-cli構(gòu)建vue2.0 spa項(xiàng)目中始锚，發(fā)現(xiàn)網(wǎng)上vue1.0中mock數(shù)
據(jù)的方法不能用了刽酱，主要是webpack一些配置文件發(fā)生改變，所以再此記錄下做法
- 我是通過學(xué)習(xí)滴滴大神黃軼提供的模仿餓了么項(xiàng)目來學(xué)習(xí)vue構(gòu)建spa項(xiàng)目的瞧捌，所以以餓了么數(shù)據(jù)舉例(在此特別感謝大神們的技術(shù)分享棵里，幫忙宣傳性下他的課程吧 ?? 傳送門)
需求：提供三個(gè)接口
- 獲取商家信息：http:xxxx/api/seller
- 獲取商家商品數(shù)據(jù)：http:xxxx/api/goods
- 獲取商家評(píng)價(jià)信息：http:xxxx/api/ratings
準(zhǔn)備好數(shù)據(jù)源润文，也就是假數(shù)據(jù)文件“data.json”，這里提供一份示例 餓了么商家信息數(shù)據(jù)殿怜，放到指定目錄典蝌，我這里直接放到根目錄（跟index.html同個(gè)目錄）
在build目錄中找到webpack開發(fā)配置文件"webpack.dev.conf.js"，隨便找個(gè)空白位置头谜，添加以下代碼
// mock數(shù)據(jù)
// 加載express
const express = require('express');
const app = express();
const Router = express.Router();
// 加載數(shù)據(jù)源數(shù)據(jù)
const Data = require('../data.json'); // 假數(shù)據(jù)文件相對(duì)路徑
const seller = Data.seller;
const goods = Data.goods;
const ratings = Data.ratings;
// 配置獲取商家信息接口
Router.get('/seller', (req, res, next) => {
res.json({
code: 200,
message: 'success',
data: seller
})
});
// 配置獲取商品信息接口
Router.get('/goods', (req, res, next) => {
res.json({
code: 200,
message: 'success',
data: goods
})
});
// 配置獲取評(píng)論接口
Router.get('/ratings', (req, res, next) => {
res.json({
code: 200,
message: 'success',
data: ratings
})
});
- 找到devServer的設(shè)置骏掀，在最后添加一項(xiàng)配置
before(app) {
app.use('/api', Router);
}
如下:
WX20180802-175409.png
- 啟動(dòng)devServer本地服務(wù)，直接再終端中運(yùn)行npm命令就可以了
npm run dev
- 因?yàn)槭莋et請(qǐng)求柱告，直接在瀏覽器中輸入完整地址截驮，如果能看到j(luò)son數(shù)據(jù)就成功了！(我這里自己改過devServer的ip地址际度，如果你沒改過就是默認(rèn)127.0.0.1)
WX20180802-175409.png
