网站后台登陆图片上海专业网站优化排名

网站后台登陆图片,上海专业网站优化排名,wordpress分城市访问,成都网站推广找四川冠辰trae-swagger-mcp 插件开发分享背景介绍实现效果进阶总结背景 针对 Trae IDE 无法直接解析 JSON 文件、且仅 DouBao 模型支持图片理解的限制#xff0c;所以开发了本工具 其实上传接口文档的截图#xff0c;让 AI 解析图片上的内容也十分方便#xff0c;但是我想要解析完成…trae-swagger-mcp 插件开发分享背景介绍实现效果进阶总结背景针对 Trae IDE 无法直接解析 JSON 文件、且仅 DouBao 模型支持图片理解的限制所以开发了本工具其实上传接口文档的截图让 AI 解析图片上的内容也十分方便但是我想要解析完成的内容能直接帮我用Ant Design 表格组件完成页面开发需要满足0个错别字的要求截图有点难以实现。而且公司项目的某些接口后端返回的业务字段经常都20、30个长截图起来也很麻烦其实市面上也有相应的工具vite-plugin-swagger-mcp但是公司部分项目还是用的webpack这个也就不适用了介绍最初的设计思路是想实现自动化文档获取自动登录、接口搜索与解析文档并用 Ant Design 表格展示返回的字段。但由于 Swagger Knife4j 采用 Alert 弹窗登录方式非 Token 认证自动化登录难以实现目前的实现是采用手动导入 JSON 文档的方式确保安全性与稳定性用户只需登录接口文档平台导出 JSON 数据并粘贴至指定位置即可通过 Trae IDE 智能体便捷查询接口信息大大提升开发效率也是这个实现恰巧兼容了 Yapi、Apifox 还有其它接口文档的解析因为实现思路都是大差不差的实现其实10月份的时候就已经做的七七八八了但是不是特别“智能”get请求、post请求参数都解析不明白。更别说post请求有分好多种 Content Type智能体也不是很理解文档的结构分享一下实现思路还有踩坑的地方Github源码https://github.com/QianYin-Zhou/trae-swagger-mcp一、生成简单的MCP Server直接跟 Trae AI 说创建一个 MCP Server 项目想让它读取根目录的swagger-doc.json文件简单解析这个文件的大致内容和文件大小开发 MCP 工具主要是这个依赖modelcontextprotocol/sdk{name:trae-swagger-mcp,version:1.0.0,description:trae-swagger-mcp 是一款基于 Trae IDE 的 MCP 工具专为解析和处理接口文档而设计,type:module,main:swagger-reader.js,scripts:{test:node swagger-reader-test.js,start:reader:node swagger-reader.js,start:server:node swagger-server.js},keywords:[],author:cissy 2405071403qq.com,license:ISC,dependencies:{modelcontextprotocol/sdk:^1.20.0,express-basic-auth:^1.2.1,node-fetch:^3.3.2,zod:^3.25.76}}二、跑通流程Trae IDE再新建一个项目或者直接用公司项目先打开设置选择 “手动添加” 自己开发的 MCP Server可参考以下配置{mcpServers:{swagger-reader:{command:node,args:[D:/newer/trae-swagger-mcp/swagger-reader.js]}}}这里swagger-reader为工具名称args必须填写绝对路径才能确保在任何项目中都能正常使用。配置效果添加完工具之后还要去添加智能体输入对话AAASwagger专家请阅读文档给输出文档的大致内容、文档的大小没问题的话就是完全跑通了三、不断调整确认流程能跑通之后专注工具的开发。工具开发的核心思路就是让 Trae 能够“理解”你的 API 接口数据结构再建一个swagger-reader-test.js文件用控制台测试输出的文本这样就不需要老是切项目这个“翻译”过程可以让 AI 反复修改一直到能让它无论复制哪个接口什么请求请求参数含有对象嵌套对象、响应体含有对象嵌套对象再嵌套对象也能列出前端开发所需要的数据效果示例请求参数是一个对象这个对象嵌套了对象接口文档不论 yapi 还是 swagger还是apifox 一般都能将文档导出为 json 格式输入对话AAASwagger专家请阅读文档当前请求接口名称是什么需要什么请求参数是什么contenttype对话效果这里完全是一一对应的没有错别字再多训练训练让它把字段处理一下开发也能更高效。甚至也能让它可视化输出让上面返回的接口信息搭配组件一起使用。比如 xxx列表接口信息转成Ant Design Vue 表格组件所需的列配置其它的 Descriptions 描述列表组件也行进阶如果还想提高效率可以配置单个项目的规则。不清楚别的IDE有没有这个功能反正在Trae IDE中项目规则的意思是在项目中创建 .trae/rules/project_rules.md 文件定义 TRAE 在当前项目中对话时需要遵循的规则。就是一个 Markdown 文件比如让它把接口加在src\api\urls.js文件上输入对话AAASwagger专家你已经把文档解析的特别棒了。我第一次用Trae IDE我想知道project_rules.md这个rules我该怎么写 需求现在读取解析文档做得特别好但是我得把解析完的东西放在我的项目代码上比如当前的接口“/ut/lock/add” 接口判断有没有存在src\api\urls.js的 rfidUrl 上没有的话要帮我加上去顺便要加一条中文注释在上方 我想把上面的需求固定成一句话我怎么去写project_rules.md这个文件继续训练让它判断重复的同时告诉我哪里重复对话继续优化规则文档有些场景比如“AAASwagger专家给我返回请求参数并且把接口信息添加到 projectUrl 上”, 但是 lockUrl 已存在了这个接口这时候你要跟我说“不允许添加在projectUrl 在 lockUrl 存在接口。请不要重复添加请引用 lockUrl ”最终的Trae Rules 规则示例总结AI 就是一张白纸需要很细致地教它怎么读懂文档。简单它能懂但是复杂的还是要疯狂写注释让它读懂输出过程中如果它犯错要纠正然后优化项目规则让它永远记住很好今天周五祝大家训“狗”愉快