前端在本地开发时如何使用mock数据

首先给大家介绍一个非常好用的库 better-mock

https://lavyun.github.io/better-mock/

下面介绍一下前端开发过程中如何使用mock数据

1. 安装better-mock这个javascript库

npm install better-mock --save

2. 引入并配置

const Mock = require('better-mock');

3. 定义数据模板

const dataTemplate = {
    name: '@name',
    age: '@integer(18, 60)',
    email: '@EMAIL'
};

4. 生成数据

const mockData = Mock.mock(dataTemplate);
console.log(mockData);

5. 使用动态数据

但是一般在项目中，我们都是在本地开发的时候mock后端接口数据

// mock/index.js
export function mockStart () {
  const Mock = require('better-mock');
  const urlReg = /\/(getDetail)/;

  // 当有请求匹配到urlReg这个规则时，会执行传入的回调函数 `(req) => { ... }`
  Mock.mock(urlReg, (req) => {
    let mockData;
    // 过滤掉请求url中的域名。
    let reqPath = req.url.replace(/^https?:\/\/[^/]+/, '');
    // 过滤掉参数
    reqPath = reqPath.split('?')[0];

    try {
      mockData = require(`.${reqPath}`);
    } catch (ex) {
      mockData = { code: -9999, msg: `mock数据未配置：${reqPath}` };
    }

    return mockData;
  });
}

6. 构造接口数据

// getDetail.js
module.exports = {
  "code": 1000,
  "msg": "success",
  "data": {},
}

7. 然后在项目中使用，一般需要判断在测试环境才使用mock数据

// main.js
import { mockStart } from '@/mock';
if ('development' === process.env.NODE_ENV) {
  mockStart();
}