Mockjs 及其模块语法
1、Mockjs是什么？
Mock.js 是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能： 根据数据模板生成模拟数据 模拟 Ajax 请求，生成并返回模拟数据 基于 HTML 模板生成模拟数据
2、Mockjs用来做什么？
随着互联网项目开发的发展，前后端分离已经成为了互联网项目开发的业界标准使用方式。前后端分离会为以后的大型分布式架构、微服务架构、多端化服务打下坚实的基础。这时就用到了mockjs了，mockjs可以通过模拟数据生成器，通过一定规则 （API文档）生成模拟数据接口, 提供给前端人员进行测试，使前端人员不需要等待后端开发好接口后再进行测试，不依赖后端接口进行开发。
3、安装 Mock.js
建立一个文件夹，进入文件夹，打开命令窗口，使用npm安装mock.js
npm install mockjs 之后就会发现有个node_modules文件夹和一个package-lock.json文件
touch demo.js 建立一个js文件
const Mock = require(‘mockjs’) 在文件内引入mockjs
var data = Mock.mock({ ‘list|1-10’: [{ ‘id|+1’: 1 }] }); // stringify(数据, 数据转换函数，缩进空格数) console.log(JSON.stringify(data, null, 2))
在命令行执行 node demo.js
4、模块语法
4.1、数据模板定义规范 数据模板中的每个属性由 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 生成规则 的 含义 需要依赖 属性值的类型 才能确定。 属性值 中可以含有 @占位符 。 属性值 指定了最终值的初始值和类型。
实例：demo.js // 使用 Mock const Mock = require('mockjs') const data = Mock.mock({ // 属性 result 的值是一个数组，其中含有 1 到 5 之间随机个数个元素 'result|1-5': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1, // 属性 name 会重复生成连续三个 知否 eg:'name':'知否知否知否' 'name|3':'知否', // 属性 name 会重复生成1-3随机个数的 知否 //'name|1-3':'知否', // 展开会覆盖之前的name属性 // 属性 age 会随机生成10-20中的一个数 'age|10-20': 1, // 属性 salary 随机生成6000到8000的浮点数, 随机保留小数1到3位 'salary|6000-8000.1-3': 0, // 属性 status, 生成 true 或 false 概率都是 1/2 'status|1': true, // 属性 show, 生成 true 概率 2/(2+4), false 概率 4/(2+4) 'show|2-4': true, // 属性 order 随机取对象中的2个属性 'order|2': { id: 1, name: '水杯', price: 12 }, // 属性 order2，随机取对象中的2到3个属性 'order2|2-3': { id: 1, name: 'T', price: 33 }, // 属性 phone 正则验证 手机号十一位 注：没有单引号 'phone': /\d{11}/ }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
4.2、数据占位符定义规范
Mock.Random 是一个工具类，用于生成各种随机数据。 Mock.Random 类中的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 , [参数]) 。 占位符 的格式为：
‘属性名’: @占位符
实例：demo1.js const Mock = require('mockjs') const data = Mock.mock({ // 属性 result 的值是一个数组，其中4个元素 'result|4': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1,
// 属性 name 随机生成名字 为字符串形式
'name': '@string',
// 属性 cid 随机生成浮点数
'cid': '@float',
// 属性 status 随机生成布尔值
'status': '@boolean',
// 日期占位符 参数date time datetime
// 默认 yyyy-MM-dd
'birthday': '@date',
// 指定日期格式 yyyy/MM/dd
'entryDate': '@date("yyyy/MM/dd")',
// 默认 yyyy-MM-dd HH:mm:ss
'createDate': '@datetime',
// 默认 yyyy/MM/dd HH:mm:ss
'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")'
// 随机时间 默认 HH:mm:ss
'time':'@time',
// 图像占位符
'img':'@image',
// 文本占位符 随机3-6字 标题
'title': '@ctitle(3, 6)',
// 随机 8-12字 内容
'content': '@csentence(8, 12)',
// 名称占位符 中文的需要加上c 比如cname
// first 英文名。 last 英文姓。 name 英文姓名。
// cfirst 中文名。 clast 中文姓。 cname 中文姓名。
// 随机中文名
'first': '@cfirst',
// 随机英文姓
'last': '@last',
// 网络占位符 可随机生成 URL 、域名、 IP 地址、邮件地址
// URL @url(protocol?, host?)
// protocol： 协议， 如 http
// host：域名和端口号，如 mengxuegu.com
// 域名 @domain IP @ip 邮箱 @email
//随机生成url
"url":"@url(protocol?, host?)",
// 随机生成域名
'domain': '@domain',
// 地址占位符 随机生成区域、省市县、邮政编码
// @region 区域。如： 华南
// @county(true) 省市县 @zip 邮政编码。
// 区域
'area': '@region',
// 邮政编码
'zipCode': '@zip'
}] })
export default data 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
5、EasyMock
5.1、什么是EasyMock？ Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务 。 官网链接 官方文档 EasyMock链接2
5.2、EasyMock模拟数据实现过程
首先登陆或者注册 登陆成功后，右下角有个加号，点击创建项目 填写项目信息，点击创建 创建成功之后，点击左侧创建的项目 进入项目，点击创建接口 左边使用Mock模拟数据，右边定义一些信息。 创建后，点击复制接口地址 复制到地址栏进行预览，然后就成功看到数据啦
