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

这篇具有很好参考价值的文章主要介绍了读取swagger接口文档、自动生成前端ts或js代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

先上效果图

swagger 生成js,前端,javascript,开发语言,typescript,json
swagger 生成js,前端,javascript,开发语言,typescript,json

swagger 生成js,前端,javascript,开发语言,typescript,json

1.安装脚手架


npm i -g @zeronejs/cli

2.打开你的项目

我这里快速创建下


npm ini -y

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

配置示例:


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

swagger 生成js,前端,javascript,开发语言,typescript,json

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

swagger 生成js,前端,javascript,开发语言,typescript,json

swagger 生成js,前端,javascript,开发语言,typescript,json

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

swagger 生成js,前端,javascript,开发语言,typescript,json

3.运行命令

3.1 ts代码

zerone api

3.2 js代码

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


npm install axios

zerone api -js

swagger 生成js,前端,javascript,开发语言,typescript,json

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

4. 实战操作

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

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

swagger 生成js,前端,javascript,开发语言,typescript,json

4.1运行命令

ts代码

zerone api -p ./src/api

js代码

zerone api -js -p ./src/api

swagger 生成js,前端,javascript,开发语言,typescript,json

生成成功!

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

swagger 生成js,前端,javascript,开发语言,typescript,json

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

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

源码地址:https://github.com/zeronejs/zerone文章来源地址https://www.toymoban.com/news/detail-635967.html

到了这里,关于读取swagger接口文档、自动生成前端ts或js代码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • postman自动生成接口文档

     点击:  会自动生成一个文件夹    点击图表,修改名字 新建一个请求,到时候会自动保存到文件夹里面,但是保存前看清楚保存的名字    点击三个点-》点击export即可

    2024年02月11日
    浏览(47)
  • Python自动化测试——在线生成接口文档

    目录 前言 API 文档导入生成 在项目详情页点击左侧 API 功能,进入 API 管理页面,直接点击下拉框选择导入 API  自动生成文档 通过使用接口文档工具 Eolink 演示如何自动生成文档 使用 API Factory 产品根据数据库生成 API 文档 结语 接口文档是项目开发中必需的说明文档,接口文

    2024年02月07日
    浏览(55)
  • 【Apifox Helper】自动生成接口文档,IDEA+Apifox懒人必备

    🍊缘由 接口文档对接爽,整理起来真费脑 对于 整理API文档 ,本狗秉承偷懒为上的原则,想找一种 在IDEA中直接生成文档 的方法。 Apifox Helper 绝绝子,只需要在 IDEA中下载插件 ,无脑配置后, 文档自动生成到Apifox ,美完美解决。并且 颜值及方便程度 绝比Swagger和postman好太

    2024年02月02日
    浏览(50)
  • 自动生成数据库设计文档,支持多数据源批量生成(Word文档)

          在做项目时通常使用PowerDesigner设计数据库,但在项目完成交付项目给客户的时候常常需要一份Word版本的数据库文档给客户,你不能指望每个客户都会用PowerDesigner,所以基于当前开发数据库生成数据库文档就是最佳选择,如果手动编写数据库文档那将是一件非常痛苦的

    2024年04月23日
    浏览(46)
  • gin中使用swagger生成接口文档

    想要使用 gin-swagger 为你的代码自动生成接口文档,一般需要下面三个步骤: 按照swagger要求给接口代码添加声明式注释,具体参照声明式注释格式。 使用swag工具扫描代码自动生成API接口文档数据 使用gin-swagger渲染在线接口文档页面 第一步:添加注释 在程序入口main函数上以

    2024年01月25日
    浏览(40)
  • Mongodb 集合插入文档自动生成ObjectId

    Mongodb 使用以下几种方法来插入文档 , Mongodb V5.0+ 使用 mongosh 客户端: 插入单个文档 db.collection.insertOne() 将单个 文档插入到集合中。 如果该集合当前不存在,则插入操作将创建该集合。 如果文档未指定_id字段,则将在插入之前 mongod 添加该字段并为文档_id分配唯一的字段

    2024年02月12日
    浏览(45)
  • Apikit 自学日记:自动生成 API 文档

    功能入口 :API管理应用 / 选中某个项目 / 其他菜单 / 数据源同步(API文档自动生成) 该功能可通过配置数据源信息,实现基于数据源的API信息自动生成API文档。 当前支持5种数据源: Swagger URL、apiDoc、Github、gitlab、码云 。 Swagger URL和apiDoc的数据源配置方式一致,仅需填写来

    2024年02月11日
    浏览(48)
  • word文档批量生成工具(附免费软件)(按Excel表格内容自动替换内容生成文档)

    批量生成word文档是让人无比厌恶但有时又不得不做的事情。比如学校要给拟录取的学生发通知书,就可能需要批量生成一批只有“姓名”、“学院”和“专业”不同,其他内容都相同的word文档以供打印(事实上直接生成pdf是更好的选择,这个以后有心情可以弄一下)。 要实

    2024年02月11日
    浏览(47)
  • SpringBoot使用Swagger2生成接口文档

            通过一下配置,将Swagger2自动配置进SpringBoot中             通过@Api注解和@ApiOperation注解说明模块作用及接口说明。         通过访问路径http://localhost:8088/doc.html,说明一下8088是我SpringBoot的端口号,你们填你们自己的,不同版本的Swagger访问的路径是不一样的。

    2024年01月25日
    浏览(42)
  • 【easytestapi,文档即测试,自动生成测试用例】

    个人编写的一个开源测试工具,GitHub - easytestapi/easytestapi: 生产力!!! 目前主要用户接口功能自动化测试,其核心思想是文档即测试。 文档是接口文档。通过我定义的标准化的接口文档,可生成测试用例,也可直接执行测试。 目前没有可视化,独立一人编写。希望有兴趣的

    2023年04月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包