好程序员Java教程分享Vue插件之Axios，环境安装：
npm install --save axios vue-axios //安装axios
10年积累的网站建设、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有和龙免费网站建设让你可以放心的选择与我们合作。
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(){
this.axios({
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)
})
} |
|
真正向后端请求时：
这是跨域请求；
解决办法之一：
在springMVC的 配置文件中，增加如下内容：
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模块
本文标题：好程序员Java教程分享Vue插件之Axios
分享地址：
http://bjjierui.cn/article/geshsi.html
