Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互
更新時間：2022年03月29日 14:37:30 作者：聽聽那晚風(fēng)
這篇文章主要介紹了Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue前端與后端數(shù)據(jù)交互
安裝
npm install axios --save
在main.js文件引入
import Axios from 'axios';//后臺交互 Vue.prototype.$http=Axios //defaults 設(shè)置全局默認(rèn)路徑 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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue清除瀏覽器全部cookie的問題及解決方法(絕對有效!)
最近項(xiàng)目要實(shí)現(xiàn)關(guān)閉瀏覽器清除用戶緩存的功能,下面這篇文章主要給大家介紹了關(guān)于vue清除瀏覽器全部cookie的問題及解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vuex中如何getters動態(tài)獲取state的值
這篇文章主要介紹了Vuex中如何getters動態(tài)獲取state的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中對象數(shù)組去重的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了WebSocket使用以及在vue如何使用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
最近在做一個前端vue.js對接的功能模塊時，需要實(shí)現(xiàn)一個下載圖片的功能，本文就介紹了vue.js根據(jù)圖片url進(jìn)行圖片下載，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解，通過案例給大家簡單介紹了vue中v-cloak的使用，感興趣的朋友跟隨小編一起看看吧2018-11-11
這篇文章主要介紹了vue-cli隨機(jī)生成port源碼的方法，文中給大家介紹了vue 隨機(jī)色生成方法,需要的朋友可以參考下2019-09-09
本篇文章主要介紹了在 React、Vue項(xiàng)目中使用SVG的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue watch immediate方法用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06