如何开始使用 Node.js 和 Express

介紹

Express是一個用於 Node.js 的網頁應用程式框架，它允許您以更輕鬆、更乾淨的方式建立堅固的 API 和網頁伺服器。它是一個輕量級的套件，不會掩蓋核心的 Node.js 功能。

在本文中，您將安裝並使用 Express 來建立一個網頁伺服器。

先決條件

如果您想要跟隨本文進行操作，您將需要：

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

此教程已使用 Node v15.14.0、npm v7.10.0、express v4.17.1 和 serve-index v1.9.1 進行驗證。

步驟 1 — 設置項目

首先，打開您的終端窗口並創建一個新的項目目錄：

mkdir express-example

然後，切換到新創建的目錄中：

cd express-example

此時，您可以初始化一個新的 npm 項目：

npm init -y

接下來，您需要安裝 express 套件：

npm install express@4.17.1

此時，您已經準備好使用 Express 的新項目。

步驟2 — 建立 Express 伺服器

現在安裝了 Express，創建一個新的 server.js 檔案並用你的程式碼編輯器打開它。然後，添加以下代碼行：

const express = require('express');

const app = express();

這裡的第一行是從你安裝的套件中提取主要的 Express 模組。這個模組是一個函數，然後我們在第二行運行它來創建我們的 app 變數。你可以通過這種方式創建多個應用程序，每個應用程序都有自己的請求和響應。

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

這些代碼行是告訴我們的 Express 伺服器如何處理對我們服務器的 GET 請求。Express 包括類似的函數，用於 POST、PUT 等，使用 app.post(...)、app.put(...) 等。

這些函數有兩個主要參數。第一個是此函數要操作的 URL。在這種情況下，我們的目標是 '/'，這是我們網站的根目錄：在這種情況下，localhost:3000。

第二個參數是一個具有兩個參數的函數：req 和 res。 req 表示發送到伺服器的請求；我們可以使用此對象來讀取有關客戶端請求的數據。 res 表示我們將發送回客戶端的響應。

在這裡，我們在 res 上調用一個函數來發送一個響應：'成功的響應。'。

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

最後，一旦我們設置了請求，我們必須啟動我們的伺服器！我們將3000傳遞給listen函數，這告訴應用程序要監聽的端口。作為第二個參數傳遞的函數是可選的，當伺服器啟動時運行。這會在控制台中提供一些反饋，讓我們知道我們的應用程序正在運行。

重新查看您的終端窗口並運行您的應用程序：

node server.js

然後，訪問您的網頁瀏覽器中的localhost:3000。您的瀏覽器窗口將顯示：'成功的響應'。您的終端窗口將顯示：'範例應用正在監聽端口3000.'。

這樣我們就有了一個網絡伺服器！但是，我們絕對希望向客戶端發送更多而不僅僅是單行文本。讓我們簡要介紹一下中介軟件是什麼，以及如何將此伺服器設置為靜態文件伺服器！

第三步-使用中介軟件

使用Express，我們可以編寫並使用中介軟件函數，這些函數可以訪問發送到伺服器的所有HTTP請求。這些函數可以：

• 執行任何代碼。
• 對請求和響應對象進行更改。
• 結束請求-響應週期。
• 調用堆疊中的下一個中介軟件函數。

我們可以編寫自己的中介軟件函數，也可以像使用其他包一樣導入第三方中介軟件。

讓我們首先撰寫自己的中介軟體，然後嘗試使用一些現有的中介軟體來提供靜態檔案。

要定義一個中介軟體函數，我們呼叫 app.use() 並傳遞一個函數。這是一個在每個請求期間在控制台中打印當前時間的基本中介軟體函數：

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

調用 next() 函數告訴中介軟體如果有下一個中介軟體函數，就轉到下一個中介軟體函數。這很重要，要包含在我們函數的末尾 – 否則，請求將被卡在這個中介軟體上。

我們可以選擇性地傳遞一個路徑給中介軟體，這將只處理該路由的請求。例如：

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

通過將 '/request-type' 作為第一個參數傳遞給 app.use()，這個函數將只運行於發送到 localhost:3000/request-type 的請求。

重新查看你的終端窗口，並運行你的應用程式：

node server.js

然後，訪問你網頁瀏覽器中的 localhost:3000/request-type。你的終端窗口將顯示請求的時間戳和 'Request type: GET'。

現在，讓我們嘗試使用現有的中介軟體來提供靜態檔案。Express 自帶了一個內建的中介軟體函數：express.static。我們還將使用第三方中介軟體函數，serve-index，來顯示我們檔案的索引清單。

首先，在與 Express 伺服器位於同一資料夾內，創建一個名為 public 的目錄並將一些檔案放在其中。

然後，安裝套件serve-index:

npm install serve-index@1.9.1

首先，在伺服器文件的頂部導入serve-index套件。

然後，包括express.static和serveIndex中介軟體，並告訴它們要訪問的路徑和目錄名稱：

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

現在，重新啟動您的伺服器並導航到localhost:3000/public。您將看到您所有檔案的清單！

結論

在本文中，您安裝並使用了Express來構建網絡伺服器。您還使用了內置和第三方中介軟體函數。

繼續學習如何在Express中使用req對象，如何在Express中使用res對象和如何定義Express中的路由和HTTP請求方法。