---

前言

mock.js 官网
mockjs 官网提供的示例

mock.js 主要用于：生成随机数据，拦截 Ajax 请求。

一、安装 mockjs

由于 mockjs 只用于开发环境实现模拟数据，而生产环境有真正的后台服务器因此需要 mockjs。所以只需要将 mockjs 安装在开发环境下即可，执行指令：

npm i mockjs -D

二、mockjs 语法

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

• 数据模板定义规范。
• 数据占位符定义规范。

1、数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名（必选）、属性值（必选） 和 生成规则（可选）。

规则如下：

• 属性名 和 生成规则 之间必须用竖线 | 分隔。
• 生成规则 有 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,

• 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
• 属性值 中可以含有 @占位符。
• 可以给属性值设置 初始值及其类型。

（1）、属性值是字符串 String

'name|min-max': string

上述代码表示：通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

'name|count': string

上述代码表示：通过重复 string 生成一个字符串，重复次数等于 count。

（2）、属性值是数字 Number

'name|+1': number

上述代码表示：属性值自动加 1，初始值为 number。

'name|min-max': number

上述代码表示：生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

'name|min-max.dmin-dmax': number

上述代码表示：生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

（3）、属性值是布尔型 Boolean

'name|1': boolean

上述代码表示：随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

'name|min-max': value

上述代码表示：随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

（4）、属性值是对象 Object

'name|count': object

上述代码表示：从属性值 object 中随机选取 count 个属性。

'name|min-max': object

上述代码表示：从属性值 object 中随机选取 min 到 max 个属性。

（5）、属性值是数组 Array

'name|1': array

上述代码表示：从属性值 array 中随机选取 1 个元素，作为最终值。

'name|+1': array

上述代码表示：从属性值 array 中顺序选取 1 个元素，作为最终值。

'name|min-max': array

上述代码表示：通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

'name|count': array

上述代码表示：通过重复属性值 array 生成一个新数组，重复次数为 count。

（6）、属性值是函数 Function

'name': function

上述代码表示：执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。

（7）、属性值是正则表达式 RegExp

'name': regexp

上述代码表示：根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

2、数据占位符定义规范

mockjs 占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

mockjs 占位符 的语法：

@占位符
@占位符(参数 [, 参数])

mockjs 占位符 的规则：

• 用 @ 来标识其后的字符串是 占位符。
• 占位符 引用的是 Mock.Random 中的方法。
• 通过 Mock.Random.extend() 来扩展自定义占位符。
• 占位符 也可以引用 数据模板 中的属性。
• 占位符 会优先引用 数据模板 中的属性。
• 占位符 支持 相对路径 和 绝对路径。

例如：

Mock.mock({name: {first: '@FIRST',middle: '@FIRST',last: '@LAST',full: '@first @middle @last'}
})// 生成的随机数据如下
{"name": {"first": "Charles","middle": "Brenda","last": "Lopez","full": "Charles Brenda Lopez"}
}

三、mockjs 的 API

1、Mock.mock()

Mock.mock() 方法用于：根据数据模板生成模拟数据。

mock() 方法可以接收 3 个参数：

• url：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如：//domain/list.json/、‘/domian/list.json’。
• type：可选。表示需要拦截的 Ajax 请求类型。例如：GET、POST、PUT、DELETE 等。
• template 或 function：可选。
  • template：表示数据模板，可以是对象或字符串。例如：{ ‘data|1-10’: [{}] }、‘@EMAIL’。
  • function：表示用于生成响应数据的函数。其参数是一个包含 url、type 和 body 三个属性的对象，表示本次请求的 Ajax 选项。

2、Mock.setup()

Mock.setup() 方法用来：配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

setup() 方法可以接收 2 个参数：

• settings：必选。配置项集合。
• timeout：可选。指定被拦截的 Ajax 请求的响应时间，单位是毫秒。默认值是’10-100’。
  • 值可以是正整数，例如： 400，表示 400 毫秒 后才会返回响应内容；
  • 也可以是横杠 ‘-’ 风格的字符串，例如： ‘200-600’，表示响应时间介于 200 和 600 毫秒之间。

例如：

Mock.setup({timeout: 400
})
Mock.setup({timeout: '200-600'
})

【注意】目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。

3、Mock.valid()

Mock.valid() 方法用来：校验真实数据 data 是否与数据模板 template 匹配。

valid() 方法可以接收 2 个参数：

• template：必选。表示数据模板，可以是对象或字符串。例如 { ‘list|1-10’:[{}] }、‘@EMAIL’。
• data：必选。表示真实数据。

例如：

var template = {name: 'value1'
}
var data = {name: 'value2'
}
Mock.valid(template, data)
// =>
[{"path": ["data","name"],"type": "value","actual": "value2","expected": "value1","action": "equal to","message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"}
]

4、Mock.toJSONSchema()

