Vue前端怎么實現與后端進行數據交互

這篇文章主要介紹了Vue前端怎么實現與后端進行數據交互的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue前端怎么實現與后端進行數據交互文章都會有所收獲，下面我們一起來看看吧。

Vue前端與后端數據交互

安裝

npm install axios --save

在main.js文件引入

import Axios from 'axios';//后臺交互
Vue.prototype.$http=Axios
//defaults 設置全局默認路徑
Axios.defaults.baseURL="/"

使用

//第一種
this.$http.post('/index/customer/',{//里面寫要傳的值}).then(function(res) {
    // console.log('這是返回的客戶數據');
    // console.log(res.data.data);
    this.customerArr = res.data.data
});//如果是get請求就把post換成get
//第二種，推薦使用該方法
this.$http({
                url: '/index/patchBase/',
                method: 'get',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                params:{}//傳值 如：params:{id:1,name:"gw"}
            }).then(res => {
                console.log('數據接收');
                console.log(res.data.data);
            });
this.$http({
                url: '/index/patchBase/',
                method: 'post',
                headers: { "Content-Type": "multipart/form-data" },
                data:{}//傳值
            }).then(res => {
                console.log('數據接收');
                console.log(res.data.data);
            });

需要注意的是 post、get請求的請求頭數據不一樣，傳值方法不一樣：get是params,post請求是用data傳值 

啟動vue和前后端連接

直接上圖

關于“Vue前端怎么實現與后端進行數據交互”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue前端怎么實現與后端進行數據交互”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。