Mock.js和EasyMock使用

1.Mock.js

生成随机数，拦截Ajax请求

通过随机数据，模拟各种场景，不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据，支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等，支持扩展更多数据类型，支持自定义函数和正则

随着互联网项目开发的发展，前后端分离已经成为了互联网项目开发的业界标准使用方式

2.Mock是用来解决什么问题的？

前后端分离项目，前端和后端人员都是根据API文档进行开发项目的，不应该直接相互依待后端开发好接口后在进行测试，既然不依赖接口，那前端人员应该如何测试？

解决方法

可以通过模拟数据生成器，通过一定规则（API文档）生成模拟数据接口，提供给前端人员进行测试

3.为什么使用mock.js

在做开发时，当后端接口还未完成，前端为了不影响工作效率，手动模拟后端接口

可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
使用json-server模拟，但不能随机生成所需数据
使用mock.js模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

4.mock优点

前后端分离
可随机生成大量的数据
用法简单
数据类型丰富
可扩展数据类型
在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需改变url地址即可

5.使用Mock.js

1.安装

npm install mockjs --save-dev

2.引入

const Mock=require('mockjs')

3.模拟数据

const data = Mock.mock({ // 数组生成四个对选 "testdata|4":[ { // id自增 "id|+1":0, "name":"永远滴神",
"count|5-10":0, // 随机生成一个5-10之间的整数后面的value只用来确定类型 "count2|5-10.1-2":0, // 随机生成一个5-10之间的浮点数，包含一到两位小数后面的value只用来确定类型 "count3|5-10.1":0, // 随机生成一个5-10之间的浮点数，包含一位小数后面的value只用来确定类 "checked|1-2":true, // 随机生成一个布尔值，值为 value 的概率是最小值 / (最小值 + 最大值) "user|2-3 ":{ // 随机抽取对象内2-3个属性 name:"hello", sex:"男", age:20 }, // 随机生成身份证号匹配的是正则表达式 "id_card": /^[1]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,

]

}) export default data

6.EasyMock使用

EasyMock是一个可视化，并且能快速生成模拟数据的服务，是杭州大搜车无线团队出品的一个及其简单、高效、可视化、并且能快速生成模拟数据的在线Mock服务

登录或注册，如果没有注册过，第一次登录会帮你自动注册
登录成功后，点击右下角+号创建项目
创建成功后，进入项目，点击创建接口
左边使用Mock模拟数据，右边定义一些信息
然后回到上一个页面，复制接口地址进行预览

安装

npm install --save easy-mock-cli

1-9 ↩︎

Mock.js和EasyMock的使用