springboot+thymeleaf把菜单栏存放到数据库

在把基本的一个功能实现了之后,发现了一个新的问题.就是菜单栏需要在html中一直写真的是超级麻烦,无限的复制粘贴让我干到疲惫,而懒惰是人类进步的最大动力.所以驱使我要把一级菜单二级菜单存放到数据库中,让他自己遍历就好了.想了一下,会用到关联查询,然后需要js给当前的菜单增加css效果.

所以
一级菜单我给的属性有id menu_img(菜单前的小图标) menu_name(菜单名称) menu_value(用来让二级菜单关联的)

二级菜单我给的属性有id menu_name menu_url(跳转链接) menu_value

然后对应的建立实体类代码如下

package com.emp.manage.pc.menu.domain;

import java.util.List;

public class FirstMenu {
    private String id;

    private String menuImg;

    private String menuName;

    private Integer menuValue;

    private List<SecondMenu> secondMenus;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id == null ? null : id.trim();
    }

    public String getMenuImg() {
        return menuImg;
    }

    public void setMenuImg(String menuImg) {
        this.menuImg = menuImg == null ? null : menuImg.trim();
    }

    public String getMenuName() {
        return menuName;
    }

    public void setMenuName(String menuName) {
        this.menuName = menuName == null ? null : menuName.trim();
    }

    public Integer getMenuValue() {
        return menuValue;
    }

    public void setMenuValue(Integer menuValue) {
        this.menuValue = menuValue;
    }

    public List<SecondMenu> getSecondMenus() {
        return secondMenus;
    }

    public void setSecondMenus(List<SecondMenu> secondMenus) {
        this.secondMenus = secondMenus;
    }

    @Override
    public String toString() {
        return "FirstMenu{" +
                "id='" + id + '\'' +
                ", menuImg='" + menuImg + '\'' +
                ", menuName='" + menuName + '\'' +
                ", menuValue=" + menuValue +
                ", secondMenus=" + secondMenus +
                '}';
    }
}

package com.emp.manage.pc.menu.domain;

/**
 * @author employeeeee
 * @Descriotion:
 * @date 2019/1/10 10:12
 */
public class SecondMenu {
    private String id;

    private String menuName;

    private Integer menuValue;

    private String menuUrl;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getMenuName() {
        return menuName;
    }

    public void setMenuName(String menuName) {
        this.menuName = menuName;
    }

    public Integer getMenuValue() {
        return menuValue;
    }

    public void setMenuValue(Integer menuValue) {
        this.menuValue = menuValue;
    }

    public String getMenuUrl() {
        return menuUrl;
    }

    public void setMenuUrl(String menuUrl) {
        this.menuUrl = menuUrl;
    }

    @Override
    public String toString() {
        return "SecondMenu{" +
                "id='" + id + '\'' +
                ", menuName='" + menuName + '\'' +
                ", menuValue=" + menuValue +
                ", menuUrl='" + menuUrl + '\'' +
                '}';
    }
}

因为需要关联查询,所以在以及菜单实体类中是有了一个list的属性的.
xml配置我就不占了关联查询已经写过好多次了.
然后因为是测试我只是把这个在一个网页中进行了测试,
正常应该写在你的登录的controller中.
然后把你取到的菜单list 给存放到session中.
我就比较懒惰的给写在了一个随便找的url中.

    @GetMapping("/{userid}/queryInfo")
    public  String queryInfo(Model model, HttpSession session, @PathVariable("userid") String userid){
        UsersVo usersVo = userService.queryUsersVoInfo(userid);
        List<FirstMenu> firstMenuList = menuService.selectAllMenu();
        model.addAttribute("userVo", usersVo);
        session.setAttribute("menuList",firstMenuList);
        return "user/userInfo";
    }

这样已经是可以去到你的list了然后在html中把他遍历出来.

 <ul class="page-sidebar-menu  page-header-fixed " data-keep-expanded="false" data-auto-scroll="true"
            data-slide-speed="200"  th:each="firstMenu:${session.menuList}" >
            <!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below "sidebar-toggler-wrapper" LI element -->
            <li th:id="${firstMenu.id}" class="nav-item">
                <a href="javascript:;" class="nav-link nav-toggle">
                    <i th:class="${firstMenu.menuImg}"></i>
                    <span class="title" th:text="${firstMenu.menuName}">用户管理</span>
                    <span class="arrow"></span>
                </a>
                <ul class="sub-menu">
                    <!--active open-->
                    <li class="nav-item " th:each="secondMenu:${firstMenu.secondMenus}" th:id="${secondMenu.id}">
                        <a th:href="@{${secondMenu.menuUrl}}" class="nav-link ">
                            <span class="title selected" th:text="${secondMenu.menuName}">用户列表</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

菜单栏部分就这样变得这么简短.不需要那么一大堆写死的代码了.

当然总是要给人家加上css效果的,写一个js就ok了

    <script>
        jQuery(document).ready(function () {
            initMenueTile();
        });

        function initMenueTile() {
//这里放的是你的一级菜单 和 二级菜单id
            initTitile('userMenu','userMenu_list');
        }

        function initTitile(first,second) {
            //1级菜单
            var $li = $('#'+first);
            //2级菜单
            var $subli = $('#' + second);

            $li.addClass("active open selected");
            $subli.addClass("active");

        }
    </script>

最后就这样了

image.png

因为这里的菜单id还是通过手写的,接下来会给他变为自动的一个传参和判断在用户点击的时候把id和index的下标值传一下应该就可以了.
因为也不算特别大的突破所以准备先写一下文件上传和用户编辑

springboot+thymeleaf把菜单栏存放到数据库

推荐阅读更多精彩内容