敞开成长之旅！这是我参与「日新方案 12 月更文挑战」的第19天，点击检查活动详情

1 菜品展示

1.1 需求剖析

用户登录成功后跳转到体系主页，在主页需求依据分类来展示菜品和套餐。如果菜品设置了口味信息，需求展示

基于Springboot设计实现前端商品展示与库存数量查询功能
基于Springboot设计实现前端商品展示与库存数量查询功能​修正按钮，不然显现基于Springboot设计实现前端商品展示与库存数量查询功能​修正按钮。

基于Springboot设计实现前端商品展示与库存数量查询功能
​

基于Springboot设计实现前端商品展示与库存数量查询功能修正

1.2 前端页面剖析

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

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

基于Springboot设计实现前端商品展示与库存数量查询功能
​

基于Springboot设计实现前端商品展示与库存数量查询功能修正

该功能已经完结了。经过恳求响应的数据能够看到数据是能够正确获取到的。

基于Springboot设计实现前端商品展示与库存数量查询功能
​

基于Springboot设计实现前端商品展示与库存数量查询功能修正

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

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

基于Springboot设计实现前端商品展示与库存数量查询功能
基于Springboot设计实现前端商品展示与库存数量查询功能​修正

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

基于Springboot设计实现前端商品展示与库存数量查询功能
基于Springboot设计实现前端商品展示与库存数量查询功能​修正

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

基于Springboot设计实现前端商品展示与库存数量查询功能
基于Springboot设计实现前端商品展示与库存数量查询功能​修正

异步恳求，查询分类对应的菜品列表已经完结了，但是查询的只是菜品的根本信息，不包括菜品的口味信息。所以在前端界面中看不到挑选菜品分类的信息。

基于Springboot设计实现前端商品展示与库存数量查询功能
基于Springboot设计实现前端商品展示与库存数量查询功能​修正

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

A. 依据分类ID查询菜品列表(包括菜品口味列表), 详细恳求信息如下:

恳求 说明
恳求办法 GET
恳求途径 /dish/list
恳求参数 ?categoryId=1397844263642378242&status=1

该功能在服务端已经完结，需求修正此办法，在原有办法的基础上增加查询菜品的口味信息。

B. 依据分类ID查询套餐列表, 详细恳求信息如下:

恳求 说明
恳求办法 GET
恳求途径 /setmeal/list
恳求参数 ?categoryId=1397844263642378242&status=1

该功能在服务端并未完结。

2 代码开发

2.1 查询菜品办法修正

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

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

基于Springboot设计实现前端商品展示与库存数量查询功能
基于Springboot设计实现前端商品展示与库存数量查询功能​修正

代码逻辑:

A. 依据分类ID查询，查询目前正在启售的菜品列表 (已完结)

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

C. 组装数据DishDto，并返回

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

package com.itheima.reggie.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.itheima.reggie.common.R;
import com.itheima.reggie.dto.DishDto;
import com.itheima.reggie.entity.Category;
import com.itheima.reggie.entity.Dish;
import com.itheima.reggie.entity.DishFlavor;
import com.itheima.reggie.service.CategoryService;
import com.itheima.reggie.service.DishFlavorService;
import com.itheima.reggie.service.DishService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.stream.Collectors;
/**
 * Description: 菜品管理 菜品及菜品口味的相关操作，一致运用这一个controller即可。
 * @version 1.0
 * @date 2022/8/18 11:08
 */
