采用 Vue 编写的功能强大的 Swagger-ui 页面

àì夳堔傛蜴生んèń 2021-08-31 12:41 260阅读 0赞

点击上方 [Java后端][Java]，选择 设为星标

优质文章，及时送达

--------------------

`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进行居中，两边留白。

![format_png][]

## **主页** ##

对于我使用过的一个版本的`swagger`来说，当接口数量在`1000+`以上，会等的时间非常长，原因是他一次将所有接口数据进行解析渲染，这个就是慢的原因。

所以我将此进行优化，改为先解析出`api`摘要信息，然后在点击摘要的时候进行请求头、请求体的渲染；基本可以做到秒开

可以自动填充非`json`请求体的数据，采用的是`mock.Random`。

对于json请求体的数据，可以进行`json`格式化编辑，也是非常方便。`json`在线格式化编辑使用的是`josdejong`大神的`jsoneditor`

对于响应数据直接采用`json`格式化组件进行格式化展示，支持展开层级。再也不用将返回的数据在去找相关的`json`格式化工具进行格式化了。格式化控件采用的是`chenfengjw163`大神的`vue-json-viewer`

![format_png 1][]

![format_png 2][]

![format_png 3][]

![format_png 4][]

**设置**

在后端api请求的时候，一般都会在请求头中带一些token的验证，来进行用户标识，所以在设置中，进行了自定义请求头的设置，可以方便的设置相关的请求头,在任何一个请求都会自动带上设置的请求信息。

![format_png 5][]

## **swagger 信息展示** ##

来源于后端swagger配置的相关信息在此处进行展示

![format_png 6][]

--------------------

\-END-

如果看到这里，说明你喜欢这篇文章，请 转发、点赞。同时 标星（置顶）本公众号可以第一时间接受到博文推送。

**推****荐****阅****读**

***1. ***[永远不要在代码中使用「User」这个单词！][User]

***2. ***[Nginx + Spring Boot 实现负载均衡][Nginx _ Spring Boot]

***3.*** [IntelliJ IDEA 玩不溜？][IntelliJ IDEA]

***4. ***[为什么你的 IntelliJ IDEA 没有别人的好用？][IntelliJ IDEA 1]

![format_png 7][]

最近整理一份面试资料**《Java技术栈学习手册》**，覆盖了Java技术、面试题精选、Spring全家桶、Nginx、SSM、微服务、数据库、数据结构、架构等等。

获取方式：点“ **在看**，关注公众号 **Java后端** 并回复 **777** 领取，更多内容陆续奉上。

**喜欢文章，点个在看** ![format_png 8][]

[Java]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0da17bf97a286df119047a25b7de51621fe542816673bb4aa3ebd8ab97b09a86ed7db2e2ee&idx=3&mid=2247489272&scene=21&sn=ce74938072fc73a808d83ccb474db46d#wechat_redirect
[format_png]: /images/20210730/cd551f3683094ef48bfcccad6de9ce39.png
[format_png 1]: /images/20210730/928a972ab5714752bd7774d877b74a88.png
[format_png 2]: /images/20210730/9a65d00306e144db9a3baffd1f0c52f1.png
[format_png 3]: /images/20210730/cfa36d3fdb7b455185c00bf0b238a949.png
[format_png 4]: /images/20210730/8ef5bd1ef7ee4f8bb09dc32c31574eda.png
[format_png 5]: /images/20210730/9c095fbb560040f68508bbed370e0eff.png
[format_png 6]: /images/20210730/0dce230b455d41e2868d7c606b5e52a7.png
[User]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e4ed5f979c7c30c3549a21685cda2dbbfd6ae0cc248a4eb4c2a98c3e08c966b0ee3cba016&idx=1&mid=2247498070&scene=21&sn=affcf9b1423f581736ec6690200243c9#wechat_redirect
[Nginx _ Spring Boot]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e4ed5f979c7c398fd8fff6a7c300249bf05ac3847b9d1e27f4b39ee0e082c7822b17f7e86&idx=2&mid=2247498070&scene=21&sn=62f8c8ab279d28e4f9c359f898eb5779#wechat_redirect
[IntelliJ IDEA]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e4eb6f979c7a0fb7ef0dc4221b2ab247304f203157944800bb00ac6122b088cb48e2898ec&idx=2&mid=2247498037&scene=21&sn=a1b883509ed5c737aefa41e071d18238#wechat_redirect
[IntelliJ IDEA 1]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e4f15f979c603328a1095291ed8888437af33c293111ad5e72ed9b7944073d50bd1160963&idx=1&mid=2247497878&scene=21&sn=630fff1bb76c638b5336231e64a05fd7#wechat_redirect
[format_png 7]: /images/20210730/35c3eaf3295a4749aee367a97bda2b9c.png
[format_png 8]: /images/20210730/3601d245cf53425695ae697158cff2b9.png