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

GitHub Copilot前端Mock利器:利用AI根据接口文档实时生成动态JSON Server

秋枫小哥_7533

秋枫小哥_7533

发布时间:2026-06-10 13:59:18

|

883人浏览过

|

来源于php中文网

原创

用 GitHub Copilot 结合 JSON Server 可从 OpenAPI/YAML/JSON 文档自动生成可运行的 mock 服务:先准备接口文档,安装并认证 Copilot CLI 和 JSON Server,再通过 Copilot 解析文档生成 db.json,启动服务验证路由,最后通过 copilot watch 实现文档更新时 mock 数据自动同步。

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

github copilot前端mock利器:利用ai根据接口文档实时生成动态json server

你需要在前端开发中快速验证接口联调,但后端接口尚未就绪或不稳定,手动写 mock 数据费时且难维护——用 GitHub Copilot 结合 JSON Server,可直接从 OpenAPI/YAML/JSON 接口文档自动生成可运行的 mock 服务。

准备接口文档与本地环境

确保你已获取一份结构清晰的接口定义文件,常见格式为 openapi.json、swagger.yaml 或 postman_collection.json。若只有接口文档网页,先用浏览器插件(如 Swagger Parser)导出为 JSON/YAML。

安装 JSON Server 和 Copilot CLI:运行 npm install -g json-server 和 npm install -g @github/copilot-cli。Windows 用户需在 PowerShell 或 WSL 中执行,CMD 不被支持。

确认 Copilot CLI 已登录并认证:终端输入 copilot whoami,返回邮箱即表示可用。未登录则运行 copilot login 并按提示完成 OAuth 流程。

立即学习“前端免费学习笔记(深入)”;

用 Copilot CLI 解析接口文档生成 mock 数据结构

进入存放接口文档的目录,例如 cd ./api-specs。

方法一:单次生成(适合小规模接口)
执行:copilot -p "Parse openapi.json and output a JSON Server db.json with realistic mock data for all GET /users, POST /orders, and GET /products endpoints. Use faker.js-style values: names, emails, ids, timestamps. Output only valid JSON, no explanation."

方法二:流式迭代(推荐,可控性强)
运行 copilot 进入交互式会话 → 输入 /plan 切换到计划模式 → 发送:“基于 openapi.json 启动一个 JSON Server mock 服务,覆盖全部 paths 下的 GET 和 POST 路由,每条路由返回 3 条合理示例数据。” Copilot 会先列出拟生成的路由表和字段映射,确认无误后再执行生成。

【必须检查生成的 db.json 中 id 字段是否为字符串或数字类型一致】,否则 JSON Server 启动时报 500 错误。常见坑:User.id 是 number,但 Order.userId 是 string,导致关联查询失败。

Feishu calendar sync, local ics to json data for AI agent
Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式,用于飞书日历导入导出及数据集成。

下载

启动 JSON Server 并验证路由

将 Copilot 输出的 JSON 内容保存为 db.json 文件,与 openapi.json 同级目录。

执行:json-server --watch db.json --port 3001 --routes routes.json。其中 routes.json 是可选的,仅当你需要重写默认路由(如把 /api/v1/users 映射到 /users)时才创建。

若未提供 routes.json,JSON Server 默认启用 RESTful 路由:GET /users、POST /users、GET /users/1 等全部自动就绪。

打开浏览器访问 http://localhost:3001/users,确认返回数组且含 name/email/id 字段;再用 curl 测试 POST:curl -X POST http://localhost:3001/orders -H "Content-Type: application/json" -d '{"product":"laptop","qty":2}',观察响应是否含自增 id 和时间戳。

让 mock 数据随接口文档实时更新

第一步:在项目根目录新建 .copilotrc 文件,内容为:

{"prompt": "Given {file}, regenerate db.json with updated mocks. Preserve existing id patterns and relationship logic from prior run.", "watch": ["openapi.json"]}

第二步:运行 copilot watch。该命令会监听 openapi.json 变更,一旦检测到保存动作,立即触发重新生成 db.json。

第三步:保持 json-server --watch db.json 在另一个终端运行。Copilot 生成新 db.json 后,JSON Server 自动热重载数据,无需重启服务。

注意:若 openapi.json 中新增了 /v2/reports 路由,但 .copilotrc 里没声明依赖该字段,Copilot 可能忽略它。此时需手动在 prompt 中追加“特别处理所有 v2 开头的路径”。

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

切问学术

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

DeepSeek

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

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

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

豆包大模型

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

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

相关专题

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

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

2383

2023.08.11

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

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

5143

2023.10.09

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

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

6210

2024.03.19

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

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

5758

2024.03.22

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

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

823

2024.05.22

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

8425

2026.01.21

GitHub官网入口版本汇总
GitHub官网入口版本汇总

本专题整合了GitHub入口版本地址汇总,阅读专题下面的文章了解更多详细内容。

838

2026.04.02

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

8425

2026.01.21

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

20

2026.10.10

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GitHub Copilot手册
GitHub Copilot手册

共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