Express/Node 介紹

Node 簡介

Node（更正式的名稱是 Node.js）是一個開源、跨平臺的執行時環境，允許開發者使用 JavaScript 建立各種伺服器端工具和應用程式。該執行時旨在用於瀏覽器上下文之外（即直接在計算機或伺服器作業系統上執行）。因此，該環境省略了瀏覽器特定的 JavaScript API，並增加了對更傳統的作業系統 API 的支援，包括 HTTP 和檔案系統庫。

從 Web 伺服器開發的角度來看，Node 具有許多優點：

• 卓越的效能！Node 旨在最佳化 Web 應用程式的吞吐量和可伸縮性，是許多常見 Web 開發問題（例如，即時 Web 應用程式）的良好解決方案。
• 程式碼是用“普通 JavaScript”編寫的，這意味著在編寫客戶端和伺服器端程式碼時，花費在處理語言“上下文切換”上的時間更少。
• JavaScript 是一種相對較新的程式語言，與傳統 Web 伺服器語言（例如 Python、PHP 等）相比，它受益於語言設計的改進。許多其他新的流行語言編譯/轉換為 JavaScript，因此您也可以使用 TypeScript、CoffeeScript、ClojureScript、Scala、LiveScript 等。
• Node 包管理器（npm）提供了對數十萬個可重用包的訪問。它還具有一流的依賴項解析功能，並且還可以用於自動化大多數構建工具鏈。
• Node.js 是可移植的。它可在 Microsoft Windows、macOS、Linux、Solaris、FreeBSD、OpenBSD、WebOS 和 NonStop OS 上使用。此外，它受到許多 Web 主機提供商的良好支援，這些提供商通常為託管 Node 站點提供特定的基礎設施和文件。
• 它擁有一個非常活躍的第三方生態系統和開發者社群，許多人都樂於提供幫助。

您可以使用 Node.js 結合 Node HTTP 包建立一個簡單的 Web 伺服器。

Hello Node.js

以下示例建立了一個 Web 伺服器，它監聽 URL http://127.0.0.1:8000/ 上的任何 HTTP 請求——當收到請求時，指令碼將返回字串：“Hello World”。如果您已經安裝了 Node，可以按照以下步驟嘗試該示例：

1. 開啟終端（在 Windows 上，開啟命令列實用程式）

2. 建立要儲存程式的資料夾，例如 test-node，然後透過在終端中輸入以下命令進入該資料夾

   bash

   cd test-node
   

3. 使用您喜歡的文字編輯器，建立一個名為 hello.js 的檔案，並將以下程式碼貼上到其中

   js

   // Load HTTP module
   const http = require("http");
   
   const hostname = "127.0.0.1";
   const port = 8000;
   
   // Create HTTP server
   const server = http.createServer((req, res) => {
     // Set the response HTTP header with HTTP status and Content type
     res.writeHead(200, { "Content-Type": "text/plain" });
   
     // Send the response body "Hello World"
     res.end("Hello World\n");
   });
   
   // Prints a log once the server starts listening
   server.listen(port, hostname, () => {
     console.log(`Server running at http://${hostname}:${port}/`);
   });
   

4. 將檔案儲存到您上面建立的資料夾中。

5. 回到終端並輸入以下命令

   bash

   node hello.js
   

最後，在您的網路瀏覽器中導航到 https://:8000；您應該在空白網頁的左上角看到文字“Hello World”。

Web 框架

Node 本身並不直接支援其他常見的 Web 開發任務。如果您想為不同的 HTTP 動詞（例如 GET、POST、DELETE 等）新增特定處理，分別處理不同 URL 路徑（“路由”）的請求，提供靜態檔案，或者使用模板動態建立響應，Node 自身將派不上用場。您要麼需要自己編寫程式碼，要麼可以避免重複造輪子，使用 Web 框架！

Express 簡介

Express 是最流行的 Node.js Web 框架，也是許多其他流行 Node.js 框架的底層庫。它提供了以下機制：

• 為具有不同 HTTP 動詞和不同 URL 路徑（路由）的請求編寫處理程式。
• 與“檢視”渲染引擎整合，透過將資料插入模板來生成響應。
• 設定常見的 Web 應用程式設定，例如用於連線的埠，以及用於渲染響應的模板位置。
• 在請求處理管道的任何一點新增額外的請求處理“中介軟體”。

