JS作品實戰-Week2-主線任務

API 串接流程筆記

儀表板個人資訊

UUID

每個人獨立的 API 路徑，都只會有一個（固定不變）。

API Token

驗證使用，用來驗證是否為管理員。每一次登入都會變更驗證碼。

用戶端，免驗證，無法變更頁面產品資訊。而管理後台，需要登入驗證碼（也就是 API Token），才能變更頁面產品資訊（如價格等）。

API 測試

下圖為後台商品欄位，按照步驟完成後，就會將商品上傳到你個人專屬的後台（避免重複點擊，因為每點擊一次都會再新增一筆資料）。

上圖流程圖上傳了兩次到資料庫，所以從遠端回傳的 data: Array(2) 就有兩筆資料，如下圖所示：

API 文件說明

分為前台（下圖紅框處），和後台（下圖綠框處）。若 API 是給前台做使用的，就不須帶上 Token 驗證碼，若是給後台做使用時，則必須帶上 Token。

完整的 API 路徑：站點 / API 路徑 / UUID

以「Frontend 前台 — Product list. 取得所有商品列表。」為例，點選後，右方會出現 HTTP Request GET api/{uuid}/ec/products。（這就是取得商品資訊的路徑）

HTTP Request 向遠端發送請求

get（取得商品資訊）、post（新增商品）、patch（修改/更新商品）、delete（刪除商品）。

下圖紅色底線處，需插入個人的 UUID，才能確認是誰的 API。

後台新增商品 POST

required（紅框處）為必要欄位，如果缺少一項則會出錯，而 optional（綠框處）為選填欄位，可以不填寫。

Type（型別）也必須按照指定給，不然會出錯。string（字串）、array（陣列）、boolean（布林）、integer （整數），如下圖所示：

Network 查看出錯於原因

如果跳紅字出錯的話，可以嘗試找出原因。

1. 查看「Network」
2. 點選標示錯誤的紅字，右方會出現詳細訊息。
3. 點選 Header 可查看送出的資料及遠端回應的訊息。
4. 點選 Preview 會顯示出錯原因。