easyUI的後臺管理頁面

阿新 • • 發佈：2019-02-09

登入頁:

<%@ 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/> 管理員郵箱:  
[email protected] <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>

easyUI的後臺管理頁面

登入頁: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> <meta charset="UTF-8">

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（1）-前言與目錄（持續更新中...）

編碼規範圖標 pri log 任務 ros 部署基本 form 開發工具：VS2015(2012以上)+SQL2008R2以上數據庫　　您可以有償獲取一份最新源碼聯系QQ:729994997 價格 666RMB 升級後界面效果如下：日程管理 http://

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（65）-MVC WebApi 用戶驗證 (1)

screen 屬性 access override jquery true mod 解析 action 系列目錄前言： WebAPI主要開放數據給手機APP，其他需要得知數據的系統，或者軟件應用，所以移動端與系統的數據源往往是相通的。 Web 用戶的身份驗證，及

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（4）-創建項目解決方案

構建文章數據庫操作 webapi http 業務 pps 技術分享系列目錄前言為了符合後面更新後的重構系統，文章於2016-11-1日重寫設計中術語，概念這種東西過於模糊，我們必須學習累積才能認識這些概念模型。我無法用文章來下詳細解析此系統的深層概念，需要

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（87）-MVC Excel導入和導出

.net本文示例代碼下載：鏈接：http://pan.baidu.com/s/1jHBdgCA 密碼：hzh7ps:Vs數據庫腳本在解壓目錄下，修改web.config數據庫鏈接,示例代碼包含：導入，導出，上傳前言：導入導出實在多例子，很多成熟的組建都分裝了導入和導出，這一節演示利用LinqToExcel組

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（62）-EF鏈接串加密

image title orm mst .... 比較 string類 sin isn 前言：　　這一節提供一個簡單的功能，這個功能看似簡單，找了一下沒找到EF鏈接數據庫串的加密幫助文檔，只能自己寫了，這樣也更加符合自己的加密要求有時候我們發布程序為了避免程序外的

5. 添加後臺管理頁面

.com 介紹 lis res getparent -a awesome sele containe 接著上篇繼續，博客網站少不了後臺管理頁面，在後臺可以添加文章以及維護基礎數據，因此本文主要就介紹怎樣添加視圖頁面、怎樣使用視圖模型、綁定靜態資源以及ThymeLeaf模板引

後臺管理頁面布局

doctype set html 用戶 osi 過多 -a 執行 oat 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

8 功能6：後臺管理頁面，編輯文章

temp image bsp closed header json token sub items 1、後臺管理頁面之文本編輯 # 後臺管理url re_path(r‘^cn_backend/$‘, views.cn_backend, name=

vue搭建後臺管理頁面（點擊左側導航，切換右側內容）

htm right 後臺 opd imp page con com ng- home.vue頁面 <template> <div style="background-color: #EBEBEB;min-height:900px">

漂亮精簡版的HTML後臺管理頁面

最近自己需要一套後臺管理的模版，然後去網上查詢，模版的確很多，但是適合我的並不多。我需要的模版是不會很大，我能夠控制程式碼，樣式不要太古樸，最好有點CSS3的效果。最後終於找到一張主頁，然後再根據這個主頁來編輯其他的後臺部分。第一眼看到這個樣式，就非常滿意。現在只做了四張頁面，登入、首頁、選單管理和選單

後臺管理頁面佈局後臺管理頁面佈局

https://www.cnblogs.com/bigberg/p/9284709.html 後臺管理頁面佈局一、整體分佈　　簡單的一個頁面佈局，頭部、左側選單欄，右側內容，頭部和選單欄固定位置，內容部分如果很長就會出現滾動條

HTML-後臺管理頁面的製作(框架標籤)

頁面框架 index.html <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org

ASP.NET MVC5+EF6+EasyUI 後臺管理系統-WebApi的用法與除錯

以往我們講了WebApi的基礎驗證，但是有新手經常來問我使用的方式這次我們來分析一下程式碼的用法，以及除錯的方式 WebApi在一些場景我們會用到，比如： 1.對接各種客戶端（移動裝置） 2.構建常見的http微服務 3.開放資料 4.單點登陸等...

ASP.NET MVC5+EF6+EasyUI 後臺管理系統（88）-Excel匯入和匯出-主從表結構匯出

前言前面一篇詳細講解了匯入匯出，本節演示混合結構的匯出功能！同時提供程式碼下載.. 先看效果圖：這個一個混合的Excel，列表與自定義資訊的混合！　　我們的步驟大概分為以下幾步 1.模擬資料庫資料 2.建立工作簿 3.填充固定資料 4.合併單元格 5.處理動態資料　

簡易的後臺管理頁面佈局（二）

這裡做了一個簡易的模板，用到了一個獲取圖示的小工具，可以到這個網站下載：http://fontawesome.io/ 色彩搭配也許不好看，我不是專門搞這個的。由於時間原因沒有寫入JS，可以自己加入。 <!DOCTYPE html> <html lang

HTML 後臺管理頁面佈局

設計網頁，讓網頁好看：網上找模板搜 HTML模板 BootStrap 一、內容回顧： HTML 一大堆的標籤：塊級、行內 CSS position background text-align margin padding font-

後臺管理頁面基本佈局方式

經典頁面佈局簡易後臺管理頁面佈局 1 左邊選單欄固定 2 header固定高度(寬度自適應) 3 主體統計列表（寬度自適應）程式碼如下 html <div class="main"> <header cl

淘淘商城第十六課(展示後臺管理頁面)

前面做了那麼多鋪墊，現在我們開始著手處理後臺管理系統。首先，大家需要下載淘淘商城的靜態資原始檔，大家可以到：https://download.csdn.net/download/anaitudou/10505519這個地址進行下載，下載後解壓，解壓後可以看到有

webpack+vue.js+elementUI試做後臺管理頁面

前言由於上次搭好了SSM後端框架，就想著順便把以前那個部落格網站的後臺管理系統給做了，系統的後端環境是有了，前端頁面用什麼開發呢？之前簡單的看了vue.js，所以就決定用vue.js做前端頁面，然後搜了一些vue.js配套的ui，找到了elementUI。而

easyUI的後臺管理頁面

相關推薦