SpringBoot+FreeMarker实现无限级菜单

avatar 2019年01月05日15:25:37 8 6075 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
本文介绍无限级菜单的实现，跟无限极评论相似。通过递归将菜单与子菜单进行封装。

一、效果预览


前台级菜单动图





后台菜单







下面讲代码实现

二、后端代码实现


本文案例采用 MyBatis Plus 作为 ORM 框架。

1.实体


Menu.java
  1. package com.liuyanzhao.sens.entity;
  3. import com.baomidou.mybatisplus.annotations.TableField;
  4. import com.baomidou.mybatisplus.annotations.TableId;
  5. import com.baomidou.mybatisplus.annotations.TableName;
  6. import com.baomidou.mybatisplus.enums.IdType;
  7. import lombok.Data;
  9. import java.io.Serializable;
  10. import java.util.List;
  12. /**
  13.  * <pre>
  14.  *     菜单
  15.  * </pre>
  16.  *
  17.  * @author : saysky
  18.  * @date : 2018/1/24
  19.  */
  20. @Data
  21. @TableName("sens_menu")
  22. public class Menu implements Serializable {
  24.     private static final long serialVersionUID = -7726233157376388786L;
  26.     /**
  27.      * 编号 自增
  28.      */
  29.     @TableId(type = IdType.AUTO)
  30.     private Long menuId;
  32.     /**
  33.      * 菜单Pid
  34.      */
  35.     private Long menuPid = 0L;
  37.     /**
  38.      * 菜单名称
  39.      */
  40.     private String menuName;
  42.     /**
  43.      * 菜单路径
  44.      */
  45.     private String menuUrl;
  47.     /**
  48.      * 排序编号
  49.      */
  50.     private Integer menuSort = 1;
  52.     /**
  53.      * 图标，可选
  54.      */
  55.     private String menuIcon;
  57.     /**
  58.      * 打开方式
  59.      */
  60.     private String menuTarget;
  62.     /**
  63.      * 菜单类型(0前台主要菜单，1前台顶部菜单)
  64.      */
  65.     private Integer menuType;
  67.     /**
  68.      * 菜单层级
  69.      */
  70.     private Integer menuLevel = 1;
  72.     /**
  73.      * 子菜单列表
  74.      */
  75.     @TableField(exist = false)
  76.     private List<Menu> childMenus;
  77. }

这里面的几个注解都是 MyBatis Plus 的注解，大家可以根据自己的需要来去留。childMenus 不是数据库字段，用于存该菜单下的子菜单列表。这里讲一下几个重要的字段

menuPid：菜单父节点id，如果是一级菜单，默认为0；如果是二级菜单，则为一级菜单id

menuSort：菜单排序编号，并非数据库中排序使用。主要是用于同一等级的菜单之间的排序，比如”Java基础“和”Java进阶“哪个放前面，可以根据这个字段来排序。数字越大，越靠前。

menuTarget：是在当前页面打开，还是新页面打开

menuType：菜单类型，根据菜单显示的位置，分为前台主要菜单0，前台顶部菜单1(以后可能也会加上后台菜单2)

menuLevel：辅助字段，记录该菜单是第几级，用于在后台显示的时候加上对应的——


2. Mapper 类 和 xml


MenuMapper.java
  1. package com.liuyanzhao.sens.mapper;
  3. import com.baomidou.mybatisplus.mapper.BaseMapper;
  4. import com.liuyanzhao.sens.entity.Menu;
  5. import org.apache.ibatis.annotations.Mapper;
  7. import java.util.List;
  9. /**
  10.  * @author liuyanzhao
  11.  */
  12. @Mapper
  13. public interface MenuMapper extends BaseMapper<Menu> {
  15.     /**
  16.      * 根据类型查询
  17.      * @param menuType 菜单类型
  19.      * @return List
  20.      */
  21.     List<Menu> findByMenuType(Integer menuType);
  23.     /**
  24.      * 根据菜单Pid获得菜单
  25.      *
  26.      * @param menuId 菜单ID
  27.      * @return List
  28.      */
  29.     List<Menu> findByMenuPid(Long menuId);
  31. }



