在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