Mock.js学习

什么是Mock.js

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

• 根据数据模板生成模拟数据，
• 模拟 Ajax 请求，生成并返回模拟数据，
• 基于 HTML 模板生成模拟数据

Mock.js特点：

1.前后端分离，让前端工程师独立于后端进行开发。
2.通过随机数据，模拟各种场景,增加单元测试的真实性
3.开发无侵入
4.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
5.用法简单，方便扩展
6.数据类型丰富
7.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
8.支持支持扩展更多数据类型，支持自定义函数和正则。

Mock.js安装

在工作目录下新建文件夹，比如mockdemo,进入该文件夹，执行如下命令，

在命令提示符下用npm安装mockjs

cnpm install mockjs

快速入门

新建在mockdemo文件夹下新建demo1.js 代码如下

let mock = require('mockjs');
let data = mock.mock({
    "list|5": [{
        "id":1,
        "name":"test"
    }]
})
console.log(JSON.stringify(data));
/*
 > node .\demo1.js
{"list":[{"id":1,"name":"test"},{"id":1,"name":"test"},{"id":1,"name":"test"},{"id":1,"name":"test"},{"id":1,"name":"test"}]}
*/

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

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

// 属性名 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）‘name|count’: string
通过重复 string 生成一个字符串，重复次数等于 count，代码如下：

（2）‘name|min-max’: string

通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max.

代码和运行结果如下：

#### 属性值是数字number

（1）‘name|+1’: number

属性值自动加 1，初始值为 number

（2）‘name|min-max’: number

生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型

（3）‘name|min-max.dcount’: value 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分为dcount位

（4）‘name|min-max.dmin-dmax’: number

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

#### 属性值是布尔

（1）‘name|1’: boolean

随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2

（2）‘name|min-max’: value

随机生成一个布尔值，值为 value 的概率是 min / (min + max)

7.4.2.4 属性值是Object

（1）‘name|count’: object

​ 从属性值 object 中随机选取 count 个属性。

​ 代码如下：

（2）‘name|min-max’: object

  从属性值 object 中随机选取 min 到 max 个属性

属性值是数组

（1）‘name|count’: array

​ 通过重复属性值 array 生成一个新数组，重复次数为 count

 // 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
                'list|5': [{  //重复生成5个数组
                            'id|+1': 1,
                            'name|2-4':'测试',
                            'phone|11':'1'
                        }]
                })
// 输出结果
console.log(JSON.stringify(data,null,2));

（2）‘name|min-max’: array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

 // 使用 Mock
 let Mock = require('mockjs')
 let data = Mock.mock({
                 'list|5-10': [{  //重复生成5个数组
                             'id|+1': 1,
                             'name|2-4':'测试',
                             'phone|11':'1'
                         }]
                 })
 // 输出结果
 console.log(JSON.stringify(data,null,2));

数据占位符定义规范（Data Placeholder Definition，DPD）

Mock.Random 是一个工具类，用于生成各种随机数据。

Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
内置方法列表：

随机的基本数据类型

• string 字符串
• integer 整数
• date 日期

图片方法：

• image 随机生成图片地址
  文本方法
• @title: 标题
• @cword(100) :文本内容 参数为字数

名称方法

• cname :中文名称
• cfirst:中文姓氏
• Last:英文姓氏

网络方法：

• @url,
• @ip
• @email

地址方法

• @region 区域
• @county 省市县

代码如下：

// 使用 Mock

let Mock = require('mockjs')

let data = Mock.mock({

                'list|5-10': [{  
                            'id|+1': 1,
            
                            'label':'@string',
                            'phone':'@integer',
                            'birthday':'@date',

                            'name':'@cname',
                            'ename':'@last',
                            'cfirst':'@cfirst',


                            'pic':'@image',
                            'title':'@title',
                            'content':'@cword(100)' ,
                            
                            'url':"@url",
                            'ip':"@ip",
                            'email':"@email",
                            
                            'area':'@region',
                            'address':'@county(true)'

                        }]})

// 输出结果

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