【业务功能篇69】Springboot 树形菜单栏功能设计

缺乏、安全感 2024-03-24 18:20 36阅读 0赞

> 业务场景: 系统的界面，前端设计的时候，一般会给一个菜单栏，顶部横向以及左侧纵向的导航栏菜单，这里后端返回菜单栏的时候，就涉及层级父子项的问题，所以返回数据的时候，我们需要按照树化形式返回菜单栏数据，方便用户进行解析读取

![ecd7dfefb6e04c59af853652f6c29040.png][]

### 菜单栏的数据表设计 ###

CREATE TABLE `dwr_quality_management_menu_bar` (
      `uid` int NOT NULL AUTO_INCREMENT,
      `id` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '树节点id',
      `parent_id` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '父id，树化时使用',
      `resource_id` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '唯一资源id',
      `name_cn` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '中文名',
      `url` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '路径',
      `level` tinyint DEFAULT NULL COMMENT '菜单层级',
      `show_order` int DEFAULT NULL COMMENT '显示顺序',
      `description` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '描述',
      `is_home_page` tinyint(1) DEFAULT '2' COMMENT '首页标识：1：是，2：否',
      `update_date` datetime DEFAULT NULL COMMENT '更改时间',
      `picture_id` varchar(255) DEFAULT NULL,
      `picture_url` varchar(255) DEFAULT NULL,
      PRIMARY KEY (`uid`) USING BTREE
    ) ENGINE=InnoDB AUTO_INCREMENT=3845 DEFAULT CHARSET=utf8 COMMENT='菜单栏配置';

### 控制层 ###

@RestController
    @RequestMapping(value = "/management/menu", produces = {"application/json;charset=UTF-8"})
    @Validated
    public class ManagementMenuController {
        @Autowired(required=false) 
        private ManagementMenuDelegate delegate;  
    
        @RequestMapping(
        		value = "/getAllMenu", 
        		produces = { "application/json" }, 
        		method = RequestMethod.GET)
        public ResponseVo getAllMenu( @RequestParam(value = "p", required = false) String p) 
                {
        	    
    		return delegate.getAllMenu(p);
        }
    
    }

### 服务层 接口 ###

public interface ManagementMenuDelegate {
        ResponseVo getAllMenu(String pdu) ;
        	
    }

### 服务层 接口实现 ###

@Service
    public class ManagementMenuDelegateImpl implements ManagementMenuDelegate {
    
        @Resource
        private MenuBarService menuBarService;
    
        /**
         * getAllMenu
         * 
         * @param p 
         * @return ResponseVo
         */
        @Override
        public ResponseVo getAllMenu(String p) {
            return ResponseUtils.successResponse(menuBarService.getCompleteMenu(p), "");
        }
    
    }

### 服务层 具体接口 ###

public interface MenuBarService {
    
        /**
         * 获取所有菜单
         *
         * @param p
         * @return List<ManagementMenuBarVo>
         */
        List<ManagementMenuBarVo> getCompleteMenu(String p);
    
    }

### 服务层 具体接口实现 ###

@Service
    @Slf4j
    public class MenuBarServiceImpl implements MenuBarService {
    
        @Resource
        private ManagementMenuBarMapper menuBarMapper;
    
        /**
         * getCompleteMenu
         * 
         * @param p
         * @return List<ManagementMenuBarVo>
         */
        @Override
        public List<ManagementMenuBarVo> getCompleteMenu(String p) {
            List<ManagementMenuBarVo> result = TreeUtils.treeing(getAllFlattingMenu());
            if (ObjectUtils.isNotEmpty(p)) {
                for (ManagementMenuBarVo barVo : result) {
                    if (barVo.getNameCn().equals(p)) {
                        return barVo.getChildren();
                    }
                }
                return new ArrayList<>();
            }
            return result;
        }
    
    
            /**
         * getAllFlattingMenu
         * 
         * @return List<ManagementMenuBarVo>
         */
        private List<ManagementMenuBarVo> getAllFlattingMenu() {
            QueryWrapper<ManagementMenuBar> queryWrapper = new QueryWrapper<>();
            // 排序规则与getBarRootNode()一致
            queryWrapper.lambda()
                .orderBy(true, true, ManagementMenuBar::getLevel, ManagementMenuBar::getParentId,
                    ManagementMenuBar::getShowOrder);
            List<ManagementMenuBar> menuBarList = menuBarMapper.selectList(queryWrapper);
    
            return convertToVo(menuBarList);
        }
    
            /**
         * convertToVo
         * 
         * @param list list
         * @return List<ManagementMenuBarVo>
         */
        private List<ManagementMenuBarVo> convertToVo(List<ManagementMenuBar> list) {
            List<ManagementMenuBarVo> voList = new LinkedList<>();
            for (ManagementMenuBar menuBar : list) {
                ManagementMenuBarVo vo = new ManagementMenuBarVo();
                MyBeanUtils.shallowCopy(menuBar, vo);
                vo.initSuperNodeId();
                vo.initSuperParentNodeId();
                voList.add(vo);
            }
            return voList;
        }
    
    }

### dao层 mapper ###

@Mapper
    public interface ManagementMenuBarMapper extends BaseMapper<ManagementMenuBar> {
    
    
    }

### 实体类DO表 ###

