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测试页面如下:






测试结果如下:


测试结果

你可能感兴趣的:(Vue调用springboot后台接口传参)