Swagger2 前端对接接口代码生成

后端提供了swagger文档的情况下，前端可以通过一个命令行自动生成接口代码，不必一个个写。适用于接口很多的情况。

环境

vue2 + ts + axios
axios的拦截器定义在/src/api中，提前定义好，会被引用到（不要改变位置）。

准备

1. 安装依赖

npm install --save swagger-schema-official swagger2openapi eta

npm install --save-dev @types/swagger-schema-official

如下图： 

 2. 导入interface文件夹（资源文件已上传）

将整个interface文件夹放到src根目录下

 修改interface文件夹下的apiUrl.js文件中的BASE_URL， 为swagger文档的地址

 3. 项目根目录下添加generate.js文件（已上传）

无需修改文件内容

 4. package.json中添加生成代码的命令

"generate": "node generate.js"

 到这边，准备工作就完成，下面就可以愉快的使用命令行了。

使用

执行命令：

npm run generate

即可生成所有接口的代码。生成的文件位于/interface/service-proxies目录下,生成的文件为ts文件，包含了出入参的类型定义，调用接口时可以直接查看，非常方便。

 vue文件中使用生成的接口

这样就完成了接口的使用。

但是每个文件中要使用接口都需引入一遍接口文件。略微繁琐，当接口很多的情况下（如下图），可以在同一个文件导出所有接口并使用。

 方式二：在/src/api/目录下新增index.ts文件用于导出所有接口

 使用时，每个文件中引用一下index.ts文件即可

 这种引用方式更为轻便，当想要查看接口有哪些入参时，通过编辑器的快捷定位，点击方法名称即可直接跳转到接口定义的地方。

资源地址：

前端接口代码生成工具，解压后放到vue项目对应的目录中，按提示修改部分地方即可使用-Typescript文档类资源-CSDN下载