一、为什么使用mockjs
在做开发时,当后端的接口还未完成,前端为了不影响工作效率,手动模拟后端接口,
1.我们可以使用json文件来模拟后台数据,但比较局限,无法模拟数据的增删改查
2.使用json-server模拟,但不能随机生成所需数据
3.使用mockjs模拟后端接口,可随机生成所需数据,可模拟对数据的增删改查
二、mock优点
1.前后端分离,
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。
三、安装
1.使用npm安装:npm install mockjs --save-dev
2.或者直接<script src="http://mockjs.com/dist/mock.js"</script>
四、mock使用
基本语法:
Mock.mock('地址',{ "dataname|rule":{"值"} })
- dataname——名称:模拟的数据的名字。
- 值:模拟的数据的值。
- rule——规则:模拟出数据的规则,常用的几个规则:
- min-max:生成的范围
- count:生成的数量
- +step:递增step
说明:地址就是我们通过ajax获取数据时候填写的地址,这里填写的地址可以是任意不存在的地址,第二个参数是我们要模拟的数据,以及相应的规则。
语法规则
参照官网实例即可:Mock官网示例
也可参考 Mock生成随机数据常用的类型规则
示例:
Mock.mock('https://www.test.com',{
"userInfo|4":[{ //生成|num个如下格式名字的数据
"id|+1":1, //数字从当前数开始后续依次加一
"name":"@cname", //名字为随机中文名字
"ago|18-28":25, //年龄为18-28之间的随机数字
"sex|1":["男","女"], //性别是数组中的一个,随机的
"job|1":["web","UI","python","php"] //工作是数组中的一个
}]
})
最后通过ajax接收数据,形式如下:
//ajax接收数据,通过jq
$.get('https://www.test.com',function(data){
console.log(JSON.parse(data));
})
最终生成的数据为:

五、mock封装
为了可以统一管理和集中控制数据模拟接口,我们对mock模块进行了封装,可以方便地定制模拟接口的统一开关和个体开关。
统一导入所有子模块并通过调用mock进行数据模拟。
在src文件夹下新建mock文件夹,并新建index.js添加以下代码:
import Mock from 'mockjs'
import { baseUrl } from '@/utils/global'
import * as login from './modules/login'
import * as user from './modules/user' //这就是/mock/modules/user.js、以下同理
import * as role from './modules/role'
import * as dept from './modules/dept'
import * as menu from './modules/menu'
import * as dict from './modules/dict'
import * as config from './modules/config'
import * as log from './modules/log'
import * as loginlog from './modules/loginlog'
// 1. 开启/关闭[所有模块]拦截, 通过调[openMock参数]设置.
// 2. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
// 3. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
// let isOpen = true
let isOpen = true
fnCreate(user, isOpen)
fnCreate(role, isOpen)
fnCreate(dept, isOpen)
fnCreate(menu, isOpen)
fnCreate(dict, isOpen)
fnCreate(config, isOpen)
fnCreate(log, isOpen)
fnCreate(loginlog, isOpen)
fnCreate(login, isOpen)
/**
* 创建mock模拟数据
* @param {*} mod 模块
* @param {*} isOpen 是否开启?
*/
function fnCreate (mod, isOpen = true) {
if (isOpen) {
for (var key in mod) {
((res) => {
if (res.isOpen !== true) {
Mock.mock(new RegExp(res.url), res.type, (opts) => {
opts['data'] = opts.body ? JSON.parse(opts.body) : null
delete opts.body
console.log('\n')
console.log('%cmock拦截, 请求: ', 'color:blue', opts)
console.log('%cmock拦截, 响应: ', 'color:blue', res.data)
return res.data
})
}
})(mod[key]() || {})
}
}
}
模块 user 示例
src下的/mock/modules/user.js
// 引入 Mock
import Mock from 'mockjs'
// 生成数据列表
var dataList = []
for (let i = 0; i < Math.floor(Math.random() * 10 + 20); i++) {
dataList.push(Mock.mock({
'userId': '@id',
'userName': '@name',
'userType': '普通用户',
'phone': /^1[0-9]{10}$/,
'status': 1,
'roleIdList': null,
'createUserId': 1,
'createTime': '@date(yyyy-MM-dd)',
'validTime': '@date(yyyy-MM-dd)'
}))
}
// 获取用户列表
export function list () {
return {
// isOpen: false,
url: '/user/list',
type: 'get',
data: {
'msg': 'success',
'code': 0,
'totalNum': dataList.length,
'userInfoList': dataList
}
}
}
// 添加
export function save() {
return {
// isOpen: false,
url: '/user/new',
type: 'post',
data: {
'msg': 'success',
'code': 0
}
}
}
// 删除
export function batchDelete() {
return {
// isOpen: false,
url: '/user/delete',
type: 'post',
data: {
'msg': 'success',
'code': 0
}
}
}
注:需要在router的index.js中引入mock的配置文件
import '@/mock/index.js'
最新评论