1. 安装 Mock.js
// 使用 CDN：
<script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock-min.js"></script>
// 使用 npm：
npminstall mockjs --save
2. 基本用法
Mock.js 提供了 Mock.mock() 方法来生成模拟数据。
生成简单数据：
// 生成一个随机整数
var data = Mock.mock('@integer(1, 100)'); // 生成1到100之间的随机整数
console.log(data);
// 生成一个随机字符串
var str = Mock.mock('@string("abcdefghijklmnopqrstuvwxyz", 5)'); // 生成长度为5的随机字符串
console.log(str);
生成复杂对象：
var data = Mock.mock({
'id|+1': 1, // 生成递增的ID
'name': '@cname', // 生成中文名字
'age|18-60': 20, // 生成18到60之间的随机年龄
'address': '@county(true)', // 生成详细的地址（省市区）
'email': '@email', // 生成随机邮箱
'date': '@date("yyyy-MM-dd")' // 生成指定格式的日期
});
console.log(data);
3. 模拟 API 请求
Mock.js 可以拦截 HTTP 请求并返回模拟数据。通常与 mockjs 和 axios 或 fetch 结合使用。
拦截 GET 请求：
Mock.mock('/api/users', {
'list|1-10': [{
'id|+1': 1,
'name': '@cname',
'age|18-60': 20,
'email': '@email'
}]
});
// 使用 axios 或 fetch 发起请求时，会返回模拟的数据
axios.get('/api/users').then(response => {
console.log(response.data);
});
拦截 POST 请求：
Mock.mock('/api/login', 'post', {
'status': 'success',
'token': '@guid' // 生成一个GUID作为token
});
// 发送POST请求时，会返回模拟的登录响应
axios.post('/api/login', {
username: 'admin',
password: '123456'
}).then(response => {
console.log(response.data);
});
4. 数据模板
Mock.js 支持通过模板定义数据结构，并可以根据模板生成大量模拟数据。
定义模板：
var template = {
'id|+1': 1,
'name': '@cname',
'age|18-60': 20,
'email': '@email'
};
// 根据模板生成10条数据
var users = Mock.mock(template, 10);
console.log(users);
5. 常用占位符
Mock.js 提供了许多内置的占位符，可以直接使用这些占位符生成不同类型的数据。
| 占位符 | 描述 |
|---|---|
@integer(min, max) | 生成指定范围内的随机整数 |
@float(min, max, dmin, dmax) | 生成指定范围内的随机浮点数 |
@boolean() | 生成随机布尔值 |
@string(characters, min, max) | 生成指定字符集的随机字符串 |
@character(type) | 生成随机字符（可选类型：lower、upper、all） |
@natural(min, max) | 生成自然数 |
@date(format) | 生成指定格式的日期 |
@time(format) | 生成指定格式的时间 |
@now(format) | 生成当前时间 |
@guid() | 生成 GUID |
@word(min, max) | 生成随机单词 |
@sentence(min, max) | 生成随机句子 |
@paragraph(min, max) | 生成随机段落 |
@cname() | 生成随机中文名字 |
@name() | 生成随机英文名字 |
@region() | 生成随机地区 |
@province() | 生成随机省份 |
@city() | 生成随机城市 |
@county() | 生成随机区县 |
@zip() | 生成随机邮政编码 |
@email() | 生成随机邮箱 |
@url() | 生成随机 URL |
6. 自定义函数
你还可以通过自定义函数来生成更复杂的模拟数据。
Mock.Random.extend({
myCustomData: function() {
return '这是自定义的数据';
}
});
var data = Mock.mock({
'customData': '@myCustomData'
});
console.log(data.customData); // 输出: 这是自定义的数据
总结
Mock.js 是一个非常强大的工具，能够帮助开发者快速生成模拟数据，减少前后端联调的时间。通过掌握其基本语法和用法，可以大大提高开发效率。
