Node.js Express 框架

在本教程中,我們還將介紹 express 框架。該框架的構建方式使其充當最小且靈活的 Node.js Web 應用程式框架,為構建單一和多頁以及混合 Web 應用程式提供了一組強大的功能。

在本教程中,你將學習 -

  • 什麼是 Express.js?
  • 安裝和使用 Express
  • 什麼是路由?
  • 使用 express.js 的示例 Web 伺服器

什麼是 Express.js?

Express.js 是一個 Node.js Web 應用程式伺服器框架,專門用於構建單頁、多頁和混合 Web 應用程式。

它已成為 Node.js 的標準伺服器框架。express 是 MEAN 堆疊的後端部分。

MEAN 是一個免費的開源[JavaScript](/ interactive-javascript-tutorials.html)軟體堆疊,用於構建動態網站和 Web 應用程式,具有以下元件;

  1. MongoDB - 標準的 NoSQL 資料庫

  2. Express.js - 預設的 Web 應用程式框架

  3. ** Angular.js** - 用於 Web 應用程式的 JavaScript MVC 框架

  4. Node.js - 用於可擴充套件伺服器端和網路應用程式的框架。

Express.js 框架使得開發一個可以用來處理多種型別請求的應用程式變得非常容易,例如 GET,PUT,POST 和 DELETE 請求。

安裝和使用 Express

Express 通過 Node Package 管理器安裝。這可以通過在命令列中執行以下行來完成

Bash
 bashCopynpm install express

上面的命令請求 Node 包管理器下載所需的 express 模組,並相應地安裝它們。

讓我們使用我們新安裝的 Express 框架並建立一個簡單的 Hello World 應用程式。

我們的應用程式將建立一個簡單的伺服器模組,它將偵聽埠號 3000。在我們的示例中,如果通過此埠上的瀏覽器發出請求,則伺服器應用程式將向客戶端傳送 Hello'World 響應。

JavaScript
 javascriptCopyvar express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

程式碼說明:

  1. 在我們的第一行程式碼中,我們使用 require 函式來包含 express 模組。
  2. 在我們開始使用 express 模組之前,我們需要建立 express 模組的物件。 這裡我們建立一個回撥函式。只要有人瀏覽我們的 Web 應用程式的根目錄,即 http:// localhost:3000,就會呼叫此函式。回撥函式將用於將字串 Hello World 傳送到網頁。
  3. 在回撥函式中,我們將字串 Hello World 傳送回客戶端。 res 引數用於將內容傳送回網頁。這個 res 引數是 request 模組提供的,用於能夠將內容傳送回網頁。
  4. 然後我們使用 listen 函式使我們的伺服器應用程式在埠號 3000 上偵聽客戶端請求。你可以在此處指定任何可用埠。

如果命令執行成功,則在瀏覽器中執行程式碼時看到 Hello World 顯示在網頁中。

  • 你可以清楚地看到,如果瀏覽 localhost URL 的埠 3000,你將看到頁面中顯示的字串 Hello World
  • 因為在我們的程式碼中我們專門提到伺服器要偵聽埠號 3000,我們能夠在瀏覽到這個 URL 時檢視輸出。

什麼是路由?

路由指的是確定應用程式響應對特定端點的客戶端請求的方式。

例如,客戶端可以為各種 URL 進行 GET,POST,PUT 或 DELETE http 請求,如下圖所示;

http://localhost:3000/Books

http://localhost:3000/Students

在上面的例子中,

  • 如果對第一個 URL 發出 GET 請求,則理想情況下響應應該是書籍列表。
  • 如果對第二個 URL 發出 GET 請求,則理想情況下響應應該是學生列表。
  • 因此,根據訪問的 URL,將呼叫 Web 伺服器上的不同函式,因此響應將傳送到客戶端。這是路由的概念。

每個路由都可以有一個或多個處理函式,這些函式在路由匹配時執行。

路由的一般語法如下所示

JavaScript
 javascriptCopyapp.METHOD(PATH, HANDLER)

其中,

  1. app 是快遞模組的一個例項

  2. METHOD 是一種 HTTP 請求方法(GET,POST,PUT 或 DELETE)

  3. PATH 是伺服器上的路由。

  4. HANDLER 是匹配路由時執行的功能。

讓我們看一下如何在 express 中實現路由的示例。我們的例子將建立 3 個路由,

  1. /Node 路由,如果訪問此路由,將顯示字串 Tutorial on Node
  2. /Angular 路由,如果訪問此路由,將顯示字串 Tutorial on Angular
  3. 預設路由將顯示字串 Welcome to Tastones Tutorials

我們的基本程式碼將與之前的示例保持一致。下面的程式碼片段用於說明如何實現路由。

JavaScript
 javascriptCopyvar express = require('express');
