iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

從零開始的後端異世界生活系列 第 12

Day 12 - 懶得寫文件拉~來使用 NestJS 的 Swagger UI 幫你寫(中)

  • 分享至 

  • xImage
  •  

花東出遊 ing.. 篇幅酌量減少 XD

強化文件基本敘述

在上一篇章時,我們的 v1 API 目前長這個樣子,感覺還缺了什麼:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619KiKkD7yaDD.png

那我們先來做第一件事,目前所有的 API 都在 Default 分類下,但這樣很奇怪,我們可以依照 Controller 來分類我們的 API,先在該 Controller 加上 ApiTags 描述這是哪一個功能系列的 API:
https://ithelp.ithome.com.tw/upload/images/20200927/201196196TjzdXoYmK.png

重整之後可以看到 Swagger UI 也一起變動了,變成以 Controller 來區分各功能性的 API:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619KpiivJ3SZi.png

強化 API 接口文件敘述

再來我們來幫 API 本身加上一些敘述,讓使用者看一看可以一目瞭然。

先加入 API 名稱及內容敘述:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619XVNiqSA8Xp.png

加完之後,Swagger UI 會變成這樣,變得更明確了一些:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619ssH1vOHiOk.png

再來我們來幫 API 寫回應格式範例,先創造個假回應 class:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619i9H9ldSgYt.png

之後把它放進 response:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619ON0cGWkw8D.png

重整之後,現在可以在文件內看到回傳範例了呢:
https://ithelp.ithome.com.tw/upload/images/20200927/201196195A8USQVQBw.png

再來幫 403 狀況寫個回應:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619WtewyB5WtH.png

這樣文件上也可以知道 403 時會出現什麼敘述:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619z6tVlK8J1T.png

再寫個範例看看

我們再寫一個範例,看看之後 Swagger 會長怎樣:
https://ithelp.ithome.com.tw/upload/images/20200927/20119619pFqdgKKy6j.png

重整之後,看來真的很好用呢,有什麼 API 都一目瞭然了!
https://ithelp.ithome.com.tw/upload/images/20200927/20119619Ipg7mfnUt6.png

下一篇章

下一篇章我們來寫 Swagger UI 的最後一篇,關於 API 參數的強化與 Swagger 的使用。

/*
本系列文係個人新手開發心得,可能會有許多錯誤,煩請多多包容不吝指教。
*/


上一篇
Day 11 - 懶得寫文件拉~來使用 NestJS 的 Swagger UI 幫你寫(上)
下一篇
Day 13 - 懶得寫文件拉~來使用 NestJS 的 Swagger UI 幫你寫(下)
系列文
從零開始的後端異世界生活30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言