在前后端分离开发模式中，参数的传递与接收是衔接前端交互与后端逻辑的核心环节。
前端需根据后端接口设计规范，选择合适的参数传递方式；后端则需通过对应的注解或配置，精准获取前端传递的数据。有些时候分不清前端怎么传的后端怎么接收到的，这里做个总结。
本文结合Spring Boot后端与Vue前端技术栈，详细拆解几种常见的传参场景，包含后端接收实现、前端调用示例。比较常用的就是前三种，可以重点看下
文章目录
一、URL路径参数（@PathVariable）
适用场景
RESTful风格API的路径动态参数（如用户ID、订单ID），参数直接嵌入URL路径中，直观且符合资源定位逻辑。
后端接收实现
通过@PathVariable注解绑定URL路径中的参数，支持单个参数、多个参数及别名映射：
java
// 单个路径参数
@GetMapping("/user/{id}")
public String getUserById(@PathVariable Long id) {
return "用户ID:" + id;
}
// 多个路径参数（含别名映射）
@GetMapping("/user/{id}/order/{orderId}")
public String getUserOrder(
@PathVariable Long id,
@PathVariable("orderId") Long orderNo // 路径参数orderId映射为orderNo
) {
return "用户ID:" + id + ",订单ID:" + orderNo;
}前端调用示例
前端通过字符串拼接将参数嵌入URL路径，基于axios的封装示例：
javascript
// API封装（paramDemo.js）
export function getPathParamDemo(id, name) {
return request({
url: `/demo/path/${id}/${name}`, // 路径参数拼接至URL
method: 'get'
})
}
//或
// API封装（paramDemo.js）
export function getPathParamDemo(id, name) {
return request({
url: `/demo/path/'+id+name, // 路径参数拼接至URL
method: 'get'
})
}
// Vue页面调用
async callPathParam() {
try {
const res = await getPathParamDemo(this.pathId, this.pathName);
this.pathResult = res;
} catch (err) {
this.$message.error('调用失败: ' + err.message);
}
}二、请求参数（@RequestParam）
适用场景
URL查询字符串参数（如分页参数、筛选条件），格式为?key1=value1&key2=value2，支持必传/非必传配置、默认值及数组接收。
后端接收实现
通过@RequestParam注解获取，支持单个参数、数组/集合及默认值配置：
java
// 基础查询参数（支持必传、默认值、非必传）
@GetMapping("/user")
public String getUser(
@RequestParam String name, // 必传参数（默认）
@RequestParam(defaultValue = "0") Integer page, // 默认值
@RequestParam(required = false) Integer age // 非必传参数
) {
return "姓名:" + name + ",年龄:" + age + ",页码:" + page;
}
// 接收数组/集合（如多爱好筛选）
@GetMapping("/hobby")
public String getHobby(@RequestParam List<String> hobby) {
return "爱好:" + hobby; // 接收?hobby=reading&hobby=sports格式参数
}前端调用示例
前端通过params属性传递参数，axios会自动拼接为查询字符串：
javascript
// API封装
export function getQueryParamDemo(page, size, keyword) {
return request({
url: '/demo/query',
method: 'get',
params: { // 自动转为?page=1&size=10&keyword=xxx
page,
size,
keyword
}
})
}
// Vue页面调用
async callQueryParam() {
try {
const res = await getQueryParamDemo(this.page, this.size, this.keyword);
this.queryResult = res;
} catch (err) {
this.$message.error('调用失败: ' + err.message);
}
}三、JSON请求体（@RequestBody）
适用场景
前后端分离场景下的复杂数据传递（如创建/更新资源），参数格式为application/json，支持嵌套对象。
后端接收实现
通过@RequestBody注解直接绑定实体类，自动解析JSON格式请求体：
java
@PostMapping("/user/save")
public String saveUser(@RequestBody User user) { // User类需与JSON字段对应
return "保存用户:" + user.getUsername();
}前端调用示例
直接传递JavaScript对象，axios会自动转为JSON格式并设置请求头：
javascript
// API封装
export function postJsonDataDemo(user) {
return request({
url: '/demo/json',
method: 'post',
data: user // 直接传递对象，自动转为JSON
})
}
// Vue页面调用
async callJsonData() {
try {
const res = await postJsonDataDemo(this.user); // this.user为{name: '', age: ''}
this.jsonResult = res;
} catch (err) {
this.$message.error('调用失败: ' + err.message);
}
}四、请求头参数（@RequestHeader）
适用场景
全局配置信息（如Token、用户类型），参数存储在HTTP请求头中，避免暴露敏感数据。
后端接收实现
通过@RequestHeader注解获取请求头字段，支持别名映射：
java
@GetMapping("/header")
public String getHeader(
@RequestHeader String token, // 直接获取token字段
@RequestHeader("Content-Type") String contentType // 别名映射
) {
return "Token:" + token + ",Content-Type:" + contentType;
}前端调用示例
在headers中配置自定义请求头字段：
javascript
// API封装
export function getHeaderParamDemo(token) {
return request({
url: '/demo/header',
method: 'get',
headers: {
'X-Token': token, // 自定义Token字段
'User-Type': 'admin' // 额外请求头信息
}
})
}
// Vue页面调用
async callHeaderParam() {
try {
const res = await getHeaderParamDemo(this.token);
this.headerResult = res;
} catch (err) {
this.$message.error('调用失败: ' + err.message);
}
}五、Cookie参数（@CookieValue）
适用场景
基于Cookie的会话保持（如sessionId），参数存储在客户端Cookie中，随请求自动发送。
后端接收实现
通过@CookieValue注解指定Cookie名称获取：
java
@GetMapping("/cookie")
public String getCookie(@CookieValue("sessionId") String sessionId) {
return "SessionID:" + sessionId;
}前端调用示例
Cookie会随请求自动发送（需确保前端可访问对应Cookie），无需额外配置参数：
javascript
// API封装
export function getCookieParamDemo() {
return request({
url: '/demo/cookie',
method: 'get' // Cookie自动携带
})
}
// Vue页面直接调用
async callCookieParam() {
try {
const res = await getCookieParamDemo();
this.cookieResult = res;
} catch (err) {
this.$message.error('调用失败: ' + err.message);
}
}六、文件上传（MultipartFile）
适用场景
文件上传（如图片、文档），参数格式为multipart/form-data，支持单个文件+额外参数。
后端接收实现
通过MultipartFile接收文件，配合@RequestParam获取额外参数：
java
@PostMapping("/upload")
public String uploadFile(
@RequestParam("file") MultipartFile file, // 与前端表单字段名一致
@RequestParam(required = false) String desc // 额外描述参数
) throws IOException {
String fileName = file.getOriginalFilename();
// 文件保存逻辑（如写入本地或OSS）
return "上传成功:" + fileName;
}前端调用示例
通过FormData构造表单数据，指定请求头multipart/form-data：
javascript
// API封装
export function uploadFileDemo(file, desc) {
const formData = new FormData();
formData.append('file', file); // 文件名需与后端@RequestParam一致
formData.append('desc', desc); // 附加额外参数
return request({
url: '/demo/upload',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data' // 文件上传类型标识
}
})
}
// Vue页面调用（结合Element UI上传组件）
handleFileChange(file) {
this.file = file.raw; // 保存原始文件对象
},
async callUploadFile() {
if (!this.file) {
this.$message.warning('请先选择文件');
return;
}
try {
const res = await uploadFileDemo(this.file, '测试文件');
this.uploadResult = res;
} catch (err) {
this.$message.error('上传失败: ' + err.message);
}
}七、核心总结与注意事项
传参方式选型表
| 传递方式 | 后端注解/类型 | 前端配置要点 | 适用场景 |
|---|---|---|---|
| 路径参数 | @PathVariable | URL字符串拼接 | RESTful资源定位（ID类参数） |
| 查询参数 | @RequestParam | params属性传递，自动拼接查询字符串 | 分页、筛选等简单参数 |
| JSON请求体 | @RequestBody | 直接传递对象，axios自动转JSON | 复杂数据（嵌套对象、多字段） |
| 请求头参数 | @RequestHeader | headers属性配置自定义字段 | Token、用户类型等全局信息 |
| Cookie参数 | @CookieValue | 无需额外配置，Cookie自动携带 | 会话保持（sessionId） |
| 文件上传 | MultipartFile | FormData构造数据，Content-Type: multipart/form-data | 图片、文档上传 |
关键注意事项
- 参数名一致性：前端传递的参数名（如表单字段、JSON键名）需与后端注解/实体类属性名一致，否则无法映射。
- Content-Type匹配：表单参数需指定
application/x-www-form-urlencoded，文件上传需指定multipart/form-data，JSON请求体无需手动设置（axios自动处理）。 - 非必传参数配置：查询参数、表单参数需通过
required = false声明非必传，避免请求报错。
通过以上这几种传参方式的组合，可覆盖绝大多数Java前后端开发场景。实际开发中，需根据参数类型、业务场景选择合适的方式，确保参数传递的高效性与安全性。