Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 342|回复: 0

Java构建网站多级菜单功能解决方案

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-6-19 12:11:19 | 显示全部楼层 |阅读模式
    在网站开发的时候我们会对网站的栏目进行分类,一个栏目可以有多个子分类,一个子分类又可以有分裂,例如:新闻栏目下有每日早报和每日晚报两个栏目,其中每日早报下面又分为上海早报,北京早报,杭州早报,下面是京东首页的分类图。
     

    数据库设计
    我们在设计数据库的时候仅仅使用一张表就可以把上面的关系给捋清楚,就是通过一个parentid字段,让我们开看一下这张表的表结构
     

    各位看官可以看一下建表语句
    DROP TABLE IF EXISTS `menu`;
    CREATE TABLE `menu`  (
      `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键递增',
      `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '分类名称',
      `parentid` int(11) NULL DEFAULT NULL COMMENT '父节点id',
      `url` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '分类链接',
      `icon` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '分类图标',
      `order` int(11) NULL DEFAULT NULL COMMENT '分类排序权重',
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 9 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

    再让我们来插入一点测试数据

    INSERT INTO `menu` VALUES (1, '新闻', 0, '/www/xinwen', 'xxx', 1);
    INSERT INTO `menu` VALUES (2, '每日日报', 1, '/www/meiriribao', 'xxx', 2);
    INSERT INTO `menu` VALUES (3, '每日晚报', 1, '/www/zaobao', 'xxx', 1);
    INSERT INTO `menu` VALUES (4, '河南日报', 2, '/www/henan', 'xxx', 2);
    INSERT INTO `menu` VALUES (5, '上海日报', 2, '/www/shanghai', 'xxx', 1);
    INSERT INTO `menu` VALUES (6, '南京日报', 2, '/www/nanjing', 'xxx', 3);
    INSERT INTO `menu` VALUES (7, '开封日报', 4, '/www/zhoukou', 'xxx', 2);
    INSERT INTO `menu` VALUES (8, '郑州日报', 4, '/www/zhenghzou', 'xxx', 3);
     现在我们来看一下Java程序中该如何从数据库中读取数据这样的数据返回页面。在下在项目中用的是SSM框架因为并不是SSM框架教程,这里仅仅贴出Dao层,简单至极
    List<Menu> findAll();

     

     <select id="findAll" resultMap="BaseResultMap">
        select * from menu;
      </select>
    看一下菜单对应的实体

    package com.sys.domain;
    
    import java.util.List;
    
    public class Menu implements Comparable<Menu> {
        private Integer id;
    
        private String name;
    
        private Integer parentid;
    
        private String url;
    
        private String icon;
    
        private Integer order;
    
        //子菜单列表
        private List<Menu> children;
    
        public List<Menu> getChildren() {
            return children;
        }
        public void setChildren(List<Menu> children) {
            this.children = children;
        }
    
    
        public Integer getId() {
            return id;
        }
    
        public void setId(Integer id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name == null ? null : name.trim();
        }
    
        public Integer getParentid() {
            return parentid;
        }
    
        public void setParentid(Integer parentid) {
            this.parentid = parentid;
        }
    
        public String getUrl() {
            return url;
        }
    
        public void setUrl(String url) {
            this.url = url == null ? null : url.trim();
        }
    
        public String getIcon() {
            return icon;
        }
    
        public void setIcon(String icon) {
            this.icon = icon == null ? null : icon.trim();
        }
    
        public Integer getOrder() {
            return order;
        }
    
        public void setOrder(Integer order) {
            this.order = order;
        }
    
    
        @Override
        public int compareTo(Menu o) {
            if (this.order != o.order) {
                return this.order - o.order;
            }
            return 0;
        }
    }
    View Code

     实体关键点1:实体Menu实现了Comparable接口并实现了compareTo方法

     

     

    这样就可以直接使用Collections.sort()方法进行List排序

    实体关键点2:实体中新增一个属性List<Menu> children,用于存储返回页面的子节点

     

    实体较介绍完了,我们就可以直接看代码啦,都加上注释了很简单

    package com.sys.menutree;
    
    import com.sys.dao.MenuMapper;
    import com.sys.domain.Menu;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.*;
    
    /**
     * @Author:jimisun
     * @Description:
     * @Date:Created in 18:02 2018/8/8
     * @Modified By:
     */
    @Controller
    @RequestMapping("/menu")
    public class MenuController {
    
        @Autowired
        private MenuMapper menuMapper;
    
    
        @RequestMapping(value = "/findTree", method = RequestMethod.POST)
        @ResponseBody
        public Map<String, Object> findTree(@RequestBody(required = false) Menu menu) {
            //构建返回数据
            Map<String, Object> data = new HashMap<String, Object>();
    
            try {
                //查询到的所有菜单
                List<Menu> allMenu = menuMapper.findAll();
                //根节点
                List<Menu> rootMenu = new ArrayList<Menu>();
    
                //根据传递的参数设置根节点
                if (menu != null && menu.getId() != null) {
                    //父节点为传递的id为根节点
                    for (Menu nav : allMenu) {
                        if (nav.getParentid().equals(menu.getId())) {
                            rootMenu.add(nav);
                        }
                    }
                } else {
                    //父节点是0的,为根节点。
                    for (Menu nav : allMenu) {
                        if (nav.getParentid().equals(0)) {
                            rootMenu.add(nav);
                        }
                    }
                }
    
                // 根据Menu类的order排序
                Collections.sort(rootMenu);
    
                //为根菜单设置子菜单,getClild是递归调用的
                for (Menu nav : rootMenu) {
                    //获取根节点下的所有子节点 使用getChild方法
                    List<Menu> childList = getChild(nav.getId(), allMenu);
                    //给根节点设置子节点
                    nav.setChildren(childList);
                }
    
                data.put("success", "true");
                data.put("list", rootMenu);
                return data;
            } catch (Exception e) {
                data.put("success", "false");
                data.put("list", new ArrayList());
                return data;
            }
    
        }
    
        /**
         * 递归设置栏目的子节点
         *
         * @param id      父节点id
         * @param allMenu 节点列表
         * @return
         */
        private List<Menu> getChild(Integer id, List<Menu> allMenu) {
            //子菜单
            List<Menu> childList = new ArrayList<Menu>();
            for (Menu nav : allMenu) {
                // 遍历所有节点,将所有菜单的父id与传过来的根节点的id比较
                //相等说明:为该根节点的子节点。
                if (nav.getParentid().equals(id)) {
                    childList.add(nav);
                }
            }
            //递归设置子节点
            for (Menu nav : childList) {
                nav.setChildren(getChild(nav.getId(), allMenu));
            }
            //排序
            Collections.sort(childList);
            //如果节点下没有子节点,返回一个空List(递归退出)
            if (childList.size() == 0) {
                return new ArrayList<Menu>();
            }
            return childList;
        }
    
    
    }
    View Code

    最后我们来看一下功能演示

    直接发送直接请求接口,获取的是所有分类

    请求结果

    {
        "success": "true",
        "list": [
            {
                "id": 5,
                "name": "上海日报",
                "parentid": 2,
                "url": "/www/shanghai",
                "icon": "xxx",
                "order": 1,
                "children": []
            },
            {
                "id": 4,
                "name": "河南日报",
                "parentid": 2,
                "url": "/www/henan",
                "icon": "xxx",
                "order": 2,
                "children": [
                    {
                        "id": 7,
                        "name": "开封日报",
                        "parentid": 4,
                        "url": "/www/zhoukou",
                        "icon": "xxx",
                        "order": 2,
                        "children": []
                    },
                    {
                        "id": 8,
                        "name": "郑州日报",
                        "parentid": 4,
                        "url": "/www/zhenghzou",
                        "icon": "xxx",
                        "order": 3,
                        "children": []
                    }
                ]
            },
            {
                "id": 6,
                "name": "南京日报",
                "parentid": 2,
                "url": "/www/nanjing",
                "icon": "xxx",
                "order": 3,
                "children": []
            }
        ]
    }
    View Code

     

    发送请求接口,并附带要查询的分类id

    结果如下

    {
        "success": "true",
        "list": [
            {
                "id": 5,
                "name": "上海日报",
                "parentid": 2,
                "url": "/www/shanghai",
                "icon": "xxx",
                "order": 1,
                "children": []
            },
            {
                "id": 4,
                "name": "河南日报",
                "parentid": 2,
                "url": "/www/henan",
                "icon": "xxx",
                "order": 2,
                "children": [
                    {
                        "id": 7,
                        "name": "开封日报",
                        "parentid": 4,
                        "url": "/www/zhoukou",
                        "icon": "xxx",
                        "order": 2,
                        "children": []
                    },
                    {
                        "id": 8,
                        "name": "郑州日报",
                        "parentid": 4,
                        "url": "/www/zhenghzou",
                        "icon": "xxx",
                        "order": 3,
                        "children": []
                    }
                ]
            },
            {
                "id": 6,
                "name": "南京日报",
                "parentid": 2,
                "url": "/www/nanjing",
                "icon": "xxx",
                "order": 3,
                "children": []
            }
        ]
    }
    View Code

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-2-2 01:54 , Processed in 0.064664 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表