前端mock数据

时间:2021-7-3 作者:qvyue

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

一、本地请求json文件

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

    前端mock数据
    image.png
  3. 接口地址改为/mock/logout.json
    const USER_LOGOUT = "/mock/logout.json";
  4. vue.config.js 代理地址为http://localhost:9092
    前端mock数据
    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)
      });
前端mock数据
image.png
  • 缺点
  1. 打包:因为是放在public下,所以打包的时候,会将mock文件夹打进去;

    前端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
  1. 快速使用:

    前端mock数据
    image.png
前端mock数据
image.png
  1. 接口请求示例:(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的情况;
  • 缺点
  1. 多人开发时,需要同步代码;
  2. 返回的数据写死了;

三、mockjs

  1. 安装mockjs:npm install mockjs –save
  2. 创建mock文件/文件夹:(我在src下创建的mock文件夹–接口特别多的时候,最好分模块处理)

    前端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')
}
  1. 引入其他模块的接口: mock/index.js

    前端mock数据
    image.png
  2. 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": "成功"
  }
})
  1. 接口请求示例:(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', () => {})
  1. 注意请求地址前缀和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
    启动成功后,会自动打开,界面如下:

    前端mock数据
    image.png
  3. 使用:

    前端mock数据
    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为准)

    前端mock数据
    image.png
  • 优点:
  1. 可视化界面;
  2. 生成的mock数据,打包的时候不会打进去;
  3. 多人开发时, 无须同步代码,只需接口请求代理到指定人电脑即可,然后访问他的ip,也能添加接口

    前端mock数据
    image.png
  • 缺点:
  1. 需要手动添加返回字段;

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

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。