Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 11.菜单优化

原文地址: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

下载地址:

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

文件复制到:

/static/assets/plugins/jquery-cookie/jquery.cookie.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();
});

resources_body.js 文件中引入 jquery.cookie.jscookie-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.实例源码

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


上一篇:查看账户

下一篇:使用Lombok


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

posted @ 2020-04-01 15:26  光束云  阅读(313)  评论(0编辑  收藏  举报