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

一、为什么使用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'