iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
佛心分享-SideProject30

用 Next.js 實作屋況查詢評估專家網站系列 第 13

[Day 13] 後端環境建置-測試API

  • 分享至 

  • xImage
  •  

前言:昨天分享了如何撰寫第一支 API。雖然過程相對簡單,但其中涉及的知識點很多,例如在本機上建立一個伺服器環境(TCP/IP Port),以及了解什麼是 JWT Token 等。

今天,我將分享如何測試撰寫好的第一支 API。

測試 API 步驟

1.啟動 localhost:4000,在電腦任一瀏覽器中打開,即可看到如下的網頁介面:

  • 按下 Query your server
    https://ithelp.ithome.com.tw/upload/images/20240813/20132295FmdrUAJoEO.png

2.在左邊窗格會看到 Document 區域。由於要測試的 API 是註冊功能,它的動作屬於修改範疇。點選 Mutation,可以看到唯一的 register。

其中可以看到Arguments 、Fields

  • Arguments 代表 要向API輸入甚麼資訊(input)
  • Field 代表 要跟API拿甚麼資訊(Output)
    https://ithelp.ithome.com.tw/upload/images/20240813/20132295OXBrWdBGp9.png

3.接下來,Operation 窗格會顯示剛剛透過 Document 面板所新增的 GraphQL 語句。您只需要注意 variables 區域,已經將參數的格式預先設定好。只需將您的資料一步步填入,然後按下右上角的 Register 按鈕(按鈕名稱會根據 API 定義的 function name 而定),即可操作並發送 API。
https://ithelp.ithome.com.tw/upload/images/20240813/20132295fgGN81bddW.png

4.最右邊就是呼叫API回應結果
https://ithelp.ithome.com.tw/upload/images/20240813/20132295HzSNPRu0N4.png

透過上述步驟,您可以成功測試並確認撰寫的 API 功能是否正常。


上一篇
[Day 12] 後端環境建置-我的第一支API
下一篇
[Day 14] 環境建置-利用前端程式發送API Request(一)
系列文
用 Next.js 實作屋況查詢評估專家網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言