前端后参数传递时的@PathVariable,@RequestBody,@RequestParam用法

前端后参数传递时的@PathVariable,@RequestBody,@RequestParam

由于写controller时经常弄混 @PathVariable @RequestParam @RequestBody 和什么都不加的使用情况,特此备注.

上图是一个简单分类,下面会详细讲解各个用法

1.@PathVariable和@RequestParam

@RequestParam

前端发送请求

http://localhost:8080/backend/user?name=tom

后端接收

@RestController
@RequestMapping(value = "backend")
public class Controller {
    @GetMapping("/user")
    public void getName(@RequestParam(required = false,value = "name",defaultValue = "jack") String name) {
        System.out.println("=====" + name);
    }
}

输出:=====tom

@PathVariable

前端发送请求

http://localhost:8080/backend/user/tom

后端接收

@RestController
@RequestMapping(value = "backend")
public class Controller {

    @GetMapping("/user/{name}")
    public void getName(@PathVariable String name) {
        System.out.println("=====" + name);
    }
}

输出:=====tom

2.@RequestBody 和 什么都不加

什么都不加

前端发送

后端接收

@RestController
@RequestMapping(value = "backend")
public class Controller {
    @PostMapping("/user")
    public void getName(User user) {
        System.out.println("=====" + user.getName() + "===" + user.getAge());
    }

    @Data
    public class User {
        private String name;
        private int age;
    }
}

@RequestBody

前端请求

后端接收

@RestController
@RequestMapping(value = "backend")
public class Controller {
    @PostMapping("/user")
    public void getName(@RequestBody User user) {
        System.out.println("=====" + user.getName() + "===" + user.getAge());
    }

    @Data
    public static class User {
        private String name;
        private int age;
    }
}

3.前端传参

前端一般使用js的axios, axios 是一个流行的 JavaScript HTTP 客户端库，用于在浏览器和 Node.js 中发送 HTTP 请求。它提供了一种简洁、灵活和易于使用的方式来与服务器进行数据交互。

常用使用方式:

1.get

axios.get(`${this.baseUri}/${id}`);

生成请求URL:https://api.example.com/users/123

axios.get(`${this.baseUri}/page`, { params})

生成请求URL:https://api.example.com/page?page=1&limit=10

2.post

axios.post(`${this.baseUri}/`, params);

生成请求URL:https://api.example.com/
请求体body: { name: 'John', age: 25 }

其他put,delete等请求都是基于此的变形,可自行测试.