axios发请求,SpringBoot接请求的各种对应

本文详细介绍了HTTP请求中的GET、POST、PUT和DELETE四种方法,并重点解释了前端如何通过axios发送不同类型的请求及其对应的后端处理方式。

四类请求方法

  • Get
  • Post
  • Put
  • Delete

其中发axios自动发json的是Post和Delete,而Get和Put请求则是发k=v的表单形式,这一块有时候比较混乱,我试着给大家解释一下

Get发参数

发一个对象

axios.get('url',{params:{Student:this.addForm}}).then(res=>{
	..
})//发送表单对象

后端接这个对象,因为不是发的Json,千万不要加@RequestBody

@GetMapping("/")
public Object addItem(@RequestParam(value="Student")Student stu){
...
}

Get发一堆属性

axios.get('url',{params:{id:this.addForm.id,name:this.addForm.name,pageNumber:1,pageSize:2}}).then(res=>{
	..
})//发送表单对象

后端可以自动组装成对象,而pojo中没有的属性会剩余出来去找参数中有无和前端发的参数名称一致的变量,进而被后端接到
比如pageSize,并不在pojo类中,它就会被参数中的pageSize获取到

@GetMapping("/")
public Object addItem(@RequestParam(required =false)Student stu,int pageNumber,int pageSize){
...
}

Post请求

发json

axios.post('url',this.formData).then(response=>{
	...
})

这种方式它自动发的json字符串
所以后端需要@RequestBody来讲json转为对象,对象中没有的属性,会自动映射到变量中

@GetMapping("/")
public Object addItem(@RequestBody Student stu,int pageNumber,int pageSize){
...
}

发x-www-form-urlencoded

如果想打破axios这种发post请求自动发json的规则可以用qs 我前面的文章有介绍过大家可以取看一下,就是将json格式的请求转为k=v的形式,后端不需要任何注解,直接可以接到,大概像这样
在这里插入图片描述
而后台
在这里插入图片描述
没有什么问题

RestFul风格的请求

  • 单个参数
  • 如何发对象

单个参数的RestFul

http://localhost:8080/stu/1

这是没问题的
比如

axios.get('/stu/1').then(response=>{
	...
})

后端

@GetMapping('/stu/{id}')
public Result selectStu(@PathVariable int id){
	...
}

发送对象直接不需要@PathVariable注解了

axios.get('/stu/1/张三').then(response=>{
	...
})
@GetMapping('/stu/{id}/{name}')
public Result selectStu(Student stu){
	...
}

Get Post都是可以的

总结

@RequestParam对应前端get请求,不能够解析json格式的请求
@RequestBody对应前端post请求,能够将json映射到我们的pojo对象中,倘若前端用了qs,那就不能用@RequestBody了
@PathVariable对应Rest风格的请求,有两种场景,发单个参数和发对象,单个参数需要@PathVariable这个注解,对象则不需要