@Slf4j
@RestController
@RequestMapping("/dish")
public class DishController {
    @Autowired
    private DishService dishService;
    @Autowired
    private DishFlavorService dishFlavorService;
    @Autowired
    private CategoryService categoryService;
    @PostMapping
    public R<String> save(@RequestBody DishDto dishDto){
        /**@Description: 新增菜品
         * @author LiBiGo
         * @date 2022/8/18 11:44
         */
        log.info(dishDto.toString());
        dishService.saveWithFlavor(dishDto);
        return R.success("新增菜品成功");
    }
    @GetMapping("/page")
    public R<Page> page(int page,int pageSize,String name){
        /**@Description: 菜品信息分页查询
         * @author LiBiGo
         *
         * 数据库查询菜品信息时，获取到的分页查询成果 Page 的泛型为 Dish，而终究需求给前端页面返回的类型为DishDto，
         * 所以这个时候就要进行转换，根本特点直接经过特点仿制的方式对Page中的特点进行仿制，
         * 关于成果列表 records特点需求进行特殊处理的(需求封装菜品分类称号);
         *
         * @date 2022/8/19 10:41
         */
        // 结构分页结构器目标
        Page<Dish> pageInfo = new Page<>(page,pageSize);
        Page<DishDto> dishDtoPage = new Page<>();
        // 条件结构器
        LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
        // 增加过滤条件
        queryWrapper.like(name!=null,Dish::getName,name);
        // 增加排序条件
        queryWrapper.orderByDesc(Dish::getUpdateTime);
        // 履行分页查询
        dishService.page(pageInfo,queryWrapper);
        // 目标的仿制
        BeanUtils.copyProperties(pageInfo,dishDtoPage,"records");
        List<Dish> records = pageInfo.getRecords();
        List<DishDto> list = records.stream().map((item) -> {
            DishDto dishDto = new DishDto();
            BeanUtils.copyProperties(item,dishDto);
            Long categoryId = item.getCategoryId();//分类id
            //依据id查询分类目标
            Category category = categoryService.getById(categoryId);
            if(category != null){
                String categoryName = category.getName();
                dishDto.setCategoryName(categoryName);
            }
            return dishDto;
        }).collect(Collectors.toList());
        dishDtoPage.setRecords(list);
        return R.success(dishDtoPage);
    }
    @GetMapping("/{id}")
    public R<DishDto> get(@PathVariable Long id){
        /**@Description: 依据id查询菜品信息和对应的口味信息
         * @author LiBiGo
         * @date 2022/8/19 11:43
         */
        DishDto dishDto = dishService.getByIdWithFlavor(id);
        return R.success(dishDto);
    }
    @PutMapping
    // @PathVariable : 该注解能够用来提取url途径中传递的恳求参数。
    public R<String> update(@RequestBody DishDto dishDto){
        /**@Description: 修正菜品
         * @author LiBiGo
         * @date 2022/8/19 11:58
         */
        log.info(dishDto.toString());
        dishService.updateWithFlavor(dishDto);
        return R.success("新增菜品成功");
    }
//    @GetMapping("/list")
//    public R<List<Dish>> list(Dish dish){
//        /**@Description: 依据条件查询对应的菜品数
//         * @author LiBiGo
//         * @date 2022/8/19 15:49
//         */
//        // 结构查询条件
//        LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
//        queryWrapper.eq(dish.getCategoryId()!=null,Dish::getCategoryId,dish.getCategoryId());
//        //增加条件，查询状况为1（起售状况）的菜品
//        queryWrapper.eq(Dish::getStatus,1);
//
//        //  增加排序条件
//        queryWrapper.orderByDesc(Dish::getSort).orderByDesc(Dish::getUpdateTime);
//
//        List<Dish> list = dishService.list(queryWrapper);
//
//        return R.success(list);
//    }
    @GetMapping("/list")
    public R<List<DishDto>> list(Dish dish){
        /**@Description: 依据条件查询对应的菜品数
         * @author LiBiGo
         * @date 2022/8/19 15:49
         */
        // 结构查询条件
        LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(dish.getCategoryId()!=null,Dish::getCategoryId,dish.getCategoryId());
        //增加条件，查询状况为1（起售状况）的菜品
        queryWrapper.eq(Dish::getStatus,1);
        //  增加排序条件
        queryWrapper.orderByDesc(Dish::getSort).orderByDesc(Dish::getUpdateTime);
        List<Dish> list = dishService.list(queryWrapper);
        List<DishDto> dishDtoList = list.stream().map((item) -> {
            DishDto dishDto = new DishDto();
            BeanUtils.copyProperties(item,dishDto);
            Long categoryId = item.getCategoryId();//分类id
            //依据id查询分类目标
            Category category = categoryService.getById(categoryId);
            if(category != null){
                String categoryName = category.getName();
                dishDto.setCategoryName(categoryName);
            }
            //当时菜品的id
            Long dishId = item.getId();
            LambdaQueryWrapper<DishFlavor> lambdaQueryWrapper = new LambdaQueryWrapper<>();
            lambdaQueryWrapper.eq(DishFlavor::getDishId,dishId);
            //SQL:select * from dish_flavor where dish_id = ?
            List<DishFlavor> dishFlavorList = dishFlavorService.list(lambdaQueryWrapper);
            dishDto.setFlavors(dishFlavorList);
            return dishDto;
        }).collect(Collectors.toList());
        return R.success(dishDtoList);
    }
}

基于Springboot设计实现前端商品展示与库存数量查询功能

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

