首页 前端知识 读取swagger接口文档、自动生成前端ts或js代码

读取swagger接口文档、自动生成前端ts或js代码

2024-04-20 17:04:55 前端知识 前端哥 253 334 我要收藏

目录

  • 依据 swagger(openapi) 文档一键生成 typescript 或 javascript 代码
    • 先上效果图
    • 1.安装脚手架
    • 2.打开你的项目
    • 3.运行命令
        • 3.1 ts代码
        • 3.2 js代码
    • 4. 实战操作
      • 4.1运行命令
        • ts代码
        • js代码

依据 swagger(openapi) 文档一键生成 typescript 或 javascript 代码

平时在和后端对接时,总是要把后端swagger声明好的类型在ts中再实现一遍,写一堆interface;今天推荐一个库,可以根据swagger文档,直接生成ts 或 js代码,并且有良好的代码提示

注意:swagger文档版本需要3.0及以上

先上效果图

swagger文档
在这里插入图片描述

已生成的代码

1.安装脚手架


npm i -g @zeronejs/cli

2.打开你的项目

我这里快速创建下


npm ini -y

然后创建一个swagger.config.json文件

配置示例:


{
   "docsUrl": "http://www.example.com/v3/api-docs",
   "axiosInstanceUrl": "axios"
}

示例

其中docsUrl指的是swagger页面上json链接地址

swagger文档

json地址

当然你也可以指定本地json文件

示例

3.运行命令

3.1 ts代码

zerone api

3.2 js代码

生成js依赖于axios,请先安装axios


npm install axios

zerone api -js

image

代码已生成!执行成功!!

4. 实战操作

通常我们的项目并不在根目录,稍微修改下…

我们把swagger.config.jsondocs.json 放在 /src/api 下,如果需要创建axios实例的话,axiosInstanceUrl换成实例的地址

image

4.1运行命令

ts代码

zerone api -p ./src/api

js代码

zerone api -js -p ./src/api

image

生成成功!

由于也自动生成了相应的declare文件,所以就算是js也会有很好的代码提示

image

完整demo代码:https://gitee.com/zzh948498/swagger-to-ts

官方文档地址:zeronejs (ps: 文档目前挂载在github上)

源码地址:https://github.com/zeronejs/zerone

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5473.html
标签
json
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!