柚子快報激活碼778899分享：Express框架---中間件
柚子快報激活碼778899分享：Express框架---中間件
使用中間件
Express是一個自身功能極簡，完全是路由和中間件構成一個web開發(fā)框架：從本質上來說，一個Express應用就是在調用各種中間件。
中間件是可以訪問請求對象 （req），響應對象（res）以及next應用程序請求-響應周期中的函數。
中間件就是在請求后，響應前要執(zhí)行的函數，中間件就是函數使用app.use() 方法，可以給express應用，添加任意中間件功能函數。
中間件分類
內置中間件 自定義中間件 錯誤處理中間件 第三方中間件
1.??????內置中間件
從版本4.x開始，
Express不再依賴于
Connect。之前包含在
Express中的中間件功能現在位于單獨的模塊中; 查看
中間件功能列表。
Express具有以下內置中間件功能：
express.static提供靜態(tài)資源，如HTML文件，圖像等。express.json使用JSON有效負載解析傳入的請求。注意：適用于Express 4.16.0+express.urlencoded用URL編碼的有效負載解析傳入的請求。 注意：適用于Express 4.16.0+
1. express.static()
指定一個目錄為靜態(tài)資源目錄
客戶端可以直接訪問靜態(tài)資源目錄中的文件(目錄暴露出來)
代碼示例：
app.use(express.static(path.join(__dirname,"public")))
2.?express.json()
解析post方式提交的application/json格式的數據
代碼示例：
app.use(express.json())
3. express.urlencoded()
解析post方式提交的application/x-www-form-urlencoded 格式的數據
代碼示例：
app.use(express.urlencoded({extended:false}))
2.自定義中間件
根據需求自己定義中間件
代碼示例：
//自定義中間件
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() //轉發(fā)請求
})
//調用postData函數，會得到一個函數
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參數
app.use(postData())
3.錯誤處理中間件
錯誤處理中間件總是需要四個參數。您必須提供四個參數以將其標識為錯誤處理中間件函數。即使您不需要使用該next對象，也必須指定它以保持簽名。否則，該next對象將被解釋為常規(guī)中間件，并且將無法處理錯誤。
以與其他中間件函數相同的方式定義錯誤處理中間件函數，除了四個參數而不是三個，特別是簽名(err, req, res, next)）：
?注意：錯誤處理中間件，一般出現在代碼的下面
//錯誤處理中間件
app.use(function(req,res){
res.send({
code:500,
msg:"地址錯誤，請檢查后重新訪問"
})
})
4.第三方中間件
使用第三方中間件為Express應用程序添加功能。
安裝Node.js模塊以獲得所需的功能，然后在應用程序級別或路由器級別將其加載到您的應用程序中。?
示例：
1. serve-favicon
可以設置前端頁面訪問時的圖標
安裝：
npm install server-favicon
引入：
const favicon=require("serve-favicon")
?代碼示例：
app.use(favicon(path.join(__dirname,"favicon.ico")))
2. svg-captcha
是一個可以生成驗證碼的第三方中間件
安裝：
npm install svg-captcha
?引入：
//導入驗證碼生成中間件
const svgCaptcha= require("svg-captcha")
代碼示例：
//生成驗證碼
router.get('/code',(req,res)=>{
//創(chuàng)建驗證碼對象
// const captcha= svgCaptcha.create();
const captcha= svgCaptcha.create({
size:5, //驗證碼字符個數
ignoreChars:"0oi1l",//忽略字符
noise:5,//干擾線
background:"#eeeeee",
color:true,//字符是否有顏色
});
console.log(captcha.text);
res.type("svg");//設置媒體類型(MIME)
res.send(captcha.data);//將svg格式的圖片響應給前端
})
3.?formidable
文件上傳
安裝：
npm install formidable
?引入：
const formidable=require(“formidable”)
代碼示例：
服務器端代碼：
//文件上傳
app.post("/upload", (req, res) => {
const fd = formidable({//配置項
// 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) //從文件的默認名稱中，取出后綴名 xx.jpg---> .jpg
//2,生成新文件
let oldPath = files.myfile.filepath;//舊路徑
let newPath = oldPath + extName//新路徑
fs.renameSync(oldPath, newPath)
res.send("上傳成功")
})
});
前端代碼：
表單格式提交
補充
前后端數據交互總結
請求方法編碼格式前端要傳輸的數據格式后端如何獲取應用場景GETurl地址后面（querystring）url?key1=value1&key2=value2不需要中間件:req.query獲取數據POSTapplicaion/x-www-form-urlencodedform-data: key1=value1&key2=value2express.urlencoded( { extend:true } )提交數據POSTapplicaion/json（只能通過ajax）request-payload: '{ "key1":"value1","key2":"value2" }'express.json()POSTmutilpart/form-data（可以使用表單）文件流文件上傳DELETE同post刪除數據PUT同post更新數據
柚子快報激活碼778899分享：Express框架---中間件
精彩內容
本文內容根據網絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯系刪除。
Rakuten購物狂歡者
