Vue和后端开发的参数传递操作方式（包括增、删、改、查）

一、查询操作

比如vue里的js这样写

queryStudentList(tableQuery, tablePage) {
    return request({
      url: '/queryStudentList',
      method: 'post',
      params:{
        ...tablePage
      },
      data: {
        ...tableQuery
      }
    })
  },

那么后端的接受方式为：

 /**
     * 查询学生列表
     */
    @RequestMapping("/queryStudentList")
    public Result<PageResult<StudentExtend>> queryStudentList(
            PageConfig pageConfig, @RequestBody StudentParamVo studentParamVo , HttpServletRequest request) {
     
        PageResult<StudentExtend> studentList= studentService.findStudentPage(pageConfig, studentParamVo);
        return Result.success(studentList);
    }

小结:
很好理解，js里的data里的数据就映射到后端的@RequestBody注解的实体类， js里的params属性里的内容就映射到后端的PageConfig 的实体类

二、删除操作

比如vue里的js这样写

  deleteStudent(id){
    return request({
      url: '/deleteStudent',
      method: 'get',
      params: {
        "id":id
      }
    })
  },

后端的代码

    /**
     * 删除某个学生
     */
    @LogControllerAnnotation
    @RequestMapping("/deleteStudent")
    public Result<Student> deleteStudent(String id) {
        return studentService.deleteStudent(id);
    }

小结：
前端是用get方式请求的，所以后端不用加@RequestBody注解

三、新增和修改操作

比如vue里的js这样写

saveStudent(data){
    return request({
      url: '/saveStudent',
      method: 'post',
      data
    })
  },

然后后端代码如下

 /**
     * 保存学生信息  （新增和更新操作）
     */
    @RequestMapping("/saveStudent")
    public Result<Student> saveStudent(@RequestBody StudentVo studentVo, HttpServletRequest request) {
        return studentService.saveStudent(studentVo);
    }

小结：
前端是用的是post方式，所以后端用@RequestBody 实体类来接收