vue 使用 axios 时 post 请求方法传参无法发送至后台，前台处理或者后台处理的两种解决方式

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

这样也可以接收到值

任选一种就可以