当前位置: 首页 > Web前端 > vue.js

springboot+vue实现递归生成多级菜单

时间:2023-04-01 02:09:16 vue.js

在开发过程中,涉及到多级菜单的应用。找了一些数据案例,实现如下(使用springboot+layui+oracle):Createmenutable:--createmenutablecreatetablewxmini_menus(menu_idnumberunique,--menuIDmenu_namevarchar2(20),menu_urlvarchar2(200),menu_iconvarchar2(100),parent_idnumber,--parentmenuIDstatusvarchar2(10),menu_sortnumber,last_update_dateDATEnotnull,last_updated_byNUMBERnotnull,creation_dateDATEnotnull,created_byNUMBERnotnull,last_update_loginNUMBER);--插入菜单记录insertintowxmini_menusvalues((select1fromdual),'setting',null,null,null,1,100,sysdate,-1,sysdate,-1,-1);insertintowxmini_menusvalues((selectmax(menu_id)+1fromyl_wxmini_menus),'user',null,null,1,1,null,sysdate,-1,sysdate,-1,-1);插入wxmini_menus值((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私有字符串creation_date;privatelongcreated_by;privatelonglast_update_login;privateListchildMenus;...}Controller控制层:@Controller@RequestMapping("/index")publicclassIndexController{@AutowiredprivateWxUserServicewxUserService;/***getallmenudata*@return*/@ResponseBody@RequestMapping(value="/loadAuthMenus",method=RequestMethod.GET)publicLayuiJsonFormatlogin(Stringusername,Stringpassword,HttpServletRequestrequest){//获取所有菜单数据列表wxMenus=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){返回null;}returnchildMenus;}}serviceclassWxUserService.javapublicinterfaceWxUserService{//获取所有菜单ListgetAllMenus();}servicereal现在类:@Service("wxUserService")publicclassWxUserServiceImplimplementsWxUserService{@AutowiredprivateWxUserMapperwxUserMapper;@OverridepublicListgetAllMenus(){returnwxUserMapper.getAllMenus();}}mapper:publicinterfaceWxUserMapper{ListgetAllMenus();}mybatissql:select*fromwxmini_menuswmorderbywm.menu_sortasc最后,前端样式使用layui,html+js如下:<ahref="javascript:;"lay-tips="主页"lay-direction="2">{{menu.menu_name}}{{child.menu_name}