iT邦幫忙

2025 iThome 鐵人賽

DAY 7
0
Modern Web

使用 React + Node.js + MongoDB 打造電商網站系列 第 7

Day7 心得整理 — 後端流程回顧

  • 分享至 

  • xImage
  •  

今天是鐵人賽 Day7,我整理了這一週的後端學習心得,主要是對 伺服器、資料庫、API 的完整流程做回顧,也把遇到的問題和收穫記錄下來。

1️⃣ 本週完成的核心任務

  • 建立 Node.js + Express 專案,能啟動伺服器並測試路由
  • 成功 連接 MongoDB Atlas,建立商品 Collection
  • 設計 商品(Product)、會員(User)、購物車(Cart)三個 Schema
  • 建立完整商品 API:
    GET /api/products → 取得所有商品
    POST /api/products → 新增商品
    DELETE /api/products/:id → 刪除商品
    PUT /api/products/:id → 修改商品

2️⃣ 學到的重要概念

  • 資料結構先設計再開發
    先寫好 schema 與 JSON / ERD,能避免後續修改資料庫困擾。

  • Express 路由管理
    將商品 API 拆到 routes/productRoutes.js,程式結構清楚、維護方便

  • Mongoose ObjectId 與 ref
    購物車 items 陣列要對應 Product、User,需要 ObjectId + ref 才能建立關聯

  • 錯誤處理
    使用 try/catch 與 HTTP 狀態碼回傳,讓 API 更穩定

  • 3️⃣ 學到使用的工具

  • MongoDB Atlas:線上資料庫管理、建立 Collection、查看資料

  • Mongoose:操作 MongoDB、定義 Schema、管理資料關聯

  • Node.js + Express:建立伺服器、路由與 API

  • Postman:測試 API(GET、POST、DELETE、PUT)

  • Git & GitHub:版本控制、提交程式碼與追蹤歷史

  • VS Code:主要開發環境

4️⃣ 遇到的問題

  • 商品 POST 無法新增
    後來確認 body JSON 格式正確、路由與 model 對應正確才解決。
  • 刪除商品時 500 / 404
    發現要先確保 MongoDB ObjectId 格式正確。
  • 修改商品時回傳舊資料
    使用 { new: true } 選項修正。

5️⃣ 收穫與心得

  • 體驗到完整 後端開發流程:伺服器啟動 → 路由 → API → MongoDB 連線 → 回傳 JSON
  • 分層管理(models、routes、index.js)讓程式更清楚易維護
  • 對接下來 前端 React 串接 API 有清楚的概念和準備
  • 熟悉了 後端常用工具與流程,包含資料庫、伺服器、測試 API、版本控制
    https://ithelp.ithome.com.tw/upload/images/20250919/20178893V6dbF7L5kr.png

上一篇
Day6 建立商品 API(新增、讀取、刪除、修改)
下一篇
Day8 建立 React 專案 + Tailwind CSS
系列文
使用 React + Node.js + MongoDB 打造電商網站9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言