mockjs的介绍、基本使用和封装

一、为什么使用mockjs

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口，

1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
2.使用json-server模拟，但不能随机生成所需数据
3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

二、mock优点

1.前后端分离，
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

三、安装

1.使用npm安装:npm install mockjs --save-dev2.或者直接<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) : nulldelete opts.bodyconsole.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'