iT邦幫忙

2025 iThome 鐵人賽

DAY 6
0
Modern Web

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

Day6 建立商品 API(新增、讀取、刪除、修改)

  • 分享至 

  • xImage
  •  

今天是鐵人賽 Day6,目標是把前面設計好的商品資料結構(Product schema)實作成可以操作的 API,包括新增商品、取得所有商品、刪除商品,並用 Postman 進行測試。這是後端核心流程的延伸,讓前端可以透過 API 存取資料。
1️⃣ 建立商品路由
在 backend/routes/productRoutes.js 寫下以下程式:


const express = require('express');
const router = express.Router();
const Product = require('../models/Product');

// 新增商品
router.post('/', async (req, res) => {
  try {
    const product = new Product(req.body);
    const savedProduct = await product.save();
    res.json(savedProduct);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

// 取得全部商品
router.get('/', async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// 刪除商品
router.delete('/:id', async (req, res) => {
  try {
    const deleted = await Product.findByIdAndDelete(req.params.id);
    if (!deleted) return res.status(404).json({ message: '找不到該商品' });
    res.json({ message: '商品已刪除' });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// 修改商品
router.put('/:id', async (req, res) => {
  try {
    const updated = await Product.findByIdAndUpdate(req.params.id, req.body, { new: true });
    if (!updated) return res.status(404).json({ message: '找不到該商品' });
    res.json(updated);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});
module.exports = router;

商品也可至Mongo進行刪除
https://ithelp.ithome.com.tw/upload/images/20250919/20178893ethyJHCLw7.png

2️⃣ 修改 index.js 使用商品路由

const productRoutes = require('./routes/productRoutes');
app.use('/api/products', productRoutes);

這樣所有 /api/products 的請求都會交給 productRoutes 處理。

3️⃣ 測試 API
用 Postman 或瀏覽器測試:
GET /api/products → 取得全部商品。
POST /api/products → 新增商品,Body 範例:

{
  "name": "新桌遊",
  "price": 499,
  "description": "策略桌遊",
  "category": "桌遊",
  "image": "https://example.com/game.jpg",
  "stock": 20
}

回傳的 JSON 物件會包含 _id,代表新增成功。
DELETE /api/products/:id → 刪除指定商品,成功會回傳:

{
  "message": "商品已刪除"
}

https://ithelp.ithome.com.tw/upload/images/20250919/20178893XlkAvKPsYg.png

🐛 遇到的問題
ID 格式錯誤
一開始在刪除或修改商品時,URL 的 ID 如果不是正確的 MongoDB ObjectId,會跳 500 Internal Server Error。
解決方法:確保用 GET /api/products 拿到正確 _id,再進行 DELETE 或 PUT

mongoose 未定義
在 route 中直接用 mongoose 方法時,要記得先 const mongoose = require('mongoose'); 或使用 model 提供的函式

Post/GET 回傳固定舊資料
原因是 index.js 中先前寫死測試資料,改為用 req.body 讀入資料,問題解決

💡 Day6 收穫

  • 成功建立商品 API(新增 / 讀取 / 刪除)
  • 學會用 Postman 測試 API
  • 體驗到 後端流程從 Schema → Route → Controller → 測試 的完整步驟
  • 錯誤排除技巧提升(ID 格式、mongoose 引用、JSON 讀取)

上一篇
Day5 規劃網站資料結構(商品、會員、購物車)
下一篇
Day7 心得整理 — 後端流程回顧
系列文
使用 React + Node.js + MongoDB 打造電商網站9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言