easyUI的后台管理页面

最新推荐文章于 2024-09-15 16:35:16 发布
最新推荐文章于 2024-09-15 16:35:16 发布
阅读量2.6k 收藏 3
点赞数
分类专栏： 框架技术-----------------
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dmw412724/article/details/80846556
版权
本文介绍了一个名为BOS管理系统的登录页面与管理页面的设计实现，包括前端界面布局、交互逻辑及后端处理流程。该系统采用了Java作为后端语言，并利用了多种前端框架和技术，如EasyUI、jQuery、zTree等。
摘要由CSDN通过智能技术生成

 

 登录页:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,innitial-scale=1">
<title>BOS管理系统 登陆页面</title>
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/login.css">
<script type="text/javascript">
	if (window.self != window.top) {
		window.top.location = window.location;
	}
</script>
</head>

<body>
	<div class="loginbox">
		<div class="loginnav">
			<nav class="navbar navbar-default">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
						<span class="logintitle">员工登录</span>
					</div>
				</div>
			</nav>
		</div>

		<section class="mainlogin">
			<div class="container">
				<div class="col-md-4 col-md-offset-7 logincontent">
					<h4>员工登录</h4>
					<form class="form-horizontal" id="loginform" name="loginform"
						method="post" action="${pageContext.request.contextPath }/back/login/login">
						<div class="form-group" id="idInputLine">
							<label for="inputPassword3" class="col-sm-3 control-label">账号</label>
							<div class="col-sm-8">
								<input id="loginform:idInput" type="text" name="username"
									class="form-control" placeholder="请输入手机号/邮箱/用户名">
							</div>
						</div>
						<div class="form-group" id="pwdInputLine">
							<label id="loginform:pwdInput" class="col-sm-3 control-label">密码</label>
							<div class="col-sm-8">
								<input for="pwdInput" type="password" name="password"
									class="form-control" placeholder="请输入您的密码">
							</div>
						</div>
						<div class="form-group">
							<label for="inputvalidate" class="col-sm-3 control-label">验证码</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="inputaccount"
									placeholder="请输入验证码">
							</div>
							<div class="col-sm-4">
								<img id="loginform:vCode" src="validatecode.jsp"
									onclick="javascript:document.getElementById('loginform:vCode'). src='validatecode.jsp?'+Math.random();" />
							</div>
						</div>
						<div class="form-group">

							<div class="col-sm-offset-3 col-sm-4">
								<input type="checkbox"><span class="size12">
									记住用户名</span>
							</div>
							<div class="col-sm-4">
								<a href="#"><span class="size12 forget">忘记密码</span></a>
							</div>
						</div>
						<div class="col-md-offset-3 col-md-8">
							<a href="javascript:$('#loginform').submit();"
								id="loginform:j_id19" name="loginform:j_id19"
								class="btn btn-danger">立即登录</a>

						</div>
					</form>
				</div>
			</div>
		</section>

		<footer class="clearfix">
			<div class="container">
				<p class="text-center">aaa</p>
				<p class="text-center">bbb</p>
			</div>
		</footer>
	</div>
