Express.js 基礎：初學者指南 - Node.js 教學系列

Express.js 基礎：初學者指南 - Node.js 教學系列 - 第 10 部分

Barbara Streisand

發布： 2024-09-27 06:33:02

原創

630 人瀏覽過

Express.js Basics: A Beginner

簡介：

嘿那裡！如果您是 Node.js 新手，您可能聽說過 Express.js——一個用於建立 Web 伺服器和 API 的輕量級、快速且靈活的框架。在本指南中，我將引導您了解 Express 的基礎知識，向您展示入門是多麼容易。

準備好了嗎？讓我們潛入吧！

1.安裝 Express

首先，讓我們安裝 Express。確保您的電腦上設定了 Node.js 和 npm（Node 的套件管理器）。準備好後，打開終端機並執行以下命令：

npm install express

登入後複製

繁榮！您剛剛在專案中安裝了 Express。就這麼簡單。

2.建立您的第一個 Express 伺服器

現在，讓我們建造一些東西吧！以下是您如何建立一個超級簡單的 Express 伺服器，該伺服器偵聽請求並在有人造訪您的網站時以「Hello World」回應。

const express = require('express');  // Import Express
const app = express();  // Initialize your Express app

app.get('/', (req, res) => {  // Set up a route for GET requests to the root URL
  res.send('Hello World');  // Send a response
});

app.listen(3000, () => {  // Tell the app to listen on port 3000
  console.log('Server is running on port 3000');
});

登入後複製

如果您使用 Node app.js 執行此程式並在瀏覽器中開啟 http://localhost:3000，您將看到「Hello World」。啟動並運行伺服器就是這麼簡單！

3.什麼是中間件？

您可能常聽過「中間件」這個術語。簡而言之，中間件只是一個在接收請求和發送回應之間執行的函數。

讓我們來看一個簡單的例子：

app.use((req, res, next) => {
  console.log('Request received');
  next();  // Moves to the next middleware or route
});

登入後複製

在這種情況下，每次發出請求時，都會將「請求已收到」記錄到控制台。 next() 函數在這裡至關重要，因為它允許請求繼續到下一個中間件函數或路由處理程序。如果沒有它，請求將停止，並且不會發送任何回應。

如果您有興趣詳細了解中間件的工作原理，請查看了解 Express.js 和 Node.js 中的中間件。它涵蓋了不同類型的中間件，例如路由器級中間件和錯誤處理中間件。

4.路由：應用程式的主幹

路由是您在應用程式中設定不同 URL 的方式。您已經看到了根 (/) 路徑的基本路由，但您也可以處理其他 HTTP 方法，例如 POST，以處理表單提交或資料更新。

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

登入後複製

現在，當使用者向 /submit 提交表單時，此路由將處理它。您可以根據需要創建任意數量的路線 - Express 讓一切變得簡單！

5.提供靜態檔案

如果您想提供映像、CSS 檔案或其他靜態資源怎麼辦？快遞已經滿足你了！只需將這些文件放入一個資料夾（例如 public）中，然後告訴 Express 在哪裡可以找到它們：

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

登入後複製

現在，公用資料夾中的任何檔案（例如 style.css 或影像）都可以透過瀏覽器直接存取。

6.處理 JSON 資料

在現代應用程式中，您經常需要處理 JSON 資料——可能來自表單或 API 請求。 Express 讓這變得超簡單：

app.use(express.json());  // Add this middleware to parse JSON

app.post('/data', (req, res) => {
  console.log(req.body);  // Access the parsed JSON data
  res.send('Data received!');
});

登入後複製

現在，當帶有 JSON 資料的 POST 請求發送到 /data 時，Express 會自動解析 JSON，您可以在 req.body 中存取它。很簡單吧？

把一切都包起來

這就是 Express.js 的快速簡單介紹！只要幾行程式碼，您就學會如何：

安裝 Express，
設定基本伺服器，
使用中間件，
處理不同的路線，
提供靜態文件，
並使用 JSON 資料。

Express 是一個強大的框架，讓建立 Web 伺服器和 API 變得有趣又簡單。當您變得更加熟悉時，您可以開始探索更高級的功能，例如路由器、錯誤處理，甚至與資料庫整合。

快速旅程的專業提示

使用nodemon：當您進行更改時，它會自動重新啟動您的伺服器。只需執行 npm install -g nodemon 並使用nodemon app.js 而不是node app.js。
建立您的應用程式：隨著專案的發展，您將希望將路線和控制器組織到單獨的檔案中。這可以使您的程式碼保持乾淨且易於管理。

我希望這份指南能幫助您開始使用 Express！不斷嘗試，不知不覺中，您就會像專業人士一樣建立出色的網頁應用程式。

編碼愉快！

以上是Express.js 基礎：初學者指南 - Node.js 教學系列 - 第 10 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！