Express專案建置流程—MongoDB資料庫連線(Javascript版)

更新 發佈閱讀 10 分鐘

※ 應用程式跟資料庫連線:

在開發的過程中,你會有一個終端機視窗負責運行 Node.js,也就是你的 web server。我們眼前的電腦就是「網路伺服器 (web server)」,而我們可以在電腦上打開瀏覽器,就能跟自己撰寫的應用程式進行互動。在資料庫伺服器方面 (database server),我們則使用雲端服務 MongoDB Atlas,啟動 MongoDB 資料庫管理系統 (DBMS)。

為了讓我們可以更方便地跟資料庫互動,我們會在這個 Node.js 專案安裝 Mongoose 這個 ODM。所以,我們開發的環境,會是這樣:

raw-image

※ 應用程式跟資料庫連線:

Express 這邊會透過 Mongoose 幫忙,連線資料庫。

raw-image

成功建立連線後,我們可以在專案裡用 JavaScript 撰寫 Mongoose 提供的語法,而 Mongoose 會在幫我們把這些語法翻譯成資料庫的操作語言。

raw-image


※ 應用程式跟資料庫連線:

實作步驟:

  1. 新增資料庫:todo-list
  2. 連線專案伺服器與資料庫:
  • 專案安裝 Mongoose
  • 設定連線
  • 取得連線狀態:設定 db
  1. 建立 Todo model

新增資料庫:todo-list:

首先打開 Robo 3T,在先前建立好的 My MongoDB 上面按右鍵 Create Database,建立一個新的資料庫,命名為 todo-list

raw-image

連線專案伺服器與資料庫:

安裝 Mongoose:

npm i mongoose
raw-image

執行指令後,可以到 package.json 檢查套件清單是不是已經更新了:

raw-image

設定連線

確認安裝成功之後,需要在主程式入口 app.js 裡載入 mongoose 並且設定連線:

const mongoose = require('mongoose') // 載入 mongoose
mongoose.connect(process.env.MONGODB_URI) // 設定連線到 mongoDB

安裝並設定 dotenv

藉由設定環境變數的方式,來將指定資訊傳入程式碼,同時又可以避免敏感資訊直接暴露在程式碼中。透過相關套件 dotenv 來設定環境變數。

npm i dotenv -D

這邊加上 -D 的意思:將套件安裝到 package.json 的 devDependencies 上面,表示 production 環境不使用,僅 development 環境使用的套件。

接下來在專案中建立 .env 文件,並在上面定義環境變數,把資料庫的連線字串複製上去。

範例:

MONGODB_URI=mongodb+srv://alpha:camp@cluster0.fovij.mongodb.net/todo-list?retryWrites=true&w=majority
raw-image

由於這是敏感資料,我們必須將其排除在 git 紀錄之外,請打開 .gitignore 把 .env 文件添加進去。

# OS X {#os-x  data-source-line="286"}
.DS_Store*
Icon?
._*

# Windows {#windows data-source-line="291"}
Thumbs.db
ehthumbs.db
Desktop.ini

# npm {#npm data-source-line="296"}
node_modules
*.log
*.gz
# dotenv {#dotenv data-source-line="182"}
.env

回到 app.js 檔案上方引入 dotenv,讓 Node.js 能抓到寫在 .env 上的環境變數。

// app.js
const express = require('express')
const mongoose = require('mongoose') // 載入 mongoose

// 加入這段 code, 僅在非正式環境時, 使用 dotenv
if (process.env.NODE_ENV !== 'production') {
require('dotenv').config()
}

const app = express()
mongoose.connect(process.env.MONGODB_URI) // 設定連線到 mongoDB

取得連線狀態:設定 db

// 取得資料庫連線狀態
const db = mongoose.connection
// 連線異常
db.on('error', () => {
console.log('mongodb error!')
})
// 連線成功
db.once('open', () => {
console.log('mongodb connected!')
})

※ 建立 Todo Model:

在 MVC 的專案架構中,負責和資料庫互動的元件是 model,現在我們也要為我們的專案來擴充 model 的架構。

raw-image

定義 Todo 資料結構:

