现在都在强调前后端分离，所以开发过程中，可以准备好一些json数据，
开启个web本地服务，利用nodejs的express模块，做临时的接口提供数据。
最近学习使用vue-cli构建vue2.0 spa项目中，发现网上vue1.0中mock数
据的方法不能用了，主要是webpack一些配置文件发生改变，所以再此记录下做法
需求：提供三个接口
- 获取商家信息：http:xxxx/api/seller
- 获取商家商品数据：http:xxxx/api/goods
- 获取商家评价信息：http:xxxx/api/ratings
准备好数据源，也就是假数据文件“data.json”，这里提供一份示例 饿了么商家信息数据，放到指定目录，我这里直接放到根目录（跟index.html同个目录）
在build目录中找到webpack开发配置文件"webpack.dev.conf.js"，随便找个空白位置，添加以下代码
// mock数据
// 加载express
const express = require('express');
const app = express();
const Router = express.Router();
// 加载数据源数据
const Data = require('../data.json'); // 假数据文件相对路径
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
})
});
// 配置获取评论接口
Router.get('/ratings', (req, res, next) => {
res.json({
code: 200,
message: 'success',
data: ratings
})
});
- 找到devServer的设置，在最后添加一项配置
before(app) {
app.use('/api', Router);
}
如下:
WX20180802-175409.png
- 启动devServer本地服务，直接再终端中运行npm命令就可以了
npm run dev
- 因为是get请求，直接在浏览器中输入完整地址，如果能看到json数据就成功了！(我这里自己改过devServer的ip地址，如果你没改过就是默认127.0.0.1)
WX20180802-175409.png
