Spring Boot项目接收前端参数的11种方式

m0_748234902025-02-22 14:59

大家好，我是。在前后端项目交互中，前端传递的数据可以通过HTTP请求发送到后端， 后端在Spring Boot中如何接收各种复杂的前端数据呢？这篇文章总结了11种在Spring Boot中接收前端数据的方式。

1 搭建项目

1.通过Spring Initializr选项创建一个项目名称为【sb_receive_param】的SpringBoot项目。

2.给项目添加Spring Web依赖。

3.在com.cy.sb_receive_param.pojo包下创建User实体类。

复制代码 
package com.cy.sb_receive_param.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User implements Serializable {
    private Integer id;
    private String username;
    private String password;
    private Cat cat;
    private List<Course> courses;
}

4.在com.cy.sb_receive_param.controller包下创建UserController类。

复制代码 
package com.cy.sb_receive_param.controller;
import org.springframework.web.bind.annotation.*;

@RequestMapping("users")
@RestController
public class UserController {
    
}

5.解决在前后端分离项目中的跨域问题。通过实现WebMvcConfigurer接口，并重写addCorsMappings(CorsRegistry registry)方法来实现。

复制代码 
package com.cy.sb_receive_param.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrossOriginConfig implements WebMvcConfigurer {
    /**
     * addMapping("/**")：配置可以被跨域的路径，可以任意配置，可以具体到直接请求路径
     * allowedOrigins("*")：允许所有的请求域名访问我们的跨域资源，可以固定单条或者多条内容，如"http://www.yx.com"，只有该域名可以访问我们的跨域资源
     * allowedHeaders("*")：允许所有的请求header访问，可以自定义设置任意请求头信息
     * allowedMethods()：允许所有的请求方法访问该跨域资源服务器，如GET、POST、DELETE、PUT、OPTIONS、HEAD等
     * maxAge(3600)：配置客户端可以缓存pre-flight请求的响应的时间（秒）。默认设置为1800秒（30分钟）
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders("*")
                .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS", "HEAD")
                .maxAge(3600);
    }
}

2 Spring Boot接收前端参数方式

2.1 传非JSON数据
2.1.1 注解介绍

@RequestParam主要用于在Spring MVC后台控制层获取参数，它有三个常用参数。

参数名

描述

defaultValue

表示设置默认值

required

表示该参数是否必传

value

值表示接收传入的参数的key

@PathVariable用于将请求URL中的模板变量映射到功能处理方法的参数上，即取出URL模板中的变量作为参数。

2.1.2 案例演示

1.方式一

1.在UserController类中添加add1()请求处理方法。前端请求参数的key需和后端控制层处理请求的方法参数名称一致。

复制代码 
@RequestMapping("add1")
public void add1(String username, String password) {
  System.out.println("username=" + username + ", password=" + password);
}

2.使用ApiPost工具测试（GET和POST请求都支持）。

复制代码 
localhost:8080/users/add1?username=tom&password=123456

3.创建param01.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>前后端参数传递</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      
    </div>
    
    <script>
      const app = {
        data() {
          return {
            username: '王小虎',
            password: '123456'
          }
        },
        mounted() {
          axios.get('http://localhost:8888/users/add1', {
              params: {
                username: this.username,
                password: this.password
              }
          }).then(response => {
              console.log('success', response.data);
          }).catch(error => {
              console.log('fail', error.data);
          });
        }
      }
      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

2.方式二

1.在UserController类中添加add2()请求处理方法。如果前端请求参数的key与后端控制层处理请求的方法参数名称不一致，使用@RequestParam注解来解决。

复制代码 
@RequestMapping("add2")
public void add2(@RequestParam("name") String username, @RequestParam("pwd") String password) {
    System.out.println("username=" + username + ", password=" + password);
}

2.使用ApiPost工具测试（GET和POST请求都支持）。

复制代码 
localhost:8080/users/add2?name=tom&pwd=123456

3.创建param02.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>前后端参数传递</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      
    </div>
    
    <script>
      const app = {
        data() {
          return {
            username: '张小三',
            password: '654321'
          }
        },
        mounted() {
          axios.get('http://localhost:8888/users/add2', {
              params: {
                name: this.username,
                pwd: this.password
              }
          }).then(response => {
              console.log('success', response.data);
          }).catch(error => {
              console.log('fail', error.data);
          });
        }
      }
      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>

3.接收前端传数组参数

1.在UserController类中添加delete1()请求处理方法。

复制代码 
@DeleteMapping("batch_delete1")
public void delete1(@RequestParam(name = "ids") List<Integer> ids) {
  for (Integer id : ids) {
    System.out.println(id);
  }
}

2.使用ApiPost工具测试，在【Query】选项下添加ids参数，参数值设置为1,3,5。

3.使用ApiPost工具测试，在【Query】选项下添加ids参数，将参数的值单独一个个进行添加。

4.创建param03.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
		
		<script>
		  const app = {
		    data() {
		      return {
		        ids: [1, 3, 5]
		      }
		    },
		    mounted() {
          axios.delete('http://localhost:8888/users/batch_delete1', {
            params: {
              ids: this.ids.join(',')
            }
          }).then(response => {
              console.log('success', response.data);
          }).catch(error => {
              console.log('fail', error.data);
          });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

4.方式四

1.在UserController类中添加add3()请求处理方法。前端请求参数的key需和后端控制层处理请求方法的参数pojo实体类的属性名称一致。

复制代码 
@RequestMapping("add3")
public void add3(User user) {
  System.out.println(user);
}

2.使用ApiPost工具测试（GET和POST请求都支持）。

localhost:8080/users/add3id=1&username=tom&password=123

3.创建param04.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
		
		<script>
		  const app = {
		    data() {
		      return {
            id: 1,
            username: '王小明',
            password: '123456'
		      }
		    },
		    mounted() {
          axios.get('http://localhost:8888/users/add3', {
            params: {
              id: this.id,
              username: this.username,
              password: this.password
            }
          })
          .then(response => {
             console.log('success', response.data);
          }).catch(error => {
             console.log('fail', error.data);
          });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

5.方式五

1.在UserController类中添加add4()请求处理方法。使用@PathVariable注解将请求URL中的模板变量映射到功能处理方法的参数上，如果模板变量名称和方法的参数名称不同需要在@PathVariable注解上显示的指定映射关系。

复制代码 
@RequestMapping("add4/{username}/{pwd}")
public void add4(@PathVariable String username, @PathVariable("pwd") String password) {
  System.out.println("username=" + username + ", password=" + password);
}

2.使用ApiPost工具测试（GET和POST请求都支持）。

localhost:8080/users/add4/tom/123456

3.创建param05.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
		
		<script>
		  const app = {
		    data() {
		      return {
            username: '',
            password: '123456'
		      }
		    },
		    mounted() {
          axios.post(`http://localhost:8888/users/add4/${this.username}/${this.password}`)
          .then(response => {
            console.log('success', response.data);
          }).catch(error => {
            console.log('fail', error.data);
          });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

6.方式六

1.在UserController类中添加add5()请求处理方法。通过HttpServletRequest对象获取数据，前端请求参数的key需和getParameter(String name)方法传递的参数名称一致。

复制代码 
@RequestMapping("add5")
public void add5(HttpServletRequest request) {
  String username = request.getParameter("username");
  String password = request.getParameter("password");
  System.out.println("username=" + username + ", password=" + password);
}

2.使用ApiPost工具测试（GET和POST请求都支持）。

localhost:8080/users/add5username=tom&password=123

3.创建param06.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
		
		<script>
		  const app = {
		    data() {
		      return {
            username: '',
            password: '123456'
		      }
		    },
		    mounted() {
          axios.post('http://localhost:8888/users/add5', null, {
            params: {
              username: this.username,
              password: this.password
            }
          })
          .then(response => {
             console.log('success', response.data);
          }).catch(error => {
             console.log('fail', error.data);
          });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>
2.2 传JSON数据
2.2.1 注解介绍

@RequestBody该注解会把接收到的参数转为JSON格式。如果前端通过application/json类型提交JSON格式的数据给后端控制层处理请求的方法，方法的参数必须使用@RequestBody注解进行修饰，才能接收来自前端提交的JSON数据。

2.2.2 案例演示

1.接收前端传数组参数

1.在UserController类中添加delete2()请求处理方法。

复制代码 
@DeleteMapping("batch_delete2")
public void delete2(@RequestBody ArrayList<Integer> ids) {
  for (Integer id : ids) {
    System.out.println(id);
  }
}

2.使用ApiPost工具测试，在【Body】选项选项下发送JSON格式数据[1, 3, 5]给后台。

3.创建param07.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
		
		<script>
		  const app = {
		    data() {
		      return {
		        ids: [1, 3, 5]
		      }
		    },
		    mounted() {
          axios.post('http://localhost:8888/users/batch_delete2', this.ids)
            .then(response => {
              console.log('success', response.data);
            })
            .catch(error => {
              console.log('fail', error.data);
            });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

2.单个实体接收参数

1.在UserController类中添加add6()请求处理方法。

复制代码 
@RequestMapping("add6")
public User add6(@RequestBody User user) {
  System.out.println(user);
  return user;
}

2.使用ApiPost工具测试，需将提交的数据类型设置为application/json格式（GET和POST请求都支持）。

复制代码 
{
  "id": 1,
  "username": "tom",
  "password": "123456"
}

3.创建param08.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
		
		<script>
		  const app = {
		    data() {
		      return {
		        user: {
              username: '',
              password: '123456'
            }
		      }
		    },
		    mounted() {
          axios.post('http://localhost:8888/users/add6', this.user)
            .then(response => {
              console.log('success', response.data);
            })
            .catch(error => {
              console.log('fail', error.data);
            });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

3.实体嵌套实体接收参数

1.在pojo包下创建Cat实体类。

复制代码 
package com.cy.sb_receive_param.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Cat {
    private Integer id;
    private String breed;
    private String name;
}

2.在pojo包下的User实体类中声明Cat类型的属性。

复制代码 
package com.cy.sb_receive_param.pojo;
import lombok.Data;
import lombok.ToString;

@Data
@ToString
public class User {
  private Integer id;
  private String username;
  private String password;
  private Cat cat;
}

3.在UserController类中添加add7()请求处理方法。

复制代码 
@RequestMapping("add7")
public User add7(@RequestBody User user) {
  System.out.println(user);
  return user;
}

4.使用ApiPost工具测试，需将提交的数据类型设置为application/json格式（GET和POST请求都支持）。

复制代码 
{
  "id": 1,
  "username": "",
  "password": "123456",
  "cat": {
    "id": 1,
    "breed": "蓝白",
    "name": "花花"
  }
}

5.创建param09.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
		
		<script>
		  const app = {
		    data() {
		      return {
		        user: {
              id: 1,
              username: '',
              password: '123456',
              cat: {
                id: 1,
                breed: '蓝白',
                name: '花花'
              }
            }
		      }
		    },
		    mounted() {
          axios.post('http://localhost:8888/users/add7', this.user)
            .then(response => {
              console.log('success', response.data);
            })
            .catch(error => {
              console.log('fail', error.data);
            });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

4.实体嵌套List集合接收参数

1.在pojo包下创建Course实体类。

复制代码 
package com.cy.sb_receive_param.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Course {
    private Integer id;
    private String courseName;
    private String lecturer;
}

2.在pojo包下的User实体类中声明List<Course>类型的属性。

复制代码 
package com.cy.sb_receive_param.pojo;
import lombok.Data;
import lombok.ToString;
import java.util.List;

@Data
@ToString
public class User {
  private Integer id;
  private String username;
  private String password;
  private List<Course> courses;
}

3.在UserController类中添加add8()请求处理方法。

复制代码 
@RequestMapping("add8")
public User add8(@RequestBody User user) {
  System.out.println(user);
  return user;
}

4.使用ApiPost工具测试，需将提交的数据类型设置为application/json格式（GET和POST请求都支持）。

复制代码 
{
  "id": 1,
  "username": "tom",
  "password": "123456",
  "courses": [
    {
      "id": 1,
      "courseName": "Java",
      "lecturer": "老师"
    },
    {
      "id": 2,
      "courseName": "Python",
      "lecturer": "李小红老师"
    }
  ]
}

5.创建param10.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
	
		<script>
		  const app = {
		    data() {
		      return {
		        user: {
              id: 1,
              username: 'tom',
              password: '123456',
              cat: {
                id: 1,
                breed: '蓝白',
                name: '花花'
              },
              courses: [
                {
                  id: 1,
                  courseName: "Java",
                  lecturer: "老师"
                },
                {
                  id: 2,
                  courseName: "Python",
                  lecturer: "张晓东老师"
                }
              ]
            }
		      }
		    },
		    mounted() {
          axios.post('http://localhost:8888/users/add8', this.user)
            .then(response => {
              console.log('success', response.data);
            })
            .catch(error => {
              console.log('fail', error.data);
            });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

5.Map集合接收参数

1.在UserController类中添加add9()请求处理方法。

复制代码 
@RequestMapping("add9")
public Map<String, Object> add9(@RequestBody Map<String, Object> map) {
  String username = (String) map.get("username");
  System.out.println("username : " + username);

  Map<String, Object> catMap = (Map<String, Object>) map.get("cat");
  Set<Map.Entry<String, Object>> catSet = catMap.entrySet();
  for (Map.Entry<String, Object> entry : catSet) {
    String key = entry.getKey();
    Object value = entry.getValue();
    System.out.println(key + " : " + value);
  }

  List<Map<String, Object>> courseMapList = (List<Map<String, Object>>) map.get("courses");
  for (Map<String, Object> courseMap : courseMapList) {
    Set<Map.Entry<String, Object>> courseSet = courseMap.entrySet();
    for (Map.Entry<String, Object> entry : courseSet) {
      String key = entry.getKey();
      Object value = entry.getValue();
      System.out.println(key + " : " + value);
    }
  }
  return map;
}

2.使用ApiPost工具测试，需将提交的数据类型设置为application/json格式（GET和POST请求都支持）。

复制代码 
{
  "id": 1,
  "username": "tom",
  "password": "123456",
  "courses": [
    {
      "id": 1,
      "courseName": "Java",
      "lecturer": "老师"
    },
    {
      "id": 2,
      "courseName": "Python",
      "lecturer": "李小红老师"
    }
  ]
}

3.创建param11.html页面，通过Axios发送请求。

复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前后端参数传递</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  
		</div>
	
		<script>
		  const app = {
		    data() {
		      return {
		        user: {
              id: 1,
              username: 'tom',
              password: '123456',
              cat: {
                id: 1,
                breed: '蓝白',
                name: '花花'
              },
              courses: [
                {
                  id: 1,
                  courseName: "Java",
                  lecturer: "老师"
                },
                {
                  id: 2,
                  courseName: "Python",
                  lecturer: "张晓东老师"
                }
              ]
            }
		      }
		    },
		    mounted() {
          axios.post('http://localhost:8888/users/add9', this.user)
            .then(response => {
              console.log('success', response.data);
            })
            .catch(error => {
              console.log('fail', error.data);
            });
		    }
		  }
		
		  Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

3 总结

本文介绍了在Spring Boot项目中接收前端数据的多种方式。通过创建Spring Boot项目、配置Web依赖和跨域问题，展示了如何使用@RequestParam、@PathVariable、@RequestBody等注解接收不同类型的参数，包括基本类型、数组、复杂对象及嵌套结构。通过实例演示了如何在Controller中处理GET、POST等请求，并通过前端页面发送请求验证后端接收逻辑。

相关推荐
lang201509282 分钟前
Spring Boot与K8s集成的核心机制
spring boot·后端·kubernetes
superlls8 分钟前
（场景题）Java 导出 Excel 的两种方式
java·开发语言·后端·excel
绝无仅有12 分钟前
某银行大厂面试技术问题深度解析(一)
后端·面试·github
艾小码16 分钟前
前端别再乱存数据了！这3种存储方案让你的应用快如闪电
前端·javascript
黄毛火烧雪下16 分钟前
HTML 的底层原理
前端·html
程序新视界17 分钟前
一张图解析MySQL中InnoDB的逻辑存储结构
数据库·后端·mysql
Victor35617 分钟前
Redis（88）Redis缓存的大小如何合理配置？
后端
Victor35617 分钟前
Redis（89）Redis的安全机制有哪些？
后端
绝无仅有18 分钟前
面试自述：从单体到微服务的实践之路
后端·面试·github
Moment19 分钟前
面经分享——字节前端一面
前端·javascript·面试
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05GitLab 零基础入门指南：从安装到项目管理全流程06Burp与其他安全工具联动及代理设置教程07Pycharm+Neo4j红楼梦人物关系图谱08jdk21下载、安装（Windows、Linux、macOS）09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10Labelme从安装到标注：零基础完整指南