在《vue-cli搭建的專案中增加後台mock介面》中實作了後台mock,但是前端post的t資料都要在mock的後台介面中使用req的接收資料事件取得http協定body中的數據。
req.on('data', function(chunk){ //接收字节数据}); req.end('data', function(){ //转换||处理}); req.error('error', function(e){ //处理错误});
如果前端需要使用cookie,後端要讀取,那麼在後台mock的介面中還要取得req的headers,並從中取得cookie字串,自己還要分割處理等等。
當然這樣是可以的,但是比較麻煩,從接收資料到轉換都要自己做。
vue-cli搭建的專案是用express作為node.js的web框架,它支援豐富的中間件。
對應上述問題,有body-parser和cookie-parser中間件可以方便地將post的body中的資料和cookie自動提取成req.body和req.cookies物件供人使用,非常方便。
安裝中間件
npm install body-parser --save-dev npm install cookie-parser --save-dev
引入中間件
在build/dev-server. js檔案中的頭部require區域末尾增加中間件require。
var bodyParser = require('body-parser'); var cookieParser = require('cookie-parser');
然後再緊接著var app = express()之後加入中間件呼叫。
app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser());
bodyParser的兩行呼叫方式就是分別針對content-type是‘application/json’和'application/x-www-form-urlencoded'兩種設定。
添加完成後就可以方便使用了。
End
以上是分享一篇vue-cli搭建專案的實例教學.的詳細內容。更多資訊請關注PHP中文網其他相關文章!