var app = express();
app.route('/Node',get(function(req,res)
{
    res.send("Tutorial on Node");
});
post(function(req,res)
{
    res.send("Tutorial on Angular");
});
put(function(req,res)
{
    res.send('Welcome to Tastones Tutorials');
}));

程式碼說明:

  1. 如果在瀏覽器中選擇了 URL http://localhost:3000/Node,我們在這裡定義路由。對於路由,我們附加了一個回撥函式,當我們瀏覽到節點 URL 時將呼叫該函式。 該函式有 2 個引數,
    • 我們將使用的主要引數是 res 引數,可用於將資訊傳送回客戶端。
    • req 引數包含有關正在進行的請求的資訊。有時,附加引數可以作為正在進行的請求的一部分傳送,因此 req 引數可用於查詢正在傳送的附加引數。
  2. 如果選擇了 Node 路由,我們使用 send 函式將字串 Tutorial on Node 傳送回客戶端。
  3. 如果在瀏覽器中選擇了 URL http://localhost:3000/Angular,我們在這裡定義一個路由。對於路由,我們附加了一個回撥函式,當我們瀏覽到 Angular URL 時將呼叫該函式。
  4. 如果選擇了 Angular 路由,我們使用 send 函式將字串 Tutorial on Angular 傳送回客戶端。
  5. 這是當瀏覽應用程式的路由時選擇的預設路由 - http://localhost:3000。選擇預設路由後,將向客戶端傳送訊息 Welcome to Tastones Tutorials

在瀏覽器中輸入 http://localhost:3000,如果命令執行成功,則在瀏覽器中執行程式碼時將顯示 Welcome to Tastones Tutorials

  • 你可以清楚地看到,如果我們瀏覽到埠 3000 上的 localhost 的 URL,你將看到頁面上顯示的字串 Welcome to Tastones Tutorials
  • 因為在我們的程式碼中,我們已經提到我們的預設 URL 會顯示此訊息。

在瀏覽器中輸入 http://localhost:3000/Node,它將選擇相應的節點路由,並顯示字串 Tutorial On Node

在瀏覽器中輸入 http://localhost:3000/Angular,它則將選擇相應的節點路由,並顯示字串 Tutorial On Angular

使用 express.js 的示例 Web 伺服器

從上面的例子中,我們已經看到我們如何根據路由決定要顯示的輸出。這種路由是大多數現代 Web 應用程式中使用的路由。Web 伺服器的另一部分是關於在 Node.js 中使用模板。

在建立快速動態節點應用程式時,一種簡單快捷的方法是為應用程式使用模板。市場上有許多用於製作模板的框架。在我們的例子中,我們將以玉石框架為例進行模板化。

Jade 通過 npm 安裝。這可以通過在命令列中執行以下行來完成

Bash
 bashCopynpm install jade

上面的命令請求 Node 包管理器下載所需的 jade 模組並相應地安裝它們。

注意: 最新版本的 Node jade 已被棄用,你應該使用 pug

讓我們使用我們新安裝的 jade 框架並建立一些基本模板。

步驟 1: 第一步是建立一個 jade 模板。建立一個名為 index.jade 的檔案並插入以下程式碼

Copyhtml
	head
	  title!=title
	  
	  body
	  
	    h1=message
  1. 這裡我們指定頁面的標題將被更改為呼叫此模板時傳遞的任何值。
  2. 我們還指定標頭標籤中的文字將被替換為在 jade 模板中傳遞的任何內容。
JavaScript
 javascriptCopyvar express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Tastones',message:'Welcome'})
});
var server=app.listen(3000,function() {});

程式碼說明:

  1. 在應用程式中指定的第一件事是 view engine,它將用於呈現模板。由於我們將使用 jade 來渲染我們的模板,因此我們相應地指定它。
  2. 渲染功能用於渲染網頁。在我們的示例中,我們正在渲染之前建立的模板 index.jade
  3. 我們將 TastonesWelcome 的值分別傳遞給引數 titlemessage。這些值將被 index.jade 模板中宣告的 titlemessage 引數替換。

如果命令執行成功,則在瀏覽器中執行程式碼時將顯示以下輸出。

  • 我們可以看到頁面標題設定為 Tastones,頁面的 h1 被設定為 Welcome
  • 這是因為在我們的 Node.js 應用程式中呼叫了 jade 模板。

本節概要

  • express 框架是用於開發 Node.js 應用程式的最常用框架。express 框架構建在 Node.js 框架之上,有助於快速跟蹤基於伺服器的應用程式的開發。
  • 路由用於根據請求將使用者轉移到 Web 應用程式的不同部分。每條路由的響應可以根據需要向使用者顯示的內容而變化。
  • 模板可用於以有效的方式注入內容。Jade 是 Node.js 應用程式中最常用的模板引擎之一。