前言
查看這文章前，請先閱讀Swagger Edit 安裝和使用教程。
繼Swagger Edit上一篇文章寫如何編輯導出接口文檔。這篇文章就是負責教導大家如何用Swagger UI來查看和接口測試。Swagger UI是通過讀取Swagger Edit的導出的YAML／JSON文件，來進行接口測試。下圖就是Swagger UI的界面：
ps：Swgger UI的站點域名要和發送請求的域名一樣。不然瀏覽器會報跨域錯誤。
CORS跨域這裏附上解決跨域問題方法。
安裝
1.下載並且安裝node.js
2. npm install -g http-server
3. 下載項目https://github.com/swagger-api/swagger-ui 並且解壓。
4. 設置HS_HOME,它的值等於hs.cmd的全路徑,並把HS_HOME加入PATH環境變量中
5. 進入swagger-ui文件夾。運行hs -p 500
5. 進入http://127.0.0.1:500/dist/index.html就可以看到swagger頁面了
使用
一.導入swagger.json文件
把之前Swagger Edit導出的swagger.json文件複製到dist文件夾裏面，修改index.html的url路徑，改成指向swagger.json。就可以讀取json文件的內容了。
二.測試接口
1.選擇接口點擊“try it out”。
2.修改“Example Value Model”裏面參數，點擊“Execute”發送請求。
3.點擊發送後會出現下面視圖，不管發送成功／失敗。你可以通過下面視圖來查看請求數據。
| 字段 | 用途 |
|---|---|
| Curl | 爲發送的請求參數信息。 |
| Request URL | 就是發送的域名 |
| Code | 請求的狀態碼。 |
| Response body | 返回的參數。 |
| Response headers | 服務器返回header頭。 |
結語
Swagger UI好處支持多種接口格式、測試方便、支持get／post／jsonp等多種發送方式，功能都很使用開發人員和測試都用得上。
且在開放中，使用swagger進行契約測試能有效地增加開發效率。前後端用swagger定好全部接口，前端人員按照接口發送和返回進行頁面製作。後端通過swagger就能自行調試接口。測試人員用swagger進行接口測試，把ui測試和接口測試區分開來。這樣整個前端，後端和測試流程都提升了開發效率。