首頁  >  文章  >  web前端  >  分享一篇vue-cli搭建專案的實例教學.

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

零下一度
零下一度原創
2017-06-25 09:53:321862瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn