4.body-parser中介軟體的使用專門處理前端的post請求，同理get請求在本例不適用，內含如何自定義中介軟體middleware
阿新 • • 發佈：2018-11-12
使用express框架可以結合中介軟體body-parser方便處理前端傳送過來的資料。（class10）
第一部分：
1.新建目錄後，開啟cmd---進入當前目錄---cnpm install express express-static body-parser
2.目錄結構：
3.10index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10 body-parser 中介軟體使用</title> </head> <body> <form action="http://localhost:8087/user" method="post"> <input type="text" name="username" id="u"> <input type="text" name="psw" id="psw" > <input type="button" onclick="register()" value="register"> <input type="button" onclick="login()" value="login"> </form> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> const log = console.log; let eUsename = document.getElementById("u"); let ePsw = document.getElementById("psw"); function register(){ $.ajax({ type:"post", data:{"action":"register","username":eUsename.value,"psw":ePsw.value}, url:"/user", success:function(data){ // 後臺用body-parser中介軟體處理過json，直接返回的data也不用eval處理了，否則會報錯 log("json=",data) }, error:function(err){ log("err=",err); } }) } function login(){ $.ajax({ type:"post", data:{"action":"login","username":eUsename.value,"psw":ePsw.value}, url:"/user", success:function(data){ // 後臺用body-parser中介軟體處理過json，直接返回的data也不用eval處理了，否則會報錯 log("json=",data) }, error:function(err){ log("err=",err); } }) } </script> </body> </html>
4.10s.js
const log = console.log; const express = require("express") // nodejs 框架 const expressStatic = require("express-static") //處理前端靜態頁面 const bodyParser = require("body-parser") // 處理前端post過來的資料 const server = express(); // 建立服務 server.listen(8087) server.use(bodyParser.urlencoded({ //這是一箇中間件，有兩個引數 extended: false, // 擴充套件，很少用 limit: 1024 * 1024 * 2 // 前端最大可提交資料限制 })); /** 介面設定 http://localhost:8087/user?action=register&username=tcc&psw=123 介面設定 http://localhost:8087/user?action=login&username=tcc&psw=123 * */ let users = {}; // 現在我們沒有資料庫,所以定義一個物件來儲存使用者的資訊. server.post("/user",function(req,res,next){ let params = req.body; if(params.action == "register"){ if(users[params.username]){ res.write({"status":false,msg:"使用者已經存在！"}) //res.write也是一樣的 }else{ users[params.username] = params.psw res.send({"status":true,msg:"註冊成功！"}) } }else if(params.action == "login"){ if(!users[params.username]){ res.send({"status":false,msg:"使用者名稱不正確！"}) }else if(users[params.username] == params.psw){ res.send({"status":true,msg:"登入成功！"}) }else{ res.send({"status":false,msg:"登入失敗！"}) } }else{ res.send("no register login") } res.end(); // 告訴瀏覽器，響應結束 }) server.use(expressStatic("./www")) // 處理靜態資源，http://localhost:8087/10index.html 成功訪問www/10index.html
以上示例就是使用body-parser專門處理前端post過來的資料。
第二部分：自定義中介軟體middleware
原理：寫中介軟體，要明白只有相同的請求才能算是同一條執行緒上，req更改的值在next()後方能正確傳遞下去
/*** * 第一種寫法，第二個server.use通過req.on("end"，function(){}) 取值，注意next()的位置，不推薦這個用法* */ server.use(function(req,res,next){ // 只帶回撥，所有請求都可訪問 req.on('data',function(data){ }) req.on('end', function () { log(1) req.tcc = "tcc"; // 當next() 執行後，把tcc傳遞給後面的req //res.end(); 不能在這裡結束，後面還要執行 // next(); 寫在此無效 }) next(); // 自動進入下一步 }) server.use("/user",function(req,res,next){ // 只有localhost:8087/user 可以訪問 req.on('data',function(data){ }) req.on('end',function () { log('req.tcc=',req.tcc) // 能取到上一個訪問傳下來的tcc log(2) }) })
/***
* 第二種寫法，第二個server.use裡直接取req.body,不再通過req.on("end"，function(){})
* */
server.use(function(req,res,next){ // 能接收所有訪問，與/user也就在同一條線上了
let str = "";
req.on("data",function(data){
str +=data;
})
req.on("end",function () {
req.tcc = querystring.parse(str); //
next(); // 正確執行
})
})
server.use("/user",function(req,res,next){ // 只有localhost:8087/user 可以訪問
log('req.tcc=',req.tcc) // 取到上一個訪問傳下來的tcc
log(2);
res.end();
})比較一下,基於第一部分的更改
...略......略......略......略......略......略......略......略......略......略......略...
server.listen(8087)
// server.use(bodyParser.urlencoded({ //這是一箇中間件，有兩個引數
// extend: false,
// limit: 1024 * 1024 * 2 // 前端最大可提交資料限制
// }));
server.use(function(req,res,next){ // 能接收所有訪問，與/user也就在同一條線上了
let str = "";
req.on("data",function(data){
str +=data;
})
req.on("end",function () {
req.body = querystring.parse(str); //querystring 引入的模組const querystring = require("querystring")。
log('req.body =',req.body )
next();
})
})
/** 介面設定 http://localhost:8087/user?action=register&username=tcc&psw=123
介面設定 http://localhost:8087/user?action=login&username=tcc&psw=123
* */
let users = {}; // 現在我們沒有資料庫,所以定義一個物件來儲存使用者的資訊.
server.post("/user",function(req,res,next){
let params = req.body; // 可以取到上面req.body設定的值
...略......略......略......略......略......略......略......略......略......略......略...
中介軟體的完整示例：
1.目錄結構
2.10index.html沒變，和上面的一樣
3.10s.js
const log = console.log;
const express = require("express") // nodejs 框架
const expressStatic = require("express-static") //處理前端靜態頁面
// const bodyParser = require("body-parser") // 處理前端post過來的資料
const customMiddleware = require("./customMiddleware.js") // 自定義的中介軟體
const server = express(); // 建立服務
server.listen(8087)
// server.use(bodyParser.urlencoded({ // 這是一箇中間件，有兩個引數
// extend: false,
// limit: 1024 * 1024 * 2 // 前端最大可提交資料限制
// }));
server.use(customMiddleware.handlePostdata()) // 使用自己寫的中介軟體
// server.use(function(req,res,next){ // 能接收所有訪問，與/user也就在同一條線上了
// let str = "";
// req.on("data",function(data){
// str +=data;
// })
// req.on("end",function () {
// req.body = querystring.parse(str);
// // res.end();
//
// next();
// })
// })
/** 介面設定 http://localhost:8087/user?action=register&username=tcc&psw=123
介面設定 http://localhost:8087/user?action=login&username=tcc&psw=123
* */
let users = {}; // 現在我們沒有資料庫,所以定義一個物件來儲存使用者的資訊.
server.post("/user",function(req,res,next){
let params = req.body;
log('22 req.body =',req.body )
if(params.action == "register"){
if(users[params.username]){
res.write({"status":false,msg:"使用者已經存在！"}) //res.write也是一樣的
}else{
users[params.username] = params.psw
res.send({"status":true,msg:"註冊成功！"})
}
}else if(params.action == "login"){
if(!users[params.username]){
res.send({"status":false,msg:"使用者名稱不正確！"})
}else if(users[params.username] == params.psw){
res.send({"status":true,msg:"登入成功！"})
}else{
res.send({"status":false,msg:"登入失敗！"})
}
}else{
res.send("no register login")
}
res.end(); // 告訴瀏覽器，響應結束
})
server.use(expressStatic("./www")) // 處理靜態資源，http://localhost:8087/10index.html 成功訪問www/10index.htmlBrief summary:
先看要require哪些模組，按步驟輕鬆掌握如何處理post資料，並且學會如何寫一些中介軟體middleware.
努力學習！加油！^_^