MenuMapper.xml
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  3. <mapper namespace="com.liuyanzhao.sens.mapper.MenuMapper">
  4.   <resultMap id="BaseResultMap" type="com.liuyanzhao.sens.entity.Menu">
  5.     <id column="menu_id" jdbcType="INTEGER" property="menuId"/>
  6.     <result column="menu_pid" jdbcType="INTEGER" property="menuPid"/>
  7.     <result column="menu_name" jdbcType="VARCHAR" property="menuName"/>
  8.     <result column="menu_url" jdbcType="VARCHAR" property="menuUrl"/>
  9.     <result column="menu_sort" jdbcType="INTEGER" property="menuSort"/>
  10.     <result column="menu_icon" jdbcType="VARCHAR" property="menuIcon"/>
  11.     <result column="menu_target" jdbcType="VARCHAR" property="menuTarget"/>
  12.     <result column="menu_type" jdbcType="INTEGER" property="menuType"/>
  13.     <result column="menu_level" jdbcType="INTEGER" property="menuLevel"/>
  14.   </resultMap>
  16.   <sql id="all_columns">
  17.    menu_id, menu_pid, menu_name, menu_url, menu_sort,
  18.    menu_icon, menu_target, menu_type, menu_level
  19.     </sql>
  21.   <sql id="tb">`sens_menu`</sql>
  23.   <sql id="all_values">
  24.         #{menuId}, #{menuPid}, #{menuName}, #{menuUrl}, #{menuSort},
  25.         #{menuIcon}, #{menuTarget}, #{menuType}, #{menuLevel}
  26.     </sql>
  28.   <select id="findByMenuType" resultMap="BaseResultMap">
  29.     SELECT
  30.     <include refid="all_columns"/>
  31.     FROM
  32.     <include refid="tb"/>
  33.     WHERE menu_type = #{value} ORDER BY menu_sort DESC
  34.   </select>
  36.   <select id="findByMenuPid" resultType="com.liuyanzhao.sens.entity.Menu">
  37.     SELECT
  38.     <include refid="all_columns"/>
  39.     FROM
  40.     <include refid="tb"/>
  41.     WHERE menu_pid = #{value} ORDER BY menu_sort DESC
  42.   </select>
  44. </mapper>


3.service 层


MenuService.java
  1. package com.liuyanzhao.sens.service;
  3. import com.liuyanzhao.sens.entity.Menu;
  5. import java.util.List;
  7. /**
  8.  * <pre>
  9.  *     菜单业务逻辑接口
  10.  * </pre>
  11.  *
  12.  * @author : saysky
  13.  * @date : 2018/1/24
  14.  */
  15. public interface MenuService {
  17.     /**
  18.      * 根据菜单Pid获得菜单
  19.      *
  20.      * @return List
  21.      */
  22.     List<Menu> findByMenuPid(Long menuId);
  24.     /**
  25.      * 根据编号查询菜单
  26.      *
  27.      * @param menuId menuId
  28.      * @return Optional
  29.      */
  30.     Menu findByMenuId(Long menuId);
  32.     /**
  33.      * 根据类型查询，以树形展示，用于前台
  34.      * 
  35.      * @param menuType 菜单类型
  36.      * @return List
  37.      */
  38.     List<Menu> findMenuTree(Integer menuType);
  40.     /**
  41.      * 根据类型查询，以列表显示展示，用于后台管理
  42.      *
  43.      * @param menuType 菜单类型
  44.      * @return 菜单
  45.      */
  46.     List<Menu> findMenuList(Integer menuType);
  48.     /**
  49.      * 新增/修改菜单
  50.      *
  51.      * @param menu menu
  52.      * @return Menu
  53.      */
  54.     Menu saveByMenu(Menu menu);
  56.     /**
  57.      * 删除菜单
  58.      *
  59.      * @param menuId menuId
  60.      * @return Menu
  61.      */
  62.     void removeByMenuId(Long menuId);
  63. }



