栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

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

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

开发过程中,涉及到多级菜单的应用,找了一些资料案例实现如下(使用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_byNUMBER 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 childMenus;
 
  ......
}
Controller控制层 :
@Controller
@RequestMapping("/index")
public class IndexController {
 
  @Autowired
  private WxUserService wxUserService;
 
  
  @ResponseBody
  @RequestMapping(value = "/loadAuthMenus",method = RequestMethod.GET)
  public LayuiJsonFormat login(String username, String password, HttpServletRequest request) {
 
    // 获取所有菜单数据
    List wxMenus = wxUserService.getAllMenus();
    //定义 存储一级菜单
    List menuList = new ArrayList();
    // 先找到所有的一级菜单
    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);
  }
 
 
  
  private List getChildmenus(String id, List wxMenus) {
    // 子菜单
    List 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 getAllMenus();
}
service实现类:
@Service("wxUserService")
public class WxUserServiceImpl implements WxUserService {
 
  @Autowired
  private WxUserMapper wxUserMapper;
 
  @Override
  public List getAllMenus() {
    return wxUserMapper.getAllMenus();
  }
}
mapper:
public interface WxUserMapper {
  List getAllMenus();
}

mybatis sql :




 
  
  

最后,前端样式使用 layui ,html + js 如下:
  • {{ menu.menu_name }}
    {{ child.menu_name }}

最后效果图如下:

总结

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/135885.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号