[解放双手]用过都觉得好用的工具 🙌

625 阅读2分钟

这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

继上一篇前端摸鱼系列,上次时间发文的时间有点匆忙,这次补一下生成器的大致用法以及业务场景

image.png

上周发布完,下载量说多不多说少不少,我觉得还是有必要把工具的详细用法以及场景给列一下,

业务场景

相信大部分前端小伙伴在工作中用到了ts了,当你在对接后端接口的时候,需要把后端写好接口把请求参数,返回值,请求头等,需要把接口的数据类型定义好,这个工具就是可以根据文档自动生成数据类型、调用方法、接口地址、axios封装

如果你的项目是新项目并且准备对接后端文档,那么恭喜你,你可以省去一大部分的时间,因为工具是生成一整套的接口服务

如果是uni-app,咱们也通过uni-request封装了一套接口服务

上一篇文章中没有列出工具的使用说明,这篇文章会在这里讲解工具的使用说明

生成条件:

  1. 导入swaggerAPI 2.0 , swaggerAPI 3.0 版本的JSON文件

使用步骤:

一. 导出swaggerJSON
  1. Swagger

文档顶部有个地址,复制到浏览器打开,然后把里面的内容复制下来,保存成一个json文件

image.png

  1. YAPI 数据管理,数据导出,点击导出即可 image.png

二. 安装

npm install -g api2code

三. 生成

这里可以通过命令生成uni-app、ts的接口服务

TS

api2code generator axios ./swaggerApi.json

uni-app

api2code generator uniapp ./swaggerApi.json

./swaggerAPi.json是刚刚导出的文件

目前只支持swagger2.0,swagger3.0的json文件,如果需要支持其他文件可以私信我哦

生成完毕

文件目录

httpApi.ts文件

image.png

其实你只需要看这个文件就可以了,因为调用的时候只需要引入这个文件并且调用其方法即可,


这篇文章主要是补充上篇文章有描述的不清楚的地方,可能还有部分人不知道这个到底怎么去用,

github github.com/Muffin-Man0…

如果喜欢的话麻烦给个赞+关注哦,感谢支持