package com.itheima.reggie.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.itheima.reggie.common.R;
import com.itheima.reggie.dto.SetmealDto;
import com.itheima.reggie.entity.Category;
import com.itheima.reggie.entity.Setmeal;
import com.itheima.reggie.service.CategoryService;
import com.itheima.reggie.service.SetmealDishService;
import com.itheima.reggie.service.SetmealService;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.stream.Collectors;
/**
 * Description: 套餐管理
 * 不只需求保存套餐的根本信息，还需求保存套餐关联的菜品数据，所以需求再该办法中调用事务层办法,完结两块数据的保存。
 * @version 1.0
 * @date 2022/8/19 15:37
 */
@RestController
@RequestMapping("/setmeal")
@Slf4j
public class SetmealController {
    @Autowired
    private SetmealService setmealService;
    @Autowired
    private CategoryService categoryService;
    @Autowired
    private SetmealDishService setmealDishService;
    @PostMapping
    // 页面传递的数据是json格局，需求在办法形参前面加上@RequestBody注解, 完结参数封装。
    public R<String> save(@RequestBody SetmealDto setmealDto){
        /**@Description: 新增套餐
         * @version v1.0
         * @author LiBiGo
         * @date 2022/8/19 16:04
         */
        log.info("套餐信息：{}",setmealDto);
        setmealService.saveWithDish(setmealDto);
        return R.success("新增套餐成功");
    }
    @GetMapping("/page")
    public R<Page> page(int page,int pageSize,String name){
        /**@Description: 套餐分页查询
         * @author LiBiGo
         * @date 2022/8/21 10:40
         */
        // 分页结构器目标
        Page<Setmeal> pageInfo = new Page<>(page,pageSize);
        Page<SetmealDto> dtoPage = new Page<>();
        LambdaQueryWrapper<Setmeal> queryWrapper = new LambdaQueryWrapper<>();
        // 增加查询条件，依据name进行like含糊查询
        queryWrapper.like(name!=null,Setmeal::getName,name);
        // 排序条件，依据更新时间进行降序排序
        queryWrapper.orderByDesc(Setmeal::getUpdateTime);
        setmealService.page(pageInfo,queryWrapper);
        // 仿制目标
        BeanUtils.copyProperties(pageInfo,dtoPage,"record");
        List<Setmeal> records = pageInfo.getRecords();
        List<SetmealDto> list = records.stream().map((item) -> {
            SetmealDto setmealDto = new SetmealDto();
            //目标仿制
            BeanUtils.copyProperties(item,setmealDto);
            //分类id
            Long categoryId = item.getCategoryId();
            //依据分类id查询分类目标
            Category category = categoryService.getById(categoryId);
            if(category != null){
                //分类称号
                String categoryName = category.getName();
                setmealDto.setCategoryName(categoryName);
            }
            return setmealDto;
        }).collect(Collectors.toList());
        dtoPage.setRecords(list);
        return R.success(dtoPage);
    }
    @DeleteMapping
    public R<String> delete(@RequestParam List<Long> ids){
        /**@Description: 删去套餐
         * @author LiBiGo
         * @date 2022/8/21 11:35
         */
        log.info("ids:{}",ids);
        setmealService.removeWithDish(ids);
        return R.success("套餐数据删去成功");
    }
    @GetMapping("/list")
    public R<List<Setmeal>> list(Setmeal setmeal) {
        /**
         * 依据条件查询套餐数据
         * @param setmeal
         * @return
         */
        log.info("setmeal:{}", setmeal);
        //条件结构器
        LambdaQueryWrapper<Setmeal> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.like(StringUtils.isNotEmpty(setmeal.getName()), Setmeal::getName, setmeal.getName());
        queryWrapper.eq(null != setmeal.getCategoryId(), Setmeal::getCategoryId, setmeal.getCategoryId());
        queryWrapper.eq(null != setmeal.getStatus(), Setmeal::getStatus, setmeal.getStatus());
        queryWrapper.orderByDesc(Setmeal::getUpdateTime);
        return R.success(setmealService.list(queryWrapper));
    }
}

基于Springboot设计实现前端商品展示与库存数量查询功能

3 功能测验

测验进程中能够运用浏览器的监控东西检查页面和服务端的数据交互细节。

基于Springboot设计实现前端商品展示与库存数量查询功能
基于Springboot设计实现前端商品展示与库存数量查询功能​修正

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

基于Springboot设计实现前端商品展示与库存数量查询功能
基于Springboot设计实现前端商品展示与库存数量查询功能​修正

​