</body>
</html>

 管理页面:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BOS管理系统 首页</title>
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link id="easyuiTheme" rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/default.css">
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
		<!-- 导入ztree类库 -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css" />
		<script src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				/** 
				   Ztree菜单通用配置 
				*/
				var setting = {
					data : {
						simpleData : { // 简单数据 
							enable : true
						}
					},
					callback : {
						onClick : onClick
					},
					
				};
				
				// 基本功能菜单加载
				$.post("${pageContext.request.contextPath }/data/menu.json",function(data){
					$.fn.zTree.init($("#treeMenu"), setting, data);
				},"json");
				
				//hcharts图表展示菜单加载
				$.post("${pageContext.request.contextPath }/data/hchartsMenu.json",function(data){
					$.fn.zTree.init($("#hchartsMenu"), setting, data);
				},"json");
				
				// 系统管理菜单加载
				$.post("${pageContext.request.contextPath }/data/admin.json",function(data){
					$.fn.zTree.init($("#adminMenu"), setting, data);
				},"json");
				
				// 页面加载后 右下角 弹出窗口
				window.setTimeout(function(){
					$.messager.show({
						title:"消息提示",
						msg:'欢迎登录，超级管理员！ <a href="javascript:void" onclick="top.showAbout();">联系管理员</a>',
						timeout:5000
					});
				},3000);
				
				$("#btnCancel").click(function(){
					$('#editPwdWindow').window('close');
				});
				
				$("#btnEp").click(function(){
					alert("修改密码");
				});
				
				// 设置全局变量 保存当前正在右键的tabs 标题 
				var currentRightTitle  ;
				
				// 为选项卡，添加右键菜单 
				$('#tabs').tabs({
					onContextMenu : function(e,title,index){
						currentRightTitle = title ; 
						$('#mm').menu('show', { 
							left: e.pageX,
							top: e.pageY 
						});
						e.preventDefault(); // 禁用原来的右键效果 
					}
				});
				
				$('#mm').menu({ 
					onClick:function(item){ 
						if(item.name==='Close'){
							$('#tabs').tabs('close',currentRightTitle);
						}else if(item.name === 'CloseOthers'){
							var tabs = $('#tabs').tabs('tabs');
							$(tabs).each(function(){
								if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != currentRightTitle){
									$('#tabs').tabs('close',$(this).panel('options').title);
								}
							});
						}else if(item.name === 'CloseAll'){
							var tabs = $('#tabs').tabs('tabs');
							$(tabs).each(function(){
								if($(this).panel('options').title != '消息中心'){
									$('#tabs').tabs('close',$(this).panel('options').title);
								}
							});
						}
					} 
				}); 
			});
			
			function onClick(event, treeId, treeNode, clickFlag) {
				// 判断树菜单节点是否含有 page属性
				if (treeNode.page!=undefined && treeNode.page!= "") {
					if ($("#tabs").tabs('exists', treeNode.name)) {// 判断tab是否存在
						$('#tabs').tabs('select', treeNode.name); // 切换tab
					} else {
						// 开启一个新的tab页面
						var content = '<div style="width:100%;height:100%;overflow:hidden;">'
								+ '<iframe src="${pageContext.request.contextPath}/'
								+ treeNode.page
								+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
		
						$('#tabs').tabs('add', {
							title : treeNode.name,
							content : content,
							closable : true,
							tools:[{ 
								iconCls:'icon-reload', // 刷新按钮
								handler : function(){
									var tab = $('#tabs').tabs('getTab',treeNode.name);
									$("iframe[src='"+treeNode.page+"']").get(0).contentWindow.location.reload(true);
								}
							}] 
						});
					}
				}
			}
		
			/*******顶部特效 *******/
			/**
			 * 更换EasyUI主题的方法
			 * @param themeName
			 * 主题名称
			 */
			changeTheme = function(themeName) {
				var $easyuiTheme = $('#easyuiTheme');
				var url = $easyuiTheme.attr('href');
				var href = url.substring(0, url.indexOf('themes')) + 'themes/'
						+ themeName + '/easyui.css';
				$easyuiTheme.attr('href', href);
				var $iframe = $('iframe');
				if ($iframe.length > 0) {
					for ( var i = 0; i < $iframe.length; i++) {
						var ifr = $iframe[i];
						$(ifr).contents().find('#easyuiTheme').attr('href', href);
					}
				}
			};
			// 退出登录
			function logoutFun() {
				$.messager
				.confirm('系统提示','您确定要退出本次登录吗?',function(isConfirm) {
					if (isConfirm) {
						location.href = './user_logout.action';
					}
				});
			}
			// 修改密码
			function editPassword() {
				$('#editPwdWindow').window('open');
			}
			// 版权信息
			function showAbout(){
				$.messager.alert("宅急送 v1.0","设计: yuyang<br/> 管理员邮箱: yuyang@itcast.cn <br/> QQ: 117038615");
			}
		</script>
	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',border:false" style="height:80px;padding:10px;background:url('./images/header_bg.png') no-repeat right;">
			<div>
				<img src="./images/logo.png" border="0">
			</div>
			<div id="sessionInfoDiv" style="position: absolute;right: 5px;top:10px;">
				[<strong>超级管理员</strong>]，欢迎你！您使用[<strong>192.168.1.100</strong>]IP登录！
			</div>
			<div style="position: absolute; right: 5px; bottom: 10px; ">
				<a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
				<a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_kzmbMenu',iconCls:'icon-help'">控制面板</a>
			</div>
			<div id="layout_north_pfMenu" style="width: 120px; display: none;">
				<div onclick="changeTheme('default');">default</div>
				<div onclick="changeTheme('gray');">gray</div>
				<div onclick="changeTheme('black');">black</div>
				<div onclick="changeTheme('bootstrap');">bootstrap</div>
				<div onclick="changeTheme('metro');">metro</div>
			</div>
			<div id="layout_north_kzmbMenu" style="width: 100px; display: none;">
				<div onclick="editPassword();">修改密码</div>
				<div onclick="showAbout();">联系管理员</div>
				<div class="menu-sep"></div>
				<div onclick="logoutFun();">退出系统</div>
			</div>
		</div>
		<div data-options="region:'west',split:true,title:'菜单导航'" style="width:200px">
			<div class="easyui-accordion" fit="true" border="false">
				<div title="基本功能" data-options="iconCls:'icon-mini-add'" style="overflow:auto">
					<ul id="treeMenu" class="ztree"></ul>
				</div>
				<div title="系统管理" data-options="iconCls:'icon-mini-add'" style="overflow:auto">
					<ul id="adminMenu" class="ztree"></ul>
				</div>
				<div title="hcharts图表展示" data-options="iconCls:'icon-mini-add'" style="overflow:auto">
					<ul id="hchartsMenu" class="ztree"></ul>
				</div>
			</div>
		</div>
		<div data-options="region:'center'">
			<div id="tabs" fit="true" class="easyui-tabs" border="false">
				<div title="消息中心" id="subWarp" style="width:100%;height:100%;overflow:hidden">
					<iframe src="${pageContext.request.contextPath }/back/login/toHomePage" style="width:100%;height:100%;border:0;"></iframe>
				</div>
			</div>
		</div>
		<div data-options="region:'south',border:false" style="height:50px;padding:10px;background:url('./images/header_bg.png') no-repeat right;">
			<table style="width: 100%;">
				<tbody>
					<tr>
						<td style="width: 300px;">
							<div style="color: #999; font-size: 8pt;">
								Powered by <a href="http://www.itcast.cn/">itcast.cn</a>
							</div>
						</td>
						<td style="width: *;" class="co1"><span id="online" style="background: url(./images/online.png) no-repeat left;padding-left:18px;margin-left:3px;font-size:8pt;color:#005590;">在线人数:1</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<!--修改密码窗口-->
		<div id="editPwdWindow" class="easyui-window" title="修改密码" collapsible="false" minimizable="false" modal="true" closed="true" resizable="false" maximizable="false" icon="icon-save" style="width: 300px; height: 160px; padding: 5px;
        background: #fafafa">
			<div class="easyui-layout" fit="true">
				<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
					<table cellpadding=3>
						<tr>
							<td>新密码：</td>
							<td>
								<input id="txtNewPass" type="Password" class="txt01" />
							</td>
						</tr>
						<tr>
							<td>确认密码：</td>
							<td>
								<input id="txtRePass" type="Password" class="txt01" />
							</td>
						</tr>
					</table>
				</div>
				<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
					<a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)">确定</a>
					<a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a>
				</div>
			</div>
		</div>

		<div id="mm" class="easyui-menu" style="width:120px;">
			<div data-options="name:'Close'">关闭当前窗口</div>
			<div data-options="name:'CloseOthers'">关闭其它窗口</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭全部窗口</div>
		</div>

	</body>

