springboot + vue 实现递归生成多级菜单(实例代码)

2023-08-04 15:59:04 333

开发过程中，涉及到多级菜单的应用，找了一些资料案例实现如下（使用springboot+layui+oracle）：

创建菜单表：

--创建菜单表
createtablewxmini_menus(
menu_idnumberunique,--菜单ID
menu_namevarchar2(20),
menu_urlvarchar2(200),
menu_iconvarchar2(100),
parent_idnumber,--父菜单ID
statusvarchar2(10),
menu_sortnumber,
last_update_dateDATEnotnull,
last_updated_byNUMBERnotnull,
creation_dateDATEnotnull,
created_byNUMBERnotnull,
last_update_loginNUMBER
);

--插入菜单记录
insertintowxmini_menusvalues((select1fromdual),'设置',null,null,null,1,100,sysdate,-1,sysdate,-1,-1);
insertintowxmini_menusvalues((selectmax(menu_id)+1fromyl_wxmini_menus),'用户',null,null,1,1,null,sysdate,-1,sysdate,-1,-1);
insertintowxmini_menusvalues((selectmax(menu_id)+1fromyl_wxmini_menus),'网站用户',null,null,1,1,null,sysdate,-1,sysdate,-1,-1);
insertintowxmini_menusvalues((selectmax(menu_id)+1fromyl_wxmini_menus),'角色管理',null,null,1,1,null,sysdate,-1,sysdate,-1,-1);
--主菜单二
insertintowxmini_menusvalues((selectmax(menu_id)+1fromyl_wxmini_menus),'主页',null,null,null,1,1,sysdate,-1,sysdate,-1,-1);
insertintowxmini_menusvalues((selectmax(menu_id)+1fromyl_wxmini_menus),'控制台',null,null,5,1,null,sysdate,-1,sysdate,-1,-1);
insertintowxmini_menusvalues((selectmax(menu_id)+1fromyl_wxmini_menus),'主页一',null,null,5,1,null,sysdate,-1,sysdate,-1,-1);
insertintowxmini_menusvalues((selectmax(menu_id)+1fromyl_wxmini_menus),'主页二',null,null,5,1,null,sysdate,-1,sysdate,-1,-1);

实体类WxMenu.java：

publicclassWxMenu{

privateStringmenu_id;
privateStringmenu_name;
privateStringmenu_url;
privateStringmenu_icon;
privateStringparent_id;
privateStringparent_menu_name;
privateStringstatus;
privateStringmenu_sort;
privateStringlast_update_date;
privatelonglast_updated_by;
privateStringcreation_date;
privatelongcreated_by;
privatelonglast_update_login;

privateListchildMenus;

......
}
Controller控制层:
@Controller
@RequestMapping("/index")
publicclassIndexController{

@Autowired
privateWxUserServicewxUserService;

/**
*获取所有菜单数据
*@return
*/
@ResponseBody
@RequestMapping(value="/loadAuthMenus",method=RequestMethod.GET)
publicLayuiJsonFormatlogin(Stringusername,Stringpassword,HttpServletRequestrequest){

//获取所有菜单数据
ListwxMenus=wxUserService.getAllMenus();
//定义存储一级菜单
ListmenuList=newArrayList();
//先找到所有的一级菜单
for(inti=0;igetChildmenus(Stringid,ListwxMenus){
//子菜单
ListchildMenus=newArrayList<>();
for(WxMenumenu:wxMenus){
if(StringUtils.isNotBlank(menu.getParent_id())){
if(menu.getParent_id().equals(id)){
childMenus.add(menu);
}
}
}
for(WxMenumenu:childMenus){
//数据库动态存储菜单的url,此时判断url为空的，则是节点菜单（存在子菜单）
if(StringUtils.isBlank(menu.getMenu_url())){
//递归调用
menu.setChildMenus(getChildmenus(menu.getMenu_id(),wxMenus));
}
}
if(childMenus.size()==0){
returnnull;
}
returnchildMenus;
}
}

service类WxUserService.java

publicinterfaceWxUserService{

//获取所有菜单
ListgetAllMenus();
}
service实现类：
@Service("wxUserService")
publicclassWxUserServiceImplimplementsWxUserService{

@Autowired
privateWxUserMapperwxUserMapper;

@Override
publicListgetAllMenus(){
returnwxUserMapper.getAllMenus();
}
}
mapper：
publicinterfaceWxUserMapper{
ListgetAllMenus();
}

mybatissql：







select*fromwxmini_menuswmorderbywm.menu_sortasc


最后，前端样式使用layui，html+js如下：





{{menu.menu_name}}



{{child.menu_name}}

最后效果图如下：

总结

以上所述是小编给大家介绍的springboot+vue实现递归生成多级菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

springboot + vue 实现递归生成多级菜单(实例代码)

热门推荐

随机推荐