電商系統練習

主要分為兩個頁面

• 商品頁
• 購物車頁

商品頁

• 顯示商品 ID、名稱
• 功能一：選擇顏色、尺寸、數量 → 加入購物車

購物車頁

• 顯示商品 ID、名稱、顏色、尺寸、數量
• 功能一：修改商品數量
• 功能二：刪除商品

API(json-server)

• GitHub: https://github.com/max80713/web-lab-cart-api
• host: http://localhost:3000
• 商品
  • 取得商品
    • GET /products/:productID
• 購物車
  • 列表
    • GET /cart
  • 新增商品
    • POST /cart
  • 刪除商品
    • DELETE /cart/:itemID
  • 修改數量
    • PUT /cart/:itemID

Note

• 至少建立 3 筆商品假資料
• 不需考慮會員登入機制
• 不需實作下單功能
• 前端：vanilla JS
• 後端：json-server

設計稿

• 產品頁

  

• 購物車頁