Vue小项目Mock.js的学习

前后端分离项目

前后端约定好API接口&数据&参数
前后端并行开发，前端工程师只需要编写HTM页面，通过HTTP请求调用后端提供的接口服务即可。后端只要愉快的开发接口就行了。无强依赖，如果需求变更,只要接口和参数不变，就不用两边都修改代码，开发效率高。
除了开发阶段分离、在运行期前后端资源也会进行分离部署。

前后端分离已成为互联网项目开发的业界标准使用方式。传统的前后端混合开发模式，虽然久经考验，到现在依然还是能够支撑起应用的开发。但是放眼未来，社会分工更加精细化，前后端分离开发的精细化也是必然趋势。并且前后端分离会为以后的大型分布式架构、微服务架构、多端化服务（多种客户端，例如：浏览器，安卓，IOS, 车载终端等等）打下坚实的基础。

Mock.js 数据生成器

问题：
前后端分离项目，前端和后端人员都是根据 API 文档进行开发项目的，不应该直接相互依赖，前端人员不应该等待后端开发好接口后再进行测试，既然不依赖后端接口，那前端人员应该如何测试呢？
解决：
可以通过模拟数据生成器，通过一定规则（API文档）生成模拟数据接口, 提供给前端人员进行测试。

什么是 Mock.js

官网：http://mockjs.com/
文档：https://github.com/nuysoft/Mock/wiki
Mock.js 是用于生成随机数据，拦截 Ajax 请求。
通过拦截 Ajax 请求，根据数据模板生成并返回模拟数据，让前端攻城师独立于后端进行开发，帮助编写单元
测试。
Mock.js 作用：

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

安装 Mock.js

在命令提示符窗口，用 npm 安装 mockjs

npm install mockjs

测试demo1
新建一个Vueproject项目文件夹，存放项目，再建一个文件夹MockDemo1来测试MockJS

初始化文件

npm init -y

安装mockJs

npm install mockjs

在文件夹中添加一个demo1.js文件

// 引入mockjs
const Mock = require('mockjs')
const data = Mock.mock({'menberlist|5': [{'id': 1,'name': 'jianghaojie'}]})
console.log(data)
// 格式化json数据JSON.stringify,第一个是格式化的数据，第二个是函数，第三个是空格数
console.log(JSON.stringify(data,null,2))

因为是模块化代码，不能页面直接访问，所以采用node来运行

D:\VueLearn\VueProject\mockJs-demo1> node demo1.js

运用node demo1.js运行这一个，此外还运用JSON.stringify来格式化json代码

数据模板定义规范 DTD

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

// '属性名|生成规则': 属性值
'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
生成规则的含义需要依赖属性值的类型才能确定。

// 引入mockjs
const Mock = require('mockjs')
const data = Mock.mock({'menberlist|5': [{//menberlist|5这个表示数组生成5条，menberlist|5-10数组生成5-10之间'id|+1': 2,//自增长1，初始值为2'name|1-3': 'jianghaojie',//随机生成1到3个重叠的后面value，name|2,生成两个value'age|1-120': 1,//随机生成1到120之间的数字'salary|7000-10000.1-3':1,//随机生成七千到一万的数字，并且小数点后随机1到三'status|1':true,//随机生成true或是false都是1/2的概率'open|2-4':false,//随机生成true或者false。false的概率2/(2+6)'order|2-3':{id:1,name:"xia",price:111},//如果后面接的是对象，order|2这个就是在后面的对象随机取两个，order|2-3这个就是在后面的对象随机取2-3个'idCard':/\d{15}|\d{18}/   //正则表达式,表示随机生成15到18位数字}]})
console.log(data)
// 格式化json数据JSON.stringify,第一个是格式化的数据，第二个是函数，第三个是空格数
console.log(JSON.stringify(data, null, 2))

打印的结果如下

{"menberlist": [{"id": 2,"name": "jianghaojiejianghaojie","age": 91,"salary": 9073.52,"status": true,"open": false,"order": {"id": 1,"name": "xia","price": 111},"idCard": "288950186277941878"},{"id": 3,"name": "jianghaojie","age": 65,"salary": 9045.7,"status": false,"open": true,"order": {"id": 1,"price": 111,"name": "xia"},"idCard": "285538718628465828"},{"id": 4,"name": "jianghaojiejianghaojiejianghaojie","age": 37,"salary": 9150.35,"status": false,"open": true,"order": {"id": 1,"price": 111,"name": "xia"},"idCard": "565253489524144"},{"id": 5,"name": "jianghaojiejianghaojiejianghaojie","age": 5,"salary": 7766.8,"status": false,"open": true,"order": {"id": 1,"price": 111},"idCard": "126221376534261988"},{"id": 6,"name": "jianghaojiejianghaojiejianghaojie","age": 96,"salary": 9657.6,"status": true,"open": true,"order": {"price": 111,"name": "xia","id": 1},"idCard": "163964537331937"}]
}

数据占位符定义规范 DPD

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

打印如下：

{"emplist": [{"id": 1,"name": "白杰","price": 4707842194231749,"status": false,"birthday": "1987-08-30","entryDate": "2012/02/21","createDate": "1986-02-19 09:09:24","updateDate": "2010/11/18 16:12:02","pic": "http://dummyimage.com/250x250","title": "全统心","content": "将立发根党而进转。","first": "陆","last": "Jackson","url": "http://mengxuegu.com/kencrgpcl","domain": "chb.jm","ip": "129.225.2.38","email": "n.hsxl@ijcw.org","area": "华北","address": "内蒙古自治区 巴彦淖尔市 乌拉特前旗","zipCode": "629566"},{"id": 2,"name": "金伟","price": 1010257361963420.4,"status": false,"birthday": "2000-07-30","entryDate": "2012/12/26","createDate": "2015-12-26 17:34:51","updateDate": "1984/11/26 17:47:31","pic": "http://dummyimage.com/468x60","title": "经向连面","content": "常的油调表压更道。","first": "叶","last": "Harris","url": "http://mengxuegu.com/rkmozs","domain": "hhxdvykw.gm","ip": "139.4.101.88","email": "u.uhecptioeb@hrukgtohwd.si","area": "西南","address": "四川省 德阳市 中江县","zipCode": "144285"}]
}

EasyMock 数据接口

什么是EasyMock

Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、
可视化、并且能快速生成模拟数据的在线 Mock 服务。
现在 Easy Mock 内置了 Mock.js，我们可以更愉快的伪造数据了。
官网：https://www.easy-mock.com/
文档：https://www.easy-mock.com/docs

EasyMock 基本使用

登录或注册
访问 https://www.easy-mock.com 后，点击开始后输入用户名和密码。如果不存在会自动注册。

部署方式参考[梦学谷]文章 : https://mp.weixin.qq.com/s/hVHDIMZUerTiXTYgX0yIwQ