Springboot中前端向后端发送数据,@RequestBody注解及其相关

您所在的位置:网站首页 前端显示后端的数据有哪些方法 Springboot中前端向后端发送数据,@RequestBody注解及其相关

Springboot中前端向后端发送数据,@RequestBody注解及其相关

2024-07-09 18:08| 来源: 网络整理| 查看: 265

文章目录 前言一、前端向后端发送数据1、前端使用get方法,使用data,后端不使用@RequestBody,实际接收不到前端传来的参数。2、前端发送post请求,参数携带方式为params,后端不使用@RequestBody,则能成功接收到参数。3、前端发送put请求,使用data方式传递参数,后端使用@PutMapping注解,使用@RequestBody接收参数。能够成功4、后端使用@DeleteMapping注解,@RequestBody接收参数,并使用@PathVariable读取URL占位符参数;前端使用delete请求方式,使用data传递参数。能够成功。 总结

前言

提示:以下是本篇文章正文内容,下面案例可供参考

一、前端向后端发送数据 1、前端使用get方法,使用data,后端不使用@RequestBody,实际接收不到前端传来的参数。

后端接收参数不使用@RequestBody

@RequestMapping("/list") public TableDataInfo list(CourseInfo courseInfo){ System.out.println(courseInfo.toString()); Integer pageNum = courseInfo.getPageNum(); Integer pageSize = courseInfo.getPageSize(); String orderBy = courseInfo.getOrderBy(); PageUtils.startMyPage(pageNum,pageSize,orderBy); List courseInfoList = courseService.selectCourseInfoList(courseInfo); return PageUtils.getMyDataTable(courseInfoList); }

前端发送get请求,以data方式携带数据。

export function listCourse(query){ return request({ url:'/course/list', method:'get', data:query }) }

这种方法实际接收不到前端传递来的参数,因为get请求参数传递不能是data,而应该是params。 如果把后端接收参数方式改为@RequestBody,前端不作改动,则请求会报400错误(请求失败),后端报缺失需要的请求体,也就是需要CourseInfo参数,但是前端并没有传送过来。

[org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing: public com.wbz.system.domain.TableDataInfo com.wbz.system.controller.CourseController.list(com.wbz.system.domain.CourseInfo)

总结:在获取数据,即查询数据库的时候,使用get请求方式,使用params的方式携带参数,或者使用url占位符的方式携带参数。不要再查询操作中使用post方法。

2、前端发送post请求,参数携带方式为params,后端不使用@RequestBody,则能成功接收到参数。

后端不使用@RequestBody注解

@PostMapping public AjaxResult add( CourseInfo courseInfo){ System.out.println(courseInfo.toString()); return toAjax(courseService.insertCourse(courseInfo)); }

前端使用post请求和params参数传递方式

export function addCourse(data){ return request({ url:'/course', method:'post', params:data, }) }

如果此时把前端参数传递方式改为data,则后端不能接收到参数。前端会报500错误(内部服务器错误),因为要执行插入操作,但是参数没传递过来,对象为空。 如果再将后端加上@RequestBody,能成功接收前端的post方法使用data传递来的参数。将@PostMapping改为@RequestMapping也是可以正常的,验证了@PostMapping是@RequestMapping的衍生注解,能够使用@RequestMapping代替@PostMapping

总结:执行新增操作的时候,使用post请求,使用data方式携带参数,而不是使用params。后端使用RequestMapping或者@PostMapping注解,使用@RequestBody接收参数。

3、前端发送put请求,使用data方式传递参数,后端使用@PutMapping注解,使用@RequestBody接收参数。能够成功

后端使用@PutMapping注解,使用@RequestBody接收参数

@PutMapping public AjaxResult edit( @RequestBody CourseInfo courseInfo){ System.out.println(courseInfo.toString()); return toAjax(courseService.updateCourse(courseInfo)); }

前端使用put请求方式,data传递参数

export function updateCourse(data){ return request({ url:'/course', method:'put', data:data, }) }

如果后端不使用@RequestBody注解接收参数,前端使用data传递参数,则接收不到前端传递过来的参数(对象为null)。如果把前端的参数传递方式改为params则可以接收到。 如果后端使用@RequestBody注解接收参数,前端使用params传递参数,则会报请求体缺失异常(请求体中需要CourseInfo参数,但是没有)。 总结,对数据库的更新操作update后端使用@PutMapping或者@RequestMapping,使用@RequestBody注解接收参数,前端使用put请求方式,使用data传递参数。虽然使用params(后端不使用@RequestBody注解)也可以传递参数,但是不建议这样使用。虽然可以使用post代替put但是同样也不建议这样使用。

4、后端使用@DeleteMapping注解,@RequestBody接收参数,并使用@PathVariable读取URL占位符参数;前端使用delete请求方式,使用data传递参数。能够成功。

后端使用@DeleteMapping注解,@PathVariable获取URL参数,@RequestBody获取前端传递的请求体参数:

@DeleteMapping("/{ids}") public AjaxResult delCourse(@PathVariable Long []ids, @RequestBody String hhh){ System.out.println(Arrays.toString(ids)); System.out.println(hhh); return toAjax(courseService.delCourse(ids)); }

前端使用delete请求方式,URL中设置占位符参数,data传递数据:

export function delCourse(id) { return request({ url:'/course/'+id, method:'delete', data:"HHHHH" }) }

如果把前端传递数据方式由data改为params,则前端报400请求失败,后端报缺失请求体错误(需要在请求体中包含String类型的hhh,但是前端使用params传递参数,没有包含在请求体中,而是包含在URL中,因此获取不到) 后端使用@RequestParam,前端使用params传递参数,则前端报400(请求失败),后端报缺少需要的参数错误,前端使用data传递参数,后端使用@RequestParam仍然不行,报相同的错误。

总结:delete数据的时候,前端使用delete请求方式,可以在URL中设置占位符,使用data传递参数;后端使用@DeleteMapping注解,使用@PathVariable接收URL占位符参数,使用@RequestBody接收参数。使用post请求也可以完成delete的操作,但是不支持这样做

如果前后端请求方式不匹配,会报405,('post')请求方式不支持错误。

总结

本文介绍了前端向后端发送数据,以及后端如何接收数据的方法。这里有很多细节地方,进行记录,方便以后查阅。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3