mock.js主要解决的问题是：让前端和后台开发人员根据API文档开发，不相互依赖，前端可以模拟api接口数据，达到前端和后台开发人员同步开发的过程。
既然不依赖后台接口，前端开发如何进行数据测试呢？
通过模拟数据生成器，利用一定规则（API文档）生成模拟数据接口，提供前端开发人员。
官网：http://mockjs.com/
文档：https://github.com/nuysoft/Mock/wiki
Mock.js是用于生成随机数据，拦截Ajax请求，通过拦截请求，根据数据模板生成并返回模拟数据，让前端独立于后端进行开发，帮助编写单元测试。

• Mock.js支持的数据类型：
  文本、数字、布尔值、日期、邮箱、链接、图片、颜色等

1、安装

使用npm安装

npm install mockjs

2、Mock的简单使用

安装完成后先创建一个js文件(我的是data.js)
2.1、导入mockjs：

const Mock = require('mockjs');

2.2、编写mock数据生成规则：

生成4条数据

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'memberList|4':[
        {
            'value':1,
            'name':'小陈'
        }
    ]
})

Mock的语法规则

Mock.js的语法规范包括两部分：

• 数据模板定义规范（DTD）
• 数据占位符定义规范（DPD）

3、Mock的语法规则之DTD（数据模板定义规范）

3.1、数据模板定义规范

数据模板中的每个属性由3部分组成：属性名、生成规则、属性值

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

注意：
1、属性名和生成规则之间用竖线 "|" 分隔
2、生成规则是可选的，生成规则有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

3.2、DTD生成规则（属性值为字符串）

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'memberList|4':[
        {
            'name|1-3':'小陈' ,// 随机生成1~3个重叠的'小陈'
        }
    ]
})

console.log(JSON.stringify(data,null,2));

3.3、DTD生成规则（属性值为数字）

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'memberList|4':[
        {
            'value|+1':1, // 自增长+1，初始值为1
            'age|1-120': 1, // 随机生成1-120之间的数字
        }
    ]
})

console.log(JSON.stringify(data,null,2));

3.4、DTD生成规则（属性值为布尔值）

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'memberList|4':[
        {
            'status|1': true, // 随机生成true或false, 并且都是1/2 的概率
            'open|2-4': false, // 生成的概率：true占4/(2+4)  false占2/(2+4)
        }
    ]
})

console.log(JSON.stringify(data,null,2));

3.5、DTD生成规则（属性值为Object）

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'memberList|4':[
        {
            'order|2-3':{ id:1,name:'纯牛奶',price:'3'}, // 抽取对象中2~3个属性
        }
    ]
})

console.log(JSON.stringify(data,null,2));

3.6、DTD生成规则（属性值为Array）

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'memberList|4':[
        {
            'memberList|1-5':[1], //随机生成一个4-20的数组
        }
    ]
})

3.7、DTD生成规则（属性值为RegExp）

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'memberList|4':[
        {
            'userName':/^[a-zA-Z0-9_-]{4,16}$/, // 随机生成用户名
            'phone': /^1[34578]\d{9}$/, // 生成满足正则表达式的11位数的电话号码
        }
    ]
})

示例：

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'memberList|4':[
        {
            'value|+1':1, // 自增长+1，初始值为1
            'name|1-3':'小陈' ,// 随机生成1~3个重叠的'小陈'
            'userName':/^[a-zA-Z0-9_-]{4,16}$/, // 随机生成用户名
            'phone': /^1[34578]\d{9}$/, // 生成11个3 （33333333333）
            'age|1-120': 1, // 随机生成1-120之间的数字
            'salary|6000-8000.1-3':6000, // 随机生成6000-8000之间的数字，并且小数部分是1-3位
            'status|1': true, // 随机生成true或false, 并且都是1/2 的概率
            'open|2-4': false, // 生成的概率：true占4/(2+4)  false占2/(2+4)
            'order|2-3':{ id:1,name:'纯牛奶',price:'3'}, // 抽取对象中2~3个属性
            'memberList|1-5':[1], //随机生成一个4-20的数组
        }
    ]
})

console.log(JSON.stringify(data,null,2));

image.png

4、Mock的语法规则之DPD（数据占位符定义规范）

