springBoot 與 axios 表單提交

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

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

緣由
一、axios的表單提交 ，content-type 默認爲 application/json;charset=UTF-8
二、提交數據會附加在payload（以JSON形式）。
三、@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。