儘管 Express 本身相當簡約，但開發者已經建立了相容的中介軟體包來解決幾乎所有 Web 開發問題。有用於處理 cookie、會話、使用者登入、URL 引數、POST 資料、安全頭等許多其他方面的庫。您可以在Express 中介軟體上找到由 Express 團隊維護的中介軟體包列表（以及一些流行的第三方包列表）。

Node 和 Express 的起源？

Node 最初於 2009 年釋出，僅支援 Linux。npm 包管理器於 2010 年釋出，並在 2012 年添加了原生 Windows 支援。如果您想了解更多資訊，可以深入研究維基百科。

Express 最初於 2010 年 11 月釋出，目前 API 版本為 5。您可以檢視更新日誌瞭解當前版本中的更改資訊，並在GitHub上檢視更詳細的歷史釋出說明。

Node 和 Express 有多受歡迎？

Web 框架的流行度很重要，因為它表明該框架是否會持續維護，以及在文件、附加庫和技術支援方面可能提供哪些資源。

目前還沒有任何現成的、明確的伺服器端框架流行度衡量標準（儘管您可以使用諸如計算每個平臺的 GitHub 專案數量和 Stack Overflow 問題數量等機制來估計流行度）。一個更好的問題是，Node 和 Express 是否“足夠流行”以避免不受歡迎平臺的問題。它們是否在持續發展？您是否能在需要時獲得幫助？如果您學習 Express，是否有機會獲得有償工作？

根據使用 Express 的知名公司數量、程式碼庫貢獻者數量以及提供免費和付費支援的人數，是的，Express 是一個流行的框架！

Express 有自己的“主見”嗎？

Web 框架通常將自己稱為“有主見的”或“無主見的”。

有主見的框架是指對如何處理任何特定任務有“正確方式”的框架。它們通常支援特定領域（解決特定型別的問題）的快速開發，因為做任何事情的正確方式通常是眾所周知且有詳細文件的。然而，它們在解決其主要領域之外的問題時可能缺乏靈活性，並且往往提供的元件和方法選擇較少。

相比之下，無主見的框架在如何將元件組合在一起以實現目標，甚至應該使用哪些元件方面，限制要少得多。它們使開發者更容易使用最合適的工具來完成特定任務，儘管代價是您需要自己找到這些元件。

Express 是無主見的。您幾乎可以將任何相容的中介軟體以幾乎任何順序插入到請求處理鏈中。您可以將應用程式組織在一個檔案或多個檔案中，並使用任何目錄結構。您有時可能會覺得選擇太多！

Express 程式碼是什麼樣的？

在一個傳統的、資料驅動的網站中，Web 應用程式等待來自網路瀏覽器（或其他客戶端）的 HTTP 請求。收到請求後，應用程式會根據 URL 模式以及可能包含在 POST 資料或 GET 資料中的相關資訊，確定需要執行的操作。根據需要，它可能會從資料庫中讀取或寫入資訊，或執行滿足請求所需的其他任務。然後，應用程式將向網路瀏覽器返回一個響應，通常透過將檢索到的資料插入 HTML 模板中的佔位符來動態建立一個 HTML 頁面供瀏覽器顯示。

Express 提供了指定針對特定 HTTP 動詞（GET、POST、PUT 等）和 URL 模式（“路由”）呼叫哪個函式的方法，以及指定使用哪個模板（“檢視”）引擎、模板檔案位於何處以及使用哪個模板渲染響應的方法。您可以使用 Express 中介軟體來新增對 cookie、會話和使用者的支援，獲取 POST/GET 引數等。您可以使用 Node 支援的任何資料庫機制（Express 不定義任何與資料庫相關的行為）。

以下部分解釋了在使用 Express 和 Node 程式碼時會看到的一些常見內容。

HelloWorld Express

首先，讓我們考慮標準的 Express Hello World 示例（我們將在下面以及後續章節中討論其各個部分）。

const express = require("express");

