在vue-cli搭建的項目中在後臺mock介面中支持req.body和req.cookies

在《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