Axios 传参与 Spring Boot 接收参数完全指南

本文详细说明前端 Axios 传参与后端 Spring Boot 接收参数的各类场景，包括 GET/POST/PUT/DELETE 请求、路径参数/查询参数/请求体参数 的传递方式，以及如何接收 List、Map 等复杂类型。通过代码示例和对比表格，帮助开发者快速掌握正确用法。

一、GET 请求

1.1 查询参数（URL 参数）

Axios 传参

使用 params 字段，参数自动拼接到 URL：

javascript 复制代码

axios.get('/api/user', {
  params: {
    id: 1,
    name: 'John'
  }
});
// URL 结果：/api/user?id=1&name=John

Spring Boot 接收

使用 @RequestParam 注解（可省略参数名匹配时）：

java 复制代码

@GetMapping("/api/user")
public String getUser(
    @RequestParam Long id,        // 显式注解
    String name                   // 省略注解（参数名需一致）
) {
    // 业务逻辑
}

1.2 路径参数

Axios 传参

参数直接嵌入 URL：

javascript 复制代码

axios.get(`/api/user/${userId}`);

Spring Boot 接收

使用 @PathVariable 注解：

java 复制代码

@GetMapping("/api/user/{userId}")
public String getUser(@PathVariable Long userId) {
    // 业务逻辑
}

1.3 接收 `List` 和 `Map`

Axios 传参（List）

需序列化为重复参数：

javascript 复制代码

axios.get('/api/users', {
  params: { ids: [1, 2, 3] },
  paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' })
});
// URL 结果：/api/users?ids=1&ids=2&ids=3

Spring Boot 接收

java 复制代码

@GetMapping("/api/users")
public List<User> getUsers(@RequestParam List<Long> ids) { ... }

@GetMapping("/api/user")
public Map<String, String> getParams(@RequestParam Map<String, String> params) { ... }

二、POST 请求

2.1 JSON 数据（默认）

Axios 传参

使用 data 字段，默认 Content-Type: application/json：

javascript 复制代码

axios.post('/api/user', { 
  name: 'John', 
  address: { city: 'New York' } // 嵌套对象
});

Spring Boot 接收

使用 @RequestBody 绑定对象：

java 复制代码

@PostMapping("/api/user")
public User createUser(@RequestBody User user) { ... }

2.2 表单数据（Form Data）

Axios 传参

需设置 Content-Type: application/x-www-form-urlencoded：

javascript 复制代码

const params = new URLSearchParams();
params.append('name', 'John');
params.append('age', 30);

axios.post('/api/user', params, {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

Spring Boot 接收

逐个接收或绑定到对象：

java 复制代码

@PostMapping("/api/user")
public String createUser(
    @RequestParam String name,    // 逐个接收
    @ModelAttribute User user     // 绑定到对象（可省略注解）
) { ... }

2.3 接收 `List` 和 `Map`

Axios 传参（List）

发送 JSON 数组：

javascript 复制代码

axios.post('/api/users', [
  { name: 'John' }, { name: 'Alice' }
]);

Spring Boot 接收

java 复制代码

@PostMapping("/api/users")
public String createUsers(@RequestBody List<User> users) { ... }

Axios 传参（Map）

发送 JSON 数组：

javascript 复制代码

axios.post('/api/data', {
  key1: 'value1',
  key2: { nestedKey: 'nestedValue' }
});

Spring Boot 接收

java 复制代码

@PostMapping("/api/data")
public String handleData(@RequestBody Map<String, Object> data) { ... }

三、PUT/DELETE 请求

3.1 更新资源（PUT）

Axios 传参

混合路径参数和请求体：

javascript 复制代码

axios.put(`/api/user/${userId}?role=admin`, { name: 'Alice' });

Spring Boot 接收

java 复制代码

@PutMapping("/api/user/{id}")
public User updateUser(
    @PathVariable Long id,
    @RequestParam String role,
    @RequestBody User user
) { ... }

3.2 删除资源（DELETE）

Axios 传参

路径参数 + 查询参数：

javascript 复制代码

axios.delete(`/api/user/${userId}?force=true`);

Spring Boot 接收

java 复制代码

@DeleteMapping("/api/user/{id}")
public void deleteUser(
    @PathVariable Long id,
    @RequestParam boolean force
) { ... }

四、注解使用规则

4.1 `@RequestParam` 和 `@PathVariable`

注解	必须显式使用？	适用场景
`@RequestParam`	参数名不一致时需显式	URL 查询参数或表单字段
`@PathVariable`	必须显式使用	URL 路径参数（如 `/user/{id}`）

4.2 `@RequestBody` 和 `@ModelAttribute`

注解	数据来源	Content-Type	绑定机制
`@RequestBody`	请求体（JSON/XML）	`application/json`	反序列化为对象
`@ModelAttribute`	URL 参数或表单字段	`application/x-www-form-urlencoded`	按名称匹配到对象属性

五、常见问题解答

5.1 参数未正确接收？

检查点 ：
1. 前端 Content-Type 是否与后端匹配（如 JSON 需 @RequestBody）。
2. 参数名是否一致（尤其是 @RequestParam 和 @PathVariable）。
3. GET 请求是否误用请求体（默认不支持）。

5.2 日期/时间参数处理

在字段上添加 @DateTimeFormat：

java 复制代码

public class User {
  @DateTimeFormat(pattern = "yyyy-MM-dd")
  private LocalDate birthday;
}

5.3 接收 `Map` 的注意事项

GET 请求 ：Map 的值为 String 类型。
POST 请求 ：Map 可嵌套复杂对象（需 @RequestBody）。

六、总结速查表

场景	HTTP 方法	Axios 传参方式	Spring Boot 接收方式
查询用户	GET	`params`	`@RequestParam` / 无注解
创建用户（JSON）	POST	`data` 对象	`@RequestBody`
提交表单	POST	`FormData`	`@RequestParam` / `@ModelAttribute`
更新用户	PUT	路径参数 + JSON 请求体	`@PathVariable` + `@RequestBody`
批量删除用户	DELETE	路径参数 + 查询参数	`@PathVariable` + `@RequestParam`

通过本文档，您可快速掌握前后端参数传递的核心规则。建议结合代码示例和对比表格，根据实际场景选择正确的传参方式。

Axios 传参与 Spring Boot 接收参数完全指南