Java教程分享Vue插件之Axios，環(huán)境安裝：npm install --save axios vue-axios //安裝axios Npm install //安裝依賴 在main.js中注冊import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) 在對應(yīng)組件的方法中，發(fā)送axios請求；向后端獲取數(shù)據(jù)【注意： 請求的方法采用的 是method屬性； get請求時，傳遞參數(shù)用的是params ; post請求傳遞參數(shù)是data，傳過去的時候是json格式，@RequestBody 如要轉(zhuǎn)換成key-value的形式，還須采用Qs插件】 例如： 數(shù)據(jù)獲取方法 //生命周期：當(dāng)vue初始化的時候
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傳值時，能轉(zhuǎn)換成 application/x-www-form-urlencoded格式 */
transformRequest: [function (data) {
return Qs.stringify(data)
}],
/* QS不導(dǎo)入時，默認(rèn)向后端發(fā)送 application/json格式 */
data:{
name:this.pname,
price:this.pprice
}
}).then(function (res) {
console.log(res.data)
})
} |
|
真正向后端請求時：
這是跨域請求；解決辦法之一：在springMVC的 配置文件中，增加如下內(nèi)容： <mvc:cors>
<mvc:mapping path="/**"
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"/>
</mvc:cors> |
關(guān)于Element-ui模塊
|
