Mockjs 及其模块语法
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))
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
5、EasyMock
5.1、什么是EasyMock？
Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务 。
官网链接 官方文档
EasyMock链接2
5.2、EasyMock模拟数据实现过程
- 首先登陆或者注册
- 登陆成功后，右下角有个加号，点击创建项目
- 填写项目信息，点击创建
- 创建成功之后，点击左侧创建的项目
- 进入项目，点击创建接口
- 左边使用Mock模拟数据，右边定义一些信息。
- 创建后，点击复制接口地址
- 复制到地址栏进行预览，然后就成功看到数据啦