顏值絕絕子的 swagger-ui

think-swagger-ui-vuele

swagger-ui有非常多的版本，覺得不太好用，用postman，每個接口都要自己進行錄入。所以在基于think-vuele進行了swagger格式json的解析，自己實現(xiàn)了一套swaggerui界面。

swagger分為后端數(shù)據(jù)提供方方和前端頁面展示請求方。從一定角度來看，swagger是一種標準的數(shù)據(jù)格式的定義，對于不同語言進行實現(xiàn)一些注解API式的東西，能快速生成這種描述restful格式的api信息的json串.

此項目模塊依賴于think-vuele

demo：http://sw.tennetcn.com

github：https://github.com/chfree/think-swagger-ui-vuele

使用方式

自行下載編譯

Copy//?下載代碼
git?clone?https://github.com/chfree/think-swagger-ui-vuele

//?安裝依賴
npm?install

//?直接運行
npm?run?dev

//?打包
npm?run?build

java項目 maven直接依賴

Copy<dependency>
??<groupId>com.tennetcn.freegroupId>
??<artifactId>think-swagger-ui-starterartifactId>
??<version>0.0.4version>
dependency>

此jar包的開源項目為think-free-base中的子項目模塊

登陸

登陸界面分為json模式和swagger請求地址訪問，沒多大區(qū)別，只有拿到標準的swagger的json數(shù)據(jù)即可。

支持兩種主題，一種是后端管理系統(tǒng)模式的主題。另外一種也是類似，中間1024px進行居中，兩邊留白。

主頁

對于我使用過的一個版本的swagger來說，當接口數(shù)量在1000+以上，會等的時間非常長，原因是他一次將所有接口數(shù)據(jù)進行解析渲染，這個就是慢的原因。

所以我將此進行優(yōu)化，改為先解析出api摘要信息，然后在點擊摘要的時候進行請求頭、請求體的渲染；基本可以做到秒開

可以自動填充非json請求體的數(shù)據(jù)，采用的是mock.Random。

對于json請求體的數(shù)據(jù)，可以進行json格式化編輯，也是非常方便。json在線格式化編輯使用的是josdejong大神的jsoneditor

對于響應(yīng)數(shù)據(jù)直接采用json格式化組件進行格式化展示，支持展開層級。再也不用將返回的數(shù)據(jù)在去找相關(guān)的json格式化工具進行格式化了。格式化控件采用的是chenfengjw163大神的vue-json-viewer

設(shè)置

在后端api請求的時候，一般都會在請求頭中帶一些token的驗證，來進行用戶標識，所以在設(shè)置中，進行了自定義請求頭的設(shè)置，可以方便的設(shè)置相關(guān)的請求頭,在任何一個請求都會自動帶上設(shè)置的請求信息。

swagger 信息展示

來源于后端swagger配置的相關(guān)信息在此處進行展示

干掉Random：這個類已經(jīng)成為獲取隨機數(shù)的王者
Java中clone( )和new效率哪個更高？
JetBrains 推出“下一代 IDE”，快看看有哪些值得期待的功能！
為什么不建議你使用實數(shù)作為 HashMap 的key？
牛了！通過 Java 技術(shù)手段，獲取女朋友定位地址...
最近面試BAT，整理一份面試資料《Java面試BATJ通關(guān)手冊》，覆蓋了Java核心技術(shù)、JVM、Java并發(fā)、SSM、微服務(wù)、數(shù)據(jù)庫、數(shù)據(jù)結(jié)構(gòu)等等。
獲取方式：點“在看”，關(guān)注公眾號并回復(fù)?Java?領(lǐng)取，更多內(nèi)容陸續(xù)奉上。
文章有幫助的話，在看，轉(zhuǎn)發(fā)吧。
謝謝支持喲 (*