什麼是Express.js? 你應該知道的一切

什麼是Express.js? 你應該知道的一切配圖

 

Express.js是Node.js最流行的後端框架,它是JavaScript生態系統的一個廣泛組成部分。

它被設計用來構建單頁、多頁和混合網路應用,它也成為用Node.js開發後端應用的標準,它是被稱為MEVN棧的後端部分。

MEVN是一個免費和開源的JavaScript軟體棧,用於構建動態網站和Web應用程式,它有以下元件:

  1. MongoDB:MongoDB是標準的NoSQL資料庫。
  2. Express.js:用於構建網路應用的預設網路應用框架
  3. Vue.js:用於構建前端網路應用的JavaScript漸進式框架
  4. Node.js:用於可擴充套件的伺服器端和網路應用的JavaScript引擎。

本指南將探討Express.js框架的主要特點以及如何構建你的第一個應用程式。

  1. 什麼是Express.js?
  2. Express.js的用途是什麼?
  3. 為什麼你要使用Express.js?
  4. Express.js如何工作
  5. 如何建立一個Express.js應用程式

什麼是Express.js?

Express.js,有時也被稱為 “Express”,是一個簡約、快速、類似於Sinatra的Node.js後端框架,為開發可擴充套件的後端應用程式提供了強大的功能和工具。它為你提供了路由系統和簡化的功能,可以根據你的應用程式用例,通過開發更強大的元件和部件來擴充套件框架。

 

Express.js 官方Logo

Express.js 官方Logo

該框架為Web應用、HTTP請求和響應、路由和中介軟體提供了一套工具,用於構建和部署大規模、企業就緒的應用。

它還提供了一個名為Node Package Manager(NPM)的命令列介面工具(CLI),開發人員可以在這裡為開發的包提供原始碼。它還迫使開發人員遵循 “不要重複自己”(DRY)原則。

DRY原則的目的是減少軟體模式的重複,用抽象代替,或使用資料規範化來避免冗餘。

Express.js的用途是什麼?

Express.js在JavaScript/Node.js生態系統中被廣泛使用,你可以用它開發應用程式、API端點、路由系統和框架。

下面列出了一些你可以用Express.js構建的應用程式型別。

單頁面應用程式

單頁應用程式(SPA)是現代應用程式開發的方法,其中整個應用程式被路由到一個單一的索引頁面。Express.js是一個很好的框架,可以建立一個連線這些SPA應用程式的API,並持續地提供資料。單頁應用的一些例子有Gmail、谷歌地圖、Airbnb、Netflix、Pinterest、Paypal等等。公司正在使用SPA來建立一個流暢的、可擴充套件的體驗。

實時協作工具

協作工具的出現緩解了企業日常工作和協作的方式,有了Express.js,你可以輕鬆地開發協作和實時網路應用。

此外,該框架還被用來開發實時應用程式,如聊天和儀表盤應用程式,在這裡將WebSocket整合到框架中變得很簡單。

Express.js處理路由和中介軟體的部分,使開發者在開發實時協作工具時能夠集中精力處理這些實時功能的重要業務邏輯。

流媒體應用

像Netflix這樣的實時流應用很複雜,有很多層的資料流。要開發這樣的應用,你需要一個堅實的框架來有效處理非同步資料流。

這是一個理想的框架,用於構建和部署企業就緒和可擴充套件的流媒體應用程式。

金融技術應用

金融技術是一種計算機程式和其他技術,用於支援或實現銀行和金融服務。構建金融技術應用是目前的行業趨勢,而Express.js是構建高度可擴充套件的金融技術應用的首選框架。

如果你想建立一個擁有大量使用者和交易量的金融技術應用,那麼你將加入Paypal和Capital One等公司,使用Express.js開發和部署你的應用。

為什麼你應該使用Express.js

你應該考慮在你的下一個專案中使用Express.js的原因有幾個,從加快請求和響應的I/O到其單執行緒系統和非同步流程。它還使用MVC結構來簡化資料操作和路由系統。

讓我們仔細看看你應該考慮使用Express.js的一些主要原因。

