vue編寫的功能強大的swagger-ui頁面及使用方式

2022-02-08 19:00:09

think-swagger-ui-vuele

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

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

此專案模組依賴於think-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設定的相關資訊在此處進行展示

到此這篇關於vue編寫的功能強大的swagger-ui頁面的文章就介紹到這了,更多相關vue swagger-ui頁面內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！