[JavaScript知识库]Vue学习日记（五）

Mock.js+EasyMock

Mock.js 是用于生成随机数据，拦截 Ajax 请求。
通过拦截 Ajax 请求，根据数据模板生成并返回模拟数据，让前端攻城师独立于后端进行开发，帮助编写单元测试。

一、安装：
1.新建文件夹mockjs
进行初始化 npm init -y
2.mock.js安装
npm install mockjs
3.创建的demo01.js

const Mock = require('mockjs')
const data = Mock.mock({
    'memberList|2': [
        {
            'id': 1,
            'name': '张三'
        }]
})// stringify(数据, 数据转换函数，缩进空格数)
console.log(JSON.stringify(data, null, 2))
 //查看效果，执行命令 node demo1.js

4.执行命令
node demo1.js

二、数据模板定义

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

2.1 属性值是字符串 String

1. ‘name|count’: string
   通过重复 string 生成一个字符串，重复次数等于 count 。
2. ‘name|min-max’: string
   通过重复 string 生成一个字符串，重复次数大于等于 min ，小于等于 max 。

.2.2 数字 Number

1. ‘name|+1’: number
   属性值自动加 1，初始值为 number 。
2. ‘name|min-max’: number
   生成一个大于等于 min 、小于等于 max 的整数，属性值 number 只是用来确定类型。
3. ‘name|min-max.dmin-dmax’: number
   生成一个浮点数，整数部分大于等于 min 、小于等于 max ，小数部分保留 dmin 到 dmax 位。

2.3 布尔型 Boolean

1. ‘name|1’: boolean
   随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
2. ‘name|min-max’: value
   随机生成一个布尔值，值为 value 的概率是 min / (min + max) ，值为 !value 的概率是 max / (min + max) 。

2.4 对象 Object

1. ‘name|count’: object
   从属性值 object 中随机选取 count 个属性。
2. ‘name|min-max’: object
   从属性值 object 中随机选取 min 到 max 个属性。

2.5 数组 Array

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

2.6 正则表达式 RegExp

1. ‘name’: regexp
   根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
   注意 regexp 是没有引号的

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

'属性名': @占位符

'birthday': '@date', // 默认 yyyy-MM-dd
'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd
'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss 
'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")', //默认yyyy/MM/dd HH:mm:ss
'title': '@ctitle(3, 6)', // 中文标题(3到6个字)
'content': '@csentence(8, 12)', // 一段中文文本(8到12个字)
'first': '@cfirst', // 中文名 
'last': '@last', // 英文姓
'url': '@url("http", "mengxuegu.com")', // URL 
'area': '@region', // 区域 
'address': '@county(true)', // 省市县 
'zipCode': '@zip' // 邮政编码
'email': '@email' // 邮箱地址