@Data
    @EqualsAndHashCode(callSuper = false)
    @Accessors(chain = true)
    @NoArgsConstructor
    @TableName("dwr_quality_management_menu_bar")
    public class ManagementMenuBar implements Serializable {
    
        private static final long serialVersionUID = 1L;
    
        @TableId(value = "uid" ,type = IdType.AUTO)
        private String uid;
    
        /**
         * 树节点id
         */
        @TableField("id")
        private String id;
    
        /**
         * 父id，树化时使用
         */
        @TableField("parent_id")
        private String parentId;
    
        /**
         * 唯一资源id
         */
        @TableField("resource_id")
        private String resourceId;
    
        /**
         * 图片ID
         */
        @TableField("picture_id")
        private String pictureId;
    
        /**
         * 中文名
         */
        @TableField("name_cn")
        private String nameCn;
    
        /**
         * 路径
         */
        @TableField("url")
        private String url;
    
        /**
         * 图片访问路径url
         */
        @TableField("picture_url")
        private String pictureUrl;
    
        /**
         * 菜单层级
         */
        @TableField("level")
        private Integer level;
    
        /**
         * 显示顺序
         */
        @TableField("show_order")
        private Integer showOrder;
    
        /**
         * 描述
         */
        @TableField("description")
        private String description;
    
        /**
         * 首页标识：1：是，2：否
         */
        @TableField("is_home_page")
        private Integer isHomePage;
    
    
    
        /**
         * 更改时间
         */
        @TableField("update_date")
        private Date updateDate;
    
    
    }

### 传输前端类VO ###

*  ##### 作为传输转换类，其中就需要继承我们自定义的一个树化类结构 #####

@Data
    @EqualsAndHashCode(callSuper = false)
    @Accessors(chain = true)
    public class ManagementMenuBarVo extends TreeNode<ManagementMenuBarVo> implements Serializable {
    
        private static final long serialVersionUID = 1L;
    
        private String uid;
        private String id;
    
        private String parentId;
    
        private String resourceId;
    
        private String pictureId;
    
        private String pictureUrl;
    
        private String nameCn;
    
        private String url;
    
        private Integer level;
    
        private String description;
    
        private Integer isHomePage;
    
        private Integer isAccessible;
    
        private String functionName;
    
        private Integer showOrder;
    
        /**
         *
         */
    
        /**
         * initSuperNodeId
         * 
         */
        @Override
        public void initSuperNodeId() {
            super.setNodeId(this.id);
        }
    
        /**
         * 初始化TreeNode的parentNodeId属性
         */
        @Override
        public void initSuperParentNodeId() {
            super.setParentNodeId(this.parentId);
        }
    
    }

### 树化工具节点类 ###

/**
     * 树化工具实体
     *
     */
    @Data
    public abstract class TreeNode<T> {
    
        // 仅用于树化，序列化时忽略
        @JsonIgnore
        private String nodeId;
    
        @JsonIgnore
        private String parentNodeId;
    
        @JsonIgnore
        private T parent;
    
        private List<T> children = new ArrayList<>();
    
        /**
         * 初始化TreeNode的NodeId属性
         */
        public abstract void initSuperNodeId();
    
        /**
         * 初始化TreeNode的parentNodeId属性
         */
        public abstract void initSuperParentNodeId();
    
    }

### 树化操作工具类 ###

/*
     * Copyright (c) Huawei Technologies Co., Ltd. 2022-2022. All rights reserved.
     */
    
    package com.xxx.utils;
    
    
    /**
     * 树化工具
     *
     */
    public class TreeUtils {
    
        /**
         * 树化
         * @param treeNodes 扁平节点数据
         * @return 树化的节点列表（列表中每一节点都是一棵树）
         */
        public static <T extends TreeNode<T>> List<T> treeing(List<T> treeNodes) {
            Map<String, T> nodeMap = new HashMap<>(treeNodes.size());
            treeNodes.forEach(t -> nodeMap.put(t.getNodeId(), t));
    
            List<T> result = new ArrayList<>();
            for (T treeNode : treeNodes) {
                T parent = nodeMap.get(treeNode.getParentNodeId());
                if (parent != null) {
                    parent.getChildren().add(treeNode);
                    treeNode.setParent(parent);
                    continue;
                }
                // 仅添加顶层节点
                result.add(treeNode);
            }
    
            return result;
        }
    
        /**
         * 扁平化
         * @param treeNodes 树化数据
         * @return 扁平数据
         */
        public static <T extends TreeNode<T>> List<T> flattening(List<T> treeNodes) {
            if (!CollectionUtils.isEmpty(treeNodes)) {
                return new ArrayList<>();
            }
            List<T> newList = new LinkedList<>();
            Queue<T> queue = new LinkedList<>(treeNodes);
            while (!queue.isEmpty()) {
                T pollMenuBar = queue.poll();
                List<T> children = pollMenuBar.getChildren();
                if (!CollectionUtils.isEmpty(children)) {
                    queue.addAll(children);
                }
                newList.add(pollMenuBar);
            }
            return newList;
        }
    }

*  返回前端的JSON数据格式如下
 *  每个菜单栏层级就比较清晰，通过children集合嵌套当前菜单栏的子菜单栏

![27d5ae3459b84706a9c775875d9dacdb.png][]

[ecd7dfefb6e04c59af853652f6c29040.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d3eba4c986d64fadbf82714067206bcd.png
[27d5ae3459b84706a9c775875d9dacdb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1716d04fa0da444db98707323f6b8e5b.png