Vue中實現與後臺的數據交換（vue-resource）

vue-resource是Vue.js的一款插件，它能夠經過XMLHttpRequest或JSONP發起請求並處理響應。(可是目前它已經中止更新了)

一、在vue中安裝vue-resource插件

打開vue項目文件夾下的package.json

添加vue-resource版本

再打開src下的main.js文件，import一下vue-resource

而後運行一下vue的項目，項目會提示你下載vue-resource插件，npm install一下便可

二、建立一個新的vue頁面，用來測試數據

這裏我使用get的方式請求後臺，post一樣也能夠實現，二者之間的區別能夠自行去谷歌或者百度

代碼以下：

這裏在項目的首頁中引入JQuery，經過聯網形式引入使用，固然也將JQuery直接下載到項目中

 

 三、編寫好後臺測試代碼

控制層：

這裏Server層和Dao層就不帖出來了，主要看你本身如何處理業務邏輯和查詢數據

四、分別運行前端vue和後臺代碼

後臺端口這裏爲8080，前端爲8085

瀏覽器訪問前端指定的路徑：http://localhost:8085/myVue

 

前端經過get請求指定的路徑：http://localhost:8080/myVue並帶着參數

 

運行後前端展現頁面：

後臺也輸出了前端的請求參數內容：

大致上就是：前端請求後臺，並傳入參數，後臺處理後返回結果，前端接收後解析並賦值展現結果。