柚子快報(bào)激活碼778899分享：Express框架---中間件

http://yzkb.51969.com/

使用中間件

Express是一個(gè)自身功能極簡(jiǎn)，完全是路由和中間件構(gòu)成一個(gè)web開(kāi)發(fā)框架：從本質(zhì)上來(lái)說(shuō)，一個(gè)Express應(yīng)用就是在調(diào)用各種中間件。

中間件是可以訪(fǎng)問(wèn)請(qǐng)求對(duì)象 （req），響應(yīng)對(duì)象（res）以及next應(yīng)用程序請(qǐng)求-響應(yīng)周期中的函數(shù)。

中間件就是在請(qǐng)求后，響應(yīng)前要執(zhí)行的函數(shù)，中間件就是函數(shù)使用app.use() 方法，可以給express應(yīng)用，添加任意中間件功能函數(shù)。

中間件分類(lèi)

內(nèi)置中間件 自定義中間件 錯(cuò)誤處理中間件 第三方中間件

1.??????內(nèi)置中間件

從版本4.x開(kāi)始，

Express不再依賴(lài)于

Connect。之前包含在

Express中的中間件功能現(xiàn)在位于單獨(dú)的模塊中; 查看

中間件功能列表。

Express具有以下內(nèi)置中間件功能：

express.static提供靜態(tài)資源，如HTML文件，圖像等。express.json使用JSON有效負(fù)載解析傳入的請(qǐng)求。注意：適用于Express 4.16.0+express.urlencoded用URL編碼的有效負(fù)載解析傳入的請(qǐng)求。 注意：適用于Express 4.16.0+

1. express.static()

指定一個(gè)目錄為靜態(tài)資源目錄

客戶(hù)端可以直接訪(fǎng)問(wèn)靜態(tài)資源目錄中的文件(目錄暴露出來(lái))

代碼示例：

app.use(express.static(path.join(__dirname,"public")))

2.?express.json()

解析post方式提交的application/json格式的數(shù)據(jù)

代碼示例：

app.use(express.json())

3. express.urlencoded()

解析post方式提交的application/x-www-form-urlencoded 格式的數(shù)據(jù)

代碼示例：

app.use(express.urlencoded({extended:false}))

2.自定義中間件

根據(jù)需求自己定義中間件

代碼示例：

//自定義中間件

app.use(function (req, res, next) {

console.log(Date.now() + ':我是中間環(huán)節(jié)....');

next();

})

?

//跨域

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

res.header("Access-Control-Allow-Origin", "*");//解決跨域

next() //轉(zhuǎn)發(fā)請(qǐng)求

})

//調(diào)用postData函數(shù)，會(huì)得到一個(gè)函數(shù)

let postData = function () {

return function (req, res, next) {

let arr = []

req.on('data', chunk => {

arr.push(chunk)

})

req.on("end", () => {

// console.log(Buffer.concat(arr).toString());

req.body = Buffer.concat(arr).toString();

next();

})

}

}

//自定義中間件 ---->取出post參數(shù)

app.use(postData())

3.錯(cuò)誤處理中間件

錯(cuò)誤處理中間件總是需要四個(gè)參數(shù)。您必須提供四個(gè)參數(shù)以將其標(biāo)識(shí)為錯(cuò)誤處理中間件函數(shù)。即使您不需要使用該next對(duì)象，也必須指定它以保持簽名。否則，該next對(duì)象將被解釋為常規(guī)中間件，并且將無(wú)法處理錯(cuò)誤。

以與其他中間件函數(shù)相同的方式定義錯(cuò)誤處理中間件函數(shù)，除了四個(gè)參數(shù)而不是三個(gè)，特別是簽名(err, req, res, next)）：

?注意：錯(cuò)誤處理中間件，一般出現(xiàn)在代碼的下面

//錯(cuò)誤處理中間件

app.use(function(req,res){

res.send({

code:500,

msg:"地址錯(cuò)誤，請(qǐng)檢查后重新訪(fǎng)問(wèn)"

})

})

4.第三方中間件

使用第三方中間件為Express應(yīng)用程序添加功能。

安裝Node.js模塊以獲得所需的功能，然后在應(yīng)用程序級(jí)別或路由器級(jí)別將其加載到您的應(yīng)用程序中。?

示例：

1. serve-favicon

可以設(shè)置前端頁(yè)面訪(fǎng)問(wèn)時(shí)的圖標(biāo)

安裝：

npm install server-favicon

引入：

const favicon=require("serve-favicon")

?代碼示例：

app.use(favicon(path.join(__dirname,"favicon.ico")))

2. svg-captcha

是一個(gè)可以生成驗(yàn)證碼的第三方中間件

安裝：

npm install svg-captcha

?引入：

//導(dǎo)入驗(yàn)證碼生成中間件

const svgCaptcha= require("svg-captcha")

代碼示例：

//生成驗(yàn)證碼

router.get('/code',(req,res)=>{

//創(chuàng)建驗(yàn)證碼對(duì)象

// const captcha= svgCaptcha.create();

const captcha= svgCaptcha.create({

size:5, //驗(yàn)證碼字符個(gè)數(shù)

ignoreChars:"0oi1l",//忽略字符

noise:5,//干擾線(xiàn)

background:"#eeeeee",

color:true,//字符是否有顏色

});

console.log(captcha.text);

res.type("svg");//設(shè)置媒體類(lèi)型(MIME)

res.send(captcha.data);//將svg格式的圖片響應(yīng)給前端

})

3.?formidable

文件上傳

安裝：

npm install formidable

?引入：

const formidable=require(“formidable”)

代碼示例：

服務(wù)器端代碼：

//文件上傳

app.post("/upload", (req, res) => {

const fd = formidable({//配置項(xiàng)

// encoding:""http:// 編碼

// uploadDir:"",//上傳文件保存目錄

//filename:""

uploadDir: path.join(__dirname, "temp")

});

//解析文件----接收文件

fd.parse(req, function (err, fields, files) {

if (err) {

res.send("上傳失?。? + err)

return;

}

//上傳成功

// console.log("fields:", fields);//字段 { usernmae: '李四' }

// console.log("files:", files);//文件信息

//將緩存文件，處理為正常文件

//1.取后綴名

let extName = path.extname(files.myfile.originalFilename) //從文件的默認(rèn)名稱(chēng)中，取出后綴名 xx.jpg---> .jpg

//2,生成新文件

let oldPath = files.myfile.filepath;//舊路徑

let newPath = oldPath + extName//新路徑

fs.renameSync(oldPath, newPath)

res.send("上傳成功")

})

});

前端代碼：

表單格式提交

補(bǔ)充

前后端數(shù)據(jù)交互總結(jié)

請(qǐng)求方法編碼格式前端要傳輸?shù)臄?shù)據(jù)格式后端如何獲取應(yīng)用場(chǎng)景GETurl地址后面（querystring）url?key1=value1&key2=value2不需要中間件:req.query獲取數(shù)據(jù)POSTapplicaion/x-www-form-urlencodedform-data: key1=value1&key2=value2express.urlencoded( { extend:true } )提交數(shù)據(jù)POSTapplicaion/json（只能通過(guò)ajax）request-payload: '{ "key1":"value1","key2":"value2" }'express.json()POSTmutilpart/form-data（可以使用表單）文件流文件上傳DELETE同post刪除數(shù)據(jù)PUT同post更新數(shù)據(jù)

柚子快報(bào)激活碼778899分享：Express框架---中間件

http://yzkb.51969.com/

精彩內(nèi)容