Swagger转ts工具介绍-Pont

  • 背景

接口文档是前后端同学合作的有效交流媒介,但往往会存在前端同学认为后端提供的接口文档与实际情况不一致;后端同学可能会认为编写及维护接口文档会耗费不少精力;随着多个版本迭代,经常来不及更新,接口文档往往很容易就跟不上代码了诸如此类的问题。
前端项目中使用ts,最大的痛点就是类型定义成本极高,且维护成本较高。

  • 同类型工具(在服务端使用swagger工具的基础上)
  1. swagger-to-ts,swaggts等多个生成typescript interface代码的插件(简单上手好用)
    缺点:只负责ts类型代码的生成,功能较为单一
  2. Yeoman 是一个通用型代码生成器脚手架工具,可以创建特定类型的代码文件(配合swagger-2-ts即可实现接口文档转ts到接口请求代码一整套流程)
  1. 原理:基于模板
  2. 使用方式: 下载api-docs,让用户提供swagger-ui地址,然后计算出api-dos路径 解析json。根据模板生成class文件,Yeoman的模板是基于ejs。
  3. 好处:Yeoman提供了提示功能,可以定义prompts,之后通过this.props获取用户参数。方便,易上手,操作成本,学习成本较低
  1. Pont:阿里开源的一种前后端桥接工具
  1. 功能: 可以把 swagger、rap、dip 等多种接口文档平台,转换成 Pont 元数据。 Pont利用接口元数据,可以高度定制化生成前端接口层代码。 可以生成接口 mock 数据。
  2. 优点:功能丰富,社区丰富(阿里的很多大型项目已在使用),遇到问题可快速找到答案。操作简单,学习成本低。
  • pont运行介绍:
  • pont使用
  • vscode插件使用方式:(pont插件一旦检测到有效的pont-config.json文件即可启动)

安装vscode-pont插件
全局安装pont-engine
添加pont-config.json配置文件(可使用pont start命令快速生成)
vscode插件使用方式:

  1. sync:重新请求远程接口数据,计算远程与本地接口数据在接口模块和接口返回对象上的差异。
  2. all:将本地所有接口模块,接口返回对象与远程数据保持一致。 generate: 重新生成本地代码。
  3. interface:快速的接口搜索
  • 非vscode使用方式(命令行使用方式)

pont start: 生成pont-config.json
pont check:检测本地的pont-lock.json是否有缺失。
pont ls: 查看所有数据源
pont diff: 监测远程与数据源差异,选择性同步
pont scan: 扫描未使用的接口,需要配置scannedRange

注: pont-config.json主要配置:

originUrl:swagger平台提供的接口url(目前只支持swagger)
originType: 数据源接口类型(SwaggerV2)
outDir: 生成代码的存放路径,使用相对路径
templatePath: 生成接口代码的模版
mock: 是否生成mock数据。

  • 需要服务端配合:
  • 完整的注释
    • 提供非登录的swagger访问地址。
    • Swagger 必须在每个 Controller 上添加 ApiUseTags装饰器,并且在每个控制器的方法上添加 ApiOperation 装饰器 才能正确输出带 Tags 以及 operationId 的Swagger JSON。Tags 和
      operationId 是 pont 必需的。不然前端生成的pont文件没有mods。
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值