iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0
自我挑戰組

30 天 Node.js 探索:基礎、進階與實踐系列 第 8

Day 8: 路由與請求處理:Express 框架基礎

  • 分享至 

  • xImage
  •  

接著要學習如何使用 Express 框架來進行基本的路由和請求處理,並了解 Express 的核心概念。

Express 框架簡介

Express 是 Node.js 上最受歡迎的 Web 應用框架,它不但簡化了伺服器的建立過程,還提供強大的路由和中介軟體功能。使用 Express,可以快速構建 API、網站或其他網路應用程式。
首先需要安裝 Express 框架:

bash
npm install express

https://ithelp.ithome.com.tw/upload/images/20240922/20169444bJp6CNRLZ0.png
安裝完成後,就可以開始使用 Express 來建立伺服器並處理請求。

建立基本的 Express 伺服器

與原生的 Node.js http 模組相比,使用 Express 建立伺服器變得更加簡單。
建立基本的伺服器的範例:

js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在這裡使用 app.get() 定義了根路由 (/),當有 GET 請求發送到這個路徑時,伺服器會回應 "Hello, Express!"。

路由處理

Express 的一個核心特點是路由。路由允許根據不同的 URL 路徑和 HTTP 方法來定義不同的請求處理邏輯。
定義多個路由的範例:

js
app.get('/', (req, res) => {
  res.send('Welcome to the homepage!');
});

app.get('/about', (req, res) => {
  res.send('This is the about page.');
});

app.post('/submit', (req, res) => {
  res.send('Form submitted.');
});

在這裡定義了三個不同的路由,分別處理 /、/about 和 /submit 的請求,並根據 HTTP 方法(GET 或 POST)做出不同的回應。

路由參數

Express 允許你在路由中使用動態參數,這對於處理諸如用戶資料等動態內容的請求非常有用。
使用路由參數的範例:

js
app.get('/user/:id', (req, res) => {
  const userId = req.params.id;
  res.send(`User ID: ${userId}`);
});

在這個範例中,/user/:id 是一個帶有動態參數 id 的路由。當訪問 /user/123 時,伺服器會回應 User ID: 123。

處理查詢參數

查詢參數是 URL 中以 ? 開頭的部分,通常用來傳遞額外的資料。Express 可以很方便地處理查詢參數。
處理查詢參數的範例:

js
app.get('/search', (req, res) => {
  const query = req.query.q;
  res.send(`Search query: ${query}`);
});

如果訪問 /search?q=nodejs,伺服器會回應 Search query: nodejs。

中介軟體(Middleware)

Express 中介軟體是用來處理請求的函數,這些函數會在請求到達路由之前執行。可以使用中介軟體來做身份驗證、日誌記錄、解析請求體等操作。
使用中介軟體來解析 JSON 的範例:

js
app.use(express.json());

app.post('/data', (req, res) => {
  const data = req.body;
  res.send(`Received data: ${JSON.stringify(data)}`);
});

在這裡使用 express.json() 來解析 JSON 格式的請求體,並將解析出的資料回應給客戶端。

處理 404 錯誤

當用戶訪問的路由不存在時,需要返回 404 錯誤。這可以通過定義一個全局的路由來實現。
處理 404 的範例:

js
app.use((req, res) => {
  res.status(404).send('Page not found');
});

這個中介軟體函數會在所有路由之後執行,當找不到對應的路由時,它會返回 404 錯誤。

總結

今天學習了 Express 框架的基礎知識,包含如何建立伺服器、處理路由、使用路由參數、處理查詢參數,並透過中介軟體來處理請求。Express 簡化了 Node.js 的伺服器開發,可以快速開發出高效的 Web 應用程式。接下來會進一步探索 Express 的進階功能。


上一篇
Day 7: Node.js 內建模組:HTTP
下一篇
Day 9: Middleware 中介軟體的概念與使用
系列文
30 天 Node.js 探索:基礎、進階與實踐26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言