Vue前端如何實現(xiàn)與后端進行數(shù)據(jù)交互
更新時間：2022年03月29日 14:37:30 作者：聽聽那晚風
這篇文章主要介紹了Vue前端如何實現(xiàn)與后端進行數(shù)據(jù)交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue前端與后端數(shù)據(jù)交互
安裝
npm install axios --save
在main.js文件引入
import Axios from 'axios';//后臺交互 Vue.prototype.$http=Axios //defaults 設(shè)置全局默認路徑 Axios.defaults.baseURL="/"
使用
//第一種
this.$http.post('/index/customer/',{//里面寫要傳的值}).then(function(res) {
?? ?// console.log('這是返回的客戶數(shù)據(jù)');
?? ?// 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('數(shù)據(jù)接收');
?? ??? ??? ??? ?console.log(res.data.data);
?? ??? ??? ?});
this.$http({
?? ??? ??? ??? ?url: '/index/patchBase/',
?? ??? ??? ??? ?method: 'post',
?? ??? ??? ??? ?headers: { "Content-Type": "multipart/form-data" },
?? ??? ??? ??? ?data:{}//傳值
?? ??? ??? ?}).then(res => {
?? ??? ??? ??? ?console.log('數(shù)據(jù)接收');
?? ??? ??? ??? ?console.log(res.data.data);
?? ??? ??? ?});需要注意的是 post、get請求的請求頭數(shù)據(jù)不一樣，傳值方法不一樣：get是params,post請求是用data傳值
啟動vue和前后端連接
直接上圖
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue路由傳參之使用query傳參頁面刷新數(shù)據(jù)丟失問題解析
這篇文章主要介紹了vue路由傳參使用query傳參頁面刷新數(shù)據(jù)丟失問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue 列表頁跳轉(zhuǎn)詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)
這篇文章主要介紹了vue 列表頁跳轉(zhuǎn)詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Vue 最獨特的特性之一,是其非侵入性的響應式系統(tǒng)。下面這篇文章主要給大家介紹了關(guān)于vue響應式原理與雙向數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了一看就會的vuex實現(xiàn)登錄驗證（附案例），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
解決vue v-for 遍歷循環(huán)時key值報錯的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時key值報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue項目中使用better-scroll實現(xiàn)一個輪播圖自動播放功能
better-scroll是一個非常非常強大的第三方庫 在移動端利用這個庫 不僅可以實現(xiàn)一個非常類似原生ScrollView的效果 也可以實現(xiàn)一個輪播圖的效果。這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)一個輪播圖,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue構(gòu)建動態(tài)表單的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
動態(tài)路由,動態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)動態(tài)路由的詳細代碼示例,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了基于vue.js實現(xiàn)分頁查詢功能，vue.js實現(xiàn)數(shù)據(jù)庫分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
element-ui vue input輸入框自動獲取焦點聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動獲取焦點聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04