Mock.toJSONSchema() 方法用来：把 Mock.js 风格的数据模板 template 转换成 JSON Schema。

toJSONSchema() 方法可以接收 1 个参数：

• template：必选。表示数据模板，可以是对象或字符串。例如 { ‘list|1-10’:[{}] }、‘@EMAIL’。

例如：

var template = {'list|1-10': [{}]
}
Mock.toJSONSchema(template)
// =>
{"name": undefined,"path": ["ROOT"],"type": "object","template": {"list|1-10": [{}]},"rule": {},"properties": [{"name": "list","path": ["ROOT", "list"],"type": "array","template": [{}],"rule": {"parameters": ["list|1-10", "list", null, "1-10", null],"range": ["1-10", "1", "10"],"min": 1,"max": 10,"count": 6,"decimal": undefined,"dmin": undefined,"dmax": undefined,"dcount": undefined},"items": [{"name": 0,"path": ["data", "list", 0],"type": "object","template": {},"rule": {},"properties": []}]}]
}

5、Mock.Random 系列

Mock.Random 是一个工具类，用于生成各种随机数据。

Mock.Random 的方法在数据模板中称为占位符，书写格式为 @占位符(参数 [, 参数]) 。

例如：

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

​

Mock.Random 提供的方法（占位符）

类型	方法	描述
Basic	boolean	随机生成一个布尔值（true 或 false）
	natural	随机生成一个自然数
	integer	随机生成一个整数
	float	随机生成一个浮点数（小数）
	character	随机生成一个字母
	string	随机生成一个字符串
	range	随机生成一个给定数值范围内的数组
	date	随机生成一个日期（年月日）
	time	随机生成一个时间（时分秒）
	datetime	随机生成一个日期及时间（年月日时分秒）
	now	生成用户指定的当前时间，或指定格式的当前时间
Image	image	随机生成一张图片
	dataImage	随机生成一张包含指定文本的图片
Color	color	随机生成一种颜色
Text	paragraph	随机生成一段英文
	sentence	随机生成一句英文
	word	随机生成一个英文单词
	title	随机生成一个英文标题
	cparagraph	随机生成一段中文
	csentence	随机生成一句中文
	cword	随机生成一个中文单词
	ctitle	随机生成一个中文标题
Name	first	随机生成一个英文姓
	last	随机生成一个英文名
	name	随机生成一个英文姓名
	cfirst	随机生成一个中文姓
	clast	随机生成一个中文名
	cname	随机生成一个中文姓名
Web	url	随机生成一个 URL
	domain	随机生成一个域名
	email	随机生成一个邮箱
	ip	随机生成一个 IP 地址
	tld	随机生成一个顶级域名
Address	area	随机生成一个地区
	region	随机生成一个七大地区之一（东北、西北、西南、华北、华中、华南、华东）
Helper	capitalize	将指定英文单词转换成首字母大写的单词
	upper	将指定英文字符串转换成全部大写的字符串
	lower	将指定英文字符串转换成全部小写的字符串
	pick	随机输出给定数组中的某一项
	shuffle	随机打乱指定数组里所有项的顺序
Miscellaneous	guid	随机生成一个 GUID（十六进制数的全局唯一标识符）
	id	随机生成一个身份证号
	increment	随机生成一个自增 id

【拓展】具体每个方法的使用请看：官网提供的案例。

Mock.Random 中的方法与数据模板的 @占位符 相互对应，在需要时还可以为 Mock.Random 扩展方法，然后在数据模板中通过 @扩展方法 引用。例如：

