[AC學期2-3]利用Node.js及Express框架打造伺服器及靜態網頁(二)

⭐ 為何會使用 Express 框架 ?

Express 是極簡的 Node.js 網路框架 (Web framework)
提供大量的 HTTP 模組程式方法、中介軟體 (middleware) 及路由系統
引用樣板引擎 (template engine) 打造網頁前端頁面
可以串接資料庫並可直接以 JavaScript 來操作資料庫

以上為 Express 框架最大的四個特色，我們會逐步依照下方學習重點來學習使用方式!

💎 Express 框架學習重點

✅ 👉利用 Express 框架建立伺服器
🔲 使用 express.Router 建立路由器及多種使用方法
🔲 動態路由 (param) 的應用
🔲 Express 的靜態檔案 (static files) 放置方法
🔲 使用模板引擎 (template engine) 渲染前端畫面
🔲 模板引擎 (template engine) 的常用 Helpers 使用
🔲 網頁搜尋功能怎麼寫? 介紹網址上的 Query string!
🔲 送出表單: GET 與 POST 的差別
🔲 表單送出後內容跑去哪? 跑進 Request body 裡!
🔲 基礎資料操作功能: CRUD
🔲 路由語意化: RESTful method
🔲 MongoDB 資料庫串接
🔲 網頁排序功能怎麼寫? MongoDB的進階應用
🔲 下拉表單的 Onchange 屬性(另外寫專案)

📚 學習 MVC 架構

等等，進入Express框架之前，我們要先了解什麼是 MVC 架構。
因為接下來會有大量資料文件的串接過程，有了 MVC 設計模式的概念，就可以快速理解程式碼間「檔案分工」的概念!

MVC 架構簡單來說就像是 「公司各部門的互相合作」 ，當公司事情、業務越多，不太會讓每個人身兼多職，而是將業務合併或分類並為此設立部門，而部門間會因應公司的運作而互相配合。

那麼程式碼也是一樣，當在同一份檔案越寫越多程式碼時，若檔案越大會使程式碼較不易閱讀且很難維護，所以我們會將程式碼依特性做分類並另外建立資料夾放置做管理，而MVC 架構即是將程式碼分類為資料管理(Model)、介面畫面的呈現(View)及程式動作指派的邏輯(Controller)，整理如下表 ⬇️

MVC 架構及意義

架構 Model View Controller

翻譯模型視圖控制器

意義放資料的地方管理畫面的呈現與使用者間的互動邏輯
使用 MVC 目的
- 當專案規模變大時，透過 MVC 架構將程式碼獨立出來並歸類到資料夾裡，可以更好地閱讀及維護。

架構	Model	View	Controller
翻譯	模型	視圖	控制器
意義	放資料的地方	管理畫面的呈現	與使用者間的互動邏輯

MVC 提供的協助是「把不同意義的程式碼放在不同的檔案裡並彼此各司其職分工合作」🏃

✏️ 利用 Express 框架建立伺服器

1️⃣ 安裝Express

🚩 Step1. 建立 Express 資料夾

打開終端機，使用 mkdir 指令，並建立 express_project 的專案資料夾
1
mkdir express_project
再利用 cd 進入資料夾內
1
cd express_project

🚩 Step2. 產生 package.json 檔案

利用 npm init 指令產生 package.json 的檔案，裡面會記錄關於專案的相關資訊
而 -y 是為了快速把 package.json 快速建立好，並跳過許多手動設定，之後有需要再修改即可
1
npm init -y

🚩 Step3. 利用 npm 安裝 Express

利用 npm install 或 npm i (縮寫)指令下載 Express 套件會看到專案資料夾產生 node_modules 的資料夾，裡面會放置透過 npm 下載的套件
若有指定版本，可使用 npm install [套件名稱]@[版本號]，若沒有指定版本會預設下載最新版本
打開 package.json 會發現 dependencies 裡面出現 express 的套件，表示安裝成功囉!
1
2
npm install express
npm i express

2️⃣ 定義和伺服器有關的變數

🚩 Step1. 載入 Express

在專案資料夾 express_project 新增名為 app.js 的檔案
利用 require 載入 Express，並存在 express 的變數裡

再定義 app 來使用 Express 框架提供的方法

1 2	const express = require('express') const app = express()

🚩 Step2. 設定伺服器的相關變數

Express 的伺服器相關變數設定簡化
- 不需要再載入 HTTP 模組 ➡️ 如開頭所述，因為 Express 內部已載入 HTTP 模組
- 不需要特別設定主機名稱 ➡️ Express 預設為 localhost
只要設定連接埠號 (port) !
1
const port = 3000

3️⃣ 設定伺服器處理請求和回應的動作

不用設定回應的 HTTP 狀態碼 (status code) ➡️ Express 會自己判斷 HTTTP 狀態碼
不用設定內容格式類型 (Content-Type) ➡️ Express 會自己判斷內容格式類型
- 這邊利用 res.send() 方法回傳瀏覽器顯示的內容
  1
  2
  3
  app.get('/', (req, res) => {
  res.send('This is my Express server!')
  })
- 若要回傳 HTML 格式，可以這樣做 ⬇️
  1
  2
  3
  app.get('/', (req, res) => {
  res.send('<h1>This is my Express server!</h1>')
  })

’ / ’ 是根目錄，也就是網址為http://localhost:3000.com的頁面

💡 重點說明:

使用 Express 方法:
- app.get ➡️ 定義到哪個路由時，瀏覽器要給予什麼樣的回應
  1
  2
  3
  app.get('路徑', (req, res) => {
  // 匿名函式
  })
匿名函式可以取得瀏覽器發進來的請求 (request)，和我們的伺服器想傳送的回應 (response)
- res.send ➡️ 把內容傳送回去給瀏覽器
  1
  res.send('回應的內容')

4️⃣ 啟動並監聽(listen)伺服器

1
2
3

app.listen(port, () => {
  console.log(`The server is listening on http://localhost:${port}`)
})

成功啟動後，可以在終端機看到 The server is listening on http://localhost:3000，接下來就可以打開瀏覽器輸入 http://localhost:3000，就看到伺服器回應我們的內容 This is my Express server !!!

💡 重點說明:

使用 Express 方法: app.listen
- 裡面的匿名函式: 當伺服器啟動時，這個函式就會被執行
  1
  2
  3
  app.listen(port, () => {
  // 匿名函式
  })

🎉🎉🎉耶!恭喜成功完成 Express 伺服器，接下來我們就正式開始打造我們的 Express 應用程式!💗

🔎 參考資料來源

📌 ALPHA Camp: https://lighthouse.alphacamp.co/

📌 Express 官網: https://expressjs.com/

全端筆記

AC學期2-3:如何利用Node.js及Express框架打造伺服器及靜態網頁(二)