Mock.Random是一个工具类，用于生成各种随机数据。
Mock.Random类中的方法在数据模板中称为[占位符]，书写格式：```@占位符(参数 [, 参数])
占位符的格式：

'属性名': @占位符

Mock.Random类中提供的完整方法如下：

Type(类型)	Method(占位符)
Basic	boolean,natural(自然数),integer,float,character,string,range(整数数组)
Date	date(年月日)，time(时分秒)，datetime(年月日时分秒)
image	image，dataimage
Color	color
Text	paragraph，sentence，word，title，cparagraph，csentence，cword，ctitle
Name	first，last，name，cfirst，clast，clast，cname
Web	url，domain，email，ip，tId
Address	area，region
Helper	capitalize，upper，lower，pick，shuffle
Miscellaneous	guid，id

4.1、DPD占位符（日期占位符）

随机生成日期：
占位符：

• date/date(format)
• time/time(format)
• datetime/datetime(format)

代码：

const Mock = require('mockjs');
const data = Mock.mock({
    // 定义数据生成规则
    'dateList|2':[
        {
            'id|+1':1, // 自增长+1，初始值为1
            'name':'@cname' ,// 随机生成1个中文名字
            'status':'@boolean', // 随机生成一个布尔值
            'birthday': '@date', // 默认日期格式 yyyy-MM-dd
            'entryDate': '@date("yyyy/MM/dd")', // 修改日期格式为'yyyy/MM/dd'
            'createTime':'@datetime', // 默认日期格式 yyyy-MM-dd HH:mm:ss
            'updateTime': '@datetime("yyyy/MM/dd HH:mm:ss")', //  修改日期格式为'yyyy/MM/dd HH:mm:ss'
        }
    ]
})

console.log(JSON.stringify(data,null,2));

• 数据显示：

{
  "dateList": [
    {
      "id": 1,
      "name": "蔡伟",
      "status": false,
      "birthday": "1998-09-06",
      "entryDate": "2018/05/16",
      "createTime": "2008-03-14 19:06:07",
      "updateTime": "1979/10/21 00:40:35"
    },
    {
      "id": 2,
      "name": "孟刚",
      "status": false,
      "birthday": "1984-02-14",
      "entryDate": "2015/07/06",
      "createTime": "2013-08-29 03:38:47",
      "updateTime": "1970/12/29 18:30:25"
    }
  ]
}

4.2、DPD占位符（图像占位符）

代码：

const Mock = require('mockjs');
const data2 = Mock.mock({
    // 定义数据生成规则
    'imageList|2': [{
        'id|+1': 1, // 自增长+1，初始值为1
        'img': '@image', //随机生成一张图片
        'sizeImg': '@image("200*100")', // 随机生成一张指定大小的图片
        'colorImg': '@image("200x100","#fb0a2a")', //随机生成一张指定大小，背景色的图片
        'textImg': '@image("200x100","#02adea","牛肉面")', // 随机生成一张指定大小和背景色以及内容文字的图片
        'bgImg': '@image("200x100","#00405d","#fff","兰州拉面")', // 随机生成一张指定大小，背景色，文字背景的图片
        'fixImg': '@image("200x100","#ffcc33","#fff","png","!")' // 随机生成一张指定大小，背景色，文字背景，图片后缀的图片
    }]
})

数据显示：

{
  "imageList": [
    {
      "id": 1,
      "img": "http://dummyimage.com/250x250",
      "sizeImg": "http://dummyimage.com/200*100",
      "colorImg": "http://dummyimage.com/200x100/fb0a2a",
      "textImg": "http://dummyimage.com/200x100/02adea&text=牛肉面",
      "bgImg": "http://dummyimage.com/200x100/00405d/fff&text=兰州拉面",
      "fixImg": "http://dummyimage.com/200x100/ffcc33/fff.png&text=!"
    },
    {
      "id": 2,
      "img": "http://dummyimage.com/88x31",
      "sizeImg": "http://dummyimage.com/200*100",
      "colorImg": "http://dummyimage.com/200x100/fb0a2a",
      "textImg": "http://dummyimage.com/200x100/02adea&text=牛肉面",
      "bgImg": "http://dummyimage.com/200x100/00405d/fff&text=兰州拉面",
      "fixImg": "http://dummyimage.com/200x100/ffcc33/fff.png&text=!"
    }
  ]
}

4.3、DPD占位符（title以及content占位符）

代码：

const data2 = Mock.mock({
    // 定义数据生成规则
    'titleList|2': [{
        'title': '@ctitle(10,30)', //随机生成一个中文title
        'content': '@csentence(100,500)', //随机生成一个100~500字之间的内容
        
    }]
})

4.4、DPD占位符（网络占位符）

随机生成的URL、域名、IP地址、邮件地址
占位符：

• url：生成url
• domain：生成域名
• ip：生成ip地址
• email：生成邮件地址
  代码：

const data2 = Mock.mock({
    // 定义数据生成规则
    'imageList|2': [{
        'url': '@url("http")', //随机生成一个http协议的url
        'ip': '@ip', // 随机生成一个ip
        'domain': '@domain' // 随机生成一个域名
    }]
})

4.5、DPD占位符（省市地区占位符）

代码：

const data2 = Mock.mock({
    // 定义数据生成规则
    'imageList|2': [{
        'area':'@region',  // 随机生成一个区
        'address':'@county' ,
        'code': '@zip' //随机生成一个邮政编码
    }]
})