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

這樣也可以接收到值

任選一種就可以