Java-Vue插件之Axios-创新互联

Java-Vue插件之Axios,环境安装:
npm install --save axios vue-axios //安装axios

超过10余年行业经验,技术领先,服务至上的经营模式,全靠网络和口碑获得客户,为自己降低成本,也就是为客户降低成本。到目前业务范围包括了:成都做网站、成都网站制作,成都网站推广,成都网站优化,整体网络托管,小程序开发,微信开发,成都APP应用开发,同时也可以让客户的网站和网络营销和我们一样获得订单和生意!

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)
})
}

真正向后端请求时:
Java-Vue插件之Axios
这是跨域请求;
解决办法之一:
在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模块

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


文章名称:Java-Vue插件之Axios-创新互联
文章位置:http://csdahua.cn/article/ijcjh.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流