MenuServiceImpl.java
  1. package com.liuyanzhao.sens.service.impl;
  3. import com.liuyanzhao.sens.entity.Menu;
  4. import com.liuyanzhao.sens.mapper.MenuMapper;
  5. import com.liuyanzhao.sens.model.enums.MenuTypeEnum;
  6. import com.liuyanzhao.sens.service.MenuService;
  7. import com.liuyanzhao.sens.utils.MenuUtil;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.cache.annotation.CacheEvict;
  10. import org.springframework.cache.annotation.Cacheable;
  11. import org.springframework.stereotype.Service;
  13. import java.util.List;
  15. /**
  16.  * <pre>
  17.  *     菜单业务逻辑实现类
  18.  * </pre>
  19.  *
  20.  * @author : saysky
  21.  * @date : 2018/1/24
  22.  */
  23. @Service
  24. public class MenuServiceImpl implements MenuService {
  26.     private static final String MENUS_CACHE_NAME = "menus";
  28.     @Autowired(required = false)
  29.     private MenuMapper menuMapper;
  31.     @Override
  32.     @Cacheable(value = MENUS_CACHE_NAME, key = "'menus_id_'+#menuId")
  33.     public Menu findByMenuId(Long menuId) {
  34.         return menuMapper.selectById(menuId);
  35.     }
  37.     @Override
  38.     @Cacheable(value = MENUS_CACHE_NAME, key = "'menus_pid_'+#menuId")
  39.     public List<Menu> findByMenuPid(Long menuId) {
  40.         return menuMapper.findByMenuPid(menuId);
  41.     }
  43.     @Override
  44.     @Cacheable(value = MENUS_CACHE_NAME, key = "'menus_tree_type_'+#menuType")
  45.     public List<Menu> findMenuTree(Integer menuType) {
  46.         List<Menu> menuList = menuMapper.findByMenuType(menuType);
  47.         //以层级(树)关系显示
  48.         return MenuUtil.getMenuTree(menuList);
  49.     }
  51.     @Override
  52.     @Cacheable(value = MENUS_CACHE_NAME, key = "'menus_list_type_'+#menuType")
  53.     public List<Menu> findMenuList(Integer menuType) {
  54.         List<Menu> menuList = menuMapper.findByMenuType(menuType);
  55.         menuList.forEach(menu -> {
  56.             String str = "";
  57.             for (int i = 1; i < menu.getMenuLevel(); i++) {
  58.                 str += "——";
  59.             }
  60.             menu.setMenuName(str + menu.getMenuName());
  61.         });
  62.         //以一级菜单/二级菜单/三级菜单的顺序输出
  63.         return MenuUtil.getMenuList(menuList);
  64.     }
  66.     @Override
  67.     @CacheEvict(value = MENUS_CACHE_NAME, allEntries = true, beforeInvocation = true)
  68.     public void removeByMenuId(Long menuId) {
  69.         menuMapper.deleteById(menuId);
  70.     }
  72.     @Override
  73.     @CacheEvict(value = MENUS_CACHE_NAME, allEntries = true, beforeInvocation = true)
  74.     public Menu saveByMenu(Menu menu) {
  75.         //1.设置MenuLevel
  76.         if (menu.getMenuPid() == 0 || menu.getMenuPid() == null) {
  77.             menu.setMenuLevel(1);
  78.         } else {
  79.             Menu parentMenu = this.findByMenuId(menu.getMenuPid());
  80.             if (parentMenu != null && parentMenu.getMenuLevel() != null) {
  81.                 menu.setMenuLevel(parentMenu.getMenuLevel() + 1);
  82.             }
  83.         }
  84.         //2.添加/更新菜单
  85.         if (menu != null && menu.getMenuId() != null) {
  86.             menuMapper.updateById(menu);
  87.         } else {
  88.             menuMapper.insert(menu);
  89.         }
  90.         return menu;
  91.     }
  92. }

