首先给大家介绍一个非常好用的库 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();
}