</html>

 

JAVA道人
关注
专栏目录
EasyUI做的漂亮的后台管理框架
11-22
EasyUI做的漂亮的后台管理框架 基于easyui的后台ui,包括对easyui的扩展，及前台封装.此demo一直在完善中
EasyUI后台管理系统
m0_63300795的博客
08-22 1874
【代码】EasyUI后台管理系统。
掌握jQuery EasyUI：前端开发框架
最新发布
weixin_33431149的博客
09-15 2339
本文还有配套的精品资源，点击获取 简介：jQuery EasyUI 是一个基于 jQuery 的前端框架，通过简单的 HTML 标签和 JavaScript API，实现了复杂的用户界面功能。该框架包括一系列组件，如布局、窗口、表格、表单等，旨在简化网页开发并提供丰富的交互组件。该压缩包包含了官方的 API 中文版，详细阐述了组件的使用方法和示例代码，以及属性、方法和事件的...
完整后台管理界面EasyUI.
03-22
完整后台管理界面EasyUI；完整后台管理界面EasyUI；完整后台管理界面EasyUI
EasyUI管理后台模板（附源码）
01-29
EasyUI后台管理系统模板（附源码）！！！！！界面优美简介
easyui后台管理系统
10-25
easyui后台管理系统静态资源文件，要在服务器上才能正常运行，数据是在json文件中的
jQuery easyui后台管理页面tab布局样式代码
10-30
在本案例中，我们关注的是"jQuery EasyUI后台管理页面的tab布局样式代码"。 Tab布局是jQuery EasyUI中的一个重要特性，它允许在一个页面上展示多个并行的内容区域，每个区域被一个标签页所代表，用户可以通过点击...
easyUI例子_easyui1.4.4_一套EASYUI的经典后台管理模板_jquery_
10-03
EasyUI 是一个基于 jQuery 的前端框架，主要用于快速构建用户界面，尤其适用于后台管理系统。这个"easyUI例子_easyui1.4.4"压缩包提供了一套使用 EasyUI 1.4.4 版本的经典后台管理模板，适用于开发人员快速搭建功能...
SSH+Jquery easyUI后台管理系统
06-26
SSH+Jquery easyUI后台管理系统
easyui后台管理系统（菜单权限，按钮权限）
12-10
easyui后台管理系统，包括菜单权限，按钮权限，后台使用springMVC+hibernate，mysql数据库，jsp
easyui后台管理模板
07-02
前端easyUI框架，后台管理站模板，下载即可使用。强大的前端框架，支持你想要的任何操作
easyUI 后台管理
12-24
简单的easyui后台，经供参考，有问题评论问我，大家可以拿来修改下，直接用到我们项目中！！！
easyui后台管理系统框架
08-21
easyui后台管理系统框架
全兼容界面超简洁的easyui后台管理模板
06-18
业界良心全兼容界面超简洁的easyui后台管理模板，适合搭建自己的后台管理框架，值得学习！
EasyUi 搭建一个后台管理系统
weixin_40007271的博客
03-08 4656
1、LinkButton 使用css的方式 &lt;a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"&gt;超链接的样式&lt;/a&gt; 结果 2、Layout布局 &lt;div id="cc" class="easyui-layout" data-option
easyui java管理系统_SSM+jQuery EasyUI后台管理系统
weixin_31026805的博客
02-18 327
项目描述1、该项目是为了展示easyUI的源码展示2、已实现功能◆easyui layout示例◆三种登录功能，手动输入登录、表格检索登录、用户名补全登录◆实现form表单中，按回车按钮提交表单◆tab选择后，自动获焦用户名◆必填字段提示功能◆easyui换肤功能◆easyui portal功能◆easyui异步tree示例，并且可以设定异步循环加载所有节点◆页面增加等待效果◆动态管理菜单◆tre...
Easyui后台管理界面设计与实践
知识点三：EasyUI后台页面设计 后台页面设计是构建Web应用程序的重要环节，它需要考虑到用户操作的便利性、信息的呈现以及系统功能的实现。使用EasyUI，开发者可以利用其提供的控件快速搭建后台管理系统的界面，例如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值