vue3+ts实战开发之swagger自动生成工具开发（二）

在上一篇文章我们讲述了如何去管理我们实际项目中关于请求部分的接口定义和封装，更推荐的是统一化、自动化。在本文中将重点阐述前端是如何集成这类的开发工具。如果你还没预览上一篇文章，请回到上一篇点击传送

一、原理介绍

其核心原理很简单，就是把swagger.json的数据格式转化成我们需要的请求文件。所以我们只需要发送一个请求，通过nodejs的fs模块进行写入即可。
swagger.json:

二、进阶-设计成CMD命令交互式

1.推荐技术栈掌握

这里我们需要掌握几个插件库的技术栈，这也与我们通常项目脚手架生成的文件的原理一致。即：
commander:通常用来定义命令的接收参数，比如 xx --version；
download-git-repo:拉取指定项目的git地址到本地；
inquirer：通常用来做一些shell的交互；
ora：通常CMD loading；
child_process:输出shell命令

2.结果设计

我们在设计内容一定是用户思维，先定义使用方式，再倒推逻辑实现：

# 全局安装swagger-ts插件
npm i yh-swagger-ts -g
# 添加swagger api 服务
yh-swagger -a
# 更新swagger api 服务
yh-swagger -u
# 查询swagger api版本
yh-swagger -v

第一次添加时需要声明地址、文档地址、api服务名称

后续在该目录即可通过交互式命令进行选择即可

无论是第一次添加，还是后续更新，都会自动推到我们内部的npm镜像仓库，展示：

3. 过程开发

#mermaid-svg-8qxEqfpdaslEjWZ3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8qxEqfpdaslEjWZ3 .error-icon{fill:#552222;}#mermaid-svg-8qxEqfpdaslEjWZ3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8qxEqfpdaslEjWZ3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8qxEqfpdaslEjWZ3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8qxEqfpdaslEjWZ3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8qxEqfpdaslEjWZ3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8qxEqfpdaslEjWZ3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8qxEqfpdaslEjWZ3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8qxEqfpdaslEjWZ3 .marker.cross{stroke:#333333;}#mermaid-svg-8qxEqfpdaslEjWZ3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8qxEqfpdaslEjWZ3 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8qxEqfpdaslEjWZ3 text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-8qxEqfpdaslEjWZ3 .actor-line{stroke:grey;}#mermaid-svg-8qxEqfpdaslEjWZ3 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-8qxEqfpdaslEjWZ3 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-8qxEqfpdaslEjWZ3 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-8qxEqfpdaslEjWZ3 .sequenceNumber{fill:white;}#mermaid-svg-8qxEqfpdaslEjWZ3 #sequencenumber{fill:#333;}#mermaid-svg-8qxEqfpdaslEjWZ3 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-8qxEqfpdaslEjWZ3 .messageText{fill:#333;stroke:#333;}#mermaid-svg-8qxEqfpdaslEjWZ3 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8qxEqfpdaslEjWZ3 .labelText,#mermaid-svg-8qxEqfpdaslEjWZ3 .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-8qxEqfpdaslEjWZ3 .loopText,#mermaid-svg-8qxEqfpdaslEjWZ3 .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-8qxEqfpdaslEjWZ3 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-8qxEqfpdaslEjWZ3 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-8qxEqfpdaslEjWZ3 .noteText,#mermaid-svg-8qxEqfpdaslEjWZ3 .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-8qxEqfpdaslEjWZ3 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8qxEqfpdaslEjWZ3 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8qxEqfpdaslEjWZ3 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-8qxEqfpdaslEjWZ3 .actorPopupMenu{position:absolute;}#mermaid-svg-8qxEqfpdaslEjWZ3 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-8qxEqfpdaslEjWZ3 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-8qxEqfpdaslEjWZ3 .actor-man circle,#mermaid-svg-8qxEqfpdaslEjWZ3 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-8qxEqfpdaslEjWZ3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}本地git template基础模板npm执行shell脚本yh-swagger -a or yh-swagger -u使用`download-git-repo`拉去基础代码1.递归swagger.json的数据结构生成需要的ts文件和声明文件写入本地的`git template基础模板`2.如果是更新的命令即更新package.json的版本通过child_process执行shell，`cd ${apiName} && npm publish`进行发布本地git template基础模板npm

