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

---

前言

---

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

一、前端向后端发送数据

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<CourseInfo> 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'）请求方式不支持错误。

---

总结

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