[个人笔记]关于axios与springmvc之间的通讯方式

前言
axios会自动选择请求类型(Content-Type)发送
带了便利的同时也会引发一些前端明明发送了但是后端无法接受的问题
因此花时间研究了一下几个常见类型之间,前后端通讯的案例作为样本,方便今后参考

目录

1. get请求
2. post-formdata的请求
3. post-formdata,带list的请求
4. post-json的请求
5. post-urlencode的请求

环境和依赖

前端

vue,axios,qs

前端

springboot-web

正文

相关解释已经写在注释中

1. get请求

前端发送(因为使用vue,直接复制了methods中的方法)

    getRequest() {
      //通常,get的参数需要使用params
      this.$axios.get('/get',{params:{a:1,b:'b'}});

      //直接使用data中的对象也是没问题的
      // this.$axios.get('/get',{params:this.aAndB});
    },

后端接收

    //get请求
    @GetMapping("/get")
    public String get(Integer a,String b) {
        System.out.println(a);
        System.out.println(b);
        return "success";
    }

2. post-formdata的请求

前端发送

    postFormData() {
      //通过qs来封装成表单数据FormData.此时如果使用params反而会接收不到数据
      let formData = this.$qs.stringify({a:1,b:'b'});
      this.$axios.post('/post-formData',formData);
    },

后端接收

    //post-formData请求
    @PostMapping("/post-formData")
    public String postFormData(Integer a,String b) {
        System.out.println(a);
        System.out.println(b);
        return "success";
    }

3. post-formdata,带list的请求

前端发送

    postFormDataHasList() {
      //如果是list数据,那么后台可以用int[]来接受表单数据.注意设置indices:false,来去除多余的括号
      let formData = this.$qs.stringify({a:1,b:'b',c:[1,2,3]},{indices: false});
      this.$axios.post('/post-formData-list',formData);
    },

后端接收

    //post-formData请求
    @PostMapping("/post-formData-list")
    public String postFormDataHasList(Integer a,String b,int[] c) {
        System.out.println(a);
        System.out.println(b);
        System.out.println(c);
        return "success";
    }

4. post-json的请求

json可能是重头戏
前端发送

    postJson() {
      //发送json,直接传入js对象即可
      this.$axios.post('/post-json',this.aAndB);
      // this.$axios.post('/post-json-custom',this.aAndB);    //后台通过自定义对象(AAndB类型对象)也可以接收
      //data中的数据:  
      //data(){return {aAndB:{a:1,b:'b'},}},
      // this.$axios.post('/post-json-custom',{a:1,b:'b'});   //自己定义js对象而不是从data中取也可以

      //如果包装成json字符串则会发送x-www-form-urlencoded类型数据,而非json,因此后端无法接受
      // this.$axios.post('/post-json-object',JSON.stringify(this.aAndB));
    },

后端接收
一般我们通过定义一个对象来接收

    //post-json请求,通过自定义对象接收
    @PostMapping("/post-json-custom")
    public String postJson(@RequestBody AAndB data) {
        System.out.println(data);
        return "success";
    }

也可以不定义类型,通过object来接收,再通过jackson进行解析

    //post-json请求,通过object对象接收
    @PostMapping("/post-json")
    public String postJson(@RequestBody Object data) {
        System.out.println(data);
        return "success";
    }

5. post-urlencode的请求

前端发送

    postUrlencode() {
      //最后提一点urlencode,因为比较少见
      //不推荐的方法,使用URLSearchParams,兼容性有很大问题
      // let params = new URLSearchParams();
      // params.append("a","1");
      // params.append("b","b");
      // this.$axios.post('/post-urlencode',params);

      //或者你也可以套用FormData的写法方法,无论前端还是后端FormData和urlencode的写法都是一样的
      this.$axios.post('/post-urlencode',this.$qs.stringify({a:1,b:'b'},{indices: false}));
    },

后端接受

    //post-urlencode请求,直接通过包装类型接受
    @PostMapping("/post-urlencode")
    //一般使用RequestParam会进行特别定义,比如这个参数有别的名称,或者设定默认值
    // public String postJson(@RequestParam Integer a,@RequestParam String b) {
    //不使用也完全没问题
    public String postJson(Integer a,String b) {
        System.out.println(a);
        System.out.println(b);
        return "success";
    }

仓库地址

虽然不太相信有人还会去看,但是如果还是不理解的话可以参考一下
码云:https://gitee.com/ashin10/test-for-front-backend-interactive