標籤

建立第一個 Node.js 應用程式有多難？

Node.js: JavaScript 的後端魔法 (3)

476次觀看 0收藏 2024年03月28日-14:21更新 後端開發 Nodejs

我們將帶你踏上 Node.js 的奇妙旅程。透過簡單易懂的步驟，你將學會如何創建一個基本的 HTTP 伺服器，處理請求與回應，以及實作基本的路由設定。
今天就在 Node.js 寫下你的第一行 Hello World。

HTTP 伺服器

HTTP 伺服器是一種軟體應用程式，負責處理和回應 HTTP (Hypertext Transfer Protocol) 請求。當用戶在瀏覽器中輸入網址或點擊連結時，瀏覽器會向該網址所在的伺服器發送 HTTP 請求。HTTP 伺服器接收到這個請求後，根據請求的內容，可能是獲取網頁、圖片、文件等，然後回應相應的資源給瀏覽器。以下會帶你一步步學習如何創建一個 HTTP 伺服器。

創建一個新的資料夾放置 HTTP 伺服器資料

使用終端機創建一個新的資料夾:

mkdir myFirstHttp
cd myFirstHttp

初始化你的專案

執行以下指令初始化你的Node.js專案:

npm init

這會創建一個 package.json 檔案，這是 Node.js 專案的配置文件。

安裝 HTTP 模組

Node.js 內建了一個 HTTP 模組，讓我們能夠輕鬆地建立 HTTP 伺服器。執行以下指令安裝 HTTP 模組:

npm install http

開始編寫你的第一個 HTTP 伺服器

首先，在你的專案目錄中，建立一個新的檔案app.js。

const http = require("http");
const server = http.createServer((req, res) => {
    res.send("Hello World");
});
// 監聽伺服器 port 3000
server.listen(3000, () => {
    console.log("Server On.");
});

創建了一個 HTTP 伺服器，當你訪問 http://localhost:3000/ 時，伺服器會收到一個 Hello World 的回應。

執行你的 HTTP 伺服器

回到終端機，執行以下指令啟動你的伺服器:

node server.js

現在，你應該已經成功的擁有自己的第一個 Node.js HTTP 伺服器了。

處理請求與回應

在開始處理 HTTP 請求之前，我們需要了解一下 HTTP 請求與回應的基本結構。

HTTP 請求的基本結構

一個標準的 HTTP 請求由以下部分組成:

請求方法 (Request Method)
定義了客戶端希望對指定資源進行的操作，例如 GET 、 POST 、 PUT 、 DELETE 等。
URL (Uniform Resource Locator)
要訪問的資源的位置。
標頭 (Headers)
包含了關於請求的各種資訊，如 Accept 、 User-Agent 等。
請求主體 (Request Body)
在一些請求中，客戶端可以向伺服器發送資料，通常用於 POST 請求。

HTTP 回應的構成要素

當伺服器收到 HTTP 請求後，它需要發送一個 HTTP 回應。HTTP 回應的基本結構包括:

狀態碼 (Status Code)
三位數的代碼，指示請求的結果，例如200表示成功，404表示找不到資源，500表示伺服器錯誤等。
標頭 (Headers)
類似於請求標頭，提供有關回應的詳細資訊。
回應主體 (Response Body)
包含實際的回應內容，可能是 HTML、JSON、圖片等。

為 HTTP 伺服器添加不同請求

接下來，透過上面的範例進一步的改進我們的應用程式，讓它能夠處理不同的請求。

const server = http.createServer((req, res) => {
    if (req.method === "GET" && req.url === "/") {
        res.send("Home");
    } 
    else if (req.method === "GET" && req.url === "/about") {
        res.send("About");
    } 
    else {
        res.status(404).send("404");
    };
});

透過檢查 req.method 與 req.url 來回傳不同的結果。例如訪問 http://localhost:3000/about 時，會得到一個包含 About 的回應。

路由設定

路由是一個重要的概念，它允許我們根據請求的路徑提供不同的內容。在上一段的範例中，我們已經透過檢查 req.method 與 req.url 來添加了簡單的路由。現在，我們來透過 Express 來進一步添加更多路由來擴充我們的應用程式。

const http = require("http");
const express = require("express");
const app = express();
app.get("/", (req, res) => {
    res.send("Home");
});
app.get("/about", (req, res) => {
    res.send('About');
});
app.get("/contact", (req, res) => {
    res.send("Contact");
});
app.use((req, res) => {
    res.status(404).send("404");
});
http.createServer(app).listen(3000, () => {
    console.log("Server On.");
});

使用 Express，我們可以更輕鬆地定義路由、處理請求和回應，以及處理錯誤。範例中定義了三個路由，分別處理/、/about和/contact的GET請求。如果請求的路徑不匹配任何路由，Express 將回傳404錯誤處理來回應。

下一章節我們會更深入介紹 Express