这里的 @Cacheable 等注解是用于缓存，大家根据自己的需求选择去留


4.菜单工具类


MenuUtil.java
  1. package com.liuyanzhao.sens.utils;
  3. import com.liuyanzhao.sens.entity.Menu;
  5. import java.util.ArrayList;
  6. import java.util.Collections;
  7. import java.util.List;
  9. /**
  10.  * <pre>
  11.  *     拼装菜单，
  12.  * </pre>
  13.  *
  14.  * @author : saysky
  15.  * @date : 2018/7/12
  16.  */
  17. public class MenuUtil {
  19.     /**
  20.      * 获取组装好的菜单
  21.      * 以树的形式显示
  22.      *
  23.      * @param menusRoot menusRoot
  24.      * @return List
  25.      */
  26.     public static List<Menu> getMenuTree(List<Menu> menusRoot) {
  27.         List<Menu> menusResult = new ArrayList<>();
  29.         for (Menu menu : menusRoot) {
  30.             if (menu.getMenuPid() == 0) {
  31.                 menusResult.add(menu);
  32.             }
  33.         }
  35.         for (Menu menu : menusResult) {
  36.             menu.setChildMenus(getChildTree(menu.getMenuId(), menusRoot));
  37.         }
  38.         return menusResult;
  39.     }
  41.     /**
  42.      * 获取菜单的子菜单
  43.      *
  44.      * @param id        菜单编号
  45.      * @param menusRoot menusRoot
  46.      * @return List
  47.      */
  48.     private static List<Menu> getChildTree(Long id, List<Menu> menusRoot) {
  49.         List<Menu> menusChild = new ArrayList<>();
  50.         for (Menu menu : menusRoot) {
  51.             if (menu.getMenuPid() != 0) {
  52.                 if (menu.getMenuPid().equals(id)) {
  53.                     menusChild.add(menu);
  54.                 }
  55.             }
  56.         }
  57.         for (Menu menu : menusChild) {
  58.             if (menu.getMenuPid() != 0) {
  59.                 menu.setChildMenus(getChildTree(menu.getMenuId(), menusRoot));
  60.             }
  61.         }
  62.         if (menusChild.size() == 0) {
  63.             return null;
  64.         }
  65.         return menusChild;
  66.     }
  69.     /**
  70.      * 获取组装好的菜单,
  71.      *
  72.      * @param menusRoot menusRoot
  73.      * @return List
  74.      */
  75.     public static List<Menu> getMenuList(List<Menu> menusRoot) {
  76.         List<Menu> menusResult = new ArrayList<>();
  78.         for (Menu menu : menusRoot) {
  79.             if (menu.getMenuPid() == 0) {
  80.                 menusResult.add(menu);
  81.                 menusResult.addAll(getChildList(menu.getMenuId(), menusRoot));
  82.             }
  83.         }
  84.         return menusResult;
  85.     }
  87.     /**
  88.      * 获取菜单的子菜单
  89.      *
  90.      * @param id        菜单编号
  91.      * @param menusRoot menusRoot
  92.      * @return List
  93.      */
  94.     private static List<Menu> getChildList(Long id, List<Menu> menusRoot) {
  95.         List<Menu> menusChild = new ArrayList<>();
  96.         for (Menu menu : menusRoot) {
  97.             if (menu.getMenuPid() != 0) {
  98.                 if (menu.getMenuPid().equals(id)) {
  99.                     menusChild.add(menu);
  100.                     List<Menu> tempList = getChildList(menu.getMenuId(), menusRoot);
  101.                     tempList.sort((a, b) -> b.getMenuSort() - a.getMenuSort());
  102.                     menusChild.addAll(tempList);
  103.                 }
  104.             }
  105.         }
  106.         if (menusChild.size() == 0) {
  107.             return Collections.emptyList();
  108.         }
  109.         return menusChild;
  110.     }
  112. }