<think>我们参考多个引用中的信息来构建解决方案。用户问题:在Vue3中使用AxiosSpringBoot后端发送包含数组集合的请求。分析:1.引用[1]中展示了SpringBoot后端收@RequestBody参数方式,适用于POST/PUT等请求体中的JSON数据。2.引用[2]中提到,前端可以将请求参数统一转换为数组,后端通过数组收。但注意,引用[2]的后端是Go语言,我们这里是SpringBoot,但原理相似。3.引用[3]指出,如果后端不能正确收,可能需要设置Content-Type。对于SpringBoot,通常使用application/json。4.引用[4]展示了Vue3项目中配置axios代理基本设置的方法。因此,我们需要注意:前端(Vue3+axios):-将数组数据作为请求发送,使用JSON格式。-设置Content-Type为application/json(axios默认就是,但有时需要明确)。-注意:如果使用params选项,则是查询参数(即拼在URL上),而数组在URL中传递比较麻烦,所以这里我们使用请求体。后端(SpringBoot):-使用一个POJO类来请求体,其中包含一个数组(或集合)类型的属性。-或者直使用一个数组(或集合)作为方法参数,但通常更推荐用POJO包装。示例步骤:1.Vue3组件中,使用axios发送POST请求,数据是一个对象,其中包含一个数组属性。2.设置请求头为application/json(默认情况下,axios会自动将JavaScript对象序列化为JSON,并设置Content-Type为application/json)。3.SpringBoot控制器中,使用@RequestBody注解来收这个对象。代码示例:前端(Vue3+Axios):假设我们要传递一个对象,该对象有一个名为items的数组属性。<scriptsetup>importaxiosfrom'axios';//创建axios实例,可配置baseURL等,这里假设已经配置了代理(如引用[4]的配置)//或者直使用全局axios,并配置了baseURLconstsendData=()=>{constdata={name:"示例",items:[1,2,3,4]//假设这个数组是要传递的};axios.post('/api/your-endpoint',data).then(response=>{console.log(response.data);}).catch(error=>{console.error(error);});};</script>后端(SpringBootController):定义一个POJO类来请求体,例如:publicclassMyRequest{privateStringname;privateList<Integer>items;//gettersetter}在控制器中:@RestController@RequestMapping("/api")publicclassMyController{@PostMapping("/your-endpoint")publicResponseEntity<String>handleRequest(@RequestBodyMyRequestrequest){System.out.println(request.getName());System.out.println(request.getItems());returnResponseEntity.ok("Success");}}注意:-如果数组是顶层元素(即直是数组,没有包装对象),那么后端可以直用数组或List收:@PostMapping("/your-endpoint")publicResponseEntity<String>handleRequest(@RequestBodyList<Integer>items){//...}-但通常建议使用POJO包装,这样扩展性更好。问题:用户提到“数组集合”,我们理解为数组或集合(List)类型。可能遇到的坑:1.跨域问题:引用[4]提供了Vue3项目中的代理配置,用于解决开环境下的跨域问题。2.如果后端返回415错误,可能是Content-Type不对。确保前端发送的是JSON,后端收的也是JSON(SpringBoot默认使用MappingJackson2HttpMessageConverter来处理JSON,只要添加了Jackson依赖)。3.SpringBoot项目中需要添加spring-boot-starter-web依赖,它默认包含Jackson。生成相关问题:-1.如果前端传递的是数组,但在后端收为null怎么办?-2.如何在后端验证收到的数组数据?-3.如果数组很大,前端如何分批次发送?按照要求,回答中引用的段落末尾添加引用标识。由于我们的回答参考了多个引用,在关键点处标注。注意:引用[1]是关于SpringBoot收@RequestBody的示例,引用[2]提到了数组传递,引用[4]提供了代理配置。引用[3]虽然关于PHP,但提醒了Content-Type的问题,但我们这里并不需要改为form-data,因为JSON更合适[^1][^2][^3][^4]。</think> 在 Vue3 中使用 Axios 向 Spring Boot 后端发送包含数组集合的请求,需注意前后端配置一致性。以下是完整实现方案: ### 前端 Vue3 + Axios 实现 ```javascript // 安装依赖 npm install axios // 在组件中使用 import axios from 'axios'; // 创建Axios实例(配置代理参考引用[4]) const api = axios.create({ baseURL: '/api', // 代理前缀 headers: { 'Content-Type': 'application/json' // 必须声明JSON格式 } }); // 发送数组集合请求 const sendArrayData = async () => { try { const data = { productIds: [1001, 1002, 1003], // 数组参数 categories: ['电子', '家居'] }; const response = await api.post('/collection', data); console.log('响应:', response.data); } catch (error) { console.error('请求失败:', error); } }; ``` ### 后端 Spring Boot 收 ```java @RestController @RequestMapping("/api") public class CollectionController { // 使用POJO收集合参数 @PostMapping("/collection") public ResponseEntity<String> handleArray( @RequestBody CollectionRequest request // 关键注解 ) { System.out.println("产品ID列表: " + request.getProductIds()); System.out.println("分类列表: " + request.getCategories()); return ResponseEntity.ok("收成功"); } // 封装请求参数的DTO对象 @Data // Lombok注解自动生成getter/setter static class CollectionRequest { private List<Long> productIds; // 数组类型字段 private List<String> categories; // 集合类型字段 } } ``` ### 关键配置说明 1. **Content-Type 一致性** 前端必须设置 `application/json`(Axios默认),后端使用 `@RequestBody` 收[^1][^3] 2. **参数封装要求** 数组/集合需封装在POJO对象中,Spring Boot不支持直收顶级数组[^1] 3. **跨域配置** Vue端需配置代理(如vite.config.ts),解决开环境跨域问题[^4] 4. **数据类型匹配** Java集合字段名必须与前端JSON键名完全对应(区分大小写) ### 常见问题排查 | 问题现象 | 解决方案 | |---------|----------| | 后端收到null | 检查DTO字段命名是否匹配JSON key | | 415 错误 | 确认前端Content-Type=application/json | | 400 错误 | 验证DTO集合泛型类型是否匹配 | | 跨域失败 | 检查Vite代理配置中的`rewrite`规则[^4] | ### 优化建议 1. 为集合添加验证注解: ```java @NotEmpty private List<Long> productIds; ``` 2. 使用Hibernate Validator进行深度校验 3. 前端添加数组空值检查: ```javascript if (data.productIds?.length === 0) { alert('数组不能为空'); } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

商朝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值