前端mock数据

前后端并行开发时，前端页面需要接口数据动态渲染，此时后端接口未开发完成，这时前端可以模拟接口请求。
本文主要介绍在不使用mock工具（目前市面上有很多，例如RAP、yapi等）的前提下，如何模拟数据。

一、本地请求json文件

1. 在public目录下创建文件夹mock

2. 创建json文件

   
   image.png
3. 接口地址改为/mock/logout.json
   const USER_LOGOUT = "/mock/logout.json";
4. vue.config.js 代理地址为http://localhost:9092
   image.png
5. 使用（axios已经封装过了，getDataRequest是get请求）

let result = await this.$api.getDataRequest('USER_LOGIN', {
        userName: this.loginData.userName,
        password: SHA256.hmac(this.loginData.userName, this.loginData.userPwd)
      });

image.png

• 缺点

1. 打包：因为是放在public下，所以打包的时候，会将mock文件夹打进去；

   
   image.png
2. 只能使用get请求，其他请求方法会报404；
3. 返回的数据写死了，和直接在代码里写返回没有太大区别；
4. 多人开发时，需要同步代码；
5. 无法模拟请求头带token的情况;

---

二、使用node搭建express+body-parser服务

1. express服务代码--https://github.com/YiYaYiYaHei/mock/tree/master/NodeService
2. express服务代码的使用

1. 安装supervisor: npm install supervisor -g
2. 安装依赖包：npm i
3. 启动命令: supervisor app.js
4. vue.config.js 代理地址: http://127.0.0.1:13999

3. 快速使用:

   
   image.png

image.png

4. 接口请求示例：（axios已经封装过了，getDataRequest是get请求）

let result = await this.$api.getDataRequest('USER_LOGIN', {
        userName: this.loginData.userName,
        password: SHA256.hmac(this.loginData.userName, this.loginData.userPwd)
      });

• 优点

1. 不限制请求方法；
2. 对打包无影响；
3. 可以模拟请求头带token的情况;
4. 若了结后端+node，这个代码也可以实现全栈～

• 缺点

1. 多人开发时，需要同步代码；

---

三、mockjs

1. 安装mockjs：npm install mockjs --save

2. 创建mock文件/文件夹：(我在src下创建的mock文件夹--接口特别多的时候，最好分模块处理)

   
   image.png

   ；

3. main.js引入mock:
   require和import的区别看这里--https://juejin.cn/post/6844903520865386510
   我理解的require和import的区别实际就是：import是es6的写法，require是commonjs的写法，import经过babel编译后，会转化成commonjs~

// 引入mockjs
//方式一：
require('./mock/index.js');
//方式二：
import "./mock/mock.js";
// 方式三:
if(process.env.NODE_ENV == 'development'){
  require('./mock/index')
}

4. 引入其他模块的接口： mock/index.js

   
   image.png

5. mock接口写法：(以mock/login.js为例)
   mockjs介绍--https://www.jianshu.com/p/d812ce349265

//引入mockjs
const Mock = require('mockjs');

Mock.mock('/apis/login', 'post', (req, res) => {
  return {
    "status": 200,
    "message": "成功",
    "data": {
      "token": "ehsdjskdhajhdklj"
    }
}
});
Mock.mock('/apis/logout', 'get', (req, res) => {
  return {
    "status": 200,
    "message": "成功"
  }
})

6. 接口请求示例：（axios已经封装过了，getDataRequest是get请求）

let result = await this.$api.getDataRequest('USER_LOGIN', {
        userName: this.loginData.userName,
        password: SHA256.hmac(this.loginData.userName, this.loginData.userPwd)
      });

• 注意:

1. 请求地址后面接参数，mock是拦截不到的，此时接口会报404（请求地址是精确匹配滴）;
   解决：接口地址使用url

// 当请求地址为/apis/list?id=1或者/apis/list/1路由时Mock会拦截请求并返回上面的数据
Mock.mock(/\/apis\/list.*/, 'get', () => {})

2. 注意请求地址前缀和axios.baseurl相对应；

• 优点:

1. 不限制请求方法；
2. 打包的时候，mock数据不会打进去；
3. 可以随机生成数据;
4. 可以模拟请求头带token的情况;

• 缺点:

1. f12上看不到请求;
2. 请求地址后面接参数，拦截不到；需使用正则匹配地址;
3. 多人开发时，需要同步代码;

---

四、xl_mock--带可视化界面

1. 全局安装：npm install -g xl_mock

2. 在项目里开启：xl_mock start -p 2048
   启动成功后，会自动打开，界面如下:

   
   image.png

3. 使用：

   
   image.png
4. 接口请求示例：（axios已经封装过了，getDataRequest是get请求）

let result = await this.$api.getDataRequest('USER_LOGIN', {
        userName: this.loginData.userName,
        password: SHA256.hmac(this.loginData.userName, this.loginData.userPwd)
      });

• 注意:

1. 创建接口后，会在项目根目录生成mock文件夹; (在项目里执行xl_mock start -p 2048，使用项目里的mock；多个项目同时访问xl_mock，以最后开启的xl_mock为准)

   
   image.png

• 优点：

1. 可视化界面;
2. 生成的mock数据，打包的时候不会打进去;

3. 多人开发时, 无须同步代码，只需接口请求代理到指定人电脑即可，然后访问他的ip，也能添加接口

   
   image.png

• 缺点：

1. 需要手动添加返回字段;

2. 无法模拟请求头带token的情况;

3. 无法动态返回数据，都是再创建的时候写死了；

   最后，用现成的工具不香吗。。。