首頁 > web前端 > js教程 > 主體

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

Barbara Streisand
發布: 2024-09-27 06:33:02
原創
496 人瀏覽過

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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!