开发过程中，涉及到多级菜单的应用，找了一些资料案例实现如下（使用springboot+layui+oracle）：
创建菜单表 ：
-- 创建菜单表
create table wxmini_menus( menu_id number unique, --菜单ID menu_name varchar2(20), menu_url varchar2(200), menu_icon varchar2(100), parent_id number, --父菜单ID status varchar2(10), menu_sort number, last_update_date DATE not null, last_updated_by NUMBER not null, creation_date DATE not null, created_by NUMBER not null, last_update_login NUMBER );
-- 插入菜单记录
insert into wxmini_menus values((select 1 from dual),'设置',null,null,null,1,100,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'用户',null,null,1,1,null,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'网站用户',null,null,1,1,null,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'角色管理',null,null,1,1,null,sysdate,-1,sysdate,-1,-1); --主菜单二 insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主页',null,null,null,1,1,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'控制台',null,null,5,1,null,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主页一',null,null,5,1,null,sysdate,-1,sysdate,-1,-1); insert into wxmini_menus values((select max(menu_id)+1 from yl_wxmini_menus),'主页二',null,null,5,1,null,sysdate,-1,sysdate,-1,-1);
实体类 WxMenu.java：
public class WxMenu {
private String menu_id;
private String menu_name;
private String menu_url;
private String menu_icon;
private String parent_id;
private String parent_menu_name;
private String status;
private String menu_sort;
private String last_update_date;
private long last_updated_by;
private String creation_date;
private long created_by;
private long last_update_login;
private List<WxMenu> childMenus;
......
}
Controller控制层 :
@Controller
@RequestMapping("/index")
public class IndexController {
@Autowired
private WxUserService wxUserService;
/**
* 获取所有菜单数据
* @return
*/
@ResponseBody
@RequestMapping(value = "/loadAuthMenus",method = RequestMethod.GET)
public LayuiJsonFormat<HashMap> login(String username, String password, HttpServletRequest request) {
// 获取所有菜单数据
List<WxMenu> wxMenus = wxUserService.getAllMenus();
//定义 存储一级菜单
List<WxMenu> menuList = new ArrayList<WxMenu>();
// 先找到所有的一级菜单
for (int i = 0; i < wxMenus.size(); i++) {
// 一级菜单没有父菜单，为null
if (StringUtils.isBlank(wxMenus.get(i).getParent_id())) {
menuList.add(wxMenus.get(i));
}
}
// for调用递归，循环获取所有子菜单
for (WxMenu menu : menuList) {
menu.setChildMenus(getChildmenus(menu.getMenu_id(), wxMenus));
}
//存储所有菜单，将数据回传至 layui 前端
map.put("menus", menuList);
return LayuiJsonFormat.createBySuccess(map.size(),map);
}
/**
* 递归子菜单
* @param id
* @param wxMenus
* @return
*/
private List<WxMenu> getChildmenus(String id, List<WxMenu> wxMenus) {
// 子菜单
List<WxMenu> childMenus = new ArrayList<>();
for (WxMenu menu : wxMenus) {
if (StringUtils.isNotBlank(menu.getParent_id())) {
if (menu.getParent_id().equals(id)) {
childMenus.add(menu);
}
}
}
for (WxMenu menu : childMenus) {
//数据库动态存储菜单的url,此时判断url为空的，则是节点菜单（存在子菜单）
if (StringUtils.isBlank(menu.getMenu_url())) {
// 递归调用
menu.setChildMenus(getChildmenus(menu.getMenu_id(), wxMenus));
}
}
if (childMenus.size() == 0) {
return null;
}
return childMenus;
}
}service类 WxUserService.java
public interface WxUserService {
//获取所有菜单
List<WxMenu> getAllMenus();
}
service实现类：
@Service("wxUserService")
public class WxUserServiceImpl implements WxUserService {
@Autowired
private WxUserMapper wxUserMapper;
@Override
public List<WxMenu> getAllMenus() {
return wxUserMapper.getAllMenus();
}
}
mapper：
public interface WxUserMapper {
List<WxMenu> getAllMenus();
}
mybatis sql ：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.yinlong.wxmini.mapper.WxUserMapper"><!-- 获取所有菜单 -->
<select id="getAllMenus" resultType="com.yinlong.wxmini.entity.WxMenu"> select * from wxmini_menus wm order by wm.menu_sort asc </select> </mapper>
最后，前端样式使用 layui ，html + js 如下：
<ul id="app-4" class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="layadmin-system-side-menu">
<li data-name="home" class="layui-nav-item layui-nav-itemed">
<div v-for="menu in menus" >
<a href="javascript:;" lay-tips="主页" lay-direction="2">
<i class="layui-icon layui-icon-home"></i>
<cite>{{ menu.menu_name }}</cite>
</a>
<dl v-for="child in menu.childMenus" style="padding: 0px !important;" class="layui-nav-child">
<dd data-name="console" >
<a class="v-href-menu" lay-href="javascript:void(0)" >{{ child.menu_name }}</a>
</dd>
</dl>
</div>
</li>
</ul>
<script type="text/javascript" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/layuiadmin/layui/layui.js}"></script>
<script type="text/javascript" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/layuiadmin/vue.js}" ></script>
<script type="text/javascript" th:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@{/layuiadmin/layui/jquery-3.2.1.min.js}" ></script>
<script>
$(document).ready(function(){
$.get("/index/loadAuthMenus", function(data, status){
var vm = new Vue({
el: '#app-4',
data: {
menus: data.data.menus
}
})
});
});
</script>最后效果图如下：
如有不足或有误，望各位不吝指教，多多交流，谢谢。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