springBoot 与 axios 表单提交

摘要：不用于表单提交。实验测试失败状态码请求成功，但是服务端没有接受到数据。服务端当然接受不到数据测试成功状态码使用对数据在提交前进行了格式化，将其转换成的形式，此时服务端成功接收到数据。服务端无法正确解析。

环境声明
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。