Mock.js 是一个用于模拟数据的 JavaScript 库，特别适合用于前端开发过程中生成假数据进行接口测试。它可以拦截 Ajax 请求并生成随机数据，还可以模拟服务器的响应来加速前端开发。
一、安装 Mock.js
可以通过以下几种方式引入 Mock.js：
-
CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/mockjs/dist/mock.js"></script> -
使用 npm：
npm install mockjs --save-dev在项目中引入：
javascript">const Mock = require('mockjs'); -
ES6 模块（在支持 ES6 模块的项目中）：
javascript">import Mock from 'mockjs';
二、基本用法
1. 定义模拟数据格式
Mock.js 提供了一个 Mock.mock 方法，使用 JSON 模板来定义数据结构：
javascript">Mock.mock(url, method, data)
- url：要拦截的请求 URL，支持字符串或正则表达式。
- method：请求类型，比如
"get"、"post"，不区分大小写。 - data：要返回的模拟数据格式。
示例：简单数据模拟
javascript">Mock.mock('/api/user', 'get', {'name': '@name', // 随机生成名字'age|18-60': 1, // 随机生成年龄，范围是 18 到 60'gender|1': ['male', 'female'], // 随机选取一个性别
});
@name是 Mock.js 的占位符，会随机生成一个人名。age|18-60表示生成一个在 18 到 60 之间的随机整数。gender|1表示从数组中随机选取一个性别值。
当 /api/user 接口被请求时，Mock.js 会拦截这个请求并返回一个模拟的 JSON 对象，如：
{"name": "John Doe","age": 35,"gender": "male"
}
三、Mock.js 数据模板语法
Mock.js 提供了丰富的数据模板语法来生成各种随机数据。以下是一些常用的占位符和规则：
1. 基础数据类型
-
name：随机生成一个人名（中文或英文）。javascript">'name': '@name' -
string|1-10：生成 1 到 10 个字符组成的随机字符串。javascript">'string|1-10': '★' -
boolean|1：生成随机布尔值（true 或 false）。javascript">'boolean|1': true -
number|+1：生成递增数字，从初始值开始，每次调用增加 1。javascript">'id|+1': 1
2. 数组和对象
-
array|1-10：生成一个随机长度的数组。javascript">'items|1-10': [{'id|+1': 1,'name': '@name' }] -
object|2：从对象中随机选取 2 个键值对。javascript">'object|2': {"name": "@name","age|20-30": 25,"gender|1": ["male", "female"],"city": "New York" }
3. 日期和时间
-
date：生成随机日期，格式为YYYY-MM-DD。javascript">'date': '@date' -
time：生成随机时间，格式为HH:mm:ss。javascript">'time': '@time' -
datetime：生成随机日期和时间，格式为YYYY-MM-DD HH:mm:ss。javascript">'datetime': '@datetime'
4. 图片生成
Mock.js 还可以生成随机图片 URL，适用于生成假图片。
javascript">Mock.mock('/api/image', 'get', {'image': "@image('200x200', '#4A90E2', 'Hello')"
});
@image('200x200', '#4A90E2', 'Hello')生成一个 200x200 大小的图片，背景颜色为#4A90E2，文字为Hello。
四、拦截 AJAX 请求示例
以下是结合 axios 请求和 Mock.js 的示例。通过 Mock.js 拦截实际请求，返回模拟的数据：
javascript">import axios from 'axios';
import Mock from 'mockjs';// 定义 Mock 数据
Mock.mock('/api/data', 'get', {'id|+1': 1,'title': '@title','author': '@name','content': '@paragraph','publishDate': '@date'
});// 发起请求，测试 Mock.js 返回的数据
axios.get('/api/data').then(response => {console.log(response.data);}).catch(error => {console.error('Error:', error);});
每次调用时，/api/data 请求都会返回一个 JSON 对象，模拟一篇随机生成的文章信息。
五、正则匹配 URL
Mock.js 支持使用正则表达式匹配 URL，非常适合有动态参数的 API 请求。例如，匹配 /api/user/123 的请求：
javascript">Mock.mock(/\/api\/user\/\d+/, 'get', {'id': '@id','name': '@name','age|20-30': 1
});
此正则表达式 /\/api\/user\/\d+/ 会匹配 /api/user/ 后接任意数字的请求。
六、延迟响应
在真实环境中，网络请求通常会有延迟，可以用 Mock.setup 模拟响应时间：
javascript">Mock.setup({timeout: '300-800' // 300 到 800 毫秒之间的延迟
});
设置后，所有 Mock.js 拦截的请求都会随机延迟 300 至 800 毫秒后返回数据。
七、综合示例：模拟分页数据
以下是一个使用 Mock.js 模拟分页数据的示例：
javascript">Mock.mock(/\/api\/users\?page=\d+&pageSize=\d+/, 'get', (options) => {const url = new URL(`http://localhost${options.url}`);const page = parseInt(url.searchParams.get("page"));const pageSize = parseInt(url.searchParams.get("pageSize"));return Mock.mock({'total': 100,[`users|${pageSize}`]: [{'id|+1': (page - 1) * pageSize + 1,'name': '@name','age|18-60': 1,'gender|1': ['male', 'female']}]});
});
- 这个 Mock 拦截
/api/users?page=1&pageSize=10形式的请求，返回pageSize条随机用户数据。 - 每次请求会返回 10 条用户数据和
total总数值为 100，可以模拟分页查询效果。
总结
- 定义数据结构：通过 JSON 模板定义结构，并使用占位符生成随机数据。
- 拦截请求：通过
Mock.mock拦截指定的 URL 请求。 - 自定义生成规则：通过 Mock.js 的占位符生成丰富的数据类型，包括字符串、数值、数组、日期、图片等。
- 模拟延迟：使用
Mock.setup模拟网络延迟。
这样，就能用 Mock.js 高效创建模拟 API 数据接口来测试前端页面。
