快捷導(dǎo)航

Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互

更新時(shí)間：2022年03月29日 14:37:30 作者：聽(tīng)聽(tīng)那晚風(fēng)

這篇文章主要介紹了Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue前端與后端數(shù)據(jù)交互

安裝

npm install axios --save

在main.js文件引入

import Axios from 'axios';//后臺(tái)交互
Vue.prototype.$http=Axios
//defaults 設(shè)置全局默認(rèn)路徑
Axios.defaults.baseURL="/"

使用

//第一種
this.$http.post('/index/customer/',{//里面寫(xiě)要傳的值}).then(function(res) {
?? ?// console.log('這是返回的客戶數(shù)據(jù)');
?? ?// console.log(res.data.data);
?? ?this.customerArr = res.data.data
});//如果是get請(qǐng)求就把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請(qǐng)求的請(qǐng)求頭數(shù)據(jù)不一樣，傳值方法不一樣：get是params,post請(qǐng)求是用data傳值

啟動(dòng)vue和前后端連接

直接上圖

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue路由傳參之使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題解析
這篇文章主要介紹了vue路由傳參使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
vue 列表頁(yè)跳轉(zhuǎn)詳情頁(yè)獲取id以及詳情頁(yè)通過(guò)id獲取數(shù)據(jù)
這篇文章主要介紹了vue 列表頁(yè)跳轉(zhuǎn)詳情頁(yè)獲取id以及詳情頁(yè)通過(guò)id獲取數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue響應(yīng)式原理與雙向數(shù)據(jù)的深入解析
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng)。下面這篇文章主要給大家介紹了關(guān)于vue響應(yīng)式原理與雙向數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2021-06-06
一看就會(huì)的vuex實(shí)現(xiàn)登錄驗(yàn)證（附案例）
這篇文章主要介紹了一看就會(huì)的vuex實(shí)現(xiàn)登錄驗(yàn)證（附案例），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖自動(dòng)播放功能
better-scroll是一個(gè)非常非常強(qiáng)大的第三方庫(kù) 在移動(dòng)端利用這個(gè)庫(kù) 不僅可以實(shí)現(xiàn)一個(gè)非常類似原生ScrollView的效果也可以實(shí)現(xiàn)一個(gè)輪播圖的效果。這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖,需要的朋友可以參考下
2018-12-12
vue構(gòu)建動(dòng)態(tài)表單的方法示例
這篇文章主要介紹了vue構(gòu)建動(dòng)態(tài)表單的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例
動(dòng)態(tài)路由,動(dòng)態(tài)即不是寫(xiě)死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能，vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04