Mock.js和EsayMock使用weixin45223696的博客-

Mock：生成随机数据，拦截 Ajax 请求。

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

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

前后端分离开发的架构：

1. 前后端约定好API接口&数据&参数。
2. 前后端并行开发
   前端工程师只需要编写HTM页面，通过HTTP请求调用后端提供的接口服务即可。
   后端只要愉快的开发接口就行了。
3. 除了开发阶段分离、在运行期前后端资源也会进行分离部署。

Mock是用来解决什么问题的
问题：
前后端分离项目，前端和后端人员都是根据 API 文档进行开发项目的，不应该直接相互依待后端开发好接口后再进行测试，既然不依赖后端接口，那前端人员应该如何测试呢？

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

安装Mock

首先使用之前我们需要先安装Mock
在命令提示符窗口，用 npm 安装 mockjs

npm install mockjs

安装完成后在新建一个.js文件，用来定义数据。

• 引入Mock

const Mock = require(‘mockjs’)

Mock的语法规则

• Mock.js 的语法规范包括两部分：

1. 数据模板定义规范（Data Template Definition，DTD）
2. 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范

• 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
• 属性名 和 生成规则 之间用竖线 | 分隔。

'name|rule': value 

• 生成规则是可选的，生成规则 有 7 种格式

• 生成规则 的 含义 需要依赖 属性值的类型 才能确。

• 属性值中可以含有 @占位符

  1. ‘name|min-max’: value
  2. ‘name|count’: value
  3. ‘name|min-max.dmin-dmax’: value
  4. ‘name|min-max.dcount’: value
  5. ‘name|count.dmin-dmax’: value
  6. ‘name|count.dcount’: value
  7. ‘name|+step’: value

Mock配置项使用

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-9]d{5}(18|19|20|(3d))d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/, // 占位符   "status":"@Boolean", // 随机生成一个布尔值 // 日期占位符   参数date  time  datetime "date":"@date('yyyy/MM/dd')", "time":"@time", "datetime":"@datetime('yyyy/MM/dd HH:mm:ss')", "img":"@image", // 图像占位符 // 文本占位符   'title': '@ctitle(3, 6)', // 随机3-6字 标题 'content': '@csentence(8, 12)', // 随机 8-12字 内容 // 名称占位符  中文的需要加上c  比如cname 'first': '@cfirst', // 中文名 'last': '@last', // 英文姓 "e_name":"@name", //英文姓名 // 网络占位符  可随机生成 URL 、域名、 IP 地址、邮件地址 "url":"@url(protocol?, host?)", //随机生成url 'domain': '@domain', // 随机生成域名 'ip': '@ip', // IP 'email': '@email', // 邮箱地址 // 地址占位符 'area': '@region', // 区域 'address': '@county(true)', // 省市'zipCode': '@zip' // 邮政编码 'zipCode': '@zip' // 邮政编码 } ] }) export default data 

EasyMock 基本使用

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

• 登录或注册(需要注意的是没有密码找回功能，一定要牢记密码)。
  
  登陆成功
  
  点击右下角加号创建项目
  

创建成功之后

进入项目，然后点击创建接口

左边使用Mock模拟数据，右边定义一些信息。

然后回到上一个页面，复制接口地址进行预览