Vue和后端开发的参数传递操作方式(包括增、删、改、查)
一、查询操作比如vue里的js这样写queryStudentList(tableQuery, tablePage) {return request({url: '/queryStudentList',method: 'post',params:{...tablePage},data: {...
·
一、查询操作
比如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 实体类来接收
更多推荐
已为社区贡献8条内容
所有评论(0)