分享一篇vue-cli搭建專案的實例教學.

在《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中文網其他相關文章！