Swagger UI安裝與使用教程

前言
查看這文章前,請先閱讀Swagger Edit 安裝和使用教程。
繼Swagger Edit上一篇文章寫如何編輯導出接口文檔。這篇文章就是負責教導大家如何用Swagger UI來查看和接口測試。Swagger UI是通過讀取Swagger Edit的導出的YAML/JSON文件,來進行接口測試。下圖就是Swagger UI的界面:
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文件的內容了。
讀取json
二.測試接口
1.選擇接口點擊“try it out”。
try it out
2.修改“Example Value Model”裏面參數,點擊“Execute”發送請求。
execute
3.點擊發送後會出現下面視圖,不管發送成功/失敗。你可以通過下面視圖來查看請求數據。
查看請求結果

字段 用途
Curl 爲發送的請求參數信息。
Request URL 就是發送的域名
Code 請求的狀態碼。
Response body 返回的參數。
Response headers 服務器返回header頭。

結語
Swagger UI好處支持多種接口格式、測試方便、支持get/post/jsonp等多種發送方式,功能都很使用開發人員和測試都用得上。
且在開放中,使用swagger進行契約測試能有效地增加開發效率。前後端用swagger定好全部接口,前端人員按照接口發送和返回進行頁面製作。後端通過swagger就能自行調試接口。測試人員用swagger進行接口測試,把ui測試和接口測試區分開來。這樣整個前端,後端和測試流程都提升了開發效率。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章