vue-cli 添加本地mock服务框架
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run mock serve localhost:3000
npm run mock
# run serve with mock serve
npm run mockdev.
└── mock/ # mock配置目录
└── db.json # mock数据配置
└── faker-data.js # 批量生成伪数据
└── post-to-get.js # post映射为get中间件
JSON Server 是一个创建伪RESTful服务器的工具，具体使用方法可以看官方文档，这里直接讲在vue-cli 中的用法。
- 全局安装
$ npm install -g json-server - 项目目录下创建
mock文件夹 mock文件夹下添加db.json文件，内容如下
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
package.json添加命令
"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"
$ npm run mock 命令 运行 mock server
访问 http://localhost:3000/
发现 db.json 下第一级 json 对象被解析成为可访问路径
GET请求具体路径 如：http://localhost:3000/posts 可获取数据
如果需要大量的伪数据，手动构造比较费时费力，可以使用 faker.js 批量生成。faker.js 的具体使用参见官方文档，这里做一个示例。
$ cnpm install faker -G全局安装 fakermock目录下创建faker-data.js，内容如下
module.exports = function () {
var faker = require("faker");
faker.locale = "zh_CN";
var _ = require("lodash");
return {
people: _.times(100, function (n) {
return {
id: n,
name: faker.name.findName(),
avatar: faker.internet.avatar()
}
}),
address: _.times(100, function (n) {
return {
id: faker.random.uuid(),
city: faker.address.city(),
county: faker.address.county()
}
})
}
}
$ json-server mock/faker-data.js在 json server 中使用 faker 请求 http://localhost:3000/address 可以获取到随机生成的100组伪数据
json server 使用 RESTful 架构，GET请求可以获取数据，POST 请求则是添加数据。 在开发过程中，有时候想直接模拟获取POST请求返回结果，可以添加 express 中间件 将POST请求转为GET请求。
mock目录下创建post-to-get.js，内容如下
module.exports = function (req, res, next) {
req.method = "GET";
next();
}
- 启动命令添加运行中间件
--m mock/post-to-get.js
"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
重新启动服务，POST请求就被转换为GET请求了
其他需求也可以通过添加不同的中间件实现。
在 config/index.js 的 proxyTable 将请求映射到 http://localhost:3000
代码中添加请求以测试效果
$ npm run mockdev 启动带mock 数据的本地服务
结果如下：
