MockJs的基础使用

---

前言

作为前端开发，很多时候我们还来不及等待后端程序员开发接口，想做数据渲染，已被测试怎么办呢，

---

一、MOCKJS是什么？

1. 采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查

2. 采用mockJs进行模拟数据，可以模拟各种场景（get、post）生成接口，并且随机生成所需数据，还可以对数据进行增删改查

二、Mock优点

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

三、语法规则

1. 数据模板定义规范（Data Template Definition，DTD）

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

• 属性名 和 生成规则 之间用竖线 | 分隔。
  生成规则 是可选的。

• 规则 有 7 种格式：

    'name|min-max': value
    'name|count': value
    'name|min-max.dmin-dmax': value
    'name|min-max.dcount': value
    'name|count.dmin-dmax': value
    'name|count.dcount': value
    'name|+step': value

1. 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
2. 属性值 中可以含有 @占位符。
3. 属性值 还指定了最终值的初始值和类型。

四、使用Mock

1.安装Mock

• 首先，我们要通过Vue-cli创建一个vue项目

• 使用一下命令

npm install mockjs   //安装mock

2.在环境中使用

实例代码如下：

import mock from 'mockjs'
// 调用Mock的方法。生产模拟数据
// var data = Mock.mock({...})

// 生成一个用户名长度随机1~10的随机数据
 var data = Mock.mock({
   'Username|1-10':'*' 
// })

//  生成一个年龄 18-40岁
 var data = Mock.mock({
   'age|18-40':0
// })

// 生产一个 id
 var data = Mock.mock('@id()')
// 随机生产中文名称
var data = Mock.mock('@cname()')

const data = mock({
  id: '@id',
  username: '@cname()',
  dateTime: '@date(yyyy-MM-dd)',
  description: '@paragraph()',
  email: '@email',
  'age|18-130': 0
})
console.log(data)

//试写一个接口
const Mock = require('mockjs')

module.exports = function(app) {
  // 参数1：接口地址 req
  // 参数2：服务器处理函数  res
  // eslint-disable-next-line brace-style

  app.get('api/userinfo', (req, res) => {
    var data = Mock.mock({
      id: '@id',
      username: '@cname()',
      dateTime: '@date(yyyy-MM-dd)',
      description: '@paragraph()',
      email: '@email',
      'age|18-130': 0
    })
    // node中的express框架
    res.json(data)
  })
}