• 基于Springboot外卖系统20：前端菜品展示+菜品数量查询

    1 菜品展示

    1.1 需求分析

    用户登录成功后跳转到系统首页，在首页需要根据分类来展示菜品和套餐。如果菜品设置了口味信息，需要展示 按钮，否则显示按钮。

     

    1.2 前端页面分析

    在开发代码之前，需要梳理一下前端页面和服务端的交互过程：

    1). 页面(front/index.html)发送ajax请求，获取分类数据（菜品分类和套餐分类）

    该功能已经实现了。通过请求响应的数据可以看到数据是可以正确获取到的。

    左侧的分类菜单，和右侧的菜品信息都可以看到，后续只需要将购物车列表的数据改成调用服务端接口查询即可。

    2). 页面发送ajax请求，获取第一个分类下的菜品或者套餐

     A. 根据分类ID查询套餐列表：

     B. 根据分类ID查询菜品列表：

     异步请求，查询分类对应的菜品列表已经实现了，但是查询的只是菜品的基本信息，不包含菜品的口味信息。所以在前端界面中看不到选择菜品分类的信息。

    经过上述的分析，服务端我们主要提供两个方法， 分别用来：

    A. 根据分类ID查询菜品列表(包含菜品口味列表), 具体请求信息如下:

    请求说明
    请求方式GET
    请求路径/dish/list
    请求参数?categoryId=1397844263642378242&status=1

    该功能在服务端已经实现，需要修改此方法，在原有方法的基础上增加查询菜品的口味信息。

    B. 根据分类ID查询套餐列表, 具体请求信息如下:

    请求说明
    请求方式GET
    请求路径/setmeal/list
    请求参数?categoryId=1397844263642378242&status=1

    该功能在服务端并未实现。

    2 代码开发

    2.1 查询菜品方法修改

    由于之前实现的根据分类查询菜品列表，仅仅查询了菜品的基本信息，未查询菜品口味信息，而移动端用户在点餐时，是需要选择口味信息的，所以需要对之前的代码实现进行完善。

    需要修改DishController的list方法，原来此方法的返回值类型为：R>。为了满足移动端对数据的要求(菜品基本信息和菜品对应的口味信息)，现在需要将方法的返回值类型改为：R> ，因为在DishDto中封装了菜品对应的口味信息：

    代码逻辑:

    A. 根据分类ID查询，查询目前正在启售的菜品列表 (已实现)

    B. 遍历菜品列表，并查询菜品的分类信息及菜品的口味列表

    C. 组装数据DishDto，并返回

    1 DishController中增加根据条件查询对应的菜品数的list()方法

    1. package com.itheima.reggie.controller;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    5. import com.itheima.reggie.common.R;
    6. import com.itheima.reggie.dto.DishDto;
    7. import com.itheima.reggie.entity.Category;
    8. import com.itheima.reggie.entity.Dish;
    9. import com.itheima.reggie.entity.DishFlavor;
    10. import com.itheima.reggie.service.CategoryService;
    11. import com.itheima.reggie.service.DishFlavorService;
    12. import com.itheima.reggie.service.DishService;
    13. import lombok.extern.slf4j.Slf4j;
    14. import org.springframework.beans.BeanUtils;
    15. import org.springframework.beans.factory.annotation.Autowired;
    16. import org.springframework.web.bind.annotation.*;
    17.  
    18. import java.util.List;
    19. import java.util.stream.Collectors;
    20.  
    21. /**
    22.  * Description: 菜品管理 菜品及菜品口味的相关操作，统一使用这一个controller即可。
    23.  * @version 1.0
    24.  * @date 2022/8/18 11:08
    25.  */
    26.  
    27. @Slf4j
    28. @RestController
    29. @RequestMapping("/dish")
    30. public class DishController {
    31.     @Autowired
    32.     private DishService dishService;
    33.     @Autowired
    34.     private DishFlavorService dishFlavorService;
    35.     @Autowired
    36.     private CategoryService categoryService;
    37.  
    38.     @PostMapping
    39.     public R save(@RequestBody DishDto dishDto){
    40.         /**@Description: 新增菜品
    41.          * @author LiBiGo
    42.          * @date 2022/8/18 11:44
    43.          */
    44.         log.info(dishDto.toString());
    45.         dishService.saveWithFlavor(dishDto);
    46.  
    47.         return R.success("新增菜品成功");
    48.     }
    49.  
    50.     @GetMapping("/page")
    51.     public R page(int page,int pageSize,String name){
    52.         /**@Description: 菜品信息分页查询
    53.          * @author LiBiGo
    54.          *
    55.          * 数据库查询菜品信息时，获取到的分页查询结果 Page 的泛型为 Dish，而最终需要给前端页面返回的类型为DishDto，
    56.          * 所以这个时候就要进行转换，基本属性直接通过属性拷贝的形式对Page中的属性进行复制，
    57.          * 对于结果列表 records属性需要进行特殊处理的(需要封装菜品分类名称);
    58.          *
    59.          * @date 2022/8/19 10:41
    60.          */
    61.  
    62.         // 构造分页构造器对象
    63.         Page pageInfo = new Page<>(page,pageSize);
    64.         Page dishDtoPage = new Page<>();
    65.  
    66.         // 条件构造器
    67.         LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
    68.         // 添加过滤条件
    69.         queryWrapper.like(name!=null,Dish::getName,name);
    70.         // 添加排序条件
    71.         queryWrapper.orderByDesc(Dish::getUpdateTime);
    72.  
    73.         // 执行分页查询
    74.         dishService.page(pageInfo,queryWrapper);
    75.  
    76.         // 对象的拷贝
    77.         BeanUtils.copyProperties(pageInfo,dishDtoPage,"records");
    78.  
    79.         List records = pageInfo.getRecords();
    80.  
    81.         List list = records.stream().map((item) -> {
    82.             DishDto dishDto = new DishDto();
    83.  
    84.             BeanUtils.copyProperties(item,dishDto);
    85.  
    86.             Long categoryId = item.getCategoryId();//分类id
    87.             //根据id查询分类对象
    88.             Category category = categoryService.getById(categoryId);
    89.  
    90.             if(category != null){
    91.                 String categoryName = category.getName();
    92.                 dishDto.setCategoryName(categoryName);
    93.             }
    94.             return dishDto;
    95.         }).collect(Collectors.toList());
    96.  
    97.         dishDtoPage.setRecords(list);
    98.  
    99.         return R.success(dishDtoPage);
    100.     }
    101.  
    102.     @GetMapping("/{id}")
    103.     public R get(@PathVariable Long id){
    104.         /**@Description: 根据id查询菜品信息和对应的口味信息
    105.          * @author LiBiGo
    106.          * @date 2022/8/19 11:43
    107.          */
    108.  
    109.         DishDto dishDto = dishService.getByIdWithFlavor(id);
    110.         return R.success(dishDto);
    111.     }
    112.  
    113.     @PutMapping
    114.     // @PathVariable : 该注解可以用来提取url路径中传递的请求参数。
    115.     public R update(@RequestBody DishDto dishDto){
    116.         /**@Description: 修改菜品
    117.          * @author LiBiGo
    118.          * @date 2022/8/19 11:58
    119.          */
    120.         log.info(dishDto.toString());
    121.  
    122.         dishService.updateWithFlavor(dishDto);
    123.  
    124.         return R.success("新增菜品成功");
    125.     }
    126.  
    127. //    @GetMapping("/list")
    128. //    public R> list(Dish dish){
    129. //        /**@Description: 根据条件查询对应的菜品数
    130. //         * @author LiBiGo
    131. //         * @date 2022/8/19 15:49
    132. //         */
    133. //        // 构造查询条件
    134. //        LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
    135. //        queryWrapper.eq(dish.getCategoryId()!=null,Dish::getCategoryId,dish.getCategoryId());
    136. //        //添加条件，查询状态为1（起售状态）的菜品
    137. //        queryWrapper.eq(Dish::getStatus,1);
    138. //
    139. //        //  添加排序条件
    140. //        queryWrapper.orderByDesc(Dish::getSort).orderByDesc(Dish::getUpdateTime);
    141. //
    142. //        List list = dishService.list(queryWrapper);
    143. //
    144. //        return R.success(list);
    145. //    }
    146.  
    147.     @GetMapping("/list")
    148.     public R> list(Dish dish){
    149.         /**@Description: 根据条件查询对应的菜品数
    150.          * @author LiBiGo
    151.          * @date 2022/8/19 15:49
    152.          */
    153.         // 构造查询条件
    154.         LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
    155.         queryWrapper.eq(dish.getCategoryId()!=null,Dish::getCategoryId,dish.getCategoryId());
    156.         //添加条件，查询状态为1（起售状态）的菜品
    157.         queryWrapper.eq(Dish::getStatus,1);
    158.  
    159.         //  添加排序条件
    160.         queryWrapper.orderByDesc(Dish::getSort).orderByDesc(Dish::getUpdateTime);
    161.  
    162.         List list = dishService.list(queryWrapper);
    163.  
    164.         List dishDtoList = list.stream().map((item) -> {
    165.             DishDto dishDto = new DishDto();
    166.  
    167.             BeanUtils.copyProperties(item,dishDto);
    168.  
    169.             Long categoryId = item.getCategoryId();//分类id
    170.             //根据id查询分类对象
    171.             Category category = categoryService.getById(categoryId);
    172.  
    173.             if(category != null){
    174.                 String categoryName = category.getName();
    175.                 dishDto.setCategoryName(categoryName);
    176.             }
    177.  
    178.             //当前菜品的id
    179.             Long dishId = item.getId();
    180.             LambdaQueryWrapper lambdaQueryWrapper = new LambdaQueryWrapper<>();
    181.             lambdaQueryWrapper.eq(DishFlavor::getDishId,dishId);
    182.  
    183.             //SQL:select * from dish_flavor where dish_id = ?
    184.             List dishFlavorList = dishFlavorService.list(lambdaQueryWrapper);
    185.             dishDto.setFlavors(dishFlavorList);
    186.             return dishDto;
    187.         }).collect(Collectors.toList());
    188.  
    189.         return R.success(dishDtoList);
    190.     }
    191.  
    192. }

    2 在SetmealController中创建list()方法，根据条件查询套餐数据。

    1. package com.itheima.reggie.controller;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    5. import com.itheima.reggie.common.R;
    6. import com.itheima.reggie.dto.SetmealDto;
    7. import com.itheima.reggie.entity.Category;
    8. import com.itheima.reggie.entity.Setmeal;
    9. import com.itheima.reggie.service.CategoryService;
    10. import com.itheima.reggie.service.SetmealDishService;
    11. import com.itheima.reggie.service.SetmealService;
    12. import lombok.extern.slf4j.Slf4j;
    13. import org.apache.commons.lang.StringUtils;
    14. import org.springframework.beans.BeanUtils;
    15. import org.springframework.beans.factory.annotation.Autowired;
    16. import org.springframework.web.bind.annotation.*;
    17.  
    18. import java.util.List;
    19. import java.util.stream.Collectors;
    20. /**
    21.  * Description: 套餐管理
    22.  * 不仅需要保存套餐的基本信息，还需要保存套餐关联的菜品数据，所以需要再该方法中调用业务层方法,完成两块数据的保存。
    23.  * @version 1.0
    24.  * @date 2022/8/19 15:37
    25.  */
    26.  
    27. @RestController
    28. @RequestMapping("/setmeal")
    29. @Slf4j
    30. public class SetmealController {
    31.     @Autowired
    32.     private SetmealService setmealService;
    33.  
    34.     @Autowired
    35.     private CategoryService categoryService;
    36.  
    37.     @Autowired
    38.     private SetmealDishService setmealDishService;
    39.  
    40.     @PostMapping
    41.     // 页面传递的数据是json格式，需要在方法形参前面加上@RequestBody注解, 完成参数封装。
    42.     public R save(@RequestBody SetmealDto setmealDto){
    43.         /**@Description: 新增套餐
    44.          * @version v1.0
    45.          * @author LiBiGo
    46.          * @date 2022/8/19 16:04
    47.          */
    48.         log.info("套餐信息：{}",setmealDto);
    49.  
    50.         setmealService.saveWithDish(setmealDto);
    51.  
    52.         return R.success("新增套餐成功");
    53.     }
    54.  
    55.     @GetMapping("/page")
    56.     public R page(int page,int pageSize,String name){
    57.         /**@Description: 套餐分页查询
    58.          * @author LiBiGo
    59.          * @date 2022/8/21 10:40
    60.          */
    61.         // 分页构造器对象
    62.         Page pageInfo = new Page<>(page,pageSize);
    63.         Page dtoPage = new Page<>();
    64.  
    65.         LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
    66.         // 添加查询条件，根据name进行like模糊查询
    67.         queryWrapper.like(name!=null,Setmeal::getName,name);
    68.         // 排序条件，根据更新时间进行降序排序
    69.         queryWrapper.orderByDesc(Setmeal::getUpdateTime);
    70.  
    71.         setmealService.page(pageInfo,queryWrapper);
    72.  
    73.         // 拷贝对象
    74.         BeanUtils.copyProperties(pageInfo,dtoPage,"record");
    75.         List records = pageInfo.getRecords();
    76.  
    77.         List list = records.stream().map((item) -> {
    78.             SetmealDto setmealDto = new SetmealDto();
    79.             //对象拷贝
    80.             BeanUtils.copyProperties(item,setmealDto);
    81.             //分类id
    82.             Long categoryId = item.getCategoryId();
    83.             //根据分类id查询分类对象
    84.             Category category = categoryService.getById(categoryId);
    85.             if(category != null){
    86.                 //分类名称
    87.                 String categoryName = category.getName();
    88.                 setmealDto.setCategoryName(categoryName);
    89.             }
    90.             return setmealDto;
    91.         }).collect(Collectors.toList());
    92.  
    93.         dtoPage.setRecords(list);
    94.         return R.success(dtoPage);
    95.     }
    96.  
    97.     @DeleteMapping
    98.     public R delete(@RequestParam List ids){
    99.         /**@Description: 删除套餐
    100.          * @author LiBiGo
    101.          * @date 2022/8/21 11:35
    102.          */
    103.         log.info("ids:{}",ids);
    104.         setmealService.removeWithDish(ids);
    105.  
    106.         return R.success("套餐数据删除成功");
    107.  
    108.     }
    109.  
    110.     @GetMapping("/list")
    111.     public R> list(Setmeal setmeal) {
    112.         /**
    113.          * 根据条件查询套餐数据
    114.          * @param setmeal
    115.          * @return
    116.          */
    117.         log.info("setmeal:{}", setmeal);
    118.         //条件构造器
    119.         LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
    120.         queryWrapper.like(StringUtils.isNotEmpty(setmeal.getName()), Setmeal::getName, setmeal.getName());
    121.         queryWrapper.eq(null != setmeal.getCategoryId(), Setmeal::getCategoryId, setmeal.getCategoryId());
    122.         queryWrapper.eq(null != setmeal.getStatus(), Setmeal::getStatus, setmeal.getStatus());
    123.         queryWrapper.orderByDesc(Setmeal::getUpdateTime);
    124.  
    125.         return R.success(setmealService.list(queryWrapper));
    126.     }
    127.  
    128. }

    3 功能测试

    测试过程中可以使用浏览器的监控工具查看页面和服务端的数据交互细节。

     点击分类，根据分类查询菜品列表/套餐列表:

     

     

  • 相关阅读:
    WPF 简单的ComboBox自定义样式。
    pcl--第九节 点云分割
    Flink几个性能调优
    Android13---下拉状态栏添加阅读模式（MTK平台）
    linux阻塞IO与非阻塞IO在应用层和驱动层的实现（一）
    【NLP】LSTM 唐诗生成器 pytorch 版
    Python爬虫_案例分析（二）
    app查看 证书公钥和md5
    南京邮电大学统计学课程实验2 用EXCEL进行参数估计假设检验 指导
    python 正则表达式
  • 原文地址：https://blog.csdn.net/qq_39237205/article/details/126580288