Mock.js 学习笔记
学习目的
①开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据牵制与后端，前端页面无法很好的展示，效果不好展示，尤其是 使用 vue 的 v-for 或者 react 循环数据 的时候，各种不方便。
② 前后端联调的时候，出现问题要各处找，如果前端先把 模拟接口、 模拟数据 都处理好，到了联调的时候 ，出现问题，只要是按照约定的 数据格式 来规定 mock，那么前端的问题就会小一点，就不用依赖后端，使得 前端工程师 独立于 后端进行开发，更加自由。
③ 特殊的格式，例如 IP, 随机数，图片，地址，需要去收集，尤其是前端使用图片的时候，要到处去 下载图片，非常麻烦。
使用mock.js 就能 解决这些问题，而且它的优点不仅于此：
1、前后端分离
让前端工程师独立于后端进行开发。
2、增加单元测试的真实性
通过随机数据，模拟各种场景。
3、开发无侵入
不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
4、用法简单
符合直觉的接口。
5、数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。
7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。
所以 学习 Mock.js ，就可以 更加自由， 独立 于后端 开发 前端。
Mock.js 介绍
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试
提供了以下模拟功能：
① 根据 数据模板 生成模拟数据
② 模拟 Ajax 请求，生成并返回模拟数据
③ 基于 HTML 模板生成模拟数据
安装 npm install mockjs
Mock.js 语法
Mock.js 的语法规范包括 两部分：
① 数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 有 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
属性名 name 生成规则 rule 属性值 value
'name|rule':value
-------属性值是字符串 String
'name|min-max': 'value' // 通过重复 'value' 生成一个 字符串，重复次数大于等于 min，小于等于 max。
'name|count': 'value' // 通过重复 'value' 生成一个 字符串，重复次数等于 count。
-------属性值是数字 Number
'name|+1': number
属性值自动加 1，初始值为 number。
'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax位。
例子：'height|100-120.2-5':110.24, 生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位
-------属性值是布尔型 Boolean
'name|1': boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
'name|min-max': value
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
-------属性值是对象 Object
'name|count': object
从属性值 object 中随机选取 count 个属性。
'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。
-------属性值是数组 Array
'name|1': array
从属性值 array 中随机选取 1 个元素，作为最终值。
'name|+1': array
从属性值 array 中顺序选取 1 个元素，作为最终值。
'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|count': array
通过重复属性值 array 生成一个新数组，重复次数为 count。
-------属性值是函数 Function
'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
-------属性值是正则表达式 RegExp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
Mock.mock({'regexp1':/[a-z][A-Z][0-9]/,'regexp2':/\w\W\s\S\d\D/,'regexp3':/\d{5,10}/})
//=>
{"regexp1":"pJ7","regexp2":"F)\fp1G","regexp3":"561659409"}
② 数据占位符定义规范 DPD
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
Mock.Random 是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
Mock.Random 提供的完整方法
基本
@boolean( min?, max?, current? ) 返回一个随机的布尔值。
min 指示参数 current 出现的概率 ,概率计算公式为 min / (min + max)。
max 指示参数 current 的相反值 !current 出现的概率
current 可选值为布尔值 true 或 false
@boolean(1,9,true) 1/10 的概率出现 true
@natural( min?, max? ) 返回一个随机的自然数（大于等于 0 的整数）参数表示最小值和最大值
@integer( min?, max? ) 返回一个随机的整数
@float( min?, max?, dmin?, dmax? ) 返回一个随机的浮点数
@character( pool? ) 返回一个随机字符 pool 表示字符池，将从中选择一个字符返回
@string( pool?, min?, max? ) 返回一个随机字符串
@range( start?, stop, step? ) 返回一个整型数组 stop 必选 数组中整数的结束值（不包含在返回值中）
@range(10) //=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@id 随机生成一个 18 位身份证
图片
@image(size, background, foreground, format, text ) 图片大小，背景色，图片前景色，图片格式，图片上文字
生成一个随机的图片地址 ; 例如 @image('200x100','#ffcc33','#FFF','png','!')
@dataImage( size, text ) 图片大小，图片上文字 //生成一段随机的 Base64 图片编码
颜色
@color 随机生成一个有吸引力的颜色
文字
@paragraph( [ min,max]) 随机生成一段文本。参数指示文本中 句子 的个数
@cparagraph( [ min,max] ) 随机生成一段 中文 文本。
@sentence( [ min,max] ) 随机生成一个句子，第一个单词的首字母大写
@csentence( [ min,max] ) 随机生成一段 中文 文本。
@word 随机生成一个单词
@cword( pool?, min?, max? ) 随机生成一个 汉字。
pool 可选。 汉字字符串。表示汉字字符池，将从中选择一个 汉字字符返回。
@title( min?, max? ) 随机生成一句标题，其中每个单词的首字母大写。
@ctitle( min?, max? ) 随机生成一句中文标题。
姓名
@first //英文名 @last //英文姓 @name //英文姓名
@cfirst //中文名 @clast //中文姓 @cname //中文姓名
网址
@url( protocol?, host? ) //随机生成一个 URL(协议，URL 域名和端口号） @email //邮件地址 @ip @tld 顶级域名 @domain //域名
@protocol //URL 协议
地区
@region @province @city @county @zip
//随机生成 中国的 大区 、省（或直辖市、自治区、特别行政区）、 市、县、邮政编码（六位数字）
例子
通过 Mock.Random.extend() 来扩展自定义占位符。
文档案例
占位符 也可以引用 数据模板 中的属性。
占位符 会优先引用 数据模板 中的属性。
Mock.mock( )
Mock.mock( [ rurl ] , [ rtype ], template|function( options ) )
请求与拦截
返回的数据
rurl
可选。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template
可选。
表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
function(options)
可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。
Mock.mock( template ) // 根据数据模板生成模拟数据。
Mock.mock( rurl, template ) //记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, function( options ) ) //记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
Mock.mock( rurl, rtype, template ) // 记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回
Mock.mock( rurl, rtype, function( options ) ) //记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
Node 使用 Mock.js
Node 结合 Mock.js
以后想数据就不用那么麻烦了。
Easy Mock
Easy Mock 网站地址
Easy Mock是比较好用的一个图形化的网站， 可以使用它来模拟Mock数据。
直接请求他提供的接口就可以了
Easy Mock
