瑞吉外卖 - 修改菜品功能（18）

某马瑞吉外卖单体架构项目完整开发文档，基于 Spring Boot 2.7.11 + JDK 11。预计 5 月 20 日前更新完成，有需要的胖友记得一键三连，关注主页 “瑞吉外卖” 专栏获取最新文章。
相关资料：https://pan.baidu.com/s/1rO1Vytcp67mcw-PDe_7uIg?pwd=x548
提取码：x548

文章目录

1.需求分析

在菜品管理列表页面点击修改按钮，跳转到修改菜品页面，在修改页面回显菜品相关信息并进行修改，最后点击确定按钮完成修改操作。

2.代码开发

2.1 分析交互过程

在开发代码之前，需要梳理一下修改菜品时前端页面 (add.html) 和服务端的交互过程：

页面发送 ajax 请求，请求服务端获取分类数据，用于菜品分类下拉框中数据展示；
页面发送 ajax 请求，请求服务端，根据 id 查询当前菜品信息，用于菜品信息回显；
页面发送请求，请求服务端进行图片下载，用于页图片回显；
点击保存按钮，页面发送 ajax 请求，将修改后的菜品相关数据以 json 形式提交到服务端。

开发修改菜品功能，其实就是在服务端编写代码去处理前端页面发送的这 4 次请求即可，其中第 1、3 次请求我们已经实现了，现在只需要实现 2、4 两个请求的处理即可。

根据 id 查询当前菜品信息的请求信息如下：

将修改后的菜品相关数据以 json 形式提交到服务端的请求信息如下：

2.2 代码实现

这里由于我们同样涉及到了两个表的操作，因此对于根据 ID 回显信息和修改操作都需要提供自定义的方法，DishService 中的抽象方法如下：

public interface DishService extends IService<Dish> {
    
    
    // 省略其他方法

    /**
     * 根据菜品id查询菜品，同时查询菜品口味
     *
     * @param id 菜品id
     * @return DishDto
     */
    public DishDto getByIdWithFlavor(Long id);

    /**
     * 根据菜品id更新菜品，同时更新菜品口味
     *
     * @param dishDto 自定义的 DTO 对象，用于接收前端传递的数据
     */
    public void updateWithFlavor(DishDto dishDto);
}

DishServiceImpl 中对应的具体实现如下：

@Service
public class DishServiceImpl extends ServiceImpl<DishMapper, Dish> implements DishService {
    
    
    @Resource
    private DishFlavorService dishFlavorService;

    // 省略其他代码

    /**
     * 根据菜品id查询菜品，同时查询菜品口味
     * @param id 菜品id
     * @return DishDto
     */
    @Override
    public DishDto getByIdWithFlavor(Long id) {
    
    
        // 1.根据菜品 id 查询菜品信息
        Dish dish = this.getById(id);
        // 2.创建 DishDto 对象
        DishDto dishDto = new DishDto();
        // 3.将 dish 对象中的属性值复制到 dishDto 对象中
        BeanUtils.copyProperties(dish, dishDto);
        // 4.构造查询条件
        QueryWrapper<DishFlavor> queryWrapper = new QueryWrapper<>();
        // 5.设置查询条件,根据菜品 id 查询菜品口味
        queryWrapper.eq("dish_id", id);
        // 6.根据查询条件查询菜品口味
        List<DishFlavor> flavors = dishFlavorService.list(queryWrapper);
        // 7.将菜品口味设置到 dishDto 对象中
        dishDto.setFlavors(flavors);
        // 8.返回 dishDto 对象
        return dishDto;
    }

    /**
     * 根据菜品id更新菜品，同时更新菜品口味
     * @param dishDto 自定义的 DTO 对象，用于接收前端传递的数据
     */
    @Transactional
    @Override
    public void updateWithFlavor(DishDto dishDto) {
    
    
        // 1.更新 dish 表中的数据
        this.updateById(dishDto);
        // 2.构造查询条件
        QueryWrapper<DishFlavor> queryWrapper = new QueryWrapper<>();
        // 3.设置查询条件,根据菜品 id 查询菜品口味
        queryWrapper.eq("dish_id", dishDto.getId());
        // 4.根据查询条件删除菜品口味
        dishFlavorService.remove(queryWrapper);
        // 5.获取菜品口味
        List<DishFlavor> flavors = dishDto.getFlavors();
        // 6.遍历菜品口味，设置菜品 id
        flavors.forEach(flavor -> flavor.setDishId(dishDto.getId()));
        // 7.批量保存菜品口味
        dishFlavorService.saveBatch(flavors);
    }
}

DishController 中相关的两个处理方法如下：

@RestController
@RequestMapping("/dish")
public class DishController {
    
    
    /**
     * 根据 id 查询菜品,用于修改菜品时的数据回显
     * @param id 菜品 id
     * @return R
     */
    @GetMapping("/{id}")
    public R<DishDto> getById(@PathVariable Long id) {
    
    
        DishDto dishDto = dishService.getByIdWithFlavor(id);
        return R.success(dishDto);
    }

    /**
     * 修改菜品
     * @param dishDto 自定义的 DTO 对象，用于接收前端传递的数据
     * @return R
     */
    @PutMapping
    public R<String> update(@RequestBody DishDto dishDto) {
    
    
        dishService.updateWithFlavor(dishDto);
        return R.success("修改菜品成功");
    }
    
    // 省略其他代码
}

3.功能测试

重启应用，进行修改菜品数据测试：

点击保存，修改成功：