用 MongoDB 來裝設資料庫（二）

2023年4月6日

前言

前面設定好雲端的資料庫後，本篇文章要來實際連接網頁與資料庫～

Installation

在專案資料夾下導入以下模組

npm install mongoose, body-parser

在專案中加入 MongoDB

目錄結構

.
├── app.js
├── node_modules
├── package-lock.json
├── package.json
├── public               //存放之前寫好的 HTML 靜態網站的檔案
├── models
│   └── messageSchema.js //定義和匯出資料庫模型
└── routes
    └── comment.js       //建立一個路由，當使用者使用 POST 方法傳送表單資料到該路徑時，會從 POST 請求中讀取留言內容

修改 app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const Message = require('./models/messageSchema');
const commentRouter = require('./routes/comment');

const app = express();

// 將 public 資料夾設置為靜態檔案的路徑
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true })); //處理前端表單 (form) 預設送出的 data type

// 定義根路徑的路由
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

//連接到 MongoDB 數據庫
mongoose.set('strictQuery', true);
mongoose.connect('mongodb+srv://<userame>:<password>:@cluster0.cdirujt.mongodb.net/?retryWrites=true&w=majority')

//監聽 MongoDB 的連線狀態以及顯示連線成功的訊息
const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('Connected to MongoDB Atlas!');
})

//連接留言板
app.use('/', commentRouter);

// 啟動服務器
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

• mongodb+srv://<userame>:<password>:@cluster0.cdirujt.mongodb.net/?retryWrites=true&w=majority 這段替換成自己的連接字串

新增 models/messageSchema.js

• 前端留言板設計能輸入 name、email、messsage，而資料庫模型，包含了 name、email、message 和 date 四個欄位
• date 欄位預設使用現在時間
• 這裡的 messageSchema 定義了留言的名稱、內容和時間屬性，Message 是這個模型的名稱，可以在其他文件中進行引用

const mongoose = require('mongoose');

const messageSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true
  },
  message: {
    type: String,
    required: true
  },
  date: {
    type: Date,
    default: Date.now
  }
});

const Message = mongoose.model('Message', messageSchema);

module.exports = Message;

新增 routes/comment.js

• 當使用者使用 POST 方法傳送表單資料到該路徑時，會從 POST 請求中讀取留言內容，接著將留言內容儲存到資料庫中
• 連接資料庫時，不管是錯誤還是成功接收，能能使用 log 查看

const express = require('express');
const router = express.Router();
const Message = require('../models/messageSchema');

router.get('/', async (req, res) => {
  const messages = await Message.find();
  res.send(messages);
});

router.post('/', async (req, res) => {
  // 從 POST 請求體中讀取留言內容
  const { name, email, message } = req.body;

  // 將留言內容存儲到資料庫中
  const newMessage = new Message({ name: name, email: email, message: message });
  try {
    await newMessage.save();
    console.log('New message created:', newMessage);
    res.redirect('/');
  } catch (err) {
    console.log(err);
    res.sendStatus(500);
  }
});

// 導出路由
module.exports = router;