Random.extend({constellation: function(date) {var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']return this.pick(constellations)}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }

四、mockjs 的原理简析

Mockjs 实现的原理是对 XHR 对象的拦截，属于 js 拦截，并没有通过浏览器发出请求。

Mockjs原理简析

五、mockjs 的使用典例

mockjs 官网提供的示例

1、用 mock 模拟数据的案例

const arr = ['momo', 'yanzi', 'ziwei']
const obj = {'host': 'www.baidu','port': '12345','node': 'selector'
}Mock.mock('http://www.bai.com', {'firstName|3': 'fei',//重复fei这个字符串 3 次，打印出来就是'feifeifei'。'lastName|2-5': 'jiang',//重复jiang这个字符串 2-5 次。'big|+1': 0, //属性值自动加 1，初始值为 0'age|20-30': 25,//生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型'weight|100-120.2-5': 110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。'likeMovie|1': Boolean,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。'friend1|1': arr,//从数组 arr 中随机选取 1 个元素，作为最终值。'friend2|+1': arr,//从属性值 arr 中顺序选取 1 个元素，作为最终值'friend3|2-3': arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。'life1|2': obj,//从属性值 obj 中随机选取 2 个属性'life1|1-2': obj,//从属性值 obj 中随机选取 1 到 2 个属性。'regexp1': /^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
})

2、用 mock 实现模拟数据的增删改查

const arr=[{name:'fei',age:20,id:1},{name:'liang',age:30,id:2},{name:'jun',age:40,id:3},{name:'ming',age:50,id:4}
]Mock.mock('http://www.bai.com', 'delete', (options) => {var id = parseInt(options.body.split("=")[1])// 获取删除的idvar index;for(var i in arr){if(arr[i].id===id){// 在数组arr里找到这个idindex=ibreak;}}arr.splice(index,1)// 把这个id对应的对象从数组里删除return arr;// 返回这个数组,也就是返回处理后的假数据
})

六、使用 mockjs 遇到的问题汇总

1、设置代理解决跨域

在 webpack 的开发环境配置文件中，或者在 vue.config.js 文件中，设置 devServer 配置项如下：

devServer: {port: 8080,hot: true,proxy: {'/api': {target: "http://xxx:xxx",ws: false,changeOrigin: true,pathRewrite: {'^/api': '' }}}
},

【参考文章】
mock.js 官网
mockjs 使用简介
Mock.js简易教程，脱离后端独立开发，实现增删改查功能
Mockjs原理简析

学习使用 mockjs相关推荐

1. html网页中使用mock,关于Mock.js使用

   目前在做一个个人网站,写了一半没有数据填充,也不知道写啥了,就顺带学习下mockjs这个东西,官网上主要介绍它是一个可以随机生成各种类型数据,拦截ajax请求等优点.接下来就近距离结束下mockjs吧 ...

2. vite+vue3+axios+ts入门mockjs以及深入学习,直接一步精通

   目录 1.入门 1.1.下载 1.2.配置与定义数据 1.3.使用方式 1.4.效果图 2.语法规范 2.1.数据模板定义规范 2.2.数据占位符定义规 3.深入学习mockjs 3.1.Mock.m ...

3. MockJS学习的初识姿势

   今天和各位一起学习一下mock,文章中若有出入之处,还望不吝指教- 初识mockjs 1.什么是mockjs? 生成随机数据,拦截 Ajax 请求(moockjs官网) 通过随机数据,模拟各种场景:不 ...

4. dva + antd + mockjs 实现用户管理

   1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard [dvadashboard为项目名] 3.安装mockjs npm ins ...

5. 前端程序员的一些有学习借鉴作用的网站

   记录并分享自己收藏夹中的一些网页 2017-01-22 01. vue-google-map https://github.com/GuillaumeL... 这个网址陪伴了我一个月左右的时间啊,工作 ...

6. Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目

   大家好,我是你们的 猫哥,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 关于猫哥,大家可以看看我的年终总结 前端工程师的 2020 年终总结 - 3 年之痒. 前言 猫哥是一个常年混迹在 GitHub 上 ...

7. vue - blog开发学习4

   vue - blog开发学习4 1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template><div class="edit ...

8. vue - blog开发学习2

   vue - blog开发学习2 首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template><div><PostList v-for=&quo ...

9. Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发

   所属专栏: Vue 开发学习进步 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些 但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手 ...

最新文章

1. 4412 GPIO读 和 ioremap控制GPIO寄存器
2. 免费阅读软件轻快阅读器怎么用
3. BZOJ 1053 [HAOI2007]反素数ant
4. Lync Server 2010的部署系列_第六章 安装配置拓扑生成器、前端Server、前端池
5. 秒杀场景_Sentinel在秒杀场景的应用_05
6. 2进制、8进制、10进制、16进制...各种进制间的轻松转换(c#)
7. 代码块、final关键字、包、权限修饰符的复习理解
8. （转）RabbitMQ学习之集群部署
9. Linux中如何理解组的分类,Linux中用户和组管理
10. KDD 2021 | 谷歌DHE：不使用embedding table的类别型特征embedding
11. 机器学习-吴恩达-笔记-3-正则化
12. tensorflow 卷积：设定特定卷积核
13. Foobar2000自用插件
14. NPDP产品经理小知识：财务分析与投资回报率
15. Pseudo-terminal will not be allocated because stdin is not a terminal
16. Aerospike SSD模式下写入swb内的记录格式
17. 谈谈笔者是怎么拿到HFish社区活动仅有的500京东E卡
18. LIN雨量传感器:PCB拆解及LIN数据协议解析
19. 整理： 显示面板行业英文简称解析
20. 通过NVIDIA-Docker部署深度学习项目环境

热门文章

1. 点云分割和点云分类（点云语义分割）
2. 向量内积和外积的计算以及意义
3. MSIL - 简单的代码解析
4. 解读np.divide()
5. Python 指南（ccat翻译）
6. uniapp 移动端 聊天框 获取聊天历史记录
7. web中的URL路径——绝对路径和相对路径
8. IOS实现图片倒影效果
9. Frida JavaScript API学习
10. 好看响应式Emlog博客主题模板