springboot与axios交互

问题描述
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) {}

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

使用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