SSM整合之企业级后台管理系统(11) - 实现主页中的顶部菜单和左侧菜单

最新推荐文章于 2024-07-04 16:31:11 发布

猪爸爸爱学习

最新推荐文章于 2024-07-04 16:31:11 发布

阅读量2.2k

点赞数 3

分类专栏： SSM整合实战文章标签： Spring SpringMVC MyBatis Bootstrap 后台管理系统

本文为博主原创文章，未经许可，禁止转载。

本文链接：https://blog.csdn.net/u012586848/article/details/102974409

版权

本文详细讲解了如何在SSM整合的后台管理系统中实现主页的顶部菜单和左侧菜单，包括菜单栏效果演示、顶部菜单和左侧菜单的实现，以及菜单的联动原理。通过后台动态获取用户菜单并渲染到前端，实现菜单点击时加载对应子菜单的功能。

摘要由CSDN通过智能技术生成

前面的教程和大家一起学习了系统登录部分的开发，登录之后呢我们需要展示管理平台的主页，通常，管理系统的主页是这样布局的：

顶部：基本包括系统名称、主功能菜单、用户名称和头像
中间部分：左侧是主功能菜单下的子菜单，右侧是子菜单对应的页面
底部：技术支持信息，也就是开发者给自己打的广告😄

上面说的这种布局模式其实就是边界布局（Border Layout）。也就是，下面截图这个样子：

接下来，我们就一起来学习一下如何实现主页中的顶部和左侧菜单吧

一、菜单栏效果演示

菜单部分最终的效果是，点击顶部菜单，相应的子菜单会在左侧加载出来；点击左侧的菜单，正文部分会加载该部分页面。无图言卵，顶部菜单和左侧菜单栏的实现后效果：

二、实现顶部菜单（一级菜单）

在介绍代码实现之前，我们先来思考一下顶部菜单实现的原理。

首先，我们页面中加上一个<ul>用来展示菜单内容，在index页面加载时调用initTopMenu()函数初始化该<ul>。那菜单的内容从哪里来呢？页面上写死吗？当然不行啦，不用的用户登录进来需要显示不同的菜单，所以，我们需要从后台返回当前登录用户的菜单选项。当我们点击顶部菜单时，switchMenu()函数响应点击事件并加载该菜单的子菜单到页面左侧。

1、index.jsp中<body>元素中加上<header>，header中包含了一个id为"nav-left"的<ul>用来展示顶部菜单：

<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <a href="javascript:void(0);" class="navbar-brand" id="navbar-brand">OMS System </a>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav