天天看點

Express與常用中間件的使用

1. Express是什麼?

在Node.js後端開發中,使用官方提供的http子產品可以建立一個Web伺服器應用,但是此子產品非常底層,要處理各種情形,比較繁瑣,為此便有了 Express ,它是第三方子產品,是一個基于Node.js的http子產品而編寫的高層子產品,簡化Web伺服器端應用的開發。

2. Express架構使用方法

(1). 下載下傳express

npm   i   express

(2). 引入express

const express = require('express')

(3). 建立伺服器并監聽端口

var server = express( );

server.listen(2130);

3. 使用Express處理用戶端的GET請求

(1). 接收GET請求中的查詢字元串

Express與常用中間件的使用

(2). 接收GET請求中的請求參數

Express與常用中間件的使用

4. 使用Express處理用戶端的POST請求

Express與常用中間件的使用

在實際項目中,不同路徑可能要求使用者使用不同的内容類型,body-parser還支援為單個express路由添加請求體解析

Express與常用中間件的使用

5. app.use( )定義路由

在實際的項目中,我們通常用 app.use( ) 代替 app.get( ) 和 app.post( ),這是因為,路由規則是 app.use(path,router)定義的,router代表一個由express

.Router()

建立的對象,在路由對象中可定義多個路由規則,而當我們的路由隻有一條規則時,可直接用一個回調作為簡寫,也可直接使用app.get( ) 或app.post( )方法,是以當一個路徑有多個比對規則時,使用app.use( ) 否則使用相應的app.get( ) 或app.post( )方法。

使用app.use( )定義路由,在路由的回調方法可以進行各種操作,此處作了簡化。

Express與常用中間件的使用

6. Express中間件

Express 是一個自身功能極簡,完全是由路由和中間件構成一個的 web 開發架構,從本質上來說,一個 Express 應用就是在調用各種中間件。

中間件(Middleware) 是一個函數,它可以通路請求對象(request object (req)), 響應對象(response object (res)), 和 web 應用中處于請求-響應循環流程中的中間件,一般被命名為 next 的變量。

中間件的功能包括:

(1). 執行任何代碼。

(2). 修改請求和響應對象。

(3). 終結請求-響應循環。

(4). 調用堆棧中的下一個中間件。

如果目前中間件沒有終結請求-響應循環,則必須調用 next() 方法将控制權交給下一個中間件,否則請求就會挂起。

Express 應用可使用如下幾種中間件:

(1). 應用級中間件

(2). 路由級中間件

(3). 錯誤進行中間件

(4). 内置中間件

(5). 第三方中間件

使用可選則挂載路徑,可在應用級别或路由級别裝載中間件,另外,你還可以同時裝在一系列中間件函數,進而在一個挂載點上建立一個子中間件棧。

app.use(url,  (req, res, next)=>{

      //中間件要執行的代碼

      //調用下一個中間件或路由

      next( );  

})

express.static 是Express目前唯一内置的一個中間件,用來處理靜态資源檔案,使用方法如下:

app.use(express.static(__dirnamee+'/public'))

;

這個中間件代表若用戶端請求了/public目錄下的某個資源,它可以直接向用戶端傳回,不會再調用後續的路由。

7. 常用中間件body-parser的使用

body-parser是一個HTTP

請求體解析中間件

,使用這個子產品可以解析不同格式的請求體,Express架構中就是使用這個子產品做為請求體解析中間件,提供方法如下:

(1). bodyParser.json(options)  解析JSON格式資料

(2). bodyParser.raw(options)  解析二進制格式資料(Buffer流資料)

(3). bodyParser.text(options) 解析文本格式資料

(4). bodyParser.urlencoded(options)  解析UTF-8的編碼資料

常用的使用方法有三種:

(1). 全局使用:攔截所有的請求執行相同的解析

Express與常用中間件的使用

(2). 局部使用:針對特定路由下的特定請求

Express與常用中間件的使用

(3). 為每種類型分别設定Content-Type 屬性

Express與常用中間件的使用

8. 常用中間件cookie-parser的使用

cookie-parser是Express官方腳手架内置的中間件之一,用來實作cookie的解析,使用方法如下:

Express與常用中間件的使用

當需要清除cookie時,可以這樣:

Express與常用中間件的使用

設定cookie時其中有很多可用的選項的,比較冷門,這裡就不再贅述了。

9. 常用中間件cookie-session的使用

session是伺服器記錄使用者狀态資訊的技術,用來存儲多次請求之間的狀态資訊,并把這些資訊存在伺服器的内容當中。

Express與常用中間件的使用

使用session中間件,前提是必須要使用cookie-parser,因為隻有cookie解析出來,session才能讀出來,cookies-session強制要求必須要有個key,用于加密keys為一個數組,裡面的key會循環使用,以提高安全性。

以下以統計通路次數為例說明簡單使用:

Express與常用中間件的使用

10. 常用中間件multer的使用

multer這個中間件主要用來處理客戶上傳的各種檔案并且儲存到指定的位置,使用方法如下:

Express與常用中間件的使用

如果希望上傳檔案後檔案存在硬碟的任意地方,設定成絕對路徑,同時檔案是一個有意義的檔案名,而不是一串編碼,可以這樣操作,在使用multer時作一些配置。

Express與常用中間件的使用

multer還有捕獲錯誤的功能,如果要捕獲錯誤,就不能用server.use( ) 的方法來使用中間件,需要直接在server.post( )中調用中間件,并且把錯誤資訊發送到用戶端,如下所示:

Express與常用中間件的使用

11. 模闆引擎jade的使用

jade是nodejs的模闆引擎,它的特點是破壞式,并且強依賴,它省略了html中尖括号,采用了嚴格的縮進格式,劃分了層次結構,提高了可閱讀性。

注:如果環境已經正确安裝,那麼大多數情況下的錯誤都是縮進惹的禍,一定要保持一緻的縮進格式,建議統一将 tab 鍵輸出為空格,并采用 4 個空格作為标準縮進。

如何使用jade:

(1). 引入子產品

Express與常用中間件的使用

(2). 調用方法

Express與常用中間件的使用

關于jade的文法:

(1). 注釋

jade 支援兩種注釋,單行注釋和多行注釋,每種注釋支援兩種模式:輸出到源檔案和不輸出到源檔案,差别在于多了一個 

-

單行輸出注釋和單行不輸出注釋:

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

多行注釋的内容要在注釋符号的下一行,以相同的縮進來編寫。

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(2). 标簽

jade會自動檢測自閉和标簽,也可以手動添加閉合标簽,如 img(src="images/1.jpg")  等同于  img(src="images/1.jpg")/。

元素包含的文本内容,跟在屬性的後面、或者等号後。

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(3). 屬性

jade屬性統一放在括号内,用逗号或者空格隔開。

布爾屬性,若将值設為false,則不會加入該屬性。

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

對于頻繁使用的類名和ID,Jade提供了兩個字面量:類名字面量和ID字面量,若不在字面量前指定标簽名,則預設使用 

div

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

為了友善修改常用屬性 

style

,Jade接收一個類似JavaScript對象類型的參數

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

為友善的添加其他自定義屬性,Jade特意增加一個文法格式 

&attributes

 :

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

另外,還可以根據條件設定屬性的文法形式:

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

 (4). 文本

“|”将後面的内容原樣輸出,作用域隻有一行,是以,“|”後面可以包含元素。

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

“.”原樣輸出多行文本,一般填充<script>或<style>元素包含的内容

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

“#[ ]”在一段純文字中插入jade語句

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(5). 資料轉碼

“=” 、“!=” 、“#{}”、“!{}” 。

“=”、“#{}” 會對資料進行轉碼。 

“!=” 、“!{}” 不會轉碼。

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(6). 插入JavaScript

用“-”開頭嵌入JavaScript代碼

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(7). 周遊 ( 這jade自帶文法,語句前不需要“-” )

each...in           周遊

while                周遊

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(8). 條件判斷 ( 這jade自帶文法,語句前不需要“-” )

if ... else            條件判斷

case... when     條件判斷

unless               取反

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(9). mixin 複用

jade複用塊用關鍵字 “mixin” 定義,用“+” 調用。

