企业官网建设流程全解析

在开发中应该都经历过：
后端发来一个Swagger 链接，于是我们打开文档，一个个的去将接口cv到我们项目中，即重复又枯燥但还不得不做

本文的由来就此诞生，意在通过Claude Code输入命令打开 Swagger 文档、提取接口信息、并勾选需要的接口，写入到项目中

详细步骤

1、添加chrome-devtools MCP

打开claude code对话框，执行命令：

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

配置好后创建mcp文件（可直接让claude code生成）例：

就生成好了

2、创建api生成skill
万能的claude 又来了 直接根据自己的项目输入需求生成skill

claude就会帮你自动生成一个api接口文件生成器的skill文件

部分生成的skill,如下图

name: swagger-api-gen description: 从 Swagger/OpenAPI 文档自动生成符合项目规范的 API 文件。当用户提到生成API、swagger生成、接口生成、api-gen、从swagger创建api时，使用此技能。 # Swagger/OpenAPI 接口文件生成器 从 Swagger JSON 文档自动生成符合本项目规范的 API 文件（`src/api/` 目录下的 `.js` 文件）。 ## 输入 用户提供以下信息（可一次性提供，也可分步提供）： - Swagger/OpenAPI 文档的 JSON 地址（必需） - Tag 名称（可选，未提供时列出所有 tag 供选择） ## 一、项目 API 文件规范（必须严格遵守） ### 1.1 文件结构 每个 API 文件必须遵循以下固定模式： import { get, post, put, del } from '@/utils/request' // 中文注释（取自 swagger summary） export const functionName = (data) => { return method({ url: '/endpoint/path', baseUrl: '/api', data: data, }) } 规则： - **import 语句**：仅从 `@/utils/request` 导入实际使用到的方法，可用方法为 `get`、`post`、`put`、`del`，按此顺序排列 - **函数声明**：`export const` + camelCase 函数名 + 箭头函数 + 大括号 + return - **参数**：统一使用单参数 `data` - **返回值**：`return get/post/put/del({ url, baseUrl, data: data })` - **注释**：每个函数上方加一行中文注释，内容取自 swagger 的 `summary` 字段 - **文件命名**：camelCase 格式的 `.js` 文件 - **文件位置**：`src/api/` 或 `src/api/hr/`（HR 相关）或 `src/api/staffTrain/`（培训相关） ### 1.2 HTTP 方法映射 | Swagger 方法 | 项目方法 | |-------------|---------| | GET | `get` | | POST | `post` | | PUT | `put` | | DELETE | `del` | | PATCH | `post`（降级，注释标注原始方法） | ### 1.3 baseUrl 常用值 - `/api` — 主 HR 后端 - `/gw` — 网关 - `/gw/hr` — HR 网关 - `/gw/oms/api` — OMS 子系统 - `/adminApi` — 管理后台 - `/hrApi` — HR 平台 - `/sso` — 单点登录

整个配置就结束了！！！

实战一下

Step 1：触发 Skill
获取钉钉团队绩效下的全部接口

以下是api链接的具体参数

Step 2：读取文档，选择接口

图1：成功获取到钉钉团队下的所有接口 ，并提供了选择接口/文件路径/baseUrl供用户自定义选择

图2：选择需要放在文件中的接口

图3：选择文件路径（可自定义）

图4：选择接口前缀

Step 3：完成，收工

图5：指定需要放在接口文件的接口

图6：生成的接口文件

提示

1.claude code监听不到浏览器?
1)、将chrome浏览器全部关闭，可打开任务管理器**（Ctrl+Shift+Esc）查看，并结束chrome.exe**进程
2)、打开 cmd，运行(路径需要根据自己安装的位置进行调整)：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

此时Chrome 浏览器打开并启用了远程调试端口，就可以正常的页面链接了。