Java单体应用

原文地址：http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-menu.html
更多教程：光束云 - 免费课程

菜单优化

序号	文内章节	视频
1	概述	-
2	菜单组激活样式	-
3	菜单激活样式	-
4	菜单页面完整代码	-
5	记住sidebar状态	-
6	实例源码	-

请参照如上章节导航进行阅读

1.概述

接下来完善菜单的显示效果，即：当前页面菜单需要设置激活样式，预期实现的画面效果如下：

同时，我们要记录下 sidebar 的 展开/合拢 状态，以便页面刷新时能按照记住的状态显示 sidebar，效果如下：

2.菜单组激活样式

layout_left.jsp 文件中引入 functions 标签库：

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

菜单组增加样式判断，以 后台账号 菜单组为例，代码如下：

<li class="nav-item has-treeview ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/manager/')?'menu-open':''}">

3.菜单激活样式

layout_left.jsp 菜单页面增加样式判断，以 后台账号 - 查询列表 菜单为例， 代码如下：

<a href="/auth/manager/list" class="nav-link ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/manager/list') || fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/manager/edit')?'active':''}">

4.菜单页面完整代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/" class="brand-link">
        <img src="/static/assets/img/logo-128x128.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
             style="opacity: .8">
        <span class="brand-text font-weight-light">IoT-Admin</span>
    </a>
    <!-- Sidebar -->
    <div class="sidebar">
        <!-- Sidebar Menu -->
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <!-- Add icons to the links using the .nav-icon class
                     with font-awesome or any other icon font library -->
                <li class="nav-item">
                    <a href="/main" class="nav-link">
                        <i class="nav-icon fas fa-tachometer-alt"></i>
                        <p>
                            控制台
                        </p>
                    </a>
                </li>
                <li class="nav-item has-treeview ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/manager/')?'menu-open':''}">
                    <a href="#" class="nav-link active">
                        <i class="nav-icon fas fa-user"></i>
                        <p>
                            后台账户
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="/auth/manager/add" class="nav-link ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/manager/add')?'active':''}">
                                <i class="far fa-edit nav-icon"></i>
                                <p>新增</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="/auth/manager/list" class="nav-link ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/manager/list') || fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/manager/edit')?'active':''}">
                                <i class="far fa-list-alt nav-icon"></i>
                                <p>查询列表</p>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item has-treeview ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/tenant/')?'menu-open':''}">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-store-alt"></i>
                        <p>
                            租户
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="/auth/tenant/add" class="nav-link ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/tenant/add')?'active':''}">
                                <i class="far fa-edit nav-icon"></i>
                                <p>新增</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="/auth/tenant/list" class="nav-link ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/tenant/list') || fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/tenant/edit')?'active':''}">
                                <i class="far fa-list-alt nav-icon"></i>
                                <p>查询列表</p>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item has-treeview ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/tenant-user/')?'menu-open':''}">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-user-friends"></i>
                        <p>
                            租户账户
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="/auth/tenant-user/add" class="nav-link ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/tenant-user/add')?'active':''}">
                                <i class="far fa-edit nav-icon"></i>
                                <p>新增</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="/auth/tenant-user/list" class="nav-link ${fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/tenant-user/list') || fn:startsWith(requestScope['javax.servlet.forward.servlet_path'],'/auth/tenant-user/edit')?'active':''}">
                                <i class="far fa-list-alt nav-icon"></i>
                                <p>查询列表</p>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
</aside>

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->

5.记住sidebar状态

记住 sidebar 的 展开/合拢 状态，以便页面刷新时能按照记住的状态显示 sidebar，实现核心是将状态记入 cookie

引入 jquery-cookie

下载地址：

https://plugins.jquery.com/cookie/

文件复制到：

/static/assets/plugins/jquery-cookie/jquery.cookie.js

新增 cookie-utils.js 工具包

新增 /static/assets/js/cookie-utils.js 文件，代码如下：

let CookieUtils = function() {
    const cookie_key_sidebar_collapse = 'sidebar_collapse';
    const defaultSidebarCollapse = 'false';
    const expiresDays = 7;

    let handleInitSidebarCollapse = function() {
        if ($.cookie(cookie_key_sidebar_collapse) == undefined) {
            $.cookie(cookie_key_sidebar_collapse, defaultSidebarCollapse, {
                expires: expiresDays,
                path: '/'
            });
        }
    }

    let handleChangeSidebarCollapse = function() {
        let sidebar_collapse = $.cookie(cookie_key_sidebar_collapse);
        if (sidebar_collapse == undefined) {
            $.cookie(cookie_key_sidebar_collapse, defaultSidebarCollapse == 'true' ? 'false' : 'true', {
                expires: expiresDays,
                path: '/'
            });
        } else {
            $.cookie(cookie_key_sidebar_collapse, sidebar_collapse == 'true' ? 'false' : 'true', {
                expires: expiresDays,
                path: '/'
            });
        }
    }

    return {
        initSidebarCollapse: function() {
            handleInitSidebarCollapse();
        },
        changeSidebarCollapse: function() {
            handleChangeSidebarCollapse();
        }
    }
}();

$(function() {
    CookieUtils.initSidebarCollapse();
});

引入 cookie-utils.js 工具包

在 resources_body.js 文件中引入 jquery.cookie.js 及 cookie-utils.js，代码如下：

<script src="/static/assets/plugins/jquery-cookie/jquery.cookie.js"></script>
<script src="/static/assets/js/cookie-utils.js"></script>

修改 layout_header.jsp

为 合拢/展开 按钮增加触发事件，代码如下：

<li class="nav-item">
    <a class="nav-link" data-widget="pushmenu" href="#" onclick="CookieUtils.changeSidebarCollapse()"><i class="fas fa-bars"></i></a>
</li>

修改视图页面 body 标签样式

修改各个视图页面的 body 标签的样式，使其根据 sidebar_collapse 的 Cookie 值显示 sidebar 展开/合拢样式，代码如下：

<body class="hold-transition sidebar-mini ${cookie.sidebar_collapse.value=='true'?'sidebar-collapse':''}">

6.实例源码

实例源码已经托管到如下地址：

• https://github.com/work100-net/training-stage2/tree/master/iot-cloud3

• https://gitee.com/work100-net/training-stage2/tree/master/iot-cloud3

---

上一篇：查看账户

下一篇：使用Lombok

---

如果对课程内容感兴趣，可以扫码关注我们的 公众号 或 QQ群，及时关注我们的课程更新