靈活和快速

Express.js非常易於使用和靈活,而且它比其他Node.js框架都要快。作為一個簡約的框架,它提供了快速的應用開發,並減輕了掌握一個大框架的許多不同部分的壓力。它還提供了豐富的功能,如優秀的路由系統、中介軟體和內容協商,開箱即用。

MEAN棧的一部分

Express.js是在任何堆疊中以E代表的框架,如MERN、MEAN等。它也可以很容易地被整合到任何堆疊或技術中,以顯示框架在MEAN堆疊開發過程中的重要性。

更重要的是,它可以與比傳統的MySQL更強大的資料庫管理系統有效連線,並提供了一個跨越每個堆疊的無縫開發過程。這種特性的結合使得Express.js在MEAN開發者中非常受歡迎。

可擴充套件性

多年來,Express.js已經被證明是非常可擴充套件的,因為每天都有很多大公司在他們的伺服器上使用該框架。

它能有效地處理使用者的請求和響應,在開發大規模的Web應用時幾乎不需要額外的配置。

它有優秀的模組、包和額外的資源,這有助於開發人員建立可靠的、可擴充套件的網路應用程式。

被谷歌V8引擎支援

Express.js支援許多Google V8引擎包,這使得該框架在企業級構建和部署實時、協作和基於網路的應用程式方面非常強大。

Google V8引擎是一個開源的高效能JavaScript和WebAssembly引擎,它支援複雜和密集應用程式的高速和可擴充套件性。當你使用使用谷歌V8引擎的軟體包時,對你的後端應用來說是一個巨大的效能和可擴充套件性提升。

社羣支援

由於該框架是最流行的Node.js後端框架,它擁有最多的社羣支援、資源和軟體包,以應對任何開發挑戰。來自谷歌的支援也很廣泛,這使得該框架成為Node.js開發者中的熱門選擇。它的開源性質使開發者有機會建立可擴充套件的包和資源,以緩解開發,不僅是為他們自己,而且為所有其他使用Express.js編碼的人。

強大的路由系統

該框架擁有最強大、最健全的路由系統,它可以協助你的應用程式通過一個特定的端點響應客戶的請求。

通過Express.js中的路由系統,你可以使用框架的路由器例項將你臃腫的路由系統分割成可管理的檔案。

Express路由系統有助於管理你的應用程式結構,它將不同的路由分組到一個資料夾/目錄中。

開發人員通過使用Express路由器對功能進行分組,避免重複,從而建立更多可維護的程式碼。

中介軟體

Express.js是一個由一系列中介軟體組成的框架,以創造一個無縫的開發過程。

中介軟體是在HTTP請求到達路由處理程式之前或客戶端收到響應之前執行的程式碼,使框架有能力在客戶端請求之前或之後執行一個典型的指令碼。

通過中介軟體,開發人員可以插入指令碼來攔截應用程式的流程,例如,開發人員可以使用中介軟體來檢查使用者是否成功登入或登出。

Express.js如何工作

由於Express.js使用客戶端-伺服器模型來接受使用者的請求並向客戶端發回響應,因此它的工作方式與其他流行的框架(如Laravel)本身的工作方式並沒有什麼不同。

當使用者通過輸入網站地址從他們的網路瀏覽器傳送請求時,瀏覽器會嚮應用程式/伺服器傳送一個HTTP請求(許多使用Express.js建立的應用程式都託管在雲端的某個地方)。

伺服器將通過它的一個路由接收請求,並使用與請求的路由相匹配的控制器來處理它。

處理完畢後,伺服器將使用HTTP向客戶端傳送一個響應,因為這是一個來回的通訊協議。

返回給客戶端的響應可以是標準文字,也可以是一個動態的HTML頁面,瀏覽器將處理並顯示一個漂亮的網頁,或者是JSON資料,前端開發人員將處理這些資料以顯示網頁上的資訊。

