CodeGeex可基于Swagger YAML或TS接口定义自动生成合规Mock数据。需安装桌面版、索引前端项目、支持YAML拖入解析及TS类型推断,生成结果可直用于MSW。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

在前后端并行开发中,前端团队常因后端接口未就绪而停滞,手动编写 JSON Mock 数据费时且易与真实接口结构脱节;CodeGeex 本地大模型可基于接口文档、Swagger YAML 或字段描述,一键生成结构准确、值类型合规、含合理业务逻辑的 Mock 数据,跳过手写 JSON 和维护 mock-server 的环节。
准备 CodeGeex 环境并加载前端项目上下文
从官网下载 CodeGeex 桌面版(v2.10+),安装后首次启动会自动下载 【codegeex-4b-int4】 量化模型,约占用 2.3GB 磁盘空间,网络不佳时建议提前完成下载。
打开 CodeGeex → 点击左下角「项目」→ 「添加项目文件夹」→ 选择你的前端工程根目录(必须含 src/ 与 api/ 或 services/ 目录)→ 勾选「递归索引 .ts/.js/.json 文件」→ 等待右下角状态栏显示「索引完成(XX 文件)」。
这一步不可跳过:模型需通过代码上下文识别接口调用模式、DTO 类型定义和常用 Mock 工具(如 MockJS、MSW)的注册方式,否则生成的数据无法直接嵌入项目。
立即学习“前端免费学习笔记(深入)”;
从 Swagger YAML 自动生成符合 OpenAPI 规范的 Mock 数据
方法一:粘贴 YAML 片段快速生成
复制后端提供的 Swagger JSON/YAML 中某一个接口的完整 schema 片段(例如 /api/users GET 的 responses.200.schema)→ 在 CodeGeex 编辑区新建空白文档 → 粘贴 → 输入提示词:“根据以下 OpenAPI Schema 生成 3 条符合类型约束的 JSON Mock 数据,要求:id 为 6 位数字字符串,email 必须含 @ 符号,status 只能是 active/inactive/pending” → 按 Ctrl+Enter 提交。
方法二:拖入整个 swagger.yaml 文件
将 swagger.yaml 文件直接拖入 CodeGeex 主编辑区 → 等待右上角出现「已解析 OpenAPI 文档」提示 → 点击右侧边栏「Mock 生成器」→ 展开「/api/orders POST」→ 点击「生成示例数据」→ 选择数量(1/5/10)→ 生成结果自动带注释说明字段推断依据,比如 “price 推断为 number,因 schema.type=number 且存在 minimum: 0.01”。
【注意:YAML 中若使用 $ref 引用外部组件,需确保所有引用文件同目录或已一并拖入,否则字段会生成为 null】
基于现有 TypeScript 接口定义生成强类型 Mock
第一步:在编辑器中打开 src/types/api.ts 或类似定义文件,找到 interface User { id: string; name: string; createdAt: Date; } 这类声明。
第二步:用鼠标框选整个 interface 块(包括 export interface 行和花括号内全部内容)→ 右键 → 「用 CodeGeex 生成 Mock」→ 弹窗中设置「生成数量」为 2、「Date 字段格式」选 ISOString、「字符串长度控制」勾选「启用」→ 点击确定。
第三步:生成结果以 JavaScript 对象数组形式返回,每项 key 完全匹配 interface 字段名,value 类型与 TS 类型严格对应——例如 name 是 string 就不会生成 null,createdAt 是 Date 就输出 "2023-10-15T08:22:14.789Z" 而非数字时间戳。
这一步生成的数据可直接复制进 src/mock/user.ts 作为 MSW 的 response resolver 返回值,无需二次修改字段名或类型。
注入 Mock 数据到 Vite + MSW 开发环境
确认项目已安装 msw@2.3.0+ 与 vite-plugin-mock@3.0.0+ → 打开 src/mock/handlers.ts → 将 CodeGeex 生成的用户数组赋值给 const mockUsers = [/* 粘贴此处 */] → 在 rest.get('/api/users', (req, res, ctx) => res(ctx.status(200), ctx.json(mockUsers))) 中替换原 placeholder 数组。
运行 npm run dev → 访问 http://localhost:5173 → 打开浏览器开发者工具 → 切换到 Network 标签页 → 刷新页面 → 查看 /api/users 请求响应体是否为 CodeGeex 生成的 2 条结构完整、值合法的用户数据。
















