iT邦幫忙

2025 iThome 鐵人賽

DAY 14
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

今天是鐵人賽 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>

https://ithelp.ithome.com.tw/upload/images/20250926/20178893MAzYKHVOXB.png

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" },
});

成功新增商品後會顯示提示訊息,並自動清空表單欄位。
新增回首頁按鈕,方便返回主頁。
https://ithelp.ithome.com.tw/upload/images/20250926/20178893NNB30GErGP.png

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。
加入回首頁按鈕,方便返回主頁。
https://ithelp.ithome.com.tw/upload/images/20250926/20178893b0cnaAWbQK.png

🐛 遇到的問題與解決
單張與多張圖片格式不一致 → 統一轉成陣列處理
無圖片時頁面空白 → 顯示「無圖片」占位
回首頁操作不方便 → 新增回首頁按鈕
配色不一致 → 統一頁面背景、按鈕、文字顏色
商品刪除需前端操作 → 加入刪除按鈕,並串接 DELETE API

💡 Day14 收穫

  • 商品詳細頁可顯示多張圖片,並可左右切換
  • 新增商品頁支援多張圖片上傳,後端正確儲存與回傳
  • UI/UX 改進:庫存警示、按鈕 hover、回首頁操作更便利
  • 前端可直接刪除商品,管理者操作更方便
  • 修改整體頁面配色,風格統一且視覺舒適
  • 前後端整合流程更完整,使用者體驗提升

上一篇
Day13 新增分類功能,首頁依類型篩選商品
下一篇
Day15 會員註冊 API 與密碼加密實作
系列文
使用 React + Node.js + MongoDB 打造電商網站19
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言