核心内容摘要
孙尚香蹲在板凳上给刘禅辅导作业有真相
前端向后端传递参数的形式前端向后端传递参数的所有常见形式以及这些形式在 Spring Boot 中对应的接收方式这是实际开发中对接前后端的核心知识点。
接下来我会按「参数传递位置」分类详细讲解每种形式的特点、示例和后端接收方式覆盖开发中 99% 的场景。
URL 路径参数Path Variable特点参数直接嵌在 URL 路径中用于标识资源的唯一标识如用户 ID、订单号是 RESTful API 的核心传参方式。
前端示例Axios// GET请求获取ID为1的用户信息 axios.get(/user/
; // URL最终为http://localhost:8080/user/1后端接收Spring BootRestController RequestMapping(/user) public class UserController { // PathVariable 接收路径参数 GetMapping(/{id}) public String getUserById(PathVariable Long id) { return 获取到用户ID id; // 输出获取到用户ID1 } // 多个路径参数 GetMapping(/{id}/order/{orderId}) public String getUserOrder(PathVariable Long id, PathVariable(orderId) Long orderNumber) { return 用户ID id 订单ID orderNumber; } }
URL 查询参数Query Parameter特点参数以?keyvaluekey2value2形式拼接在 URL 末尾用于筛选、分页、排序等场景支持 GET/POST 等请求方式。
前端示例// GET请求分页查询用户页码1每页10条 axios.get(/user/list, { params: { pageNum: 1, pageSize: 10, keyword: 张三 } }); // URL最终为http://localhost:8080/user/list?pageNum1pageSize10keyword张三 // POST请求也可带查询参数不推荐但支持 axios.post(/user/search, {}, { params: { keyword: 李四 } });后端接收RestController RequestMapping(/user) public class UserController { // 方式1单个RequestParam接收 GetMapping(/list) public String getUserList( RequestParam Integer pageNum, RequestParam Integer pageSize, RequestParam(required false) String keyword) { // requiredfalse非必传 return 页码 pageNum 每页条数 pageSize 关键词 keyword; } // 方式2用实体类接收参数名需与实体属性一致 GetMapping(/search) public String searchUser(UserQuery query) { return 关键词 query.getKeyword(); } // 实体类示例 Data class UserQuery { private Integer pageNum; private Integer pageSize; private String keyword; } }
请求体参数Request Body特点参数放在 HTTP 请求体中用于传递复杂、大量数据如新增 / 修改对象主要支持 POST/PUT/PATCH 等请求方式常见格式有 JSON、表单、XML 等。
子场景 1JSON 格式最常用前端示例// POST请求新增用户JSON格式请求体 axios.post(/user/add, { id: 1, name: 张三, age: 25 }); // 请求头自动携带Content-Type: application/json后端接收依赖 HttpMessageConverter 转换RestController RequestMapping(/user) public class UserController { // RequestBody 接收JSON并转为Java对象 PostMapping(/add) public User addUser(RequestBody User user) { return user; // 回显接收的参数 } // 实体类 Data class User { private Long id; private String name; private Integer age; } }子场景 2表单格式application/x-www-form-urlencoded特点传统表单提交格式参数以keyvaluekey2value2形式放在请求体中而非 URL 后。
前端示例// POST请求表单格式提交 axios.post(/user/login, new URLSearchParams({ username: admin, password: 123456 }), { headers: { Content-Type: application/x-www-form-urlencoded } });后端接收// 方式1单个RequestParam接收无需RequestBody PostMapping(/login) public String login(RequestParam String username, RequestParam String password) { return 用户名 username 密码 password; } // 方式2实体类接收自动映射 PostMapping(/login) public String login(UserLogin login) { return login.getUsername() - login.getPassword(); } Data class UserLogin { private String username; private String password; }子场景 3表单文件上传multipart/form-data特点用于上传文件图片、文档等可同时传递普通参数和文件。
前端示例// 上传文件 普通参数 const formData new FormData(); formData.append(file, fileInput.files[0]); // 文件对象 formData.append(desc, 用户头像); // 普通参数 axios.post(/upload, formData, { headers: { Content-Type: multipart/form-data } });后端接收PostMapping(/upload) public String uploadFile( RequestParam(file) MultipartFile file, // 接收文件 RequestParam(desc) String desc) { // 接收普通参数 String fileName file.getOriginalFilename(); return 上传文件 fileName 描述 desc; }
请求头参数Header特点参数放在 HTTP 请求头中用于传递非业务参数如 Token、语言类型、版本号。
前端示例// 携带Token请求 axios.get(/user/info, { headers: { Authorization: Bearer token, Language: zh-CN } });后端接收GetMapping(/user/info) public String getUserInfo( RequestHeader(Authorization) String token, // 接收Token RequestHeader(value Language, defaultValue zh-CN) String lang) { // 带默认值 return Token token 语言 lang; }
Cookie / 会话参数特点Cookie 是客户端存储的键值对请求时自动携带到后端常用于保存会话标识如 JSESSIONID、用户偏好设置。
前端示例// 前端设置Cookie浏览器自动携带 document.cookie userId123; path/; max-age86400; // 发起请求Cookie自动在请求头中 axios.get(/user/profile);后端接收GetMapping(/user/profile) public String getUserProfile(CookieValue(userId) String userId) { // 接收Cookie return Cookie中的用户ID userId; }
混合传参实际开发高频场景特点结合多种传参方式覆盖复杂业务场景。
示例路径参数 查询参数 请求头 请求体// 前端修改用户信息ID在路径分页在查询Token在头数据在体 axios.put(/user/1, { name: 李四, age: 26 }, { params: { updateBy: admin }, // 查询参数 headers: { Authorization: Bearer token // 请求头 } });后端接收PutMapping(/user/{id}) public String updateUser( PathVariable Long id, // 路径参数 RequestParam String updateBy, // 查询参数 RequestHeader(Authorization) String token, // 请求头 RequestBody User user) { // 请求体 return 用户ID id 修改人 updateBy 新信息 user; }
总结路径参数URL 路径中标识资源唯一 ID用PathVariable接收。
查询参数URL 末尾用于筛选 / 分页用RequestParam接收。
请求体参数请求体中传递复杂数据JSON 用RequestBody表单用RequestParam文件用MultipartFile。
请求头参数请求头中传递非业务参数Token用RequestHeader接收。
Cookie 参数客户端存储自动携带用CookieValue接收。
实际开发中可根据参数用途选择传参方式业务标识用路径参数筛选条件用查询参数复杂数据用请求体通用配置用请求头 / Cookie。
前端向后端传递各类参数时的参数数据类型前端向后端传递各类参数时实际传输的原始数据类型以及这些类型到后端 Java 类型的映射规则 —— 这是前后端数据交互中很关键的细节能帮你避免类型转换的坑。
核心结论先明确前端传递的所有参数在 HTTP 传输层面最终都是「字符串」后端框架如 Spring Boot会根据你声明的接收类型自动完成字符串到 Java 类型的转换。
下面按之前讲的传参形式逐一拆解「前端原始类型 → HTTP 传输类型 → 后端接收类型」的对应关系
URL 路径参数Path Variable前端传递的原始类型前端写在 URL 里的参数无论你写的是数字、布尔值最终都会被浏览器 / HTTP 客户端转为字符串// 前端代码看似传数字/布尔值 axios.get(/user/
; // 123 → 传输时是 123 axios.get(/user/status/true); // true → 传输时是 trueHTTP 传输形式GET /user/123 HTTP/
1 Host: localhost:8080路径中的123是 URL 字符串的一部分无额外类型标识。
后端接收与类型转换Spring 会自动将路径中的字符串转为你声明的 Java 类型//
字符串 → 数字Long/Integer GetMapping(/user/{id}) public void getById(PathVariable Long id) { // 123 → 自动转为 Long 类型 123 } //
字符串 → 布尔值 GetMapping(/user/status/{flag}) public void getStatus(PathVariable Boolean flag) { // true → 自动转为 truefalse → 自动转为 false } //
转换失败会抛异常如 /user/abc → 无法转 Long → 400 错误
URL 查询参数Query Parameter前端传递的原始类型同样前端params里的任意类型最终都会被序列化为字符串axios.get(/user/list, { params: { pageNum: 1, // 数字 → 1 pageSize: 10, // 数字 → 10 keyword: 张三, // 字符串 → 张三URL 编码后%E5%BC%A0%E4%B8%89 isVip: true, // 布尔值 → true createTime: new Date() // 日期 →
T10:00:
0
000Z字符串 } });HTTP 传输形式GET /user/list?pageNum1pageSize10keyword%E5%BC%A0%E4%B8%89isViptrue HTTP/
1 Host: localhost:8080所有参数都是key字符串值的形式拼接在 URL 后。
后端接收与类型转换Spring 支持自动将查询参数字符串转为常见 Java 类型GetMapping(/user/list) public void list( RequestParam Integer pageNum, // 1 → Integer 1 RequestParam String keyword, // %E5%BC%A0%E4%B8%89 → 自动解码为 张三 RequestParam Boolean isVip, // true → Boolean true RequestParam DateTimeFormat(pattern yyyy-MM-dd) LocalDate createTime) { // 日期字符串 → 需指定格式转为 LocalDate/Date 类型 }
请求体参数核心场景请求体的类型由Content-Type决定不同格式的「原始传输类型」和转换规则不同子场景 1JSON 格式Content-Type: application/json前端传递的原始类型前端可传递 JSON 支持的原生类型不是字符串HTTP 传输时是「JSON 字符串」axios.post(/user/add, { id: 123, // 数字类型JSON number name: 张三, // 字符串类型JSON string age: null, // null 类型JSON null isVip: false, // 布尔类型JSON boolean hobby: [篮球, 游戏],// 数组类型JSON array createTime: new Date() // 会被转为字符串
T10:00:
0
000Z });HTTP 传输形式请求体是JSON 字符串键值对保留 JSON 原生类型POST /user/add HTTP/
1 Content-Type: application/json {id:123,name:张三,age:null,isVip:false,hobby:[篮球,游戏]}后端接收与类型转换Spring 通过MappingJackson2HttpMessageConverter将 JSON 字符串解析为 Java 对象自动映射类型JSON 类型后端 Java 类型常用示例numberInteger/Long/Double123 → Long 123stringString/LocalDate/Date
→ LocalDate需指定格式booleanBooleanfalse → Boolean falsenull对应类型的 nullnull → Integer nullarrayList / 数组[篮球,游戏] → ListStringobject自定义实体类{id:1} → User 对象示例代码PostMapping(/user/add) public void add(RequestBody User user) { // JSON 的 number 123 → user.getId() (Long 类型) // JSON 的 boolean false → user.getIsVip() (Boolean 类型) // JSON 的 array → user.getHobby() (ListString 类型) } Data class User { private Long id; private String name; private Integer age; private Boolean isVip; private ListString hobby; JsonFormat(pattern yyyy-MM-dd HH:mm:ss) private LocalDateTime createTime; // 需指定 JSON 解析格式 }子场景 2表单格式Content-Type: application/x-www-form-urlencoded前端传递的原始类型无论前端传什么类型最终都会被序列化为key字符串值的形式// 前端看似传数字/布尔实际都转字符串 const data new URLSearchParams(); data.append(age,
; // 数字 → 25 data.append(isVip, true); // 布尔 → true axios.post(/user/login, data);HTTP 传输形式请求体是键值对字符串所有值都是字符串POST /user/login HTTP/
1 Content-Type: application/x-www-form-urlencoded age25isViptrue后端接收与类型转换Spring 通过FormHttpMessageConverter解析自动将字符串转为声明的 Java 类型PostMapping(/user/login) public void login( RequestParam Integer age, // 25 → Integer 25 RequestParam Boolean isVip) { // true → Boolean true }子场景 3文件上传Content-Type: multipart/form-data前端传递的原始类型普通参数全部转为字符串文件参数二进制流不是字符串包含文件名、大小、二进制数据等信息。
后端接收普通参数字符串 → 自动转 Java 类型文件参数用MultipartFile接收二进制流无法直接转普通类型。
请求头 / Cookie 参数前端传递的原始类型请求头和 Cookie 的值只能是字符串HTTP 协议规定// 请求头无论传什么最终都是字符串 axios.get(/user/info, { headers: { Token: 123456, // 数字 → 123456 IsAdmin: true // 布尔 → true } }); // Cookie值只能是字符串 document.cookie userId123; isVipfalse;后端接收与类型转换Spring 自动将字符串转为声明的 Java 类型GetMapping(/user/info) public void info( RequestHeader(Token) Long token, // 123456 → Long 123456 CookieValue(isVip) Boolean isVip) { // false → Boolean false }关键补充类型转换失败的常见场景字符串转数字失败如查询参数pageNumabc→ 后端声明Integer pageNum→ 抛400 Bad Request日期格式不匹配JSON 传2026/02/03→ 后端JsonFormat(pattern yyyy-MM-dd)→ 解析失败布尔值格式错误请求头IsAdminyes→ 后端Boolean isAdmin→ 解析失败仅支持 true/false。
总结传输层面除了文件二进制流前端传递的所有参数在 HTTP 协议中最终都是「字符串」仅 JSON 请求体保留 JSON 原生类型传输时是 JSON 字符串。
转换规则Spring 会根据后端声明的 Java 类型自动将字符串 / JSON 类型转为对应类型数字、布尔、日期、集合等。
核心注意日期、自定义格式等需要显式指定转换规则如DateTimeFormat/JsonFormat否则会触发类型转换异常。
记住这个核心逻辑前端写的是「JS 类型」传输的是「字符串 / 二进制」后端收的是「Java 类型」—— 中间的转换由 HTTP 协议和 Spring 框架完成。