摘要：不用于表單提交。實驗測試失敗狀態碼請求成功，但是服務端沒有接受到數據。服務端當然接受不到數據測試成功狀態碼使用對數據在提交前進行了格式化，將其轉換成的形式，此時服務端成功接收到數據。服務端無法正確解析。

環境聲明
springBoot : 1.8
java : jdk1.8
IDE : IDEA

問題描述
axios 表單提交，springBoot 無法接受到數據，但使用swagger測試，可以。

原因
1、axios的表單提交 ，content-type 默認為 application/json;charset=UTF-8
2、提交數據會附加在payload（以JSON形式）。
3、@ModelAttribute 可以接受表單的數據，但是content-type的類型需要為application/x-www-form。@RequestBody 可以接受表單數據，但是content-type類型需要為application/json。@RequestParam 從URL中接受請求參數。（不用于表單提交）。

實驗

測試1.1（失敗）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    }
  });

 public Object inserCategory(@ModelAttribute Category category) {}

http 狀態碼：

請求成功，但是服務端沒有接受到數據。原因是@ModelAttribute需要接收FormData形式的數據

測試1.2（失敗）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });

public Object inserCategory(@ModelAttribute Category category) {}

http狀態碼：

Form Data 被默認組裝成了 json的形式，雖然我們修改了Content-type。

測試1.3（失敗）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });

public Object inserCategory(@ModelAttribute Category category) {}

FormData 還是json的形式， 不是以FormData的形式。服務端當然接受不到數據

測試1.4（成功）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    },
    transformRequest: [function (data) {
      return that.$qs.stringify(data);
    }],
  });

 public Object inserCategory(@ModelAttribute Category category) {}

http狀態碼：

使用qs對數據在提交前進行了格式化，將其轉換成FormData的形式，此時服務端成功接收到數據。
也就是說，使用@ModelAttribute修飾，客戶端的content-type需要是 application/x-www-form-urlencoded 且 FormData數據是正確的FormData格式

測試@RequestBody：

測試2.1（失敗）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    },
    transformRequest: [function (data) {
      return that.$qs.stringify(data);
    }],
  });

 public Object inserCategory(@RequestBody Category category) {}

也就是說@RequstBody 只能支持以JSON數據格式上傳。

測試2.2（失敗）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    }
  })

public Object inserCategory(@RequestBody Category category) {}

以這種形式提交數據會失敗，因為category在最外面又包裝了一個對象。服務端無法正確解析。

測試2.3（成功）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
   });

public Object inserCategory(@RequestBody Category category) {}

以JSON的形式，將數據上傳，服務端成功接受到數據

總結：@RequestBody 只能以json數據提交，數據會負載在Request Payload中；@ModelAttribute 可以以表單數據提交，數據需要以FormData形式提交。

下面是我推薦的寫法

this.$axios.post(this.$rootPath+"/category/category",this.$qs.stringify(this.category))

public Object inserCategory(@ModelAttribute Category category) {}

注意：qs 默認會把 content-type 修改為 application/x-www-form-urlencoed。