VueCli30中集成MockApi

jiezi

5 年前

哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？

没办法啊，资本主义的 XX 嘴脸啊

来吧，技术评审我俩把接口格式对一把，你先开发，我这边结束了我跟上，再联调

MMP，那又增加了我的工作量啊，每次我都要自己先把数据放在一个配置文件中，引入使用，然后对接的
时候还得删除无用代码，好气

你自己 Mock 接口啊，就向我们后端经常用 PostMan 一样模拟请求啊

Mock？？我去查查看

1：Mock 的描述

Mock 接口其实就是模拟真实接口提供一个在开发环境的假数据，甚至是真实数据，在开发时，经常出现
接口内容不能够及时的跟进，导致开发过程中添加一些额外的工作量。接下来的例子全部围绕着 Vue 为主体介绍
前后端提前确定好通信的 JSON 格式之后，我们在不依赖后端进度的同时，能提供一套好的开发体验。

2：Mock 能解决的问题

减少额外工作，在没有 Mock 接口的时候我们模拟数据的方式很烦躁，比如 list 列表，需要在 data 中声明 list，去调试内容，或者引入一个 mock 文件，这样做导致在联调调用接口的部分代码没有写，联调成功的时候要删除很多无用代码 —> 通过 Mock 只需在联调的时候把 Mock 接口的地址换成真实地址即可
```
import {mockList2} from 'mock/list.js';

export default {data () {
    return {
      mockList: [
        {
          "name": 'tx',
          "age": 12
        }
      ],
      mockList2
    }
  }
}
```
如果采用上述的方式去模拟数据，缺少真正缺口所具备的状态，比如删除接口，有成功和失败的区分，这个模拟就很恶心了 —-> 通过 Mock，可以直接通过实在的 query 或者其他的操作来达到同样的目的

3：Mock 的几种方式以及对应的优缺点

Mock 的方式	优缺点
本地 Mock 接口	优点：可以更加细粒度的控制 mock 的内容。缺点：需要增加本地的代码量，以及需要配置 webapck
Mock.js 实现 ajax 拦截	优点：数据通过 mock.js 会更丰富。缺点：增加一些本地配置，拦截 ajax
后端 Controller 的静态 JSON	优点：接口联调不需要修改任何东西。缺点：修改 Mock 内容沟通成本高，跟后端扯皮
利用 FastMock 去模拟 Mock	优点：可控内容以及实现动态 Restful api。缺点：如果项目包装 axios 等请求库之后需要针对接口转发做不同处理

4：本地 Mock 接口

该篇文章针对本地 Mock 接口进行操作，其他的方式会简要介绍并给出对应的链接，如果有需要，自行去查阅。

本地 Mock 的思想就是利用 Node + express 完成 Restful Api。结合 webpack 配置项 devServer 同时利用 Vue-cli3.0 的暴露的配置利用本地 express 完成 mock 接口的添加

Node+Express 的相关知识点，用 node+express 写过 Restful Api 的就应该知道接下来 Mock 怎么处理了，这里我先简要介绍一下我们需要用到的技术吧（Express 的路由以及 node 的 fs 模块）

Express 路由相关，具体的见文档，这里不区分请求方法，直接 app.use

const express = require('express');
const app = express();

// 这样一个简单的路由就完成了，请求到 /ajax-get-info 的请求就能拿到对应的 JSON 数据
app.use('/ajax-get-info', (req, res) => {
  res.send({
    "success": true,
    "code": 0,
    "data": {}})  
});

针对不同的请求生成动态的内容，我们可以通过 req.query 和 req.params 等来生成动态内容，在 express 中，我们传入的 body 内容，在 req.body 中并获取不到，需要添加中间件 body-parser，需要注意的是这个中间件不能在 app 全局路由使用，不然会影响到代码到测服的接口，利用 http-proxy-middleware 转发的接口，所以我们需要单独的设置一个 Mock 路由，针对路由级别的使用中间件，代码如下

const bodyParser = require('body-parser');
const express = require('express');

const mockRouter = express.Router();
// express middleware bodyParser for mock server
// for parsing application/json
mockRouter.use(bodyParser.json());
// for parsing application/x-www-form-urlencoded
mockRouter.use(bodyParser.urlencoded({ extended: true}));
// Api prefix named /mock
app.use('/mock', mockRouter);

// now you can set mock api use mockRouter
mockRouter.use('/ajax-get-info', (req, res) => {
  // use req.body to get request body info
  console.log(req.body);
  
  res.send({
    "success": true,
    "code": 0,
    "data": {
      // return dynamic JSON
      name: req.body.name  
    }
  })
});

现在 Mock 级别的路由已经有了，接下来我们就要准备对应的路由和响应的 callback 了，添加一个 mock 文件夹，专门放置一些 mock 接口的文件，利用 node 的 fs 模块引入所有需要 mock 的接口即可

const path = require('path');
const mockDir = path.resolve(__dirname, '../mock');

fs.readdirSync(mockDir).forEach(file => {const mock = require(path.resolve(mockDir, file));
    // mockRouter 就是上面 Mock 路由即可
    mockRouter.use(mock.api, mock.response);
});

Vue-cli3.x 的基本知识，相对比于 Vue-cli2.x 的版本，把 webpack 的配置封装出来，抛出一些外在接口去修改 webpack 配置，我们需要了解的是针对开发模式 express 的使用（内部使用 webpack-dev-serve），Vue-cli3.0 需要的是在适当的时机处理开发模式的 express 实例，来达到 Mock 的目的
```
module.exports = {
  dev: {before: (app) => {// app 就是底层的 express 实例，上面针对 express 实例的操作，全部换成 app 即可}  
  } 
}
```

至于 mock 的文件下面的 js 文件就是我们需要挂载到 express 的 mock 接口的信息，下面给出一个实例，其他仿照即可，一个 js 文件代表一个 mock 接口

// 注意，由于是针对子路由级别的，前端调用的 url 为 /mock/get-info
module.exports = {
  api: '/get-info',
  response: (req, res) => {
    // 由于添加了 body-parser 中间件，所以可以解析传入的 body，这里就可以用来动态的生成 JSON
    const flag = req.body.flag;

    console.log(req.body);

    res.send(
      {
        success: flag,
        code: 0,
        data: [],
        message: '获取信息成功',
      },
    );
  },
};

mock.js 去，给出官网，它会修改原生的 XMLHttpRequest 来拦截 ajax 请求，同时提供强大的根据模板生成数据
fastmock，类似本地 Mock，数据放在了外网，团队配合可以选择，具体使用见链接
后端 Controller 生成静态 JSON，不推荐，后端不会吊我们的，搞不好会干架，哈哈

前端工程化的出现能够让前端做的事情很多很多，技术的广度能够支持你做一些有意思的事情。首先这个可以做一些优化，比如本地的 Mock 可以使用 mock.js 纯处理一些数据的生成工作。注意 mock 接口的 url 和自己 proxy 的接口不要冲突。使用 Vue-cli3.0，它不仅是封装了 webpack 的配置，同时提供了自己一套插件机制，接下来写一个简单的 cli 插件自动化完成这些操作，
敬请期待。欢迎评论交流。

VueCli30中集成MockApi

VueCli3.0 中集成 MockApi

一：使用场景

二：Mock 的概念

三：本地 Mock 周边知识

四：结合上面的几点整合处理

五：其他几种方式的 Mock 接口

六：总结