Mongoose 提供了一個 mongoose.Schema 模組,接下來的作法是 Mongoose 規定好的格式,建議第一次先照著做,熟悉整個流程之後,可以去翻 Mongoose 的說明來瞭解更多設定選項。

範例:

const mongoose = require('mongoose')
const Schema = mongoose.Schema
const todoSchema = new Schema({
name: {
type: String, // 資料型別是字串
required: true // 這是個必填欄位
},
done: {
type: Boolean
}
})
module.exports = mongoose.model('Todo', todoSchema)

這裡最重要的步驟是把我們想要的資料結構當成參數傳給 new Schema(),以下是我們的設定:

  • 每筆 todo 資料都有一個叫做 name 的屬性
  • 我們規定 name 屬性:
    • type: String - 必須是字串型別
    • required: true - 是必填欄位,不能為空白

然後透過 module.exports 輸出。

建立 commit 節點:

[~/todo-list] $ git add .
[~/todo-list] $ git commit -m "feat: add mongoose"

※ 建立種子資料:

完成伺服器和資料庫的連線以後,我們現在要準備一些基本資料,這種預先配置好的資料稱為「種子資料 (seed data)」,例如:

  • 預設產品內容
  • 下拉選單選項
  • 預設管理員帳號
  • ⋯⋯等等

建立 Seeder 腳本:

請在 models 資料夾新增一個命名為 seeds 的資料夾,這個資料夾專門用來管理種子資料腳本,而 seeder 就是「種子資料產生器」的意思。

raw-image

設定資料庫連線:

範例:

const mongoose = require('mongoose')
const Todo = require('../todo') // 載入 todo model
if (process.env.NODE_ENV !== 'production') {
require('dotenv').config()
}

mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
const db = mongoose.connection
db.on('error', () => {
console.log('mongodb error!')
})
db.once('open', () => {
console.log('mongodb connected!')
})

新增 10 筆資料:

範例:

db.once('open', () => {
console.log('mongodb connected!')
for (let i = 0; i < 10; i++) {
Todo.create({name:`name-${i}`})
}
console.log('done')
})

執行 todoSeeder:

範例:

[~/todo-list] $ node models/seeds/todoSeeder.js
raw-image








留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
25會員
169內容數
全端網頁開發專業知識分享
2025/09/12
※ 首頁重點: index.html: <body> <!-- 主結構 --> <div class="wrapper"> <!-- Start main --> <section class="main"> <!-- Start jumbotron --> <div
Thumbnail
2025/09/12
※ 首頁重點: index.html: <body> <!-- 主結構 --> <div class="wrapper"> <!-- Start main --> <section class="main"> <!-- Start jumbotron --> <div
Thumbnail
2025/09/12
※ 切版分析: 各區塊細節解析: 1. .header 頁首區 視覺焦點:Logo + 背景圖,營造品牌形象。 文字內容:包含「Rmoo Cafe」與中文標語。 設計重點: 背景圖可能使用 background-image 搭配 cover或 contain。 Logo 可用<img
Thumbnail
2025/09/12
※ 切版分析: 各區塊細節解析: 1. .header 頁首區 視覺焦點:Logo + 背景圖,營造品牌形象。 文字內容:包含「Rmoo Cafe」與中文標語。 設計重點: 背景圖可能使用 background-image 搭配 cover或 contain。 Logo 可用<img
Thumbnail
2025/09/12
※ contact內容: index.html: <!-- Start contact --> <div class="hero hero-bg-grey"> <div class="container"> <!-- 區段介紹 --> <div class="se
Thumbnail
2025/09/12
※ contact內容: index.html: <!-- Start contact --> <div class="hero hero-bg-grey"> <div class="container"> <!-- 區段介紹 --> <div class="se
Thumbnail
看更多
你可能也想看
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型,使其非常適合用於數據密集型的即時應用程序。簡單來說,Node.js允許你使用JavaScript來編寫伺服器端代碼。 nvm 安裝nvm Windows : 點擊 Releases · coreybut
Thumbnail
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型,使其非常適合用於數據密集型的即時應用程序。簡單來說,Node.js允許你使用JavaScript來編寫伺服器端代碼。 nvm 安裝nvm Windows : 點擊 Releases · coreybut
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News