到这里前面的基本原理大家也都懂了吧，接下来说明一下 git template基础模板都有哪些内容

其实主要就是一个核心的main.ts,还一个就是readme.md文件.

readme.md文件一般是对项目进行说明的作用，这里定义了一些特殊的字符，比如@yh-swagger/xxx是用来replace替换字符说明的，还有swagger文档链接也会在这里面进行替换。

main.ts主要就是用来接收axios实例，暴漏模版中api和type类型的作用。因为生成的ts请求文件中不能各自引入axios请求方法，否则的话，一些请求拦截，统一的请求处理就会有问题。因此，设计上我们希望axios是可以由项目端传输过来的。

#mermaid-svg-V2fqqy0fK1LSft88 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-V2fqqy0fK1LSft88 .error-icon{fill:#552222;}#mermaid-svg-V2fqqy0fK1LSft88 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-V2fqqy0fK1LSft88 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-V2fqqy0fK1LSft88 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-V2fqqy0fK1LSft88 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-V2fqqy0fK1LSft88 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-V2fqqy0fK1LSft88 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-V2fqqy0fK1LSft88 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-V2fqqy0fK1LSft88 .marker.cross{stroke:#333333;}#mermaid-svg-V2fqqy0fK1LSft88 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-V2fqqy0fK1LSft88 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-V2fqqy0fK1LSft88 .cluster-label text{fill:#333;}#mermaid-svg-V2fqqy0fK1LSft88 .cluster-label span{color:#333;}#mermaid-svg-V2fqqy0fK1LSft88 .label text,#mermaid-svg-V2fqqy0fK1LSft88 span{fill:#333;color:#333;}#mermaid-svg-V2fqqy0fK1LSft88 .node rect,#mermaid-svg-V2fqqy0fK1LSft88 .node circle,#mermaid-svg-V2fqqy0fK1LSft88 .node ellipse,#mermaid-svg-V2fqqy0fK1LSft88 .node polygon,#mermaid-svg-V2fqqy0fK1LSft88 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-V2fqqy0fK1LSft88 .node .label{text-align:center;}#mermaid-svg-V2fqqy0fK1LSft88 .node.clickable{cursor:pointer;}#mermaid-svg-V2fqqy0fK1LSft88 .arrowheadPath{fill:#333333;}#mermaid-svg-V2fqqy0fK1LSft88 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-V2fqqy0fK1LSft88 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-V2fqqy0fK1LSft88 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-V2fqqy0fK1LSft88 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-V2fqqy0fK1LSft88 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-V2fqqy0fK1LSft88 .cluster text{fill:#333;}#mermaid-svg-V2fqqy0fK1LSft88 .cluster span{color:#333;}#mermaid-svg-V2fqqy0fK1LSft88 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-V2fqqy0fK1LSft88 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

传输

axios项目端

user-api

test-api

template-api

这样的话，不管我每个服务是不是在一起，我也能全局共享一个axios实例了。

// filePath: user-api/main.ts
import * as types from './swagger-utils/index'
import * as Api from './swagger-api/index'
interface PostData {url: string;data?: any;
}interface Request {$get<T>(PostData:PostData):(Promise<T>) $post<T>(PostData:PostData):(Promise<T>) $delete<T>(PostData:PostData):(Promise<T>) $put<T>(PostData:PostData):(Promise<T>)
}let request:Request;
export function setRequest(requestInstant: any){request = requestInstant;
}export function HttpRequest(){return {$get: request.$get,$post: request.$post,$delete: request.$delete,$put: request.$put,}
}export type SwaggerResponse<R> = Rexport {types,Api
}

开源git：swagger-ts-api

希望大家点个star，谢谢。。。

加首页微信，进vue社区微信群～