vue或者react使用模拟接口数据Mock

我们使用webpack-api-mocker模拟接口，webpack-api-mocker已经改名为mocker-api，mocker-api最新几个版本在webpack有报错，我这边继续使用老版本webpack-api-mocker。mockJS是用来模拟数据的，mockJS也可以用来模拟接口。mockJS能用来模拟接口，为什么还要用webpack来做呢？因为mockJS`只是拦截接口，有两个缺点：

1. 浏览器控制台Network看不到接口请求（因为已经拦截了），看不到请求参数等问题。
2. 浏览器刷新后，接口数据不会缓存，比如有条新闻标题是《我的标题》，把标题改成《我是新的标题》，浏览器刷新后标题就恢复成原来的《我是标题》。

webpack-api-mocker 安装和使用

安装webpack-api-mocker和mockJS

npm install --save-dev webpack-api-mocker mockjs 
npm install g webpack-api mocker

新建接口

在根目录下新建mocker文件夹，该目录新建两个js，index.js和todo.js

// index.js
const todo = require('./todo');

module.exports = {
  ...todo,
};

// todo.js
const Mock = require('mockjs'); // 模拟数据
const delay = require('mocker-api/utils/delay'); // 延迟请求

const { Random } = Mock;
const todoList = [];
init();

/**初始化办事项数据 */
function init() {
  for (let i = 0; i < 5; i += 1) {
    todoList.push(
      Mock.mock({
        title: Random.cparagraph(1),
        name: Random.cname(),
        done: Random.boolean(),
      })
    );
  }
}

/**添加办事项 */
function addData(req, res) {
  let data;
  let status = 200;
  try {
    const { title } = req.body;
    data = Mock.mock({
      title,
      name: Random.cname(),
      done: false,
    });
    todoList.unshift(data);
  } catch (error) {
    status = 400;
    data = error;
  }

  return res.status(status).json(data);
}

/**处理办事项 */
function done(req, res) {
  const { index } = req.body;
  todoList[index].done = !todoList[index].done;
  return res.json(todoList[index]);
}

module.exports = delay(
  {
    'GET /api/todo-querys': todoList,
    'POST /api/todo-add': addData,
    'PUT /api/todo-done': done,
  },
  500
);

修改 package.json文件

修改package.js文件，command命令：npm run mockerApi，就可以访问前面新建的那几个接口了。

{
  ...
  "scripts": {
+    "mockerApi": "mocker ./mocker"
  }
  ...
}

在vue使用，react同理，因为都是webpack的webpack-dev-server选项里面

vue的webpack-dev-server配置在根目录vue.config.js，修改before(app){}

const path = require('path');
const apiMocker = require('webpack-api-mocker');

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8000,
    https: false,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
+    before(app) {
+      process.env.MOCK === 'yes' &&
+        apiMocker(app, path.resolve('./mocker/index.js'), {
+          proxy: {
+            '/repos/*': 'https://api.github.com/',
+            '/:owner/:repo/raw/:ref/*': 'http://127.0.0.1:2018',
+          },
+          changeHost: true,
+        });
+    },
  },
};

修改package.json

安装依赖cross-env,cross-env是一个可跨平台的环境变量。cmd：npm i --save-dev cross-env,修改package后，cmd：npm run serve:mock,可启动你的vue项目。

{
  ...
  "scripts": {
     ...
+    "serve:mock": "cross-env MOCK=yes vue-cli-service serve"
  }
  ...
}

关于npm run serve:mock和npm run mockerApi

serve:mock：api跟vue项目一起启动

mockerApi：单独启动一个api服务器。什么时候能用到这个呢？比如领导要看你东西，你可以把mocker文件和vue打包文件一起发布到测试环境，vue使用mockerApi服务器的接口。