Mockjs
AlightYoung 6/30/2021 Mockjs
# 简介
Mock.js 是一个模拟数据生成器，帮助前端开发和原型与后端进程分离，减少一些单调的工作，特别是在编写自动化测试时。
简单来说，你可以利用它来生成大量测试数据，并且你还可以拦截Ajax请求，返回格式正确的测试数据。
# 快速上手
照例编写一个简单的例子。(依旧是vue2环境)
- 下载安装
npm install mockjs -S
1
- main.js引用并定义全局变量，这里还使用了axios发送请求，用于测试mockjs的ajax拦截功能。
import Mock from 'mockjs'
import axios from 'axios'
Vue.prototype.$mock = Mock
Vue.prototype.$axios = axios
1
2
3
4
5
2
3
4
5
- 在组件中使用mockjs
data() {
return {
provinces: [],
};
},
mounted() {
var data = this.$mock.mock('province',{
"list|10": ["@province"],
});
this.$axios.get('province').then(res=>{
this.provinces = res.data.list;
console.log(this.province)
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
查看控制台，发现已经自动生成了10个随机省份。
# 核心概念与函数
在上面的案例中，我们已经使用过了mock函数，接下来主要详细解析一下这些函数。
# Mock.mock
Mock.mock( rurl?, rtype?, template|function( options ) )
该函数可根据参数的组合分为以下几种情况：
Mock.mock(template)：根据数据模板生成模拟数据。Mock.mock(rurl,template)：记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。Mock.mock(rurl,function(options))：记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。Mock.mock(rurl,rtype,template)：记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。Mock.mock(rurl,rtype,function(options))：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
# Mock.Random
Mock.Random 是一个工具类，用于生成各种随机数据。
在上述示例代码中，用到的@province其实就是『占位符』。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
# 数据模板
数据模板，就是之前我们示例代码中的{"list|10": ["@province"],}，该模板定义了一个对象，其中有一个list属性，该属性会生辰10个随机省份。
因为数据模板的类型十分丰富，这里也不可能一一列举，附上官方网站示例页面，传送门 (opens new window)。
# 最后
Mockjs的基本用法差不多就是这些了，其中还有一些函数或者其他点没有说明是因为暂时没用上。
所以这里也一并附上官方Github wiki和文档站。需要的可以自行查阅。