采用 Vue 编写的功能强大的 Swagger-ui 页面
点击上方 好好学java ,选择 星标 公众号
重磅资讯、干货,第一时间送达今日推荐:2020年7月程序员工资统计,平均14357元,又跌了,扎心个人原创100W+访问量博客:点击前往,查看更多
swagger-ui
有非常多的版本,觉得不太好用,用postman
,每个接口都要自己进行录入。所以在基于think-vuele
进行了swagger
格式json
的解析,自己实现了一套swaggerui界面。
swagger分为后端数据提供方方和前端页面展示请求方。从一定角度来看,swagger是一种标准的数据格式的定义,对于不同语言进行实现一些注解API式的东西,能快速生成这种描述restful
格式的api
信息的json
串.
此项目模块依赖于 think-vuele
demo:http://sw.tennetcn.com
github:
https://github.com/chfree/think-swagger-ui-vuele
使用方式
自行下载编译
// 下载代码
git clone https://github.com/chfree/think-swagger-ui-vuele// 安装依赖
npm install// 直接运行
npm run dev// 打包
npm run build
java项目 maven直接依赖
<dependency><groupId>com.tennetcn.free</groupId><artifactId>think-swagger-ui-starter</artifactId><version>0.0.4</version>
</dependency>
此jar包的开源项目为think-free-base
中的子项目模块
登陆
登陆界面分为json
模式和swagger
请求地址访问,没多大区别,只有拿到标准的swagger
的json
数据即可。
支持两种主题,一种是后端管理系统模式的主题。另外一种也是类似,中间1024px进行居中,两边留白。
主页
对于我使用过的一个版本的swagger
来说,当接口数量在1000+
以上,会等的时间非常长,原因是他一次将所有接口数据进行解析渲染,这个就是慢的原因。
所以我将此进行优化,改为先解析出api
摘要信息,然后在点击摘要的时候进行请求头、请求体的渲染;基本可以做到秒开
可以自动填充非json
请求体的数据,采用的是mock.Random
。
对于json请求体的数据,可以进行json
格式化编辑,也是非常方便。json
在线格式化编辑使用的是josdejong
大神的jsoneditor
对于响应数据直接采用json
格式化组件进行格式化展示,支持展开层级。再也不用将返回的数据在去找相关的json
格式化工具进行格式化了。格式化控件采用的是chenfengjw163
大神的vue-json-viewer
设置
在后端api请求的时候,一般都会在请求头中带一些token的验证,来进行用户标识,所以在设置中,进行了自定义请求头的设置,可以方便的设置相关的请求头,在任何一个请求都会自动带上设置的请求信息。
swagger 信息展示
来源于后端swagger配置的相关信息在此处进行展示
最后,再附上我历时三个月总结的 Java 面试 + Java 后端技术学习指南,笔者这几年及春招的总结,github 1.4k star,拿去不谢!
下载方式
1. 首先扫描下方二维码
2. 后台回复「Java面试」即可获取
采用 Vue 编写的功能强大的 Swagger-ui 页面相关推荐
- vue 根据swagger 生成接口_采用vue编写的功能强大的swagger-ui页面
think-swagger-ui-vuele swagger-ui有非常多的版本,觉得不太好用,用postman,每个接口都要自己进行录入.所以在基于think-vuele进行了swagger格式js ...
- 一款vue编写的功能强大的swagger-ui,有点秀(附开源地址)
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 作者:RegicideGod cnblogs.com/Regici ...
- Swagger - 魔改版本的 bootstrap swagger UI 页面 ,springboot 集成
文章目录 Swagger - 魔改版本的 bootstrap swagger UI 页面 ,springboot 集成 1.快速开始 2.编写配置类 3.访问地址 4.权限相关 5.404 问题解决 ...
- swagger怎么看接口数量_vue编写的功能强大的swagger-ui
swagger-ui有非常多的版本,觉得不太好用,用postman,每个接口都要自己进行录入.所以在基于think-vuele进行了swagger格式json的解析,自己实现了一套 swaggerui ...
- Springdoc Swagger UI集成OAuth2认证
目录 引言 方式1:Bearer Token 方式2:标准OAuth2授权码流程 方式3:集成OIDC发现端点 扩展:同时支持多种认证方式 引言 之前的文章讲过OAuth2体系,以授权码流程为例(参见 ...
- 扔掉Swagger,试试这款功能强大,零注解侵入的API接口文档生成工具!
欢迎关注方志朋的博客,回复"666"获面试宝典 介绍 smart-doc是一款同时支持JAVA REST API和Apache Dubbo RPC接口文档生成的工具,smart-d ...
- 【Rust日报】2021-12-14 Lapce: 用Rust编写的闪电般快速且功能强大的代码编辑器
Lapce: 用Rust编写的闪电般快速且功能强大的代码编辑器 Lightning-fast and Powerful Code Editor written in Rust Lapce完全是用Rus ...
- 【Web安全】一款功能强大的Web身份认证测试框架
关于Raider Raider是一款功能强大的Web身份认证测试框架,该框架被设计用来测试Web应用程序的身份认证机制.虽然像ZAProxy和Burpsuite这样的Web代理工具同样可以允许研究人员 ...
- AntiSpy:一款功能强大的反病毒反Rootkit免费工具套件
AntiSpy是一款免费但功能强大的反病毒与反rootkit工具套件,该工具可以给安全研究人员提供最高级别的权限来帮助我们检测.分析和恢复各种内核修改以及钩子设置.这样一来,在AntiSpy的帮助下, ...
最新文章
- CF919D Substring (dag dp)
- python自学流程-Python系统学习流程图,教你一步步学习python
- Transient关键字的使用
- 计算机视觉与深度学习 | TensorMask: A Foundation for Dense Object Segmentation(何凯明团队新作)近5年目标检测综述
- OpenGL使用计算着色器进行布料模拟
- 10 张令人喷饭的程序员漫画
- Linux学习笔记---烧写bin文件分析
- IDEA+SpringBoot+Dubbo在webapp下创建前端页面
- java kafkastream_手把手教你写Kafka Streams程序
- 单片机课程设计音乐盒c语言,单片机课程设计《数字音乐盒的设计》
- 【科研作图】软件推荐资源汇总PPT瑞思拜!
- python连接高斯数据库_高斯数据库 (gaussDB) - 连接数据库(6)
- 巧用Python爬取QQ空间好友信息,生成词云
- Continued Fraction(https://acs.jxnu.edu.cn/problem/ICPCJX2021B)
- 全国身份证身份数据库sql(2021最新)
- 通过css实现对勾(√)和叉号(×)
- 【TMT数据传不到MES中间库】-F18
- 解决订单收据编号的累加问题。格式 D0000001;java+ mysql
- QByteArray 转为 int 详细说明
- 网页主体格式转换神器
热门文章
- border-radius的使用 css样式
- 导入新的一个android项目抱错
- C++中Delete时堆错误(Heap Corruption)的原因
- MATLAB之简谐信号声音的生成及其调制性
- 区块链BaaS云服务(17)纸贵科技Zeus多链网络Z-Ledger联盟链
- java元婴期(26)----java进阶(mybatis(5)---spring和mybatis整合(重点)逆向工程(会用))
- 设计模式(二)————观察者模式
- 12- Library at ROM
- 汽车开放系统架构(AUTOSAR)简介
- [私]-optee的同步方法