複用塊 隐含參數 "block" 的使用。

"block"  隐含參數  “attributes”。

這裡用的是 “!=”,而不是 “=”,如果用“=”,表示後面的内容會被轉碼;“!=”表示不會被轉碼。

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(10). include 引用 

實作高度複用的一種方式是将代碼片段儲存到不同檔案中,然後在需要的地方導入這些片段,為此,Jade 提供了 

include

 指令

head

 代碼片段:

Express與常用中間件的使用

footer

 代碼片段:

Express與常用中間件的使用

在頁面的引入:

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

(11). 

extends 

繼承

Jade 中使用 

extends

 來繼承代碼片段,與 

include

 引用代碼段不同,繼承可以修改代碼片段。

首先,在

layout

 頁面使用 

block

 辨別符,設定一個可修改的代碼片段,緊跟之後的是該代碼片段的名字。

Express與常用中間件的使用

然後,在 

index

 頁面繼承 

layout

, 并可以根據代碼片段的名字修改相關代碼:

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

上面的繼承方式,會抹除原來代碼片段的部分,如果想要追加代碼片段,可以使用 

append

 和 

prepend

 指令。

append

 用于在原來代碼片段之後追加。

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

prepend

 用于在原有代碼之前追加。

Express與常用中間件的使用

解析生成的HTML如下:

Express與常用中間件的使用

12. 模闆引擎ejs的使用

EJS是一個JavaScript模闆庫,用來從JSON資料中生成HTML字元串,它俱有緩存功能,能夠緩存已經解析好的html模版,相比jade你可以更容易地通過EJS模闆代碼看懂你的代碼。

如何使用ejs

(1). 引入子產品

Express與常用中間件的使用

(2). 調用方法

Express與常用中間件的使用

關于ejs的文法:

(1). <% code %>用于執行其中javascript代碼

Express與常用中間件的使用

(2). <%= code %>  會對code進行html轉義

結合上面兩張圖,可以看出模闆裡面的"="号後面的值由外部傳入,最終得到下面這樣的結果。

Express與常用中間件的使用

(3). <%-code %>  不會對code進行轉義,這一行代碼不會執行,像是被注釋了一樣,然後顯示原來的html,也不會影響整個頁面的執行。

<h1><%-title %>asd</h1>       

此處最後顯示asd,及顯示原網頁

<p><%

#'hello world'%>asd</p>   

此處最後顯示asd,及顯示原網頁

(4). 利用<%- include filename %>加載其他頁面模版,filename隻能是字元串,不能為變量。

(5). 支援自定義标簽,比如'<%'可以使用'{{','%>' 用'}}'代替,自定方法如下:

app.set("view options",{ 

        "open":"{{", 

        "close":"}}"

});

(6). 提供一些輔助函數,用于模版中使用 

first-傳回數組的第一個元素; 

last-傳回數組的最後一個元素; 

capitalize-傳回首字母大寫的字元串; 

downcase-傳回字元串的小寫; 

upcase-傳回字元串的大寫; 

sort-排序; 

sort_by:'prop'-按照指定的prop屬性進行升序排序; 

size-傳回長度,即length屬性,不一定非是數組才行; 

plus:n-加上n,将轉化為Number進行運算; 

minus:n-減去n,将轉化為Number進行運算; 

times:n-乘以n,将轉化為Number進行運算; 

divided_by:n-除以n,将轉化為Number進行運算; 

join:'val'-将數組用'val'最為分隔符,進行合并成一個字元串; 

truncate:n-截取前n個字元,超過長度時,将傳回一個副本 

truncate_words:n-取得字元串中的前n個word,word以空格進行分割; 

replace:pattern,substitution-字元串替換,substitution不提供将删除比對的子串; 

prepend:val-如果操作數為數組,則進行合并;為字元串則添加val在前面; 

append:val-如果操作數為數組,則進行合并;為字元串則添加val在後面; 

map:'prop'-傳回對象數組中屬性為prop的值組成的數組; 

reverse-翻轉數組或字元串; 

get:'prop'-取得屬性為'prop'的值; 

json-轉化為json格式字元串;

繼續閱讀