Vue插件之Axios,環境安裝:
npm install --save axios vue-axios //安裝axios
Npm install //安裝依賴
在main.js中注冊
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
在對應元件的方法中,發送axios請求;向後端擷取資料
【注意: 請求的方法采用的 是method屬性;
get請求時,傳遞參數用的是params ;
post請求傳遞參數是data,傳過去的時候是json格式,@RequestBody
如要轉換成key-value的形式,還須采用Qs插件】
例如: 資料擷取方法
//生命周期:當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;
})
}
例如: 表單送出方法:
事先導入QS子產品
import Qs from 'qs'
submitForm(){
method:'POST',
url:'http://localhost:8090/product/add',
/* 采用qs傳值時,能轉換成 application/x-www-form-urlencoded格式 */
transformRequest: [function (data) {
return Qs.stringify(data)
}],
/* QS不導入時,預設向後端發送 application/json格式 */
data:{
name:this.pname,
price:this.pprice
}
}).then(function (res) {
console.log(res.data)
真正向後端請求時:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLwMWZyYmM2MmZiFjN4EDM2ETZzIjNkNDN3YjYiFDM1kTMlhjY3czMl9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
這是跨域請求;
解決辦法之一:
在springMVC的 配置檔案中,增加如下内容:
<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"/>
關于Element-ui子產品