Vue调用springboot后台接口传参

springboot接口如下：

package com.hkj.springboot.apiForVue.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author liujy
 * @description 测试接口
 * @since 2021-02-19 11:25
 */
@RestController
@RequestMapping("/test")
public class TestParamController {
    /**
     * 测试get请求PathVariable传参
     */
    @GetMapping("/getPathVariable/{username}/{pwd}")
    public String testGetPathVariable(@PathVariable("username") String username, @PathVariable("pwd") String pwd) {
        String result = username + " " + pwd;
        System.out.println(result);
        return result;
    }

    /**
     * 测试get请求RequestParam传参
     */
    @GetMapping("/getRequestParam")
    public String testGetRequestParam(@RequestParam("username") String username, @RequestParam("pwd") String pwd) {
        String result = username + " " + pwd;
        System.out.println(result);
        return result;
    }

    /**
     * 测试post请求RequestParam传参
     */
    @PostMapping("/postRequestParam")
    public String testPostRequestParam(@RequestParam("username") String username, @RequestParam("pwd") String pwd) {
        String result = username + " " + pwd;
        System.out.println(result);
        return result;
    }

    /**
     * 测试post请求RequestBody传参
     */
    @PostMapping("/postRequestBody")
    public String testPostRequestBody(@RequestBody TestUser testUser) {
        String result = testUser.getUsername() + " " + testUser.getPwd();
        System.out.println(result);
        return result;
    }

    /**
     * 测试post请求RequestParam、RequestBody混合传参
     */
    @PostMapping("/postRequestParamRequestBody")
    public String testPostRequestParamRequestBody(@RequestParam("size") Integer size, @RequestBody TestUser testUser) {
        String result = size + " " + testUser.getUsername() + " " + testUser.getPwd();
        System.out.println(result);
        return result;
    }
}

TestUser model如下：

package com.hkj.springboot.apiForVue.controller;

import lombok.Getter;
import lombok.Setter;

/**
 * @author liujy
 * @description 实体
 * @since 2021-02-19 11:30
 */
@Getter
@Setter
public class TestUser {
    private String username;
    private String pwd;
}

vue测试页面如下：

<template>
  <div class="base_container">
    <div class="flex_container">
      <button @click="testGetPathVariable">测试get请求PathVariable传参</button>
      <button @click="testGetRequestParam">测试get请求RequestParam传参</button>
      <button @click="testPostRequestParam">测试post请求RequestParam传参</button>
      <button @click="testPostRequestBody">测试post请求RequestBody传参</button>
      <button @click="postRequestParamRequestBody">测试post请求RequestParam、RequestBody混合传参</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        userParam: {
          username: 'zhangsan',
          pwd: '123',
          size: 0
        }
      }
    },
    methods: {
      //  get请求 PathVariable传参
      async testGetPathVariable() {
        const {data} = await this.$axios.get(`/test/getPathVariable/${this.userParam.username}/${this.userParam.pwd}`);
        console.log("get请求 PathVariable传参");
        console.log(data);
      },
      //  get请求 RequestParam传参
      async testGetRequestParam() {
        const {data} = await this.$axios.get('/test/getRequestParam', {params: this.userParam});
        console.log("get请求 RequestParam传参");
        console.log(data);
      },
      //  Post请求 RequestParam传参
      async testPostRequestParam() {
        const formData = new FormData();
        formData.append('username', this.userParam.username);
        formData.append('pwd', this.userParam.pwd);
        // 方法1
        const {data: d1} = await this.$axios.post('/test/postRequestParam', formData);
        // 方法2
        const {data: d2} = await this.$axios.post(`/test/postRequestParam?username=${this.userParam.username}&pwd=${this.userParam.pwd}`);
        console.log("Post请求 RequestParam传参");
        console.log(d1);
        console.log(d2);
      },
      //  Post请求 RequestBody传参
      async testPostRequestBody() {
        const {data} = await this.$axios.post('/test/postRequestBody', this.userParam);
        console.log("Post请求 RequestBody传参");
        console.log(data);
      },
      //  Post请求 RequestParam、RequestBody混合传参
      async postRequestParamRequestBody() {
        const {data} = await this.$axios.post(`/test/postRequestParamRequestBody?size=${this.userParam.size}`, this.userParam);
        console.log("Post请求 RequestParam、RequestBody混合传参");
        console.log(data);
      }
    }
  }
</script>

<style scoped>
</style>

测试结果如下:

测试结果