讲师中心 微信公众号
AI工具推荐 视频效率加速

如何使用 CodeGeex 自动生成前端 Mock 数据以实现前后端并行开发

酷涛酱_4640

酷涛酱_4640

发布时间:2026-06-22 17:24:42

|

941人浏览过

|

来源于php中文网

原创

CodeGeex可基于Swagger YAML或TS接口定义自动生成合规Mock数据。需安装桌面版、索引前端项目、支持YAML拖入解析及TS类型推断,生成结果可直用于MSW。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如何使用 codegeex 自动生成前端 mock 数据以实现前后端并行开发

在前后端并行开发中,前端团队常因后端接口未就绪而停滞,手动编写 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 文件

前端美化
前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面,设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时(例如:网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或对任意 Web UI 进行样式优化与视觉美化),请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计,避免千篇一律的 AI 风格。

下载

将 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 条结构完整、值合法的用户数据。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2103

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

5650

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

4966

2024.03.19

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2103

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4523

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

5650

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5098

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

723

2024.05.22

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

60

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CodeGeex使用手册
CodeGeex使用手册

共0课时 | 0人学习

apipost极速入门
apipost极速入门

共6课时 | 0.6万人学习

快速使用API文档与智能Mock
快速使用API文档与智能Mock

共1课时 | 0.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn