寫在前面

閑來無事，最近使用vue全家桶結(jié)合nodejs搭建了一個簡單的網(wǎng)站，在前端使用的axios做請求，后端框架使用express框架，在前端做數(shù)據(jù)請求時，因為axios默認的使用multipart/form-data編碼方式進行參數(shù)提交，一般默認來說，post請求不涉及到文件上傳一般都是使用的x-www-form-urlencoded編碼方式進行參數(shù)提交，然后...噩夢開始了...
（ps:覺得比較啰嗦的可直接看結(jié)論,哈哈^_^）

問題還原

因為axios默認使用multipart/form-data編碼方式，因此我們需要在請求頭中添加一行代碼：

'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

此時在服務(wù)器端接收參數(shù)時，發(fā)現(xiàn)使用req.body無法獲取參數(shù)（默認已經(jīng)使用中間件解析參數(shù)）：

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

百度后發(fā)現(xiàn)，需要使用qs中間件將axios 請求參數(shù)序列化，也就是使用如下代碼：

if (config.method === 'post') {
    config.data = qs.stringify(config.data)
  }

現(xiàn)在服務(wù)器端能夠正常的接收到數(shù)據(jù)，并且存入數(shù)據(jù)庫，本以為這樣就完了...
（補充一句：如果上傳的vey/value，value值不是對象，而是單個的string或者number等，服務(wù)器端是可以正常接收到參數(shù)，也就是說可以使用req.body.key取到數(shù)據(jù)的。只有是對象，數(shù)組等類型，默認也是字符串，并且key/value都是字符串，因此想使用req.body.key是不行的）
因結(jié)構(gòu)需要，有兩個參數(shù)需上傳對象，并且存入數(shù)據(jù)庫中，首先，前端上傳參數(shù)如圖1所示：

圖1 上傳參數(shù)

剛開始測試的時候使用的apizza插件進行服務(wù)器端調(diào)試，發(fā)現(xiàn)上傳參數(shù)沒問題（并未做存入數(shù)據(jù)庫處理），后使用前后端聯(lián)調(diào)方式進行，發(fā)現(xiàn)前端上傳的數(shù)據(jù)格式如圖2所示：

圖2 上傳參數(shù)

圖3 結(jié)構(gòu)模型

分析原因

開始以為是存入對象需要將模型中的links字段更改為Miexd類型數(shù)據(jù)，但是發(fā)現(xiàn)沒用，然后花了兩天時間，查各種文檔，一直將問題定位在了數(shù)據(jù)庫存儲類型上....
結(jié)果今天早上起床后繼續(xù)調(diào)試，終于發(fā)現(xiàn)哪里不對，圖2的links字段，好像有個單引號，突然反應(yīng)過來，這不就是字符串嗎？立馬對比插件和axios發(fā)出去的請求，發(fā)現(xiàn)插件請求可以獲取到，而axios請求卻獲取不到？忽然想起來，前端有一句:

需要使用qs中間件將axios 請求參數(shù)序列化
結(jié)果看代碼是：

qs.stringify(config.data)

這個和

JSON.stringify()

何其相識~~~
與之對應(yīng)的肯定需要:

qs.parse()

結(jié)果在服務(wù)器端加入了這樣一段代碼后:

var req = qs.parse(req.body);

就能正常解析上傳的參數(shù)。。。自此問題解決。。。。

結(jié)論

在使用axios進行請求時候請注意以下幾點：
1.axios默認使用的編碼方式為：multipart/form-data，如需使用x-www-form-urlencoded編碼方式，請使用qs中間件將參數(shù)序列化。（如不序列化，服務(wù)器端無法獲取到上傳的參數(shù)）
2.服務(wù)器端我是采用的nodejs，此時需要將qs序列化后的參數(shù)反序列化，將其轉(zhuǎn)化為JSON格式。

后記

俗話說，有得必有失。。。雖然調(diào)BUG調(diào)的有待難受，但是，收獲也很多...

造成這次BUG有多方面原因：

1.自己不熟悉axios框架。
2.較粗心，一直未曾發(fā)覺上傳的參數(shù)是字符串。
3.mongoose使用的不熟悉（一直以為是數(shù)據(jù)庫存儲的原因，數(shù)據(jù)模型建立的有問題。。。）

收獲：

1.通過這個BUG，重新翻閱了mongoose的相關(guān)操作，對mongoose理解加深。
2.重新翻閱了http相關(guān)的知識點，了解簡單的http請求頭的信息，以及基本原理。
3.重新了解了一遍axios的API請求，進一步熟悉axios的請求。

ps:

以上內(nèi)容僅為自己的學習過程，歡迎大家取其精華，丟其糟粕。若對以上內(nèi)容有不同簡介或看法，歡迎一起探討。
企鵝號：1041415167 郵箱地址：zth1041415167@outlook.com