18、修改菜品
18.1、需求分析
在菜品管理列表页面,点击修改按钮,跳转到修改菜品页面,在修改页面回显菜品相关信息并进行修改,最后点击确定按钮完成修改操作。
18.2、代码开发
18.2.1、交互过程
在开发代码之前,需要梳理一下修改菜品时前端页面(add.html
)和服务端的交互过程:
1、页面发送ajax
请求,请求服务端获取分类数据,用于菜品分类下拉框中数据显示
2、页面发送ajax
请求,请求服务端,根据id
查询当前菜品信息,用于菜品信息回显
3、页面发送请求,请求服务端进行图片下载,用于页面图片回显
4、点击保存按钮,页面发送ajax
请求,将修改后的菜品相关数据以json
形式提交到服务端。
开发修改菜品功能,其实就是在服务端编写代码去处理前端页面发送的这4个功能即可。
18.2.2、页面逻辑
18.3、功能测试
18.3.1、页面回显功能
【DishServiceImpl.java
】
/**
* 根据id查询菜品信息和对应的口味信息
* @param id
* @return
*/
@Override
public DishDto getByIdWithFlavor(Long id) {
//1、查询菜品基本信息
Dish dish = this.getById(id);
DishDto dishDto = new DishDto();
BeanUtils.copyProperties(dish, dishDto);
//2、查询当前菜品对应的口味信息,从dish_flavor表查询
LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(DishFlavor::getDishId, dish.getId());
List<DishFlavor> flavors = dishFlavorService.list(queryWrapper);
dishDto.setFlavors(flavors);
return dishDto;
}
【DishController.java
】
/**
* 根据id查询菜品信息和对应的口味信息
* @param id
* @return
*/
@GetMapping("/{id}")
public R<DishDto> get(@PathVariable Long id) {
DishDto dishDto = dishService.getByIdWithFlavor(id);
return R.success(dishDto);
}
18.3.2、修改菜品信息
【DishServiceImpl.java
】
/**
* 更新菜品信息,同时更新口味信息
* @param dishDto
*/
@Override
public void updateWithFlavor(DishDto dishDto) {
//更新dish表基本信息
this.updateById(dishDto);
//清理当前菜品对应的口味数据——dish_flavor表的delete操作
LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper();
queryWrapper.eq(DishFlavor::getDishId, dishDto.getId());
dishFlavorService.remove(queryWrapper);
//添加当前提交过来的口味数据——dish_flavor表的insert操作
List<DishFlavor> flavors = dishDto.getFlavors();
flavors = flavors.stream().map((item) -> {
item.setDishId(dishDto.getId());
return item;
}).collect(Collectors.toList());
dishFlavorService.saveBatch(flavors);
}
【DishController.java
】
/**
* 修改菜品
* @param dishDto
* @return
*/
@PutMapping
public R<String> update(@RequestBody DishDto dishDto) {
log.info("dishDto:{}", dishDto);
dishService.updateWithFlavor(dishDto);
return R.success("修改成功");
}