Vue中使用axios提交表单并使用Spring Boot进行后台接收

看起来很简单的一个事情，却折腾了快一天的时间，因此记录一下，以防后期继续采坑。

vue中提交的方式有三种
(1) 使用json格式
(2) 使用form data格式
(3) 使用qs.stringify的格式

使用axios进行提交的时候默认使用的是json格式的字符串。

export default {
        name: "TestForm",
        data() {
            return {
                formLableWidth:100,
                form: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            onSubmit() {
                //使用axios传递相关配置来创建请求
                this.$axios.post("/form/test",this.form);
            }
        }

后台接收Json格式的代码

    @ResponseBody
    @RequestMapping(value = "/test01",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
    public String test01(@RequestBody User user){
        System.out.println(user.username);
        System.out.println(user.password);
        return "测试";
    }

使用Form Data的格式发送数据

 export default {
        name: "TestForm",
        data() {
            return {
                formLableWidth:100,
                form: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            onSubmit() {
                //将数据存储起来
                let formData=new FormData();
                for(let key in this.form){
                    formData.append(key,this.form[key]);
                    //console.log(formData.get(key));
                }
                this.$axios({
                    method:"post",
                    url:"form/test02",
                    changeOrigin:true,
                    data:formData,
                    withCredentials:true 
                }).then((response)=>{
                    console.log(response);
                })
            }
        }

后台接收代码

@RequestMapping(value = "/test02",method = RequestMethod.POST)
    public String test02(User user){
        System.out.println(user.username);
        System.out.println(user.password);
        return "测试";
    }

使用qs.stringigy的方式

qs.stringfy的方式自动将数组转为Form Data的格式。
后台接收代码

@RequestMapping(value = "/test03",method = RequestMethod.POST)
  @ResponseBody
  public String test03(User user){
      System.out.println(user.username+" "+user.password);
//        System.out.println("测试");
      return "测试";
  }

个人觉得使用qs.stringify更为方便点，总结一下流程：
第一步：在前端Vue中安装和导入所需要的插件
安装 axios:npm install axios
安装 qs：npm install qs
在main.js中引入

import axios from 'axios';
import qs from 'qs'
Vue.prototype.$axios = axios;
Vue.prototype.$qs=qs;
Vue.config.productionTip = false;
// 超时终止请求
axios.defaults.timeout = 5000;
axios.defaults.baseURL = 'http://127.0.0.1:8082';

前端代码：

<template>
   <div>
       <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="用户名">
               <el-input v-model="form.username"></el-input>
           </el-form-item>
           <el-form-item label="密码">
               <el-input v-model="form.password"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="onSubmit">提交</el-button>
           </el-form-item>
       </el-form>
   </div>
</template>

<script>
   export default {
       name: "TestForm",
       data() {
           return {
               form: {
                   username: '',
                   password: ''
               }
           }
       },
       methods: {
           onSubmit() {
               this.$axios({
                   method:"post",
                   url:"form/test03",
                   changeOrigin:true,
                   headers:{
                       'Content-Type': 'application/x-www-form-urlencoded'
                   },
                 data:this.$qs.stringify(this.form),
                   withCredentials:true //让每次请求都带上cookie
               }).then((response)=>{
                   console.log(response);
               })
           }
       }
   }
</script>
<style scoped>
   .el-input{ /*设置输入框的宽度*/
       width: 200px;
   }
</style>

后台代码

@CrossOrigin
@RestController
@RequestMapping("/form")
public class TestFormController {
  @RequestMapping(value = "/test03",method = RequestMethod.POST)
  @ResponseBody
  public String test03(User user){
      System.out.println(user.username+" "+user.password);
      return "测试";
  }
}

跨域请求解决方案
第一步添加配置类

@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry){
        //设置允许跨域的路径

        registry.addMapping("/**")
                //设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                //这里：是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
        System.out.println("配置文件已执行");
    }
}

在Controller类上添加@CrossOrigin 注解