EasyUI+JavaWeb奖助学金管理系统[7]-EasyUI经典后台管理系统布局实现

逃离我推掉我的手 2022-12-24 00:51 209阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 本章任务
 *  2. 引入EasyUI
 *  3. 顶部标题栏
 *  4. 左侧导航栏
 *  5. 右侧内容栏
 *  6. 底部版权栏
 *  7. 效果

# 1. 本章任务 #

之前已实现登录后进入main.html页面功能，本篇来实现后台管理页面布局。

主要包括：上方标题栏，下方版权栏，左侧菜单栏，右侧点击菜单后对应的内容区域。

# 2. 引入EasyUI #

新建main.html然后引入EasyUI。

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>布局和标签页</title>
    	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    	<script type="text/javascript" src="easyui/jquery.min.js"></script>
    	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    </head>
    <body class="easyui-layout">
    
    </body>
    </html>

注意body使用了`easyui-layout`样式，所以该页面遵循easyui的布局规范。

# 3. 顶部标题栏 #

新增顶部标题栏

<div data-options="region:'north',border:false"
    		style="height: 48px; line-height: 48px; padding-left: 24px; font-size: 1.3em; background: #C3E7F3;">
    		汉东大学奖助学金管理系统
    	</div>

注意`region:'north'`将标题栏固定到了顶部，汉东大学是虚构的，此处使用了《人民的名义》中的大学名称，仅仅是为了有趣。

# 4. 左侧导航栏 #

新增左侧导航栏

注意`region:'west'`将导航栏固定到了左侧。然后此处添加了两个菜单用于演示，后续真实环境下应该从数据库中加载角色对应菜单显示。

注意点击`<a>`标签后，`target="main-frame"`表明指向的网页显示到`main-frame`中。

# 5. 右侧内容栏 #

代码如下：

注意内容栏使用了iframe，且名称为`main-frame`，所以点击左侧导航栏菜单后，对应页面的内容就显示到该区域内。

# 6. 底部版权栏 #

这个比较简单

# 7. 效果 #

效果很好，大功告成哈。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/2409a303925b43b6af7f99d745ebbfa4.png