const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`);
});

前兩行 require()（匯入）express 模組並建立一個 Express 應用程式。這個物件通常命名為 app，它具有路由 HTTP 請求、配置中介軟體、渲染 HTML 檢視、註冊模板引擎以及修改控制應用程式行為的應用程式設定（例如，環境模式、路由定義是否區分大小寫等）的方法。

程式碼的中間部分（以 app.get 開頭的三行）顯示了一個路由定義。app.get() 方法指定了一個回撥函式，該函式將在收到路徑（'/'）相對於站點根目錄的 HTTP GET 請求時被呼叫。回撥函式將請求和響應物件作為引數，並呼叫響應上的 send() 返回字串“Hello World!”

最後一段啟動指定埠（'3000'）上的伺服器，並向控制檯列印日誌註釋。伺服器執行後，您可以在瀏覽器中訪問 localhost:3000 檢視返回的示例響應。

匯入和建立模組

模組是 JavaScript 庫/檔案，您可以使用 Node 的 require() 函式將其匯入到其他程式碼中。Express 本身就是一個模組，我們在 Express 應用程式中使用的中介軟體和資料庫庫也是如此。

下面的程式碼展示了我們如何按名稱匯入模組，以 Express 框架為例。首先，我們呼叫 require() 函式，將模組名稱指定為字串（'express'），然後呼叫返回的物件建立一個 Express 應用程式。然後，我們可以訪問應用程式物件的屬性和函式。

const express = require("express");

const app = express();

您也可以建立自己的模組，並以相同的方式匯入。

要使物件在模組外部可用，您只需將它們作為附加屬性公開到 exports 物件上。例如，下面的 square.js 模組是一個匯出 area() 和 perimeter() 方法的檔案

exports.area = function (width) {
  return width * width;
};
exports.perimeter = function (width) {
  return 4 * width;
};

我們可以使用 require() 匯入此模組，然後呼叫匯出的方法，如下所示

const square = require("./square"); // Here we require() the name of the file without the (optional) .js file extension

console.log(`The area of a square with a width of 4 is ${square.area(4)}`);

如果您想一次性匯出完整的物件，而不是逐個屬性構建它，請將其分配給 module.exports，如下所示（您也可以這樣做，使 exports 物件的根成為建構函式或其他函式）

module.exports = {
  area(width) {
    return width * width;
  },

  perimeter(width) {
    return 4 * width;
  },
};

有關模組的更多資訊，請參閱 Modules (Node API 文件)。

使用非同步 API

JavaScript 程式碼經常使用非同步而非同步 API 進行可能需要一些時間才能完成的操作。同步 API 是指每個操作必須在下一個操作開始之前完成。例如，以下日誌函式是同步的，並將按順序（First, Second）將文字列印到控制檯。

console.log("First");
console.log("Second");

相比之下，非同步 API 是一種 API，它會啟動一個操作並立即返回（在操作完成之前）。一旦操作完成，API 將使用某種機制來執行其他操作。例如，下面的程式碼將打印出“Second, First”，因為儘管 setTimeout() 方法首先被呼叫並立即返回，但操作在幾秒鐘內並未完成。

setTimeout(() => {
  console.log("First");
}, 3000);
console.log("Second");

在 Node 中使用非阻塞非同步 API 比在瀏覽器中更重要，因為 Node 應用程式通常被編寫為單執行緒事件驅動的執行環境。“單執行緒”意味著所有對伺服器的請求都在同一個執行緒上執行（而不是派生到單獨的程序中）。這種模型在速度和伺服器資源方面非常高效。然而，它確實意味著，如果您的任何函式呼叫耗時長的同步方法，它們不僅會阻塞當前請求，還會阻塞您的 Web 應用程式正在處理的每個其他請求。

非同步 API 有多種方式可以通知您的應用程式它已完成。歷史上，使用的方法是在呼叫非同步 API 時註冊一個回撥函式，該函式在操作完成時被呼叫（這是上面使用的方法）。

現代 JavaScript 程式碼更常使用 Promises 和 async/await 來管理非同步程式流。您應儘可能使用 Promise。如果與使用回撥的程式碼一起工作，您可以使用 Node.js utils.promisify 函式以符合人體工程學的方式處理回撥 → Promise 轉換。

建立路由處理程式

在我們的 Hello World Express 示例（見上文）中，我們為網站根目錄 ('/') 的 HTTP GET 請求定義了一個（回撥）路由處理函式。

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

回撥函式接受請求和響應物件作為引數。在這種情況下，該方法呼叫響應上的 send() 返回字串“Hello World!”。還有許多其他響應方法用於結束請求/響應週期，例如，您可以呼叫 res.json() 傳送 JSON 響應或 res.sendFile() 傳送檔案。

Express 應用程式物件還提供了為所有其他 HTTP 動詞定義路由處理程式的方法，這些方法的使用方式大致相同

checkout(), copy(), delete(), get(), head(), lock(), merge(), mkactivity(), mkcol(), move(), m-search(), notify(), options(), patch(), post(), purge(), put(), report(), search(), subscribe(), trace(), unlock(), unsubscribe()。

有一個特殊的路由方法 app.all()，它將響應任何 HTTP 方法而被呼叫。它用於在特定路徑為所有請求方法載入中介軟體函式。以下示例（來自 Express 文件）展示了一個處理程式，它將針對對 /secret 的請求執行，無論使用何種 HTTP 動詞（前提是它受 http 模組支援）。

app.all("/secret", (req, res, next) => {
  console.log("Accessing the secret section…");
  next(); // pass control to the next handler
});

路由允許您匹配 URL 中的特定字元模式，並從 URL 中提取一些值，然後將它們作為引數傳遞給路由處理程式（作為作為引數傳遞的請求物件的屬性）。

通常，將網站特定部分的路由處理程式分組在一起，並使用一個共同的路由字首訪問它們（例如，一個擁有 Wiki 的網站可能將所有與 Wiki 相關的路由放在一個檔案中，並透過 /wiki/ 的路由字首訪問它們）很有用。在 Express 中，這透過使用 express.Router 物件來實現。例如，我們可以在名為 wiki.js 的模組中建立我們的 wiki 路由，然後匯出 Router 物件，如下所示

// wiki.js - Wiki route module

const express = require("express");

const router = express.Router();

// Home page route
router.get("/", (req, res) => {
  res.send("Wiki home page");
});

// About page route
router.get("/about", (req, res) => {
  res.send("About this wiki");
});

module.exports = router;

要在主應用程式檔案中使用路由器，我們首先需要 require() 路由模組（wiki.js），然後呼叫 Express 應用程式上的 use() 將路由器新增到中介軟體處理路徑。然後，這兩個路由將可透過 /wiki/ 和 /wiki/about/ 訪問。

const wiki = require("./wiki.js");

// …
app.use("/wiki", wiki);

我們將在連結部分路由和控制器中向您展示更多關於使用路由，尤其是使用 Router 的內容。

使用中介軟體

中介軟體在 Express 應用程式中被廣泛使用，從提供靜態檔案到錯誤處理，再到壓縮 HTTP 響應。路由函式透過向 HTTP 客戶端返回一些響應來結束 HTTP 請求-響應週期，而中介軟體函式通常對請求或響應執行一些操作，然後呼叫“堆疊”中的下一個函式，這可能是更多的中介軟體或路由處理程式。中介軟體的呼叫順序由應用程式開發者決定。

大多數應用程式將使用第三方中介軟體來簡化常見的 Web 開發任務，例如處理 cookie、會話、使用者認證、訪問請求 POST 和 JSON 資料、日誌記錄等。您可以在Express 團隊維護的中介軟體包列表中找到（其中還包括其他流行的第三方包）。其他 Express 包可在 npm 包管理器上找到。

要使用第三方中介軟體，您首先需要使用 npm 將其安裝到您的應用程式中。例如，要安裝 morgan HTTP 請求日誌記錄中介軟體，您可以這樣做

npm install morgan

然後，您可以在 Express 應用程式物件上呼叫 use() 將中介軟體新增到堆疊中。

const express = require("express");
const logger = require("morgan");

const app = express();
app.use(logger("dev"));
// …

您可以編寫自己的中介軟體函式，並且您很可能需要這樣做（如果只是為了建立錯誤處理程式碼）。中介軟體函式和路由處理程式回撥之間唯一的區別是中介軟體函式有第三個引數 next，如果中介軟體函式沒有完成請求週期，則預期會呼叫它（當中間件函式被呼叫時，它包含必須呼叫的下一個函式）。

您可以使用 app.use() 將中介軟體函式新增到所有響應的處理鏈中，或使用關聯的方法（app.get()、app.post() 等）為特定的 HTTP 動詞新增。在兩種情況下，路由的指定方式相同，儘管在呼叫 app.use() 時路由是可選的。

下面的示例展示瞭如何使用這兩種方法以及有/無路由來新增中介軟體函式。

const express = require("express");

const app = express();

// An example middleware function
function middlewareFunction(req, res, next) {
  // Perform some operations
  next(); // Call next() so Express will call the next middleware function in the chain.
}

// Function added with use() for all routes and verbs
app.use(middlewareFunction);

// Function added with use() for a specific route
app.use("/some-route", middlewareFunction);

// A middleware function added for a specific HTTP verb and route
app.get("/", middlewareFunction);

app.listen(3000);

Express 文件中有很多關於使用和編寫 Express 中介軟體的優秀文件。

提供靜態檔案

您可以使用 express.static 中介軟體來提供靜態檔案，包括您的影像、CSS 和 JavaScript（static() 是唯一一個實際屬於 Express 的中介軟體函式）。例如，您可以使用下面的行來從名為“public”的目錄中提供影像、CSS 檔案和 JavaScript 檔案，該目錄與您呼叫 Node 的目錄處於同一級別。

app.use(express.static("public"));

public 目錄中的任何檔案都透過將它們的檔名（相對於基本“public”目錄）新增到基本 URL 來提供。例如

https://:3000/images/dog.jpg
https://:3000/css/style.css
https://:3000/js/app.js
https://:3000/about.html

您可以多次呼叫 static() 以提供多個目錄。如果一箇中間件函式找不到檔案，它將被傳遞給後續的中介軟體（中介軟體的呼叫順序基於您的宣告順序）。

app.use(express.static("public"));
app.use(express.static("media"));

您還可以為靜態 URL 建立一個虛擬字首，而不是將檔案新增到基本 URL。例如，在這裡我們指定一個掛載路徑，以便檔案以“/media”字首載入

app.use("/media", express.static("public"));

現在，您可以從 /media 路徑字首載入 public 目錄中的檔案。

https://:3000/media/images/dog.jpg
https://:3000/media/video/cat.mp4
https://:3000/media/cry.mp3

處理錯誤

錯誤由一個或多個特殊的中介軟體函式處理，這些函式有四個引數，而不是通常的三個：(err, req, res, next)。例如

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send("Something broke!");
});

它們可以返回任何所需的內容，但必須在所有其他 app.use() 和路由呼叫之後呼叫，以便它們是請求處理過程中的最後一箇中間件！

Express 自帶內建錯誤處理程式，它負責處理應用程式中可能遇到的任何剩餘錯誤。此預設錯誤處理中介軟體函式新增到中介軟體函式堆疊的末尾。如果您將錯誤傳遞給 next() 但未在錯誤處理程式中處理它，它將由內建錯誤處理程式處理；錯誤將隨堆疊跟蹤一起寫入客戶端。

有關更多資訊，請參閱錯誤處理（Express 文件）。

使用資料庫

Express 應用程式可以使用 Node 支援的任何資料庫機制（Express 本身不定義任何特定的附加行為/資料庫管理要求）。有許多選項，包括 PostgreSQL、MySQL、Redis、SQLite、MongoDB 等。

為了使用這些，您必須首先使用 npm 安裝資料庫驅動程式。例如，要安裝流行的 NoSQL MongoDB 的驅動程式，您將使用以下命令

npm install mongodb

資料庫本身可以安裝在本地或雲伺服器上。在您的 Express 程式碼中，您匯入驅動程式，連線到資料庫，然後執行建立、讀取、更新和刪除（CRUD）操作。下面的示例展示瞭如何使用 MongoDB 查詢“哺乳動物”記錄

const { MongoClient } = require("mongodb");

const uri = "mongodb://:27017";
const client = new MongoClient(uri);

async function run() {
  try {
    await client.connect();
    const db = client.db("animals");
    const mammals = await db.collection("mammals").find().toArray();
    console.log(mammals);
  } finally {
    await client.close();
  }
}

run().catch(console.error);

另一種流行的方法是透過物件關係對映器（“ORM”）間接訪問資料庫。在這種方法中，您將資料定義為“物件”或“模型”，ORM 將這些資料對映到底層資料庫格式。這種方法的優點是，作為開發人員，您可以繼續以 JavaScript 物件的角度思考，而不是資料庫語義，並且有一個明確的地方可以執行傳入資料的驗證和檢查。我們將在後面的文章中討論更多關於資料庫的內容。

有關更多資訊，請參閱資料庫整合（Express 文件）。

渲染資料（檢視）

模板引擎（在 Express 中也稱為“檢視引擎”）允許您在模板中指定輸出文件的結構，使用佔位符來儲存資料，這些資料將在生成頁面時填充。模板通常用於建立 HTML，但也可以建立其他型別的文件。

Express 支援許多模板引擎，其中最著名的是 Pug（以前稱為“Jade”）、Mustache 和 EJS。每個模板引擎都有其獨特的優勢，適用於特定的用例（透過網際網路搜尋可以輕鬆找到相對比較）。Express 應用程式生成器預設使用 Jade，但也支援其他幾個。

在您的應用程式設定程式碼中，您可以使用“views”和“view engine”設定來設定要使用的模板引擎以及 Express 應該查詢模板的位置，如下所示（您還需要安裝包含您的模板庫的包！）。

const express = require("express");
const path = require("path");

const app = express();

// Set directory to contain the templates ('views')
app.set("views", path.join(__dirname, "views"));

// Set view engine to use, in this case 'some_template_engine_name'
app.set("view engine", "some_template_engine_name");

模板的外觀將取決於您使用的引擎。假設您有一個名為 "index.<template_extension>" 的模板檔案，其中包含名為 'title' 和 "message" 的資料變數佔位符，您將在路由處理程式函式中呼叫 Response.render() 來建立併發送 HTML 響應

app.get("/", (req, res) => {
  res.render("index", { title: "About dogs", message: "Dogs rock!" });
});

有關更多資訊，請參閱在 Express 中使用模板引擎（Express 文件）。

檔案結構

Express 在結構或您使用的元件方面沒有任何假設。路由、檢視、靜態檔案和其他應用程式特定邏輯可以存在於任意數量的檔案中，並具有任何目錄結構。雖然將整個 Express 應用程式放在一個檔案中是完全可能的，但通常按功能（例如，賬戶管理、部落格、論壇）和架構問題領域（例如，如果您碰巧使用 MVC 架構，則為模型、檢視或控制器）將應用程式拆分為檔案是有意義的。

在後面的主題中，我們將使用 Express 應用程式生成器，它建立了一個模組化的應用程式骨架，我們可以輕鬆擴充套件它來建立 Web 應用程式。

總結

恭喜，您已完成 Express/Node 之旅的第一步！您現在應該瞭解 Express 和 Node 的主要優點，以及 Express 應用程式的主要部分可能是什麼樣子（路由、中介軟體、錯誤處理和模板程式碼）。您還應該瞭解，Express 是一個無主見的框架，因此您如何將這些部分組合在一起以及您使用的庫在很大程度上取決於您！

當然，Express 刻意是一個非常輕量級的 Web 應用程式框架，因此它的許多優點和潛力都來自第三方庫和功能。我們將在後續文章中更詳細地探討這些。在我們的下一篇文章中，我們將著手設定 Node 開發環境，以便您可以看到一些 Express 程式碼的實際執行。

另見

• Scrimba 的學習 Node.js ^{MDN 學習合作伙伴} 提供了一個有趣、互動式的 Node.js 入門教程。
• Scrimba 的學習 Express.js ^{MDN 學習合作伙伴} 在前一個連結的基礎上，展示瞭如何開始使用 Express 框架構建伺服器端網站。
• 模組（Node API 文件）
• Express（主頁）
• 基本路由（Express 文件）
• 路由指南（Express 文件）
• 在 Express 中使用模板引擎（Express 文件）
• 使用中介軟體（Express 文件）
• 為 Express 應用程式編寫中介軟體（Express 文件）
• 資料庫整合（Express 文件）
• 在 Express 中提供靜態檔案（Express 文件）
• 錯誤處理（Express 文件）

• 概述：Express Web 框架 (Node.js/JavaScript)
• 下一頁