以上就可以从service层获得对应的封装类型的数据了

前台的菜单树结构应该是这样的





后台的菜单列表结构如下





到这里基本就实现了。

下面简单讲一下前台菜单的视图层怎么写


三、FreeMarker渲染前台菜单


1.最多展示三级


通常情况下，我们只需要展示两级菜单就差不多了，有时候也需要三级。
  1. <ul id="menu-mainmenu" class="down-menu nav-menu">
  2.         <#list frontMainMenus as menu>
  3.             <li id="menu-item-${menu.menuId}"
  4.                 class="menu-item menu-item-type-custom menu-item-object-custom">
  5.                 <a href="${(menu.menuUrl)!}">
  6.                     <i class="${(menu.menuIcon)!}"></i>
  7.                     <span class="font-text">${(menu.menuName)!}</span>
  8.                 </a>
  9.                 <ul class="sub-menu">
  10.                     <#list menu.childMenus as menu2>
  11.                         <li id="menu-item-${menu2.menuId}"
  12.                             class="menu-item menu-item-type-custom menu-item-object-custom">
  13.                             <a href="${(menu2.menuUrl)!}">
  14.                                 <i class="${(menu2.menuIcon)!}"></i>
  15.                                 <span class="font-text">${(menu2.menuName)!}</span>
  16.                             </a>
  17.                             <ul class="sub-menu">
  18.                                 <#list menu2.childMenus?if_exists as menu3>
  19.                                     <li id="menu-item-${menu3.menuId}"
  20.                                         class="menu-item menu-item-type-custom menu-item-object-custom">
  21.                                         <a href="${(menu2.menuIcon)!}"">
  22.                                             <span class="font-text">${(menu3.menuName)!}</span>
  23.                                         </a>
  24.                                     </li>
  25.                                 </#list>
  26.                             </ul>
  27.                         </li>
  28.                     </#list>
  29.                 </ul>
  30.             </li>
  31.         </#list>
  32.     </ul>

通过三层for循环展示，方法虽然蠢但是可以实现。


2.展示无限级菜单


如果用for循环可能实现不了
  1. <#macro childMenus menus>
  2.       <ul class="sub-menu">
  3.           <#list menus as menu>
  4.               <li id="menu-item-${menu.menuId}"
  5.                   class="menu-item menu-item-type-custom menu-item-object-custom">
  6.                   <a href="${(menu.menuIcon)!}"">
  7.                       <span class="font-text">${(menu.menuName)!}</span>
  8.                   </a>
  9.                   <#if menu.childMenus?? && menu.childMenus?size gt 0>
  10.                       <@childMenus menu.childMenus></@childMenus>
  11.                   </#if>
  12.               </li>
  13.           </#list>
  14.       </ul>
  15.   </#macro>
  17.   <ul id="menu-mainmenu" class="down-menu nav-menu">
  18.   <@commonTag method="menus">
  19.       <#list frontMainMenus as menu>
  20.           <li id="menu-item-${menu.menuId}"
  21.               class="menu-item menu-item-type-custom menu-item-object-custom">
  22.               <a href="${(menu.menuUrl)!}">
  23.                   <i class="${(menu.menuIcon)!}"></i>
  24.                   <span class="font-text">${(menu.menuName)!}</span>
  25.               </a>
  26.               <#if menu.childMenus?? && menu.childMenus?size gt 0>
  27.                   <@childMenus menu.childMenus></@childMenus>
  28.               </#if>
  29.           </li>
  30.       </#list>
  31.   </@commonTag>
  32.   </ul>

commonTag是自定义的 FreeMarker 标签，macro 是 FreeMarker 标签









历史上的今天
一月
05日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：1   待审核评论数：0
  1. avatar 弋
    回复 2020年11月18日 22:00:51

    frontMainMenus 是哪里来的？没找到

    • avatar 言曌
      回复 2020年11月23日 09:57:00

      从后台传的，可以通过FreeMarker全局标签或者Controller传