黑马瑞吉外卖之新建套餐

黑马瑞吉外卖之新建套餐

hi,事情比较多，这边的笔记更文比较慢。请谅解，但每一篇都很用心哦！希望我们共同进步。

之前我们完成了套餐的分页查询，现在我们去完成一个新建的套餐的功能。

也就是完成下面这个按钮的功能

为了整体明白这个逻辑我们需要去看一下前端页面的逻辑。

我们点进前端的页面

所以这个按钮绑定了一个方法，那么我们去找到这个方法。

下面就是这个方法，可以看到这个方法其实可以实现两个功能，一个是添加，另外一个就是修改，具体的实现哪个功能就是根据传参来区分的，这里其实还是比较清楚的。

我们跟进上方哪个链接，然后点进去。就是这个add.html。

这个页面的整体样式就是这个样子

其实当我们进入这个add.html页面的时候我们就应该去关注一下这个页面有没有预先执行的操作，也就是挂载的方法这样，一些方法会在我们进入页面的时候就会自动执行。所以我会直接点到方法那里。于是我们来到了这里。

来看，那么这两个方法在干什么事情。

那么久分别去追踪下去，我们去看。

然后需要注意的就是这里获取菜品分类这里面还包含了一个方法，

我们点进去，这个就是获取菜品分类下面的具体的菜品列表。

所以整体的话执行的进入这个页面的交互一共有三个。

第一，查询查询套餐分类，第二，查询菜品分类，第三，查询菜品分类下面具体的菜品数据。

查询套餐分类和查询菜品分类还是按照传入的type是1还是进行了一个区分，这点一定不要忘记，不然就混淆了。

查询套餐分类的话，其实我们还是在分类模块那里完成了，查询菜品分类也是一样的道理。

我们可以去复习一下它的实现。

这里是我们点进去具体的js里面的代买段。

然后我们来看我们之前写的代码,这里的代码就非常容易理解了。

这样的一段代码就可以完成菜品分类以及套餐分类的查询。

/    前端传过来一个type类型的参数，这里采用category接收是因为Category包含了这个属性，
//    返回的数据多了，你自己用啥取啥就行
@GetMapping("list")
public R_<List<Category>> list(Category category)
    {
//        条件构造器
LambdaQueryWrapper<Category> QueryWrapper = new LambdaQueryWrapper<>();
//        添加条件
QueryWrapper.eq(category.getType()!=null,Category::getType,category.getType());
//添加排序条件
QueryWrapper.orderByAsc(Category::getSort).orderByDesc(Category::getUpdateTime);
List<Category> list = categoryService.list(QueryWrapper);

return  R_.success(list);
    }

该段代码就是完成了套餐分类的查询和菜品分类的查询的功能。
这里套餐分类只展示一个是因为我之前将套餐分类有删除，所以这里是正常展示的，

然后剩下的就是我们需要根据菜品的分类id来查询下面具体的菜品。于是我们去点进去刚刚我们找到的那个方法。

最终就是这里面的js里面这里写的这些请求路径和方法，传参就是分类的id

这样我们就知道怎么去写后端的实现代码了。

那么其实我们可以简单的这样发去写，这里其实不需要去用到dto，因为基本的字段都有。我们只需要写这样简单的几段代码就可以完成这个事情。

当然按照自己的逻辑，也可以根据自己的思路添加新的代码或者包装

@GetMapping("/list")
public R_<List<Dish>> list(Dish dish)
    {

LambdaQueryWrapper<Dish> dishLambdaQueryWrapper = new LambdaQueryWrapper<>();
dishLambdaQueryWrapper.eq(dish.getCategoryId()!=null,Dish::getCategoryId,dish.getCategoryId());
dishLambdaQueryWrapper.eq(Dish::getStatus,1);
//        添加一个排序条件
dishLambdaQueryWrapper.orderByAsc(Dish::getSort).orderByDesc(Dish::getUpdateTime);
List<Dish> list = dishService.list(dishLambdaQueryWrapper);
return R_.success(list);
}

该段代码就是完成下面菜品分类下面对应菜品的功能

