2024-09-22|閱讀時間 ‧ 約 5 分鐘

Node.js 程式札記 : Express 框架基本概念

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 應用程式，並逐步學習更多進階功能。

分享至

成為作者繼續創作的動力吧！

Hello Coding ! 程式札記

追蹤

Node.js 程式札記 : Express 框架基本概念

Express 簡介和安裝

安裝 Express

建立第一個 Express 應用程式

路由和中間件

路由

中間件

模板引擎：使用 EJS 渲染動態內容

安裝和設定 EJS

建立和使用 EJS 模板

EJS 的優點

總結

作者的相關文章

梧笙の領域展開的其他內容

你可能也想看

發表回應

Node.js 程式札記 : Express 框架基本概念

Express 簡介和安裝

安裝 Express

建立第一個 Express 應用程式

路由和中間件

路由

中間件

模板引擎：使用 EJS 渲染動態內容

安裝和設定 EJS

建立和使用 EJS 模板

EJS 的優點

總結

作者的相關文章

梧笙の領域展開 的其他內容

你可能也想看

發表回應

梧笙の領域展開的其他內容