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

如果后端接口尚未开发完成，前端开发一般使用mock数据。
mock方法有多种多样，这里给出两种：

方法一： 使用express搭建静态服务

mock数据写在json文件中，proxyTable 里将接口代理到具体mock数据json文件上。
具体方法：

• 创建 mock 文件夹
• build/dev-server.js 中添加如下代码

方法二 使用 JSON Server 搭建 Mock 服务器

配置流程

• 全局安装 $ 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"

启动 mock 服务器

faker.js 批量生成伪数据

• $ cnpm install faker -G 全局安装 faker
• 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
  请求 可以获取到随机生成的100组伪数据

添加中间件

• 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请求了

其他需求也可以通过添加不同的中间件实现。

代理设置

代码中添加请求以测试效果

$ npm run mockdev 启动带mock 数据的本地服务

结果如下：