前端与后端数据传递方式

三种参数类型对比

在前后端交互中，数据主要通过三种方式传递：

参数类型	后端注解	前端传参位置	示例
路径参数	`@PathVariable`	URL 路径中	`/user/{id}` → `id=1001`
查询参数	`@RequestParam`	URL 问号后	`?id=1001&name=张三`
请求体参数	`@RequestBody`	HTTP Body 中	`{"name":"张三","age":25}`

实际请求示例

前端代码

// 发送请求
axios.post('/employee/update?id=1001', {
  name: '张三',
  age: 25
})

// 实际请求：
// URL: POST /employee/update?id=1001
// Body: {"name":"张三","age":25}

后端代码

@PostMapping("/employee/{action}")  // {action} 是路径参数
public Result handle(
    @PathVariable String action,      // 接收 "update"
    @RequestParam Long id,            // 接收 URL 中的 ?id=1001
    @RequestBody Employee data        // 接收 Body 中的 JSON
) {
    // action = "update"
    // id = 1001
    // data = {name:"张三", age:25}
}

路径参数 @PathVariable

用于 URL 中的动态路径部分。

前端：GET /user/1001
后端：@GetMapping("/user/{id}")
     public User getUser(@PathVariable Long id) { }

查询参数 @RequestParam

用于 URL 中 ? 后面的参数。

前端：GET /user?id=1001&name=张三
后端：@GetMapping("/user")
     public User getUser(@RequestParam Long id,
                         @RequestParam String name) { }

请求体参数 @RequestBody

用于 POST/PUT 请求的 Body 中，适合传递复杂对象。

前端：POST /user  Body: {"name":"张三","age":25}
后端：@PostMapping("/user")
     public void addUser(@RequestBody User user) { }

总结

简单参数（如 ID、状态）：用 @RequestParam
RESTful 风格路径（如 /user/1001）：用 @PathVariable
复杂对象/JSON 数据：用 @RequestBody