CodeGeeX如何生成Mock数据_CodeGeeX前端模拟数据编写【Mock】

CodeGeeX 可通过自然语言注释直接生成多种格式的 Mock 数据：支持接口描述生成、Mock.js 模板、API 逆向响应函数、FastMock 配置 JSON 及组件内联数据，覆盖前端开发全场景。

在前端开发中，快速生成逼真的Mock数据是提升联调效率的关键一步。如果你正在使用CodeGeeX，却苦于没有配置本地Mock服务，或者不清楚如何用简单的指令让它“吐出”结构化的模拟数据，那么接下来的方法或许能帮你打开新思路。核心在于，充分利用CodeGeeX的语义理解能力，直接生成符合规范的Mock代码。

一、在注释中描述接口需求并触发生成

想让CodeGeeX精准生成Mock数据，秘诀在于用清晰、无歧义的自然语言描述你的接口。无需手动编写模板或启动任何服务，只需遵循以下步骤：

1. 首先，在你的Ja vaScript或TypeScript文件中，将光标定位到需要插入Mock数据的位置。

2. 接着，输入格式明确的注释。举个例子，如果你需要一个用户列表接口，可以这样写：// 生成 Mock 数据：GET /api/users，返回 { code: 200, data: [{ id: 1, name: "张三", email: "zhangsan@example.com", createdAt: "2024-01-01" }] }，data 数组长度为 5，id 自增，name 使用中文姓名随机生成，email 格式合法，createdAt 为过去30天内随机日期

立即学习“前端免费学习笔记（深入）”；

3. 然后，按下快捷键 Alt + （Windows/Linux）或 Option + （Mac） 来触发CodeGeeX的代码补全功能。

4. 很快，CodeGeeX就会输出一个完整且可运行的Mock对象或函数。它会根据上下文自动判断，生成Mock.js兼容的语法或是普通的JSON结构，非常智能。

二、结合 Mock.js 规范生成带规则的数据模板

当需求升级，需要生成具备随机性、范围控制或复杂嵌套结构的高级Mock数据时，CodeGeeX同样能胜任。它能依据Mock.js官方的数据模板定义规范，自动生成合规的表达式，帮你避免手写时容易出现的符号错误或规则遗漏。

1. 输入注释时，把规则描述清楚。例如：// 生成 Mock.js 模板：模拟订单列表，每项含 orderNo（8位大写字母+数字）、amount（100-5000的整数）、status（从["pending","shipped","delivered"]中随机）、items（数组，长度1-3，每项含 skuId（字符串）、quantity（1-10））

2. 触发补全后，CodeGeeX输出的将是标准的 Mock.mock() 调用形式，里面包含了完整的嵌套模板对象。所有占位符，比如 @string('upper',8)、@integer(100,5000)，都会严格按照 Mock.js v1.1+ 的语法来生成。

3. 这个输出结果可以直接粘贴到项目的 mock/index.js 文件，或者组件级的mock代码块中，无需二次校验语法，开箱即用。

三、为已有 API 接口自动生成对应 Mock 响应函数

如果你的项目已经定义好了Axios或Fetch请求函数，CodeGeeX还有一个“逆向工程”的妙用：它能解析现有的URL、方法和参数结构，并生成一个与之匹配的拦截式Mock响应函数。这样做的好处是，无需修改原有请求代码，实现零侵入的Mock。

1. 在已有的请求函数上方，添加描述性的注释：// 为下方 fetchUser(id) 函数生成 Mock 响应：GET /api/user/:id，根据 URL 中的 id 参数返回不同用户；id=1 返回管理员，id=2 返回普通用户，其他返回 { code: 404, message: "用户不存在" }

2. 选中这段注释和下方的请求函数，调用CodeGeeX插件中的“生成对应Mock”功能（部分IDE插件版本在右键菜单中提供此选项）。

3. 随后，CodeGeeX会输出一个独立的函数，形态类似 mockFetchUser = (options) => { ... }。函数内部已经完成了对 options.url 的解析和路径参数匹配，逻辑分支与你注释中的要求完全一致。

4. 最后，将这个函数传入 Mock.mock() 即可，例如：Mock.mock(//api/user/\d+/, 'get', mockFetchUser)

四、基于 FastMock/EasyMock 平台结构生成配置代码

当团队统一使用FastMock这类在线Mock平台时，手动填写表单配置接口往往比较耗时。这时，CodeGeeX可以帮你直接生成平台能够识别的JSON Schema或接口配置对象，不仅省时，还能确保字段名、类型和示例值与前端消费端保持一致，减少沟通成本。

1. 输入针对平台格式的注释：// 生成 FastMock 接口配置 JSON：路径 /product/detail，方法 GET，请求参数为 query.id（数字），成功响应 code=200，data 包含 id、name（字符串）、price（浮点数）、tags（字符串数组）、inStock（布尔值）

2. 触发补全后，你会得到一个标准的FastMock接口配置对象，里面包含了 path、method、request（含params）、response（含status、body schema）等所有必要字段。

3. 复制这段JSON内容，粘贴到FastMock平台的“导入接口”区域，点击确认，一条新的Mock接口就配置完成了，效率极高。

五、在 Vue/React 组件内嵌式生成局部 Mock 数据

有时候，我们只想在单个组件内部快速生成一些轻量的Mock数据，用于调试UI渲染逻辑，不希望依赖外部库或配置全局拦截。CodeGeeX同样支持这种“内嵌式”的生成方式。

1. 在Vue单文件组件的