Home

Awesome

基于vue3实现的SwaggerUI

vue3的源代码仓库： https://github.com/NoBugBoy/LuckyUI 欢迎贡献代码。

它目前仅仅是一个皮肤，但是未来会走两条路线，第一条是单纯的ui，另外就是与 YDoc一款支持Swagger和YApi的文档生成器 集成实现更多实用的功能。

不要拦截如下资源:

  1. /doc.html
  2. /assets/*

使用时感觉不适可以提issues，每天都会看，看到会解决。

引入如下依赖，替换swagger-ui或swagger-bootstrap-ui即可

  <dependency>
         <groupId>com.github.nobugboy</groupId>
         <artifactId>lucky-ui</artifactId>
         <version>release-1.0.2</version>
  </dependency>

github

https://github.com/NoBugBoy/YdocLuckyUi

哔哩哔哩

https://www.bilibili.com/video/BV1SM4y1c7fE/

预览（我这里只展示了黑天模式，还有白天模式）

又改了一版，快ok了

1. 主页（深色）

image.png

2. api侧边栏

1. 父级携带了内部api的数量,内部使用请求类型分组，更直观。

2. 标题过长，鼠标浮动上会展示全部内容

3. 分组的http method加了渐变色并区分颜色，比灰色更容易识别

image.png

4. 父级标题过长会挡住显示数量的组件，本来是想放左边但是太丑，就给渲染到了弹出后的组件里

image.png

3. 收起侧边栏

收起了侧边栏后，鼠标悬浮依然会弹出api分组，点击打开标签页

image.png

4. 文档页

所有json编辑框都有格式化和折叠功能,方便复制,放大缩小方便观看

image.png

5. 返回值

类型高亮，如果字段名包含id,Id会被高亮显示为红色，新增了快速复制字段名的按钮（节省手动复制时间0.8秒）

image.png

6. 返回值示例

自动展开到二级json，剩下需要手动点，防止展开太多看着累，代码已经留了位置，后续会上mock.js

image.png

7.运行（调试）

image.png

image.png

image.png

8. 保存请求用例

1. 这个功能主要是记录当时的请求参数（含request body），并选择返回状态标签，记录到本地缓存中，方便下次自动使用该参数

2. 出问题的请求直接记录，等后端通知你改好后 直接选择刚才的请求用例再次查看结果

image.png

3. 弹出抽屉保存本次请求用例

image.png

9. 使用请求用例

1.开启选择请求用例按钮后，会弹出一个下拉选择框，该下拉框内为该api对应保存的请求用例

image.png

2. 选择刚才保存的用例，选择前参数是空的

image.png

3. 选择完成后自动覆盖参数，会有message提示我就没截图

image.png

10. 管理请求用例

1.点击管理请求用例就会进到管理页面主要是可以直接复制json格式的param和body参数，也是删除请求用例的地方

image.png

2. 防止太多用例一个一个删太麻烦 我还提供了一个 [ 优雅的 ] 快速清理方案

image.png

3. 没有请求用例时

image.png

4. 分享、编辑 md格式离线文档

image.png

image.png

10. 补一张浅色主题的效果

image.png