swagger-typescript-api 简化前后端交互

24 年 10 月 26 日 星期六 (已编辑)
425 字
3 分钟

swagger-typescript-api

下载

powershell
pnpm install -g swagger-typescript-api

代码生成

powershell
pnpm swagger-typescript-api -p ../api-docs.json -o ./src --axios --modular --module-name-index 0 --single-http-client
  • -p 输入的swagger json文件路径
  • -o 输出路径
  • --axios 使用axios
  • --modular 生成模块化代码 分离http client, data constracts, 和routes,否则只会生成一个大文件
  • --module-name-index 1 分离routes,意思是按api路径.split('/')[1]拆分接口文件
  • --single-http-client 意为只有一个http客户端

执行成功后 就会有如下的文件 alt text 其中 http-client.ts是一个封装的请求类 data-contracts.ts 是所有类型的文件 比如DTO VO啥的 其他生成的文件都是后端的接口文件 根据路由分隔的 ps: 如果你生成的文件巨多巨乱 可能是因为--module-name-index 参数没有配好,这个参数是根据路由来拆分的,比如 参数为2 那么/api/v1/xx 会以xx为模块名 创建文件 内容就是这个路由下的所有接口

使用前,需要将定义好的axios实例引入

ts
// http-client.ts
import request from '../http/index'; // 导入你封装好的 Axios 实例
// ...
// 在HttpClient这个类的构造函数中,添加默认的构造器
constructor({ securityWorker, secure, format, ...axiosConfig }: ApiConfig<SecurityDataType> = {}) {
  this.instance = request; // 改动这里
  this.secure = secure;
  this.format = format;
  this.securityWorker = securityWorker;
}

使用时,需要引入两个东西

ts
// 这个是配置实例
import { HttpClient } from '../apis/http-client'
// 这个是具体的接口文件
import { User } from '../apis/User'
// 实例化接口api类
const userApi = new User(new HttpClient())

// 用的时候就有接口提示 这里的名字是后端定义的
let result = await userApi.loginUsingPost(loginForm.value)

众所周知,axios的ts支持很逆天,因此大概率需要断言 比如 取出一个token

ts
userStore.setToken((result as ResultTokenVO).data?.token as string)

文章标题:swagger-typescript-api 简化前后端交互

文章作者:Blank

文章链接:https://blankxiao.github.io/posts/%E5%89%8D%E7%AB%AF/openapi[复制]

最后修改时间:


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。