表單到收款:做出能接單的網站 · 第 03 章
訂單要真的存下來
按下按鈕後,後端要重新檢查資料、計算金額並儲存。只有拿到後端回傳的訂單編號,才顯示建立成功。
貓老闆的簡報
不要跟我說資料在瀏覽器裡就算接到單。關掉分頁,我還是要查得到。
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
用既有後端或適合專案的簡單後端建立訂單,保存到資料庫,並實作錯誤與重試的回饋。
動手做
- 請 AI 建立訂單資料結構:訂單編號、使用者識別、商品代號、數量、單價、運費、總額、收件資料、狀態與建立時間。金額用整數元儲存。
- 後端再次檢查數量和必填欄位,從伺服器商品設定計算價格;不要接受瀏覽器傳來的總額作為收款依據。
- 新增建立訂單的 API。後端成功儲存後回傳編號;網路或儲存錯誤則保留表單並顯示重試。
- 同一次送出使用同一個請求識別,重試時由後端回傳同一張訂單,避免按兩次就建立兩張。會員識別先使用測試帳號,下一章接上正式登入檢查。
- 重新整理後,透過後端查詢確認訂單仍存在;不要用本機儲存冒充資料庫。
親手試試
純流程模擬,不呼叫真實 API、不儲存訂單。
這樣對 AI 說
中文就可以
請把前一章表單接到後端並存入資料庫。使用測試帳號建立等待付款的訂單,回傳訂單編號。後端檢查必填、數量 1 到 3,單價從伺服器設定取 680 元、運費 60 元,使用整數計算;忽略前端自稱的價格。為每次送出建立可重用的請求識別,同一次請求重試只建立一張訂單。資料確實存入後才顯示成功,錯誤時保留輸入並可重試。告訴我如何啟動後端、設定資料庫與查驗儲存結果,並讓我用虛構資料實際驗收。
本章驗收清單
把網路錯誤和連按兩次也當成正常要處理的操作。
- 重開頁面後可從後端查到訂單
- 改掉前端價格後,後端仍依規則計算
- 同一次請求重試沒有新增重複訂單
- 沒有儲存成功時不顯示建立成功
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候,去把名詞弄清楚,回來繼續做。
進度只存在這台瀏覽器,不上傳、不追蹤。