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

拼搏现实的明天。 2021-09-13 16:38 753阅读 0赞

## 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) {
           //里边直接写操作成功后的需求
             
              }
            })
          },
     
      }

如图：路径为这样，就是传参没有问题的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]

## 如果这样写了，还是传不到后台：理由： ##

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

这样也可以接收到值

任选一种就可以

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]: /images/20210913/c7e849815ca84820a7280f50cad45767.png