Java-Vue插件之Axios，環(huán)境安裝：
npm install --save axios vue-axios //安裝axios

超過(guò)10余年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營(yíng)模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：成都做網(wǎng)站、成都網(wǎng)站制作，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，小程序開(kāi)發(fā)，微信開(kāi)發(fā)，成都APP應(yīng)用開(kāi)發(fā)，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營(yíng)銷(xiāo)和我們一樣獲得訂單和生意！

Npm install //安裝依賴

在main.js中注冊(cè)
import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

在對(duì)應(yīng)組件的方法中，發(fā)送axios請(qǐng)求；向后端獲取數(shù)據(jù)
【注意： 請(qǐng)求的方法采用的 是method屬性；

get請(qǐng)求時(shí)，傳遞參數(shù)用的是params ;

post請(qǐng)求傳遞參數(shù)是data，傳過(guò)去的時(shí)候是json格式，@RequestBody

如要轉(zhuǎn)換成key-value的形式，還須采用Qs插件】

例如： 數(shù)據(jù)獲取方法

//生命周期：當(dāng)vue初始化的時(shí)候
created() {
var vm = this;
this.axios({
method:"get",
url:"http://localhost:8090/product/list",

params:{
name:this.pname
}
}).then(function (result) {
console.log(result.data)
vm.products = result.data;
})
}

例如： 表單提交方法：

事先導(dǎo)入QS模塊

import Qs from 'qs'

submitForm(){
this.axios({
method:'POST',
url:'http://localhost:8090/product/add',
/采用qs傳值時(shí)，能轉(zhuǎn)換成 application/x-www-form-urlencoded格式/
transformRequest: [function (data) {
return Qs.stringify(data)
}],
/QS不導(dǎo)入時(shí)，默認(rèn)向后端發(fā)送 application/json格式/
data:{
name:this.pname,
price:this.pprice
}
}).then(function (res) {
console.log(res.data)
})
}

真正向后端請(qǐng)求時(shí)：

這是跨域請(qǐng)求；
解決辦法之一：
在springMVC的 配置文件中，增加如下內(nèi)容：

allowed-origins=""
allowed-methods="POST, GET, OPTIONS, DELETE, PUT,PATCH"
allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
allow-credentials="true"/>

關(guān)于Element-ui模塊

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟，新人活動(dòng)云服務(wù)器買(mǎi)多久送多久。

網(wǎng)頁(yè)名稱：Java-Vue插件之Axios-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://weahome.cn/article/ijcjh.html