# 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`來說，當介面數量在`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)     ## 設定 在後端api請求的時候，一般都會在請求頭中帶一些token的驗證，來進行使用者標識，所以在設定中，進行了自定義請求頭的設定，可以方便的設定相關的請求頭,在任何一個請求都會自動帶上設定的請求資訊。  ## swagger 資訊展示 來源於後端swagger配置的相關資訊在此處進行展示