iT邦幫忙

2025 iThome 鐵人賽

DAY 4
0
Modern Web

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

Day4 後端進階—連接資料庫並建立商品資料

  • 分享至 

  • xImage
  •  

今天是鐵人賽 Day4,正式進入後端核心——連接 MongoDB Atlas 並建立第一個商品資料 Collection,透過 API 可以讀取資料。這是專案能夠動態管理商品的基礎。

1️⃣ 建立商品模型 (Product Model)

在 backend/models/Product.js 建立:

const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  price: { type: Number, required: true },
  description: { type: String }
});

module.exports = mongoose.model('Product', productSchema);

這樣就有了商品的資料結構,之後可以透過 API 新增、讀取、修改、刪除商品。

2️⃣ 在 index.js 連接 MongoDB Atlas

const mongoose = require('mongoose');

const mongoURI = "mongodb+srv://<帳號>:<密碼>@cluster0.pqskp56.mongodb.net/ironmanDB";

mongoose.connect(mongoURI)
  .then(() => console.log('✅ MongoDB connected'))
  .catch(err => console.error(err));

執行 node index.js,PowerShell 顯示:
https://ithelp.ithome.com.tw/upload/images/20250918/201788934FhKOOiYGR.png

3️⃣ 建立商品 API

// 取得所有商品

app.get('/api/products', async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// 新增商品

app.post('/api/products', async (req, res) => {
  try {
    const newProduct = new Product({
      name: 'Caton',
      price: 599,
      description: '策略博奕遊戲'
    });
    await newProduct.save();
    res.json(newProduct);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

執行後,透過 API GET /api/products 可以看到 MongoDB 中的資料:

https://ithelp.ithome.com.tw/upload/images/20250918/20178893Tj59dhCwQI.png

這表示商品已經成功存進資料庫,而且可以被 API 讀取。

🐛 遇到的問題與解決方法
MongoDB 連線失敗
一開始連線字串寫錯,出現 ENOTFOUND 錯誤。後來到 MongoDB Atlas → Database → Connect → 複製正確的字串才成功。

Cannot GET /api/products
一開始沒有建立商品模型或忘記在 index.js 引入 Product,導致 API 無法運作。加入模型並引入後就正常。

💡 Day4 收穫

  • 成功連接 MongoDB Atlas,建立第一個商品資料 Collection
  • 用 API 新增與讀取商品資料
  • 後端基本流程更完整:伺服器啟動 → MongoDB 連線 → 商品 API
  • 體驗到從資料庫到 API 的資料流,為前端串接打下基礎

上一篇
Day3 正式開始後端的第一步
下一篇
Day5 規劃網站資料結構(商品、會員、購物車)
系列文
使用 React + Node.js + MongoDB 打造電商網站5
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言