vue3+ts实战开发之swagger自动生成（一）

置顶槿畔

已于 2022-05-29 14:55:23 修改

阅读量1.7w

点赞数 5

分类专栏： # vue3从0到1 文章标签： ts vue3 vue3+ts swagger

于 2022-04-24 12:22:28 首次发布

本文链接：https://blog.csdn.net/qq_40513881/article/details/124378026

版权

vue3从0到1 专栏收录该内容

13 篇文章 6 订阅

订阅专栏

前几个月，小编的团队准备开始技术尝新，决定使用vue3+vite+ts来进行项目开发，今天讲述的便是一个其中一个核心重点-api的interface定义。

一.接口该怎么管理？

之前我们聊过，关于接口，在我这里更偏向于统一管理，接口层能够统一的进行声明，还没看过的同学可以挪步前端项目的接口管理方案，但是尽可能是自动化的，而不是前端同学对着文档一个一个手动接入的，那么js开发的项目还好说，在我们以往的项目中只需要定义url和method请求方式就可以了，但是ts中，需要声明的接口请求类型和接口响应参数那么多，我们又该如何处理。

二.ts中，接口这么多怎么更友好的进行请求响应参数的类型声明？

核心思想
通常的我们对应的后端都会有一套api文档，今天的文章主要就是以swagger为例进行讲解swagger能在接口文档上完整的显示出请求url、请求method、请求头header、requrest参数、response响应结果，那么，必然我们就能通过这些信息生成一个我们需要的请求文件。
版本管控
整体将采用npm的管控方式
优先建议集成到后端服务中，即后端发布文档即更新文件,我们这里是写了一个前端cmd命令手动控制的脚本。

npm仓库
然后对应的项目安装对应的版本依赖即可拿到对应的代码

git本地code到底应该生成哪些内容
首先对这块进行设计考虑时，一般是3个因素：

一个是请求参数和响应参数的类型interface接口定义
另外一个就是生成对应的请求ts文件
不同服务之间的拦截如何进行统一处理

├── user-api            // API服务
│   ├── swagger-api		//生成的api内容集合
│   │   └── index.ts
│   ├── swagger-utils   //生成的类型声明集合
│   │   └── index.ts
│   ├── main.ts //入口文件

生成的文件展示

// filePath: user-api/swagger-api/index.ts

import * as types from './../swagger-utils/index'
import { HttpRequest } from './../main'  

type integer = number  


/**
 * 创建审批流
 */
export const createAuditConfigUsingPOST = (data: types.CreateAuditConfigVO) => {
  return HttpRequest().$post<types.PageUcAuditConfig>({
    url: '/diap-uc/v1/auditConfig/createAuditConfig',
    data: data
  })
}

// filePath: user-api/swagger-utils/index.ts

type integer = number

/**
* 创建审批流
*/
export interface CreateAuditConfigRoleVO {
  flowOrder?: integer;// 审批流节点排序
  roleId?: number|string;// 角色ID 
}


/**
* 创建审批流
*/
export interface CreateAuditConfigVO {
  createAuditConfigRoleList?: CreateAuditConfigRoleVO[];// 角色节点列表
  name?: string;// 审批流名称
  remark?: string;// 备注 
}

项目中的使用方式

	"@yh-swagger/business-api": "^1.0.5",
    "@yh-swagger/resource-api": "^1.0.8",
    "@yh-swagger/template-api": "^1.0.4",
    "@yh-swagger/user-api": "^1.0.34"

// 引入
import { Api, types } from '@yh-swagger/user-api'
// 使用
Api.selectAllRoleUsingPOST({ name: searchName.value }).then(res=>{
	console.log(res)
})

以上是整体的开发和使用思路，可以帮助开发者减少接口调用，类型使用，一切都是采用的自动化生成+npm版本管理，你get到了吗，有的同学可能还是比较好奇，main.ts中做了哪些逻辑，分散在不同npm上的api服务，axios怎么做到统一拦截处理的，我们在下一篇再进行详细说明。
挪步vue3+ts实战开发之swagger自动生成工具开发（二）

开源git：swagger-ts-api

希望大家点个star，谢谢