chudequan8 / nextjs-learning

一个Swagger文档转Typescript请求方法工具

使用方法

一、输入在线Swagger文档地址/选择本地Swagger文档上传 二、填写参数配置

1. 输入接口文档API path的根路径，默认是'/'
2. 选择接口模块路径（因为本工具是根据模块生成对应请求方法的，所以该项必填）
3. 输入要忽略的全局基础类型，默认为空 三、点击下一步生成对应请求方法和ts定义

待开发功能

• 支持swagger文档上传
• 支持请求方法和ts定义文件下载
• 请求参数支持formData类型
• 特殊类型（Map、JSONObject等）处理）
• 枚举根据描述通过gpt生成对应类型
• required 字段处理
• 优化泛型类型生成
• 合并3.0和2.0版本
• 未转换成功的api给出提示
• 添加可选生成js请求方法，兼容不支持ts的项目
• returnType应该放在泛型父类，不要放子类对象里面
• 专门做一个接口文档管理的菜单

本地开发

1. pnpm install
2. pnpm run dev
3. 浏览器打开 http://localhost:3000/dashboard/swagger

描述

1. 通过在线swagger文档地址或者解析本地上传swagger文件，获取接口文档JSON
2. 根据配置信息baseUrl + moduleName从JSON中过滤出对应模块下的所有接口信息
3. 遍历接口信息生成对应的路径、方法、描述、请求schema和返回schema 3.1 请求规则又涉及到请求参数位置，path | query | body，用一个Map分别存放对应的参数 3.2 规则解析的时候有的schema是引用类型的，需要找到实际的schema，并且找过的schema需要缓存起来，避免重复解析以及引用自身造成死循环。 3.3 有的schema是嵌套类型的，需要递归解析 3.4 有的schema的name后端偷懒，返回中文或者有特殊符号，ts解析会失败，所以这边在解析的时候缓存一下，后面用gpt翻译成对应的英文。 3.4 有的schema是泛型类型的，由于并未指定泛型参数是泛型类型的哪个字段引用，所以此处参考react wookloop，用一个全局变量当前泛型参数名，递归遍历时判断是否处于泛型遍历中，设置匹配上的字段的类型是泛型。 3.4.1
4. 对于 3.4 中缓存过的name，通过gpt统一翻译成对应的英文名称。
5. 遍历第三步生成的接口信息，生成对应的请求方法 5.1 如果存在path中的参数，从api的path中找到参数，替换成对应的变量，并push到payload数组中。 5.1 如果存在query中的参数，遍历解析对应的参数并用params字段接收，并push到payload数组中。 5.2 如果存在body中的参数，遍历解析对应的参数并用data字段接收，并push到payload数组中。 5.3 遍历返回schema，如果是泛型类型的，则需要从后到前依次出栈，添加括号并拼接。 5.4 通过prettier工具选择typescript解析器生成对应的请求方法字符串。 5.4 使用monaco-editor接收请求方法字符串，并渲染。

为什么选nextjs这个框架

1. 文件上传解析
2. 在线swagger文档获取（跨域）
3. 后续，生成源代码，需要模板解析
4. 文件下载