详解vue-cli 本地开发mock数据使用方法

目录下创建

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 数据的本地服务

结果如下：

整体代码：https://github.com/carrotz/vue-cli-mock