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 */@Overridepublic 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 */@Overridepublic 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 */@PutMappingpublic R<String> update(@RequestBody DishDto dishDto) {log.info("dishDto:{}", dishDto);dishService.updateWithFlavor(dishDto);return R.success("修改成功");}