採用vue編寫的功能強大的swagger-ui頁面

think-swagger-ui-vuele

swagger-ui有很是多的版本，以爲不太好用，用postman，每一個接口都要本身進行錄入。因此在基於think-vuele進行了swagger格式json的解析，本身實現了一套swaggerui界面。

swagger分爲後端數據提供方方和前端頁面展現請求方。從必定角度來看，swagger是一種標準的數據格式的定義，對於不一樣語言進行實現一些註解API式的東西，能快速生成這種描述restful格式的api信息的json串.

此項目模塊依賴於think-vuele

demo：sw.tennetcn.com

github：github.com/chfree/thin…

使用方式

自行下載編譯

// 下載代碼
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配置的相關信息在此處進行展現