Day14 商品多圖與管理功能完善

2025 iThome 鐵人賽

DAY 14

Modern Web

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

17th鐵人賽

yangcheng

2025-09-28 04:52:28

87 瀏覽

分享至

今天是鐵人賽 Day14，目標是完成商品詳細頁多圖輪播功能，新增商品頁支援多張圖片上傳，同時改善 UI 互動與回首頁功能，調整整體頁面配色，並新增前端商品刪除功能。

1️⃣ 修改整體頁面配色
調整背景、按鈕、文字顏色，使整體風格統一、溫暖柔和。
例如：詳細頁背景 #FFF0DD、文字 #333333、按鈕主色 #E2A16F、hover #cc8550。
新增商品頁配色與詳細頁保持一致，整體 UI 更協調。

2️⃣ 前端可進行商品刪除
在商品列表或詳細頁中增加刪除按鈕，管理者可直接刪除商品。

const handleDelete = async (id) => {
  if (!window.confirm("確定要刪除這個商品嗎？")) return;
  try {
    await axios.delete(`http://localhost:3000/api/products/${id}`);
    alert("商品已刪除");
    // 可刷新商品列表或導回首頁
  } catch (err) {
    console.error("刪除失敗", err);
    alert("刪除失敗！");
  }
};

// 刪除按鈕範例
<button
  onClick={() => handleDelete(product._id)}
  className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 transition"
>
  刪除商品
</button>

3️⃣ 新增商品頁多圖上傳（AddProduct）
表單支援多張圖片上傳，使用 FormData 並送給後端。

const formData = new FormData();
formData.append("name", name);
formData.append("price", price);
formData.append("description", description);
formData.append("stock", stock);
formData.append("category", category);
images.forEach((img) => formData.append("images", img));

await axios.post("http://localhost:3000/api/products", formData, {
  headers: { "Content-Type": "multipart/form-data" },
});

成功新增商品後會顯示提示訊息，並自動清空表單欄位。
新增回首頁按鈕，方便返回主頁。

4️⃣ 後端 API 支援多圖

router.post('/', upload.array('images', 5), async (req, res) => {
  const imagePaths = req.files.length
    ? req.files.map(file => `/uploads/${file.filename}`)
    : ['/uploads/default.jpg'];
  
  const product = new Product({ ...req.body, images: imagePaths });
  const savedProduct = await product.save();
  res.json(savedProduct);
});

MongoDB Schema 改成 images: [String]
支援多圖。

5️⃣ 商品詳細頁多圖輪播（ProductDetail）
完成多張圖片輪播功能：使用 useState 控制當前顯示圖片 currentImage。
加入左右箭頭切換圖片（handlePrev / handleNext）。
後端單張或多張圖片都可兼容，無圖片時顯示「無圖片」占位。

const [currentImage, setCurrentImage] = useState(0);
const images = Array.isArray(product.images)
  ? product.images
  : product.image
  ? [product.image]
  : [];

const handlePrev = () => setCurrentImage((prev) => (prev - 1 + images.length) % images.length);
const handleNext = () => setCurrentImage((prev) => (prev + 1) % images.length);

<img
  src={`http://localhost:3000${images[currentImage]}`}
  alt={product.name}
  className="w-full h-80 object-cover"
/>
<button onClick={handlePrev}>◀</button>
<button onClick={handleNext}>▶</button>

顯示商品資訊：名稱、價格、描述、庫存。
庫存為 0 時顯示紅色「⚠️ 已售完」，加入購物車按鈕 disabled。
加入回首頁按鈕，方便返回主頁。