简介
生成随机数据,拦截 Ajax 请求
-
前后端分离 让前端攻城师独立于后端进行开发。
-
增加单元测试的真实性 通过随机数据,模拟各种场景。
-
开发无侵入 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
-
用法简单 符合直觉的接口。
-
数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
-
方便扩展 支持支持扩展更多数据类型,支持自定义函数和正则。
安装
使用 npm:
npm install mock.js
目录
├─src
│ ├─mock
│ │ ├─index.js
│ │ ├─main.js
│ ├─main.js
新建mock文件夹及对应js文件并在src/main.js中引入。
import './mock'
基本用法
// mock/index.js
import Mock from 'mockjs'
import mainAPI from './main'
Mock.mock(/\/getSystemLog/, 'get', mainAPI.getSystemLog)
export default Mock
// mock/main.js
import Mock from 'mockjs'
const result = []
for (let i = 0; i < 10; i++) {
result.push(Mock.mock({
id: '@increment',
name: '@first',
num: '@integer(1, 1000)',
time: '@datetime',
title: '@title(2, 4)',
'state|1': ['true', 'false'],
image_uri,
parentAlgoName: '@integer(1, 3)',
childAlgoName: '@integer(1, 2)',
userName: 'superadmin',
createTime: '@datetime',
'handle|1': ['登录', '修改结果', '添加轮播图']
}))
}
export default {
getSystemLog: () => ({
data: {
pageIndex: 1,
total: result.length,
result: result
}
})
}
tips
- mock.js常用场景为后台接口不存在或者需等待
- 当不需要mock.js时,需注释src/main.js中的导入代码