# 第八週小組任務 | 南1 | JS 直播班 :::spoiler 目錄 [TOC] ::: :::success 【[題目連結](https://hackmd.io/ItFOJhUQSeaU_-eEDdBzrQ?view)】 <!-- 【檢核】 - [x] 參與人數:7人 - [x] 參與名單 - [x] 任務內容 - [x] 討論截圖 --> ::: ## 參與人員 - [x] 阿榮#8277 - [x] PayRoom#8328 - [x] WA#9787 - [x] jia yu#8896 - [x] 梁窈菱 - [x] Serena - [x] CPing - [ ] hom - [ ] mt126 - [ ] 貓咪#6294 ## 討論問題 ## 第一題 最終關卡討論 請討論 API 該如何與整合前端 [XD 設計稿](https://xd.adobe.com/view/a48b8617-4588-4817-9062-b62130dce916-f1d8/) ### 問題一：初始化，取得產品與購物車列表 * [取得產品列表(Get)：/api/livejs/v1/customer/{api_path}/products](https://hexschool.github.io/hexschoolliveswagger/#/%E7%94%A2%E5%93%81%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/get_api_livejs_v1_customer__api_path__products) * [取得購物車列表(Get)：：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/get_api_livejs_v1_customer__api_path__carts) ``` //取得產品列表(Get)：/api/livejs/v1/customer/{api_path}/products { "status": true, "products": [ { "category": "產品分類 (String)", "image": "產品圖片 (String)", "id": "產品ID (String)", "title": "產品名稱 (String)", "origin_price": "產品原始價錢 (Number)", "price": "產品銷售價錢 (Number)" } ] } ``` >新帳號預設購物車會有一筆資料 ### 討論 可以把 url 也透過函式來產，丟入參數，讓他自動變更 ### 問題二：新增購物車品項，並再次初始化購物車列表 * [加入購物車(POST)：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/post_api_livejs_v1_customer__api_path__carts) ### 討論 可以用 [sweetalert2](https://sweetalert2.github.io/)，Mixin example，加入購物車提示 ### 問題三：修改購物車狀態(刪除全部、刪除單筆)，並再次初始化購物車列表 * [清除購物車內全部產品(DELETE)：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/delete_api_livejs_v1_customer__api_path__carts) * [刪除購物車內特定產品(DELETE)：/api/livejs/v1/customer/{api_path}/carts/{id}](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/delete_api_livejs_v1_customer__api_path__carts__id_) ### 問題四：送出購買訂單，並再次初始化購物車列表 * [送出購買訂單(POST)：/api/livejs/v1/customer/{api_path}/orders](https://hexschool.github.io/hexschoolliveswagger/#/%E8%A8%82%E5%96%AE%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/post_api_livejs_v1_customer__api_path__orders) ### 問題五：觀看後台訂單 * [取得訂單列表(GET)：/api/livejs/v1/admin/{api_path}/orders](https://hexschool.github.io/hexschoolliveswagger/#/%E8%A8%82%E5%96%AE%E7%9B%B8%E9%97%9C(%E7%AE%A1%E7%90%86%E8%80%85)/get_api_livejs_v1_admin__api_path__orders) * [Codepen 範例](https://codepen.io/hexschool/pen/yLgaBWV?editors=1010) |組員| 連結| |:---|:---:| |阿榮|[Github Pages](https://peg-l.github.io/booking-site/) / [Github Repo](https://github.com/Peg-L/booking-site)| |Mt| | |jiayu| | |WA| [codepen](https://codepen.io/ldddl/pen/GRzBrmw?editors=0011) | |CPing| | |貓咪| | |梁窈菱| | |Serena| | |hom| | |Payroom|[CodePen](https://codepen.io/water38198/pen/WNPKebJ) | ### 其他 1. 怎麼一次取得 form 的所有欄位值 ```htmlembedded <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>取得表單輸入值</title> </head> <body> <form id="myForm"> <label for="name">姓名：</label> <input type="text" id="name" name="name" value="John Doe"> <br> <label for="email">電子郵件：</label> <input type="email" id="email" name="email" value="john@example.com"> <br> <label for="age">年齡：</label> <input type="number" id="age" name="age" value="25"> <br> <button type="button" onclick="getFormValues()">取得表單值</button> </form> <script> function getFormValues() { // 取得表單元素 const form = document.getElementById("myForm"); // 使用 FormData 對象取得表單中的所有輸入值 const formData = new FormData(form); // 將 FormData 轉換為物件 const formObject = {}; formData.forEach((value, key) => { formObject[key] = value; }); // 在控制台輸出結果 console.log(formObject); } </script> </body> </html> ``` ## 開會紀錄 ![image](https://hackmd.io/_uploads/ry465fGr6.png) ![image](https://hackmd.io/_uploads/rk3TcfzB6.png)