Mock.js 实战指南：前端开发中模拟接口数据的技巧
在前端开发中，前后端分离是常见工作模式。当后端接口文档已出但服务尚未就绪时，我们需要在本地模拟数据以便调测。传统做法是硬编码 JSON 文件，但这种方式不灵活且需要频繁切换 URL。借助 Mock.js，我们可以拦截 Ajax 请求并动态生成模拟数据，大大提升开发效率。以下将结合 Vue 项目介绍 Mock.js 的常用场景。
基础示例：在 Vue 项目中集成 Mock.js
// 安装依赖
npm install mockjs --save-dev在项目中创建模拟数据文件，例如 mock.js：
import Mock from 'mockjs';
// 使用正则匹配 URL，GET 请求也能正确拦截
Mock.mock(/\/api\/user\/info/, {
"code": 200,
"data": {
"id": 1001,
"name": "@cname", // 随机生成中文姓名
"age|1-60": 20, // 随机生成 1 到 60 的数字
"points|100-1000": 500, // 随机生成 100 到 1000 的整数
"level|1-5": 3, // 随机生成 1 到 5 的等级
"created": "@datetime" // 随机日期时间
}
});在 main.js 中引入该文件：
import './mock'; // 自动模拟数据在 Vue 组件中正常发起请求：
fetchUserInfo() {
axios.get('/api/user/info').then(res => {
console.log(res.data); // Mock.js 返回的模拟数据
}).catch(err => {
console.error(err);
});
}请求延迟设置
真实环境中接口响应需要时间，而 Mock.js 默认立即返回数据，可能导致联调时出现差异。建议设置合理延迟：
// 固定延迟 400 毫秒
Mock.setup({ timeout: 400 });
// 随机延迟 200 到 600 毫秒
Mock.setup({ timeout: '200-600' });
数据生成规则详解
Mock.js 提供丰富的占位符和模板语法，用于构造复杂数据。
字符串
通过 |min-max 或 |count 控制重复次数：
{
"str1|2-5": "hello", // 重复 hello 2~5 次
"str2|3": "ab" // 重复 ab 3 次
}
数字
{
"num1|+1": 10, // 每次自增 1，初始为 10
"num2|10-100": 50, // 随机 10~100 的整数
"num3|10-100.2-4": 50 // 整数部分 10~100，小数保留 2~4 位
}
生成结果示例：
{
"num1": 10,
"num2": 54,
"num3": 42.873
}
布尔值
{
"flag1|1": true, // true/false 各 50% 概率
"flag2|1-3": false // false 概率为 1/(1+3)=25%，true 为 75%
}
对象与数组
{
"obj1|2": { a: 1, b: 2, c: 3 }, // 随机选取 2 个属性
"list1|1": [1, 2, 3], // 随机选取 1 个元素
"list2|+1": ['a', 'b', 'c'], // 按顺序取元素
"list3|3-5": ['x'], // 重复 'x' 3~5 次
"list4|4": ['y'] // 重复 'y' 4 次
}
正则表达式
根据正则反向生成匹配字符串：
{
"regexp1": /[a-z]{3}/,
"regexp2": /\d{2,4}/
}
// 可能结果: "xyz", "1234"
Mock.Random 占位符生僻
除了直接使用 @ 占位符，也可以通过 Mock.Random 调用。常用方法包括：
- 基本类型:
boolean,integer,float,string - 日期:
date,datetime,time - 图片:
image,dataImage - 文本:
csentence,ctitle,cparagraph - 名字:
cname,first,last - 网络:
url,email,ip
一个综合示例：
Mock.mock(/\/api\/order\/list/, {
"code": "0000",
"data|5-10": [{
"id|+1": 1,
"title": "@csentence(5, 10)",
"price|10-200": 50,
"created": "@datetime"
}]
});
注意事项
- Mock.js 会全局拦截匹配的 XHR 请求，务必使用正则确保只拦截目标接口。
- 在生产环境中应移除 Mock.js 引用，可通过环境变量控制。
- 当需要模拟复杂状态（如分页、报错）时，结合函数和条件判断动态返回数据。
