Java前后端传参与接收全解析

在前后端分离开发模式中，参数的传递与接收是衔接前端交互与后端逻辑的核心环节。

前端需根据后端接口设计规范，选择合适的参数传递方式；后端则需通过对应的注解或配置，精准获取前端传递的数据。有些时候分不清前端怎么传的后端怎么接收到的，这里做个总结。

本文结合Spring Boot后端与Vue前端技术栈，详细拆解几种常见的传参场景，包含后端接收实现、前端调用示例。比较常用的就是前三种，可以重点看下

文章目录

• • 一、URL路径参数（@PathVariable）
  • • 适用场景
    • 后端接收实现
    • 前端调用示例
  • 二、请求参数（@RequestParam）
  • • 适用场景
    • 后端接收实现
    • 前端调用示例
  • 三、JSON请求体（@RequestBody）
  • • 适用场景
    • 后端接收实现
    • 前端调用示例
  • 四、请求头参数（@RequestHeader）
  • • 适用场景
    • 后端接收实现
    • 前端调用示例
  • 五、Cookie参数（@CookieValue）
  • • 适用场景
    • 后端接收实现
    • 前端调用示例
  • 六、文件上传（MultipartFile）
  • • 适用场景
    • 后端接收实现
    • 前端调用示例
  • 七、核心总结与注意事项
  • • 传参方式选型表
    • 关键注意事项

一、URL路径参数（@PathVariable）

适用场景

RESTful风格API的路径动态参数（如用户ID、订单ID），参数直接嵌入URL路径中，直观且符合资源定位逻辑。

后端接收实现

通过@PathVariable注解绑定URL路径中的参数，支持单个参数、多个参数及别名映射：

// 单个路径参数
@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的封装示例：

// 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注解获取，支持单个参数、数组/集合及默认值配置：

// 基础查询参数（支持必传、默认值、非必传）
@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会自动拼接为查询字符串：

// 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格式请求体：

@PostMapping("/user/save")
public String saveUser(@RequestBody User user) { // User类需与JSON字段对应
  return "保存用户:" + user.getUsername();
}

前端调用示例

直接传递JavaScript对象，axios会自动转为JSON格式并设置请求头：

// 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注解获取请求头字段，支持别名映射：

@GetMapping("/header")
public String getHeader(
    @RequestHeader String token, // 直接获取token字段
    @RequestHeader("Content-Type") String contentType // 别名映射
) {
  return "Token:" + token + ",Content-Type:" + contentType;
}

前端调用示例

在headers中配置自定义请求头字段：

// 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名称获取：

@GetMapping("/cookie")
public String getCookie(@CookieValue("sessionId") String sessionId) {
  return "SessionID:" + sessionId;
}

前端调用示例

Cookie会随请求自动发送（需确保前端可访问对应Cookie），无需额外配置参数：

// 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获取额外参数：

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

// 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	图片、文档上传

关键注意事项

1. 参数名一致性：前端传递的参数名（如表单字段、JSON键名）需与后端注解/实体类属性名一致，否则无法映射。
2. Content-Type匹配：表单参数需指定application/x-www-form-urlencoded，文件上传需指定multipart/form-data，JSON请求体无需手动设置（axios自动处理）。
3. 非必传参数配置：查询参数、表单参数需通过required = false声明非必传，避免请求报错。

通过以上这几种传参方式的组合，可覆盖绝大多数Java前后端开发场景。实际开发中，需根据参数类型、业务场景选择合适的方式，确保参数传递的高效性与安全性。