今天是鐵人賽 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。
加入回首頁按鈕,方便返回主頁。
🐛 遇到的問題與解決
單張與多張圖片格式不一致 → 統一轉成陣列處理
無圖片時頁面空白 → 顯示「無圖片」占位
回首頁操作不方便 → 新增回首頁按鈕
配色不一致 → 統一頁面背景、按鈕、文字顏色
商品刪除需前端操作 → 加入刪除按鈕,並串接 DELETE API
💡 Day14 收穫