一、背景介绍
在前端开发过程中，一般需要向后端请求接口获取数据。但是在项目初期或者后端接口尚未开发完毕的情况下，前端开发过程中会面临无法获取数据的问题。此时，我们可以使用Mockjs来模拟数据生成，以便于前端开发调试。
二、基本使用
Mockjs提供了非常简单易用的API，只需传入数据模板，即可生成随机数据。以下是一个简单的示例：
// 导入Mockjs
import Mock from 'mockjs'
// 定义模板
const template = {
// 生成1~10之间的随机整数
'number|1-10': 1,
// 生成一个随机字符串
'string|5-10': 'a'
}
// 生成随机数据
const data = Mock.mock(template)
console.log(data)
// 输出： { "number": 10, "string": "aaaaaaa" }
在上面的示例中，我们使用了Mock.mock()方法来生成随机数据。首先定义了一个数据模板template，其中包含两个key/value，分别表示生成随机的整数和字符串。其中整数的取值范围在1~10之间，字符串长度在5~10之间。Mockjs会根据这个模板来生成数据，并返回给我们。
三、数据模板语法
Mockjs提供了非常丰富的数据模板语法，可以满足不同场景下的数据需求。下面我们来介绍一些常用的数据模板语法。
3.1 Basic
基础语法，用于生成基础类型的随机数据。
// 生成布尔值 "boolean": true // 生成整数 "integer": 123 // 生成浮点数 "float": 1.23 // 生成字符串 "string": "Hello, world!" // 生成日期字符串 "date": "2018-07-27" // 生成时间戳 "timestamp": 1532666067889
3.2 Object
用于生成对象类型的随机数据。
// 生成对象
"object|2": {
"key1": "value1",
"key2": "value2",
"key3": "value3",
}
// 对象属性值为字符串的模板
"object": {
"key1|1-10": "value1",
"key2|3": "value2"
}
// 对象属性值为其他类型的模板
"object": {
"key1": {
"nestedKey1|1-10": "nestedValue1",
"nestedKey2": "nestedValue2"
},
"key2": [
"arrayItem1",
{
"nestedKey1|1-10": "nestedValue1",
"nestedKey2": "nestedValue2"
},
"arrayItem3"
]
}
3.3 Array
用于生成数组类型的随机数据。
// 生成数组
"array|2": ["value1", "value2", "value3"]
// 生成数组对象
"array": [
{
"key1": "value1",
"key2|1-10": "value2"
},
{
"key1": "value1",
"key2|1-10": "value2"
}
]
3.4 RegExp
用于生成符合正则表达式的随机字符串。
// 生成符合正则表达式的随机字符串 "regexp": /[a-z][A-Z][0-9]/
3.5 Function
用于生成符合自定义规则的数据。
// 生成对象属性值根据函数返回值
"function": {
"key1": function() {
return 'I am function.';
},
"key2": function() {
return this.key1;
}
}
四、截获AJAX请求
在前端开发过程中，我们需要和后端进行接口对接。但是在接口尚未完成或出现问题的时候，我们可以使用Mockjs模拟数据。为了方便测试，我们还可以使用Mockjs截获AJAX请求，以便快速替代后端接口。以下是一个简单的示例：
// 引入依赖
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import Mock from 'mockjs'
// 创建 MockAdapter 实例
const mockAdapter = new MockAdapter(axios)
// 注册截获请求，并返回随机数据
mockAdapter.onGet('/test').reply(config => {
const template = {
'id|+1': 1,
'name': '@cname',
}
const data = Mock.mock(template)
return [200, data]
})
// 发送请求，获取随机数据
axios.get('/test').then(response => {
console.log(response.data)
// 输出： { "id": 1, "name": "陈清华" }
})
在上面的示例中，我们使用axios来发送请求，将请求发送到`/test`。而Mockjs截获了这个请求，随机生成数据，并返回给我们。
五、生成随机图片
除了生成随机的文本数据之外，Mockjs还可以生成随机的图片，为前端界面设计提供更加完整的测试数据。下面是一个简单的示例：
// 生成随机图片
const dataUrl = Mock.Random.dataImage('200x100', 'Hello Word!')
console.log(dataUrl)
// 输出：
在上面的示例中，我们使用了Mock.Random.dataImage()方法来生成随机图片，其中`200x100`表示图片的尺寸，`Hello World!`表示图片中的文本内容。Mockjs会根据这些参数，生成一张随机的图片并返回数据URL。
六、总结
本文介绍了Mockjs的基本使用、数据模板语法、截获AJAX请求、生成随机图片等方面。Mockjs为前端开发提供了非常强大的工具支持，可以有效提高开发效率。
