摘要:中間件的研究接觸已有一段時(shí)間了,但最近才開始落實(shí)項(xiàng)目,于是使用應(yīng)用生成器生成了一個(gè)應(yīng)用。中間件中間件用來解析請(qǐng)求體,是默認(rèn)使用的中間件之一。就是內(nèi)建的對(duì)象之一,用來字符串化對(duì)象或解析字符串。
bodyParser中間件的研究
接觸nodejs已有一段時(shí)間了,但最近才開始落實(shí)項(xiàng)目,于是使用express應(yīng)用生成器生成了一個(gè)應(yīng)用。開發(fā)過程中發(fā)現(xiàn)ajax提交的數(shù)據(jù)無(wú)法被express正確的解析,主要的情況是這樣的:
// 瀏覽器端post一個(gè)對(duì)象 $.ajax({ url: "/save", type: "post", data: { name: "henry", age: 30, hobby: [ "sport", "coding" ] } }); // express接收這個(gè)對(duì)象 router.post("/save", function (req, res, next) { console.log(req.body); // => { "info[name]": "henry","info[age]": "30","hobby[1]": "sport","hobby[2]": "coding" } });
顯然這樣的解析結(jié)果是不能直接拿來用的,莫名其妙的一個(gè)坑,困了我許久。
bodyParser中間件bodyParser中間件用來解析http請(qǐng)求體,是express默認(rèn)使用的中間件之一。
使用express應(yīng)用生成器生成一個(gè)網(wǎng)站,它默認(rèn)已經(jīng)使用了 bodyParser.json 與 bodyParser.urlencoded 的解析功能,除了這兩個(gè),bodyParser還支持對(duì)text、raw的解析。
app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));
顧名思義,bodyParser.json是用來解析json數(shù)據(jù)格式的。bodyParser.urlencoded則是用來解析我們通常的form表單提交的數(shù)據(jù),也就是請(qǐng)求頭中包含這樣的信息: Content-Type: application/x-www-form-urlencoded
常見的四種Content-Type類型:
application/x-www-form-urlencoded 常見的form提交
multipart/form-data 文件提交
application/json 提交json格式的數(shù)據(jù)
text/xml 提交xml格式的數(shù)據(jù)
詳細(xì)解讀 urlencodedbodyParser.urlencoded 模塊用于解析req.body的數(shù)據(jù),解析成功后覆蓋原來的req.body,如果解析失敗則為 {}。該模塊有一個(gè)屬性extended,官方介紹如下:
The extended option allows to choose between parsing the URL-encoded data with the querystring library (when false) or the qs library (when true). Defaults to true, but using the default has been deprecated.
大致的意思就是:extended選項(xiàng)允許配置使用querystring(false)或qs(true)來解析數(shù)據(jù),默認(rèn)值是true,但這已經(jīng)是不被贊成的了。
querystring就是nodejs內(nèi)建的對(duì)象之一,用來字符串化對(duì)象或解析字符串。如
querystring.parse("name=henry&age=30") => { name: "henry", age: "30" }
那么,既然querystring已經(jīng)能完成對(duì)urlencode的解析了,為什么還需要qs?qs又是什么?
qs介紹qs是一個(gè)querystring的庫(kù),在qs的功能基礎(chǔ)上,還支持更多的功能并優(yōu)化了一些安全性。比如,對(duì)象解析的支持:
// 內(nèi)建對(duì)象 querystring querystring.parse("info[name]=henry&info[age]=30&hobby[1]=sport&hobby[2]=coding") => { "info[name]": "henry", "info[age]": "30", "hobby[1]": "sport", "hobby[2]": "coding" } // 第三方插件 qs qs.parse("info[name]=henry&info[age]=30&hobby[1]=sport&hobby[2]=coding") => { info: { name: "henry", age: "30" }, hobby: [ "sport", "coding" ] }
可以看出,querystring并不能正確的解析復(fù)雜對(duì)象(多級(jí)嵌套),而qs卻可以做到。
但是qs也不是萬(wàn)能的,對(duì)于多級(jí)嵌套的對(duì)象,qs只會(huì)解析5層嵌套,超出的部分會(huì)表現(xiàn)的跟本文頭部的那種情況一樣;對(duì)于數(shù)組,qs最大只會(huì)解析20個(gè)索引,超出的部分將會(huì)以鍵值對(duì)的形式解析。
作為一個(gè)中間件,qs必須要為性能考慮,才會(huì)有如此多的限制,express也默認(rèn)使用qs來解析請(qǐng)求體。
理論上來說,form表單提交不會(huì)有多級(jí)嵌套的情況,而urlencoded本身也是form的內(nèi)容類型,因此,bodyParser.urlencoded不支持多級(jí)嵌套也是很合理的設(shè)計(jì)。
那么,如果我們非要上傳一個(gè)十分復(fù)雜的對(duì)象,應(yīng)該怎么辦?
解決方案出現(xiàn)這個(gè)問題的根本原因是:我以form的形式去提交了一個(gè)json數(shù)據(jù)。
jquery默認(rèn)的 content-Type 配置的是 application/x-www-form-urlencoded,
因此更改ajax請(qǐng)求參數(shù):contentType: "application/json",并將數(shù)據(jù)轉(zhuǎn)成json提交,問題就解決了。
// 瀏覽器端post一個(gè)對(duì)象 $.ajax({ url: "/save", type: "post", contentType: "application/json", data: JSON.stringify({ name: "henry", age: 30, hobby: [ "sport", "coding" ] }) }); // express接收這個(gè)對(duì)象 router.post("/save", function (req, res, next) { console.log(req.body); // => { name: "henry", age: 30, hobby: [ "sport", "coding" ] } });參考資料
body-parser
qs
大多時(shí)候,我們只知道如何去使用,而不知道為什么這么用。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/78643.html
摘要:注僅做記錄使用又不舍得刪除推薦使用相關(guān)資料很多的運(yùn)行環(huán)境構(gòu)建基于全局安裝安裝過程略配置的淘寶鏡象全局安裝官方腳手架工具官網(wǎng)文檔創(chuàng)建項(xiàng)目基于模板創(chuàng)建創(chuàng)建配置按需,我除了安裝之外其他都選了運(yùn)行與打包測(cè)試安裝依賴包運(yùn)行打包配 注(2018-2-12):僅做記錄使用,又不舍得刪除,推薦使用koa2,koa2相關(guān)資料很多的~ 1. 運(yùn)行環(huán)境構(gòu)建(基于macOS Sierra 10.12.4) ...
摘要:介紹如有不詳細(xì)或者不正確的地方多多指正??梢酝ㄟ^官方提供的命令行進(jìn)行安裝,官方目前默認(rèn)的界面文件用格式,建議修改為格式的文件版權(quán)問題,同時(shí)要在中安裝對(duì)應(yīng)的包和設(shè)置對(duì)應(yīng)的界面引擎解釋器。 express介紹 如有不詳細(xì)或者不正確的地方多多指正。 我們可以拿js與jquery關(guān)系來類比一下: jQuery是JS在瀏覽器環(huán)境下的封裝庫(kù),把DOM操作,ajax等封裝成了兼容性好,方便使用的方法...
摘要:查詢字符串中的參數(shù)要用比如這樣的請(qǐng)求,應(yīng)該是要用和來獲取和的值,最終打印出如下關(guān)于此外,框架本身是沒有解析的如果打印出來則說明沒有安裝解析的插件為了解析一般可以安裝這個(gè)插件假設(shè)是的實(shí)例在所有路由前插入這個(gè)中間件這樣就可以了。 首發(fā)地址:https://clarencep.com/2017/04...轉(zhuǎn)載請(qǐng)注明出處 注意:req.params 只有在參數(shù)化的路徑中的參數(shù)。查詢字符串中的參...
摘要:于是翻遍與各大網(wǎng)站,都沒找到一個(gè)好用的輕一點(diǎn)的腳手架,也找不到一個(gè)清晰些的搭建介紹?,F(xiàn)在把搭建過程介紹下,看能不能方便下入門的同學(xué)。創(chuàng)建一個(gè)文件夾,命名。記得先裝好以上版本一路回車,根據(jù)提示輸入信息。但這只是初步的搭建了下。 前幾天想寫個(gè)小爬蟲程序,準(zhǔn)備后端就用koa2。于是翻遍github與各大網(wǎng)站,都沒找到一個(gè)好用的、輕一點(diǎn)的koa2腳手架,也找不到一個(gè)清晰些的搭建介紹。githu...
閱讀 2987·2021-11-23 09:51
閱讀 2798·2021-11-11 16:55
閱讀 2908·2021-10-14 09:43
閱讀 1394·2021-09-23 11:22
閱讀 1035·2019-08-30 11:04
閱讀 1663·2019-08-29 11:10
閱讀 956·2019-08-27 10:56
閱讀 3102·2019-08-26 12:01