当前位置：首页 > web >正文

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

web 2025/5/5 1:19:37

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

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

一、GET 请求

1.1 查询参数（URL 参数）

Axios 传参

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

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

Spring Boot 接收

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

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

1.2 路径参数

Axios 传参

参数直接嵌入 URL：

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

Spring Boot 接收

使用 @PathVariable 注解：

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

1.3 接收 `List` 和 `Map`

Axios 传参（List）

需序列化为重复参数：

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 接收

@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：

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

Spring Boot 接收

使用 @RequestBody 绑定对象：

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

2.2 表单数据（Form Data）

Axios 传参

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

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 接收

逐个接收或绑定到对象：

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

2.3 接收 `List` 和 `Map`

Axios 传参（List）

发送 JSON 数组：

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

Spring Boot 接收

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

Axios 传参（Map）

发送 JSON 数组：

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

Spring Boot 接收

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

三、PUT/DELETE 请求

3.1 更新资源（PUT）

Axios 传参

混合路径参数和请求体：

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

Spring Boot 接收

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

3.2 删除资源（DELETE）

Axios 传参

路径参数 + 查询参数：

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

Spring Boot 接收

@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：

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`