Java项目实战跟练day11——菜品管理（修改菜品信息）

Java项目实战跟练day11——springboot + mybatis plus开发

修改菜品

前后端交互分析：
1、页面发送ajax请求，请求服务端获取分类数据，用于菜品分类下拉框中数据展示；
2、页面发送ajax请求，请求服务端，根据id查询当前菜品信息，用于菜品信息回显；
3、页面发送请求，请求服务端进行图片下载，用于页图片回显；
4、点击保存按钮，页面发送ajax请求，将修改后的菜品相关数据以json形式提交到服务端。
request1、3
新增菜品时已经实现
request2
前端代码：根据id回显菜品信息

            queryDishById(this.id).then(res => {
              console.log(res)
              if (String(res.code) === '1') {
                this.ruleForm = { ...res.data }
                this.ruleForm.price = String(res.data.price/100)
                this.ruleForm.status = res.data.status == '1'
                this.dishFlavors = res.data.flavors && res.data.flavors.map(obj => ({ ...obj, value: JSON.parse(obj.value),showOption: false }))
                console.log('this.dishFlavors',this.dishFlavors)
                // this.ruleForm.id = res.data.data.categoryId
                // this.imageUrl = res.data.data.image
                this.imageUrl = `/common/download?name=${res.data.image}`
              } else {
                this.$message.error(res.msg || '操作失败')
              }
            })

// 查询详情
const queryDishById = (id) => {
  return $axios({
    url: `/dish/${id}`,
    method: 'get'
  })
}

后端代码
自定义getByIdWithFlavor方法
DishController.java

    /**
     * 根据id回显菜品信息以及口味信息，参数从地址栏获取
     * @param id
     * @return
     */
    @GetMapping("/{id}")
    public R<DishDto> getById(@PathVariable Long id){
        log.info("id={}",id);
        DishDto dishDto = dishService.getByIdWithFlavor(id);
        return R.success(dishDto);
    }

DishService.java

    //查询菜品，同时返回菜品对应的口味信息
    public DishDto getByIdWithFlavor(Long id);

DishServicelmpl.java

    /**
     * 根据id查询菜品、口味的方法实现，涉及两个表的查询操作
     * @param id
     * @return
     */
    @Override
    public DishDto getByIdWithFlavor(Long id) {
        //查询菜品信息，dish表中查看
        Dish dish = this.getById(id);
        DishDto dishDto = new DishDto();
        //查询口味信息，dish_flavor表中查看

        //构建条件构造器
        LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();

        //添加过滤条件
        queryWrapper.like(id!=null,DishFlavor::getDishId,dish.getId());

        //执行查询
        List<DishFlavor> list = dishFlavorService.list(queryWrapper);

        //拷贝对象
        BeanUtils.copyProperties(dish,dishDto);
        dishDto.setFlavors(list);
        return dishDto;
    }

前端效果
request4
前端代码：修改完毕后提交菜品信息

  editDish(params).then(res => {
  if (res.code === 1) {
  this.$message.success('菜品修改成功！')
  this.goBack()
  } else {
  this.$message.error(res.msg || '操作失败')
  }
  }).catch(err => {
  this.$message.error('请求出错了：' + err)
  })

// 修改接口
const editDish = (params) => {
  return $axios({
    url: '/dish',
    method: 'put',
    data: { ...params }
  })
}

前端模拟请求


由此可见，更新菜品信息需要操作dish、dish_flavor两个表，前端数据封装为dishDto对象，在service层自定义方法实现。
后端代码
DishController.java

    /**
     * 根据id修改菜品信息
     * @param dishDto
     * @return
     */
    @PutMapping
    public R<String> editDish(@RequestBody DishDto dishDto){
        log.info(dishDto.toString());
        dishService.updateWithFlavor(dishDto);
        return R.success("修改菜品信息成功！");
    }

DishService.java

    //更新菜品及口味
    public void updateWithFlavor(DishDto dishDto);

DishServicelmpl.java
注意：添加事务管理注解Transactional

 /**
     * 修改菜品信息，需要操作两个表：dish、dish_flavor
     * @param dishDto
     */
    @Override
    @Transactional
    public void updateWithFlavor(DishDto dishDto) {
        /*
        //更新dish表基本信息:方法一
        Dish dish = new Dish();
        //将dishDto中继承dish的属性拷贝到dish对象
        BeanUtils.copyProperties(dishDto,dish);
        this.save(dish);
         */
        //更新dish表基本信息:方法二
        //因dishDto是dish的子类，利用updateById方法可更新全部dish属性
        this.updateById(dishDto);

        //清理当前菜品对应口味数据---dish_flavor表的delete操作
        Long id = dishDto.getId();//获取菜品id
        //构建条件构造器
        LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();
        //添加过滤条件
        queryWrapper.eq(DishFlavor::getDishId,id);
        //清理数据
        dishFlavorService.remove(queryWrapper);

        //添加当前提交过来的口味数据---dish_flavor表的insert操作
        List<DishFlavor> flavors = dishDto.getFlavors();
        //遍历获得的口味数据，每条数据都添加上dishid
        flavors = flavors.stream().map((item)->{
            item.setDishId(id);
            return item;
        }).collect(Collectors.toList());
        dishFlavorService.saveBatch(flavors);
    }

修改菜品售卖状态

前端代码

            this.dishState = params
            this.$confirm('确认更改该菜品状态?', '提示', {
              'confirmButtonText': '确定',
              'cancelButtonText': '取消',
              'type': 'warning'
            }).then(() => {
              // 起售停售---批量起售停售接口
              dishStatusByStatus(this.dishState).then(res => {
                if (res.code === 1) {
                  this.$message.success('菜品状态已经更改成功！')
                  this.handleQuery()
                } else {
                  this.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                  this.$message.error('请求出错了：' + err)
              })
            })

// 起售停售---批量起售停售接口
const dishStatusByStatus = (params) => {
  return $axios({
    url: `/dish/status/${params.status}`,
    method: 'post',
    params: { ids: params.id }
  })
}

前端模拟请求发送


后端代码：方法一

    /**
     * 根据id批量/单个修改菜品售卖状态:0-停售；1-起售
     * @param ids
     * @return
     */
    @PostMapping ("/status/{status}")
    //传参是该条数据的状态
    public R<String> editStatus(@PathVariable Integer status, Long[] ids) {
        log.info("菜品id={}，菜品状态={}", ids, status);
        for (Long id : ids) {
            Dish dish = dishService.getById(id);
            dish.setStatus(status);
            dishService.updateById(dish);
        }
        return R.success("修改成功！");
    }