讓我們用Express.js建立一個簡單的伺服器來監聽來自特定URL和埠號的傳入請求:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const express = require('express')
const app = express()
const port = 4000
app.get('/', (request, response) => {
response.send('Testing Hello World!')
})
app.listen(port, () => {
console.log(`Test app listening at http://localhost:${port}`)
})
const express = require('express') const app = express() const port = 4000 app.get('/', (request, response) => { response.send('Testing Hello World!') }) app.listen(port, () => { console.log(`Test app listening at http://localhost:${port}`) })
const express = require('express')
const app = express()
const port = 4000
app.get('/', (request, response) => {
response.send('Testing Hello World!')
})
app.listen(port, () => {
console.log(`Test app listening at http://localhost:${port}`)
})

這就是一個簡單的Express.js伺服器,它將在http://localhost:4000/ 上監聽傳入的請求,並返回一個 “Testing Hello World!“的文字響應。

如何建立一個Express.js應用程式

現在,讓我們使用新的Express.js 5.0建立一個真實世界的演示應用程式。為了開始,為你的新應用程式建立一個目錄,並安裝以下軟體包:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
mkdir first-express-app
cd first-express-app
npm install express@5.0.0-alpha.8 --save
mkdir first-express-app cd first-express-app npm install express@5.0.0-alpha.8 --save
mkdir first-express-app
cd first-express-app
npm install express@5.0.0-alpha.8 --save

接下來,在根目錄下建立一個index.js檔案,並在其中貼上以下內容:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
touch index.js
touch index.js
touch index.js

按照上面的演示設定好伺服器後,我們將建立一個Todos陣列,包含我們所有的todos,根據呼叫的終端返回給使用者。在 index.js 檔案中新增以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const express = require("express");
const app = express();
const port = 3000;
app.listen(port, () => {
console.log(`Test app listening at http://localhost:${port}`)
})
const todos = [
{
title: "Todo 1",
desc: "This is my first Todo",
completed: true,
},
{
title: "Todo 2",
desc: "This is my second Todo",
completed: true,
},
{
title: "Todo 3",
desc: "This is my third Todo",
completed: true,
},
{
title: "Todo 4",
desc: "This is my fourth Todo",
completed: true,
},
{
title: "Todo 5",
desc: "This is my fifth Todo",
completed: true,
},
];
// Data source ends here
const express = require("express"); const app = express(); const port = 3000; app.listen(port, () => { console.log(`Test app listening at http://localhost:${port}`) }) const todos = [ { title: "Todo 1", desc: "This is my first Todo", completed: true, }, { title: "Todo 2", desc: "This is my second Todo", completed: true, }, { title: "Todo 3", desc: "This is my third Todo", completed: true, }, { title: "Todo 4", desc: "This is my fourth Todo", completed: true, }, { title: "Todo 5", desc: "This is my fifth Todo", completed: true, }, ]; // Data source ends here
const express = require("express");
const app = express();
const port = 3000;
app.listen(port, () => {
console.log(`Test app listening at http://localhost:${port}`)
})
const todos = [
{
title: "Todo 1",
desc: "This is my first Todo",
completed: true,
},
{
title: "Todo 2",
desc: "This is my second Todo",
completed: true,
},
{
title: "Todo 3",
desc: "This is my third Todo",
completed: true,
},
{
title: "Todo 4",
desc: "This is my fourth Todo",
completed: true,
},
{
title: "Todo 5",
desc: "This is my fifth Todo",
completed: true,
},
];
// Data source ends here

接下來,我們將建立一個端點來檢索儲存在我們伺服器中的所有 Todos :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.get("/todos", (request, response) => {
response.status(200).json(todos);
});
app.get("/todos", (request, response) => { response.status(200).json(todos); });
app.get("/todos", (request, response) => {
response.status(200).json(todos);
});

接下來是一個端點,根據todo的ID來檢索單個Todo

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.get("/todos/:id", (request, response) => {
response
.status(200)
.json({ data: todos.find((todo) => todo.id === request.params.id) });
});
app.get("/todos/:id", (request, response) => { response .status(200) .json({ data: todos.find((todo) => todo.id === request.params.id) }); });
app.get("/todos/:id", (request, response) => {
response
.status(200)
.json({ data: todos.find((todo) => todo.id === request.params.id) });
});

