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

刺骨的言语ヽ痛彻心扉 2023-05-22 06:51 2阅读 0赞

## 一、查询操作 ##

比如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 实体类来接收

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20230521/9f215829a74d43e2b84d0a53fe667bae.png