採用vue編寫的功能強大的swagger-ui頁面
阿新 • • 發佈:2020-03-30
# think-swagger-ui-vuele
`swagger-ui`有非常多的版本,覺得不太好用,用`postman`,每個介面都要自己進行錄入。所以在基於`think-vuele`進行了`swagger`格式`json`的解析,自己實現了一套swaggerui介面。
swagger分為後端資料提供方方和前端頁面展示請求方。從一定角度來看,swagger是一種標準的資料格式的定義,對於不同語言進行實現一些註解API式的東西,能快速生成這種描述`restful`格式的`api`資訊的`json`串.
此專案模組依賴於[`think-vuele`](http://vuele.tennetcn.com)
demo:[http://sw.tennetcn.com](http://sw.tennetcn.com)
github:[https://github.com/chfree/think-swagger-ui-vuele](https://github.com/chfree/think-swagger-ui-vuele)
## 使用方式
### 自行下載編譯
```shell
// 下載程式碼
git clone https://github.com/chfree/think-swagger-ui-vuele
// 安裝依賴
npm install
// 直接執行
npm run dev
// 打包
npm run build
```
### java專案 maven直接依賴
```xml
com.tennetcn.free
think-swagger-ui-starter
0.0.4
```
此jar包的開源專案為[`think-free-base`](https://github.com/chfree/think-free-base/tree/master/think-swagger-ui-starter)中的子專案模組
## 登陸
登陸介面分為`json`模式和`swagger`請求地址訪問,沒多大區別,只有拿到標準的`swagger`的`json`資料即可。
支援兩種主題,一種是後端管理系統模式的主題。另外一種也是類似,中間1024px進行居中,兩邊留白。
![swagger_login](http://bedimage.tennetcn.com/tennetcn.com/images/swagger_login.png)
## 主頁
對於我使用過的一個版本的`swagger`來說,當介面數量在`1000+`以上,會等的時間非常長,原因是他一次將所有介面資料進行解析渲染,這個就是慢的原因。
所以我將此進行優化,改為先解析出`api`摘要資訊,然後在點選摘要的時候進行請求頭、請求體的渲染;基本可以做到秒開
可以自動填充非`json`請求體的資料,採用的是`mock.Random`。
對於json請求體的資料,可以進行`json`格式化編輯,也是非常方便。`json`線上格式化編輯使用的是`josdejong`大神的[`jsoneditor`](https://github.com/josdejong/jsoneditor)
對於響應資料直接採用`json`格式化元件進行格式化展示,支援展開層級。再也不用將返回的資料在去找相關的`json`格式化工具進行格式化了。格式化控制元件採用的是`chenfengjw163`大神的[`vue-json-viewer`](https://github.com/chenfengjw163/vue-json-viewer)
![swagger_simple](http://bedimage.tennetcn.com/tennetcn.com/images/swagger_simple.png)
![swagger_edit_json](http://bedimage.tennetcn.com/tennetcn.com/images/swagger_edit_json.png)
![swagger_custom_field](http://bedimage.tennetcn.com/tennetcn.com/images/swagger_custom_field.png)
![swagger_admin](http://bedimage.tennetcn.com/tennetcn.com/images/swagger_admin.png)
## 設定
在後端api請求的時候,一般都會在請求頭中帶一些token的驗證,來進行使用者標識,所以在設定中,進行了自定義請求頭的設定,可以方便的設定相關的請求頭,在任何一個請求都會自動帶上設定的請求資訊。
![swagger_common_setting](http://bedimage.tennetcn.com/tennetcn.com/images/swagger_common_setting.png)
## swagger 資訊展示
來源於後端swagger配置的相關資訊在此處進行展示
![swagger_info](http://bedimage.tennetcn.com/tennetcn.com/images/swagger_info.png)