Node.js 程式札記 : Express 框架基本概念
更新於 2024/10/10閱讀時間約 5 分鐘
Express 是一個簡潔而靈活的 Node.js 網頁應用程式框架，本文將介紹 Express 的基礎知識，包括安裝、路由設定、中間件使用，以及如何搭配 EJS 模板引擎來渲染動態內容。
Express 簡介和安裝
Express 是建立在 Node.js 平台上的網頁應用程式框架，提供了一套簡單的 API 來處理 HTTP 請求、路由管理和視圖渲染。
安裝 Express
要開始使用 Express，首先確保你已安裝 Node.js。接著，在專案資料夾中執行以下命令：
npm init -y
npm install express
這會初始化一個新的 Node.js 專案並安裝 Express。
建立第一個 Express 應用程式
以下是一個基本的 Express 應用程式範例：
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('歡迎使用 Express！');
});
app.listen(port, () => {
console.log(`應用程式正在監聽 ${port} 連接埠`);
});
將此程式碼儲存為 app.js，然後執行 node app.js 來啟動應用程式。開啟瀏覽器，前往 http://localhost:3000 即可看到結果。
路由和中間件
路由
路由決定了應用程式如何回應客戶端對特定端點的請求。Express 提供了簡單的方式來定義路由：
app.get('/about', (req, res) => {
res.send('關於我們的頁面');
});
app.post('/submit', (req, res) => {
res.send('已收到資料');
});
中間件
中間件是一個函數，可以存取請求物件、回應物件和下一個中介層。它可以：
- 執行任何程式碼
- 修改請求和回應物件
- 結束請求-回應循環
- 呼叫下一個中間件
以下是一個簡單的中間件範例：
app.use((req, res, next) => {
console.log('時間:', Date.now());
next();
});
這個中介層會記錄每個請求的時間，然後將控制權傳給下一個中中介層
模板引擎：使用 EJS 渲染動態內容
EJS（Embedded JavaScript）是一個簡單而強大的模板引擎，可以與 Express 完美整合。
安裝和設定 EJS
首先，安裝 EJS：
npm install ejs然後在 Express 應用程式中設定 EJS：
app.set('view engine', 'ejs');
建立和使用 EJS 模板
建立一個名為 views 的資料夾，並在其中新增一個 index.ejs 檔案：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= heading %></h1>
<ul>
<% for(let item of items) { %>
<li><%= item %></li>
<% } %>
</ul>
</body>
</html>
在 Express 路由中使用這個模板：
app.get('/', (req, res) => {
res.render('index', {
title: '我的 Express 應用程式',
heading: '歡迎來到首頁',
items: ['項目 1', '項目 2', '項目 3']
});
});
這將使用提供的資料渲染 index.ejs 模板，並將結果發送給客戶端。
EJS 的優點
- 語法簡單，易於學習
- 可以直接在模板中使用 JavaScript
- 支援部分樣板，便於程式碼重用
- 能夠輕鬆處理條件和迴圈邏輯
總結
Express 框架為開發網頁應用程式提供了強大而靈活的工具。透過本文介紹的基礎知識，你就可以開始建構自己的 Express 應用程式，並逐步學習更多進階功能。
60會員
91內容數
「梧笙」即「吾生」，意即我的生命，朋友都叫我「阿梧(Awu)」，高雄人。我喜歡學習新技能，從程式設計到網路工具，再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章，如果你有任何想法或問題，歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型，使其非常適合用於數據密集型的即時應用程序。簡單來說，Node.js允許你使用JavaScript來編寫伺服器端代碼。
nvm
安裝nvm
Windows :
點擊 Releases · coreybut
本章節將引導你如何建立一個TypeScript開發環境，這包括安裝Node.js、npm和TypeScript，建立一個TypeScript項目，設置編輯器，以及編寫和編譯TypeScript代碼。在完成這些步驟之後，你將能夠編寫、編譯和運行TypeScript代碼。
本章節旨在介紹TypeScript的基本語法，包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構，並且可以開始使用TypeScript進行開發。
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
※ Express 專案步驟筆記清單
Node.js 環境建置核對
新增專案資料夾
設定 package.json
npm init -y
設定程式入口為 app.js
安裝 Express：npm install express
設定主程式 app.js
建構應用程式伺服器
設定
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型，使其非常適合用於數據密集型的即時應用程序。簡單來說，Node.js允許你使用JavaScript來編寫伺服器端代碼。
nvm
安裝nvm
Windows :
點擊 Releases · coreybut
本章節將引導你如何建立一個TypeScript開發環境，這包括安裝Node.js、npm和TypeScript，建立一個TypeScript項目，設置編輯器，以及編寫和編譯TypeScript代碼。在完成這些步驟之後，你將能夠編寫、編譯和運行TypeScript代碼。
本章節旨在介紹TypeScript的基本語法，包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構，並且可以開始使用TypeScript進行開發。
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
※ Express 專案步驟筆記清單
Node.js 環境建置核對
新增專案資料夾
設定 package.json
npm init -y
設定程式入口為 app.js
安裝 Express：npm install express
設定主程式 app.js
建構應用程式伺服器
設定