現在,一個端點來儲存一個新的 todo

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.post("/todos", (request, response) => {
todos.push(request.body);
response.status(201).json({ msg: "Todo created successfully" });
});
app.post("/todos", (request, response) => { todos.push(request.body); response.status(201).json({ msg: "Todo created successfully" }); });
app.post("/todos", (request, response) => {
todos.push(request.body);
response.status(201).json({ msg: "Todo created successfully" });
});

接下來是一個端點,用 ID 更新一個現有的 todo

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.put("/todos/:id", (request, response) => {
const todo = todos.find((todo) => todo.id === request.params.id);
if (todo) {
const { title, desc, completed } = request.body;
todo.title = title;
todo.desc = desc;
todo.completed = completed;
response.status(200).json({ msg: "Todo updated successfully" });
return;
}
response.status(404).json({ msg: "Todo not found" });
});
app.put("/todos/:id", (request, response) => { const todo = todos.find((todo) => todo.id === request.params.id); if (todo) { const { title, desc, completed } = request.body; todo.title = title; todo.desc = desc; todo.completed = completed; response.status(200).json({ msg: "Todo updated successfully" }); return; } response.status(404).json({ msg: "Todo not found" }); });
app.put("/todos/:id", (request, response) => {
const todo = todos.find((todo) => todo.id === request.params.id);
if (todo) {
const { title, desc, completed } = request.body;
todo.title = title;
todo.desc = desc;
todo.completed = completed;
response.status(200).json({ msg: "Todo updated successfully" });
return;
}
response.status(404).json({ msg: "Todo not found" });
});

最後,我們將建立一個端點,根據 ID 刪除單個 todo

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
app.delete("/todos/:id", (request, response) => {
const todoIndex = todos.findIndex((todo) => (todo.id = request.params.id));
if (todoIndex) {
todos.splice(todoIndex, 1);
response.status(200).json({ msg: "Todo deleted successfully" });
}
response.status(404).json({ msg: "Todo not found" });
});
app.delete("/todos/:id", (request, response) => { const todoIndex = todos.findIndex((todo) => (todo.id = request.params.id)); if (todoIndex) { todos.splice(todoIndex, 1); response.status(200).json({ msg: "Todo deleted successfully" }); } response.status(404).json({ msg: "Todo not found" }); });
app.delete("/todos/:id", (request, response) => {
const todoIndex = todos.findIndex((todo) => (todo.id = request.params.id));
if (todoIndex) {
todos.splice(todoIndex, 1);
response.status(200).json({ msg: "Todo deleted successfully" });
}
response.status(404).json({ msg: "Todo not found" });
});

這個程式碼片段展示瞭如何在Express.js中實現DELETE功能。它通過引數收集Todo的ID,並在陣列中搜尋匹配的ID並將其刪除。

測試Express.js應用程式

現在是測試我們新的Express.js應用程式的時候了。

執行以下命令,用Postman測試我們新開發的REST API,確保我們有正確的資料:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
node index.js
node index.js
node index.js

你可以從官方網站下載Postman並執行下面的測試。就這樣,為了學習更多的知識,我們建議你使用我們在文章中討論的方法建立更多的功能,並擴充套件你對Express.js的知識。

Express.js的API結果

Express.js的API結果

小結

Express.js是Node.js生態系統中最受歡迎的框架,這也不難看出原因。它提供了廣泛的優勢和功能,可以從中受益。

Express.js的學習曲線很淺,使它非常簡單,容易上手。它抽象了不必要的或不需要的網路應用程式功能,併為你提供了一個薄薄的核心功能層,使之具有靈活性。

更重要的是,由於Express.js框架是Node.js的基礎,瞭解Express.js會自動讓你對其他流行的框架有一個適當的掌握。這些知識可以幫助你在業務邏輯構建方面做出重要決定,除了Express.js之外,還可以使用哪個框架,以及何時使用預設包或使用者包。

你接下來打算用Express.js構建什麼?請在評論區告訴我們。

評論留言