时间:2021-05-19
开发过程中,涉及到多级菜单的应用,找了一些资料案例实现如下(使用springboot+layui+oracle):
创建菜单表 :
实体类 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
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:src="@{/layuiadmin/layui/layui.js}"></script><script type="text/javascript" th:src="@{/layuiadmin/vue.js}" ></script><script type="text/javascript" th:src="@{/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>最后效果图如下:
总结
以上所述是小编给大家介绍的springboot + vue 实现递归生成多级菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS简单实现多级Select联动菜单效果代码。分享给大家供大家参考。具体如下:JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常
本文实例为大家分享了jqueryTab切换菜单的实现代码,供大家参考,具体内容如下实现tab切换的主要html代码:导航菜单TAB标签jquerycss多级下拉
本文实例讲述了基于递归实现的php树形菜单代码。分享给大家供大家参考。具体实现方法如下:开发电子商务网站的时候,做了这个显示树形菜单的功能,用的递归实现的PHP
本文实例讲述了jQuery实现的多级下拉菜单效果代码。分享给大家供大家参考。具体如下:这是一款jQuery多级下拉菜单,在支持html5的浏览器中测试你会发现本
本文实例讲述了JavaScript实现向右伸出的多级网页菜单效果。分享给大家供大家参考。具体如下:这里使用JavaScript实现向右伸出的多级网页菜单效果,鼠