iT邦幫忙

2025 iThome 鐵人賽

DAY 3
0
Modern Web

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

Day3 正式開始後端的第一步

  • 分享至 

  • xImage
  •  

今天是鐵人賽Day3,正式開始後端的第一步,目標是建立 Node.js + Express 後端伺服器,並成功連接到 MongoDB Atlas。這是專案能夠存取資料的基礎,非常重要的一環。

1️⃣ 初始化 Node.js 專案

在 backend 資料夾內執行:

npm init -y

成功建立 package.json,之後安裝的套件都會記錄在這裡。

2️⃣ 安裝 Express
npm install express
Express 是 Node.js 最常見的 Web Framework,用來建立伺服器與 API。

3️⃣ 建立 index.js(後端入口檔)
新增 index.js,寫一個最簡單的測試 API:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello Ironman Backend!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

打開 http://localhost:3000 → 成功顯示「Hello Ironman Backend!」 🎉
https://ithelp.ithome.com.tw/upload/images/20250916/20178893nTlgxZY7rN.png

4️⃣ 連接 MongoDB Atlas

安裝 mongoose:

npm install mongoose

並在程式中加上連線設定:

const mongoose = require('mongoose');
const mongoURI = "mongodb+srv://<帳號>:<密碼>@cluster0.mongodb.net/ironmanDB";

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

執行 node index.js → 成功印出:
Server running at http://localhost:3000
MongoDB connected successfully

https://ithelp.ithome.com.tw/upload/images/20250916/20178893otNWXTTIH6.png

🐛 遇到的問題

  1. PowerShell 禁止執行 npm
    第一次跑 npm init -y 時出現錯誤,後來用以下指令解決:
    Set-ExecutionPolicy RemoteSigned -Scope Process

  2. MongoDB 連線失敗
    一開始連線字串寫錯,導致 ENOTFOUND 錯誤。後來重新到 MongoDB Atlas → Database → Connect → 複製正確的字串才成功。

💡 Day3 收穫

  • 成功建立第一個後端伺服器(Node.js + Express)
  • 學會用瀏覽器測試 API
  • MongoDB Atlas 成功連線,之後就能開始存取商品資料
  • 體驗到「環境設定比寫程式還花時間」

上一篇
Day2 環境建置完成,準備就緒
下一篇
Day4 後端進階—連接資料庫並建立商品資料
系列文
使用 React + Node.js + MongoDB 打造電商網站5
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言