Node.js - Express 框架
Hello, 動手的編程愛好者！今天，我們將踏上一段令人興奮的旅程，探索 Node.js 和 Express 框架的世界。作為你們友好的鄰居計算機科學老師，我非常高興能夠指導你們進行這次冒險。別擔心如果你之前從未寫過一行代碼——我們將從最基礎的知識開始，一起逐步學習。
Express 是什麼？
在我們深入之前，讓我們先來討論一下 Express 究竟是什麼。想像一下你正在蓋房子。你可以從頭開始，自己製作磚塊和切割木材。或者，你可以使用現成的材料，這樣工作會更輕鬆、更快。Express 就像這些現成的材料，但它是為 Web 應用程序而設計的。它是一個框架，為 Web 和移動應用程序提供了一套強大的功能，使得使用 Node.js 擁有更快、更簡單的 Web 應用程序開發體驗。
安裝 Express
讓我們從安裝 Express 開始。首先，確保你的電腦上已經安裝了 Node.js。如果你還沒有安裝，請前往 Node.js 官方網站下載。
一旦安裝了 Node.js，打開你的終端（如果你在 Windows 上，則是命令提示符）並輸入以下命令：
npm install express這個命令使用 npm（Node 包管理器）來安裝 Express。將 npm 想像成一個神奇的工具箱，其中包含了我們可以在 Node.js 專案中使用的各種有用的工具（稱為包）。
Hello World 示例
現在，我們已經安裝了 Express，讓我們創建我們的第一個 Express 應用程序。我們從經典的 "Hello, World!" 示例開始。
創建一個名為 app.js 的新文件，並輸入以下代碼：
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.listen(port, () => {
console.log(`範例應用正在监聽 http://localhost:${port}`);
});讓我們分解一下：
- 我們導入 Express 模組並創建一個 Express 應用程序。
- 我們定義一個端口號（在這裡是 3000）。
- 我們為根 URL ('/') 設置一個路由，當訪問時回傳 "Hello, World!"。
- 我們告訴我們的應用程序在指定的端口上監聽。
要運行這個應用程序，請回到終端，切換到包含 app.js 的目錄，並運行：
node app.js現在，打開你的網頁瀏覽器並訪問 http://localhost:3000。你應該會在頁面上看到 "Hello, World!"。恭喜！你剛剛創建了你的第一個 Express 應用程序！
應用程序對象
在我們之前的示例中，我們創建了一個 Express 應用程序對象：
const app = express();這個 app 對象是我們使用 Express 的核心。它有方法用於路由 HTTP 請求、配置中間件、渲染 HTML 視圖、註冊模板引擎等。
以下是 app 對象最常使用的一些方法：
| 方法 | 描述 |
|---|---|
| app.get() | 將 HTTP GET 請求路由到指定路徑的指定回調函數 |
| app.post() | 將 HTTP POST 請求路由到指定路徑的指定回調函數 |
| app.use() | 在指定路徑上挂载指定的中間件函數或函數集 |
| app.listen() | 在指定的主機和端口上绑定并监听连接 |
基本路由
路由是指決定應用程序如何响應客戶端對特定終點的請求，終點是一個 URI（或路徑）和特定的 HTTP 請求方法（GET、POST 等）。
讓我們擴展我們的應用程序以包含更多路由：
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.get('/about', (req, res) => {
res.send('這是關於我們的頁面');
});
app.post('/submit', (req, res) => {
res.send('收到 POST 請求');
});
app.listen(port, () => {
console.log(`範例應用正在监聽 http://localhost:${port}`);
});在這個示例中，我們添加了兩個新的路由：
- 一個對 '/about' 的 GET 路由，返回 "這是關於我們的頁面"
- 一個對 '/submit' 的 POST 路由，返回 "收到 POST 請求"
要測試 POST 路由，你需要一個像 Postman 這樣的工具，或者你可以創建一個 HTML 表單來提交到這個路由。
服務靜態文件
通常，你會想要提供靜態文件，如圖像、CSS 文件和 JavaScript 文件。Express 提供了一個內置的中間件函數 express.static 用於此目的。
讓我們在我們的專案文件夹中創建一個名為 public 的目錄，並在其中放入一個圖像文件（比如 cat.jpg）。然後，像這樣修改我們的 app.js：
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});
app.listen(port, () => {
console.log(`範例應用正在监聽 http://localhost:${port}`);
});在這個示例中，我們做了兩件事：
- 我們使用
app.use(express.static('public'))從 'public' 目錄提供靜態文件。 - 我們添加了一個新路由 '/cat'，當訪問時返回
cat.jpg文件。
現在，你可以直接通過 http://localhost:3000/cat.jpg 訪問你的貓咪圖片，或者通過我們定義的 '/cat' 路由來訪問。
這就是 Express 的基礎！我們從安裝到提供靜態文件都有所涉獵。記住，學習編程就像學習一門新語言——它需要練習和耐心。如果你立即不能理解所有內容，請不要氣餒。持續實驗，持續建造，最重要的是，樂在其中！
在我們的下一課中，我們將深入研究 Express 的中間件以及更先進的路由技術。在那之前，祝你編程愉快！
Credits: Image by storyset