mock.js 核心是“数据生成、请求拦截、业务配置”三层认知，本质是前端可控的数据契约工具；数据模板遵循"key|rule": value结构，rule依value类型不同而异；@占位符调用random方法生成真实字段；拦截仅对原生xhr生效，需环境开关与模块化组织。
Mock.js 学得扎实，关键不在背规则，而在建立“数据怎么来、请求怎么拦、业务怎么配”三层认知。它不是万能后端，而是前端可控的数据契约表达工具——理解这点，复习就有的放矢。
吃透数据模板的生成逻辑
所有 Mock 数据都来自 "key|rule": value 这一结构，rule 的含义取决于 value 类型：
- 字符串值：如
"name|3-8": "a"表示重复 "a" 3–8 次；"title|5": "@ctitle"表示生成 5 个中文标题 - 数字值：如
"age|18-60": 1生成整数；"score|60-100.2": 1生成保留两位小数的浮点数；"id|+1": 100表示从 100 开始自增 - 布尔值：如
"active|1": true表示真假各占 50%；"isVIP|3-1": false表示 false 占 3/4 概率 - 数组值：如
"list|5-10": [{ id: "@id", name: "@cname" }]每次返回 5–10 条随机用户数据 - 对象值：如
"user|2": { name: "@cname", email: "@email" }表示从中随机选 2 个字段返回
用好 @ 占位符填充真实感字段
@ 后是 Random 模块方法，不依赖模板结构，直接生成业务常用字段：
- 身份信息：
@cname（中文姓名）、@id()（身份证号）、@city(true)（省+市） - 内容类：
@csentence(5,15)（5–15 字中文句）、@cparagraph(2)（2 段中文文本） - 时间与媒体：
@date("yyyy-MM-dd")、@image("200x100", "#333", "头像") - 网络基础：
@email、@url、@ip、@color、@hex
搞清拦截生效的真实条件
Mock.mock(rurl, template) 的本质是替换 window.XMLHttpRequest，只对原生 XHR 生效：
- rurl 支持字符串全匹配、正则（如
/^\/api\/user/）、通配符（如/api/user/*） - 对 axios 或 fetch 不起作用，除非你封装请求层或改用 MSW
- 函数式响应可读取
options.url、options.type、options.body，实现动态判断 - 务必通过
process.env.NODE_ENV === 'development'控制开关，上线前自动禁用
按项目节奏组织和落地
别把 mock 写成散装配置，要形成可维护结构：
- 按模块拆分：如
mock/user.js、mock/order.js、mock/common.js - 统一入口
mock/index.js负责导入各模块 + 调用Mock.setup({ timeout: '200-600' })模拟网络延迟 - 开发环境启用，测试/生产环境跳过引入；建议结合接口文档（Swagger/YAPI）导出 JSON 自动生成模板
- 复杂逻辑抽离为工具函数，在模板中调用，避免规则臃肿；配合 TypeScript 接口定义做类型提示校验