然后就是还有一个上传图片的操作，这个图片上传的操作，还是调用我们之前上传图片的方法，所以这里就不再多说了。

剩下的就是关于字段填写的文本框，这些我们自己填上就可以。然后到这里我们其实可以先测试一下，将新建套餐这里的数据填写一下。我们可以在浏览器中去调试，去看看提交页面然后前端会给后端传来什么样的数据。

我们填写这样的数据，然后点击保存。当我们点击保存的时候前端就会给后端发请求，并将这些数据传来，具体的话，我们可以在浏览器中看具体传来了什么。

我们去查看负载就可以

好的就是这些字段，然后传来这些字段，我们需要干什么呢？保存！将这些数据保存在数据库中，这样才可以实现数据的保存。怎么样保存呢？第一，我们首先是新建的套餐，所以我们需要将新建的套餐保存在套餐表当中，然后呢？第二，我们应该想到套餐和菜品的关联，这些菜品的数据是选在新建套餐下的，所以我们需要将数据在套餐和菜品的关联表当中进行一个保存。就是这样的方法。在这里其实还需要用到我们之前分页查询用到的dto。先来说明一下为什么要用，首先我们要保存套餐，我们看前端传来的这些套餐数据，其实的话，实体类都有这些字段，所以我们可以正常保存。

下面的是菜品列表这里，其实我们的套餐和菜品关联的实体类中没有这个列表的，所以不能对应上，前端给你一个列表，我们就需要先接收到这个列表，然后再去列表里面的属性和其对应的值，然后在对应实体类具体字段赋值，然后再保存到数据库，这样才可以。于是我们还是用到分页查询的那个dto的扩展的实体类，我们需要扩展一个列表属性。像这样。

然后现在可以去去套餐的service的实现impl这里自己完善一个方法，就是这个方法要做到前端传来数据的时候，我们可以将数据保存到套餐表和套餐关联的菜品表当中，同时我们想、还需要开启事务，这样才可以保证数据的一致和完整。ok。这里啊，其实还有一个需要注意的字段，看下面这些，这些都是菜品的数据。在菜品关联表中，我们需要做到的是每一个套餐的id需要对应具体的菜品id,我们单单保存前端传来的这些菜品列表数据的话，是不够的，

我们可以去数据库看。，这里的setmeal_id在菜品列表这里并没有传来，所以我们需要在套餐保存后，我们在保存菜品到关联表的时候，也要将套餐的id获取出来，然后set到菜品关联的属性上，然后再以前保存，这样才可以。

我觉得我说的很明白了。

然后那么就是这个service的实现怎么去写呢？理解思路就简单很多了。
这段代码我们写在setmealservice的实现类中。

@Autowired
private SetmealDishService setmealDishService;//这里菜品关联那里的service

@Override
@Transactional //加入事务保证数据的一致性
public void saveWithDish(SetmealDto setmealDto) {
//        保存套餐的基本信息
this.save(setmealDto);
List<SetmealDish> setmealDishes = setmealDto.getSetmealDishes();
setmealDishes.stream().map((item)->
        {
item.setSetmealId(setmealDto.getId());
return item;
        }).collect(Collectors.toList());
//        保存套餐和菜品的关联信息，因为菜品是一个列表形式，所以我们需要进行一个批量的保存就好。
setmealDishService.saveBatch(setmealDishes);


    }

写完这个serviceimpl以后，我们就去写controller，serviceimpl这里已经将功能我们都足够封装了，所以我们现在就去controller去调用就好了。
前端这里提交过来的是json类型的数据，所以我们用@RequestBody 将数据给到setmealDto当中，这样就可以了。

@PostMapping
public R_<String> save(@RequestBody SetmealDto setmealDto)
    {
log.info("套餐信息:{}",setmealDto);
setMealService.saveWithDish(setmealDto);
return  R_.success("新增套餐成功");
    }

这样写好后测试，最终我们成功新建了一个套餐。

这样我们就完成了套餐这里的新建套餐这里的这样的功能模块。

坚持做事让我们的生活更有条理，不荒废空虚。后续更文敬请期待，文章全部开源，文章有谬误的欢迎指出，互相学习。