• Node.js Video Tutorials

Node.js - Express 框架

上一頁
下一頁

Express.js是一個簡潔靈活的Web應用程式框架，它提供了一套強大的功能來開發基於Node.js的Web和移動應用程式。Express.js是Node.js生態系統中最流行的Web框架之一。Express.js提供了現代Web框架的所有功能，例如模板引擎、靜態檔案處理、與SQL和NoSQL資料庫的連線。

Node.js內建了一個Web伺服器。其http模組中的createServer()方法啟動一個非同步http伺服器。可以使用核心Node.js功能開發Web應用程式。但是，必須費力地處理HTTP請求和響應的所有底層操作。Web應用程式框架負責這些常見任務，允許開發人員專注於應用程式的業務邏輯。像Express.js這樣的Web框架是一組實用程式，有助於快速、健壯且可擴充套件的Web應用程式的開發。

以下是Express框架的一些核心功能：

  • 允許設定中介軟體來響應HTTP請求。

  • 定義路由表，用於根據HTTP方法和URL執行不同的操作。

  • 允許根據傳遞給模板的引數動態渲染HTML頁面。

Express.js構建在connect中介軟體之上，而connect中介軟體又基於Node.js API的核心模組之一http。

Core Modules

安裝Express

Express.js包可在npm包倉庫中找到。讓我們在一個名為ExpressApp的應用程式資料夾中本地安裝express包。

D:\expressApp> npm init
D:\expressApp> npm install express --save

上述命令將安裝儲存到node_modules目錄中的本地，並在node_modules內建立一個express目錄。

Hello world 示例

以下是一個非常基本的Express應用程式，它啟動一個伺服器並在埠5000上監聽連線。此應用程式對主頁請求的響應為“Hello World！”。對於其他所有路徑，它將返回404 Not Found。

var express = require('express');
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(5000, function () {
   console.log("Express App running at http://127.0.0.1:5000/");
})

將上述程式碼儲存為index.js，然後從命令列執行它。

D:\expressApp> node index.js
Express App running at http://127.0.0.1:5000/

在瀏覽器視窗中訪問https://:5000/。它將顯示Hello World訊息。

First Application

應用程式物件

頂級express類的物件表示應用程式物件。它由以下語句例項化：

var express = require('express');
var app = express();

應用程式物件處理重要的任務，例如處理HTTP請求、渲染HTML檢視和配置中介軟體等。

app.listen()方法在指定的宿主和埠建立Node.js Web伺服器。它封裝了Node.js API的http模組中的createServer()方法。

app.listen(port, callback);

基本路由

app物件分別使用app.get()、app.post()、app.put()和app.delete()方法處理HTTP請求GET、POST、PUT和DELETE。HTTP請求和HTTP響應物件由NodeJS伺服器作為引數提供給這些方法。這些方法的第一個引數是一個字串，表示URL的端點。這些方法是非同步的，透過傳遞請求和響應物件來呼叫回撥函式。

GET 方法

在上面的示例中，我們提供了一個方法來處理客戶端訪問'/'端點時的GET請求。

app.get('/', function (req, res) {
   res.send('Hello World');
})

  • 請求物件 - 請求物件表示HTTP請求，並具有請求查詢字串、引數、正文、HTTP標頭等的屬性。

  • 響應物件 - 響應物件表示Express應用程式在收到HTTP請求時傳送的HTTP響應。響應物件的send()方法制定伺服器對客戶端的響應。

您可以列印請求和響應物件，它們提供了許多與HTTP請求和響應相關的的資訊，包括cookie、會話、URL等。

響應物件還有一個sendFile()方法，它將給定檔案的內容作為響應傳送。

res.sendFile(path)

將以下HTML指令碼儲存為express應用程式根資料夾中的index.html。

<html>
<body>
<h2 style="text-align: center;">Hello World</h2>
</body>
</html>

將index.js檔案更改為以下程式碼：

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname,"index.html"));
})

var server = app.listen(5000, function () {
   
   console.log("Express App running at http://127.0.0.1:5000/");
})

執行上述程式並訪問https://:5000/，瀏覽器將顯示如下Hello World訊息。

Index js File

讓我們使用sendFile()方法在index.html檔案中顯示一個HTML表單。

<html>
   <body>
      
      <form action = "/process_get" method = "GET">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">  <br>
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

上面的表單使用GET方法將資料提交到/process_get端點。因此，我們需要提供一個app.get()方法，在提交表單時呼叫該方法。

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

表單資料包含在請求物件中。此方法從request.query陣列中檢索資料，並將其作為響應傳送給客戶端。

index.js檔案的完整程式碼如下：

var express = require('express');
var app = express();
var path = require('path');

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

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname,"index.html"));
})

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(5000, function () {
   console.log("Express App running at http://127.0.0.1:5000/");
})

訪問https://:5000/。

Request Object

現在您可以輸入名字和姓氏，然後單擊提交按鈕檢視結果，它應該返回以下結果：

{"first_name":"John","last_name":"Paul"}

POST 方法

HTML表單通常用於將資料提交到伺服器，其method引數設定為POST，尤其是在要提交一些二進位制資料（例如影像）時。因此，讓我們將index.html中的method引數更改為POST，並將action引數更改為“process_POST”。

<html>
   <body>
      
      <form action = "/process_POST" method = "POST">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">  <br>
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

要處理POST資料，我們需要從npm安裝body-parser包。使用以下命令。

npm install body-parser –save

這是一個用於處理JSON、Raw、Text和URL編碼表單資料的node.js中介軟體。

此包使用以下require語句包含在JavaScript程式碼中。

var bodyParser = require('body-parser');

urlencoded()函式建立application/x-www-form-urlencoded解析器

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

在express應用程式程式碼中新增以下app.post()方法來處理POST資料。

app.post('/process_post', urlencodedParser, function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.body.first_name,
      last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

這是index.js檔案的完整程式碼

var express = require('express');
var app = express();
var path = require('path');

var bodyParser = require('body-parser');
// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

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

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname,"index.html"));
})

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
app.post("/process_post", )
var server = app.listen(5000, function () {
   console.log("Express App running at http://127.0.0.1:5000/");
})

從命令提示符執行index.js並訪問https://:5000/。

Command Prompt

現在您可以輸入名字和姓氏，然後單擊提交按鈕檢視以下結果：

{"first_name":"John","last_name":"Paul"}

提供靜態檔案

Express提供了一個內建的中介軟體express.static來提供靜態檔案，例如影像、CSS、JavaScript等。

您只需要將儲存靜態資源（例如影像、CSS和JavaScript檔案）的目錄名稱傳遞給express.static中介軟體即可開始直接提供這些檔案。例如，如果您將影像、CSS和JavaScript檔案儲存在名為public的目錄中，您可以這樣做：

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

我們將一些影像儲存在public/images子目錄中，如下所示：

node_modules
index.js
public/
public/images
public/images/logo.png

讓我們修改“Hello Word”應用程式以新增處理靜態檔案的功能。

var express = require('express');
var app = express();
app.use(express.static('public'));

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(5000, function () {
   console.log("Express App running at http://127.0.0.1:5000/");
})

將上述程式碼儲存到名為index.js的檔案中，並使用以下命令執行它。

D:\expressApp> node index.js

現在在任何瀏覽器中開啟http://127.0.0.1:5000/images/logo.png，並檢視以下結果。

Fifth Application

要詳細瞭解Express.js，請訪問我們的ExpressJS教程（ExpressJS）

列印頁面
上一頁
下一頁
廣告