前言

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

一、MOCKJS是什么？

采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查
采用mockJs进行模拟数据，可以模拟各种场景（get、post）生成接口，并且随机生成所需数据，还可以对数据进行增删改查

二、Mock优点

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

三、语法规则

数据模板定义规范（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

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

四、使用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)
  })
}