Express學習文件

語言: CN / TW / HK

概述

Express_是一種保持最低程度規模的靈活Node.js Web 應用程式_框架,為Web 和移動應用程式提供一組強大的功能。是對於原生HTTP模組的進一步封裝

使用

安裝

npm install express

Request和Response物件

首先是 Request 請求物件,通常我們習慣用 req 變數來表示。下面列舉一些 req 上比較重要的成員:

  • req.body:客戶端請求體的資料,可能是表單或 JSON 資料

  • req.params:請求 URI 中的路徑引數

  • req.query:請求 URI 中的查詢引數

  • req.cookies:客戶端的 cookies

然後是 Response 響應物件,通常用 res 變數來表示,可以執行一系列響應操作

// 傳送一串 HTML 程式碼
res.send('HTML String');

// 傳送一個檔案
res.sendFile('file.zip');

// 渲染一個模板引擎併發送
res.render('index');

路由機制

客戶端(包括 Web 前端、移動端等等)向伺服器發起請求時包括兩個元素:路徑(URI)以及 HTTP 請求方法(包括 GET、POST 等等)。路徑和請求方法合起來一般被稱為 API 端點(Endpoint)。而伺服器根據客戶端訪問的端點選擇相應處理邏輯的機制就叫做路由。

定義路由的方式

app.METHOD(PATH, HANDLER)

  • app 就是一個 express 伺服器物件
  • METHOD 可以是任何小寫的 HTTP 請求方法,包括 getpostputdelete 等等
  • PATH 是客戶端訪問的 URI,例如 //about
  • HANDLER 是路由被觸發時的回撥函式,在函式中可以執行相應的業務邏輯

實現的小例子

const express = require("express");

const hostname = "localhost";
const port = 3000;

const app = express();
app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(port, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

執行npm run start,(提前在package.json中對start進行了配置了)

可以看到程式執行了,開啟http://localhost:3000進行檢視

可以看到GET請求是成功的

中介軟體

首先客戶端向伺服器發起請求,然後伺服器依次執行每個中介軟體,最後到達路由,選擇相應的邏輯來執行。

有兩點需要特別注意:

  • 中介軟體是按順序執行的,因此在配置中介軟體時順序非常重要,不能弄錯

  • 中介軟體在執行內部邏輯的時候可以選擇將請求傳遞給下一個中介軟體,也可以直接返回使用者響應

Express中介軟體的定義

在Express中,中介軟體就是一個函式:

function someMiddleware(req, res, next) {
  // 自定義邏輯
  next();
}

三個引數中,reqres 就是前面提到的 Request 請求物件和 Response 響應物件;而 next 函式則用來觸發下一個中介軟體的執行。

注意

如果忘記在中介軟體中呼叫 next 函式,並且又不直接返回響應時,伺服器會直接卡在這個中介軟體不會繼續執行下去哦!

在 Express 使用中介軟體有兩種方式:全域性中介軟體路由中介軟體

全域性中介軟體

通過app.use函式就可以註冊中介軟體

路由中介軟體

通過在路由定義時註冊中介軟體,此中介軟體只會在使用者訪問該路由對應的 URI 時執行,例如:

app.get('/middleware', someMiddleware, (req, res) => {
  res.send('Hello World');
});

那麼使用者只有在訪問 /middleware 時,定義的 someMiddleware 中介軟體才會被觸發,訪問其他路徑時不會觸發。

編寫中介軟體

接下來我們就開始實現第一個 Express 中介軟體。功能很簡單,就是在終端列印客戶端的訪問時間、 HTTP 請求方法和 URI,名為 loggingMiddleware。程式碼如下:

// ...

const app = express();

function loggingMiddleware(req, res, next) {
  const time = new Date();
  console.log(`[${time.toLocaleString()}] ${req.method} ${req.url}`);
  next();
}

app.use(loggingMiddleware);

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

// ...

中介軟體不僅可以讀取 req 物件上的各個屬性,還可以新增新的屬性或修改已有的屬性(後面的中介軟體和路由函式都可以獲取),能夠很方便地實現一些複雜的業務邏輯(例如使用者鑑權)。

處理404和伺服器錯誤

這張示意圖和之前的圖有兩點重大區別:

  • 每個路由定義本質上是一個中介軟體(更準確地說是一個中介軟體容器,可包含多箇中間件),當 URI 匹配成功時直接返回響應,匹配失敗時繼續執行下一個路由

  • 每個中介軟體(包括路由)不僅可以呼叫 next 函式向下傳遞、直接返回響應,還可以丟擲異常

  • 對於 404,只需在所有路由之後再加一箇中間件,用來接收所有路由均匹配失敗的請求

  • 對於錯誤處理,前面所有中介軟體丟擲異常時都會進入錯誤處理函式,可以使用 Express 自帶的,也可以自定義。

處理 404

在 Express 中,可以通過中介軟體的方式處理訪問不存在的路徑:

app.use('*', (req, res) => {
  // *表示匹配任何路徑,將此中介軟體放在所有路由後面
});


// 中介軟體和其他路由 ...

app.use('*', (req, res) => {
  res.status(404).render('404', { url: req.originalUrl });
});

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).render('500');
});

app.listen(port, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

使用子路由

在 Express 中,我們可以通過子路由 Router 來實現

*

express.Router 可以理解為一個迷你版的 app 物件,但是它功能完備,同樣支援註冊中介軟體和路由:

// 註冊一箇中間件
router.use(someMiddleware);

// 新增路由
router.get('/hello', helloHandler);
router.post('/world', worldHandler);

最後只需要把Router作為中介軟體加入到app中

*

這樣router下的全部路由都會加到/say之下,相當於:

app.get('/say/hello', helloHandler);
app.post('/say/world', worldHandler);

體會

這只是對express的基本使用的小體會,express博大精深,後續進階的文件會繼續補充的

「其他文章」