vue 使用 axios 时 post 请求方法传参无法发送至后台
vue 框架推荐使用 axios 插件发送数据,使用 axios 插件结合 qs 插件实现 post 传参不报错。
安装插件
npm install --save axios
npm install --save qs
//在main.js中 引入axios,并加到原型链中,动态查询时候,必须加这个
import axios from 'axios'
import QS from 'qs'
Vue.prototype.$axios = axios
Vue.prototype.$qs = QS
解决方式一、使用qs(推荐)
在method中:
methods:{
updateOrAddEdit(){
var self = this
var param = {
pid:this.newNodes.pid,
id:this.newNodes.id,
categoryName:this.newNodes.categoryName,
}
//我这里是前后端分离的链接,如果在一个项目,直接controller层地址
//通过this.$qs.stringify(param),进行传参,保证content-Type的路径不是json,就可以了
this.$axios.post('http://localhost:8089/category/updateOrAdd.do',this.$qs.stringify(param)).then(function (response) {
//里边直接写操作成功后的需求
}
})
},
}
如图:路径为这样,就是传参没有问题的
如果这样写了,还是传不到后台:理由:
var param = {
pid:this.newNodes.pid,
id:this.newNodes.id,
categoryName:this.newNodes.categoryName,
}
**param中的参数(pid,id,categoryName)和实体类中的属性名不一致,**识别不了,所有传不过去,一般情况下是路径走到后台,但是值都为null
解决方式二、在controller控制层做处理
因为不做处理:content-Type的路径为jsonp的方式,所以需要给参数加一个注解
methods不做处理正常传值:
methods:{
add:function(){
//直接调用controller层的方法
axios.post('/car/insertBrand',{name:this.name}).then(function(response) {
alert("提交成功!");
})
},
}
**在controller层加注解:@RequestBody **
@RequestMapping("insertBrand")
@ResponseBody
public void insertBrand(@RequestBody Brand brand){
brandService.insertBrand(brand);
}
这样也可以接收到值
任选一种就可以