管理后台界面基本框架设计

华科易迅

18546人浏览 · 2018-10-18 13:56:54

华科易迅 · 2018-10-18 13:56:54 发布

电商类项目分为前端系统与后台管理系统，前端系统面向终端用户使用，一般设计十分炫动，色彩对比比较鲜明，容易引起消费者注意力，需要由美术及页面美工功底的设计人员开发设计。后台系统使用用户比较专一，不需要太多炫动效果，应该色调比较平淡，开发工程师借助一些前端开发JS类库可以实现后台界面设计，基本上不需美工参与即可到达普通用户的要求。古方红糖创客系统后台管理界面使用Easyui开发设计界面框架，在本节中讲解如何设计界面框架。
Easyui提供丰富的界面控件，开发工程师掌握这些控件就可以开发出比较美观的用户界面，通常的界面框架将网页分为上下左右几部分，再在不同部分中添加不同的功能。如下图：
在这里插入图片描述

Easyui提供布局管理器界面控件，只要按照约定就可设计出比较美观的界面

Layout（布局）
使用$.fn.layout.defaults重写默认值对象。
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
在这里插入图片描述

代码如下：

将某个层布局化

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</div>  

将整个网页布局化
<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

根据Easyui例程代码设计主后台页面main.jsp,页面分为上下两部分，下面部分再分为左右两部分，并设计公司Logo和系统名称

<%@ page language="java" contentType="text/html; charset=UTF8"
    pageEncoding="UTF8"%>
<%@ page import="com.hk.bean.*,com.hk.service.*,com.hk.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
	String ctx = request.getContextPath();
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>古方红糖创客平台</title>
<link rel="stylesheet" type="text/css" href="<%=ctx%>/static/easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="<%=ctx%>/static/easyui/themes/icon.css">   
<script type="text/javascript" src="<%=ctx%>/static/easyui/jquery.min.js"></script>   
<script type="text/javascript" src="<%=ctx%>/static/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<!-- 顶部区域 -->
	<div data-options="region:'north',border:false" style="height:80px;background:#B3DFDA;padding:0px 0px">
		<!-- 定义面板 -->
		<div class="easyui-panel" style="height:50px;padding-bottom:0px;background:#B3DFDA;" data-options="border:false">
			<!-- 显示Logo Div -->
			<div style="width:38%;float:left;margin-left:2%">
				<img height="50px" src="<%=ctx%>/static/images/qxnlogo.png"/>
			</div>
			<!-- 显示系统名称 Div -->
			<div style="width:60%;float:right;margin:0;padding:0">
				<p style="font-size:18pt;font-weight:bold;color:black;margin:0;padding:0">古方红糖创客平台</font></p>
			</div>
			<!-- 显示登录用户 Div -->
			<div id="userdiv" style="position:absolute;bottom:30px;right:20px;">
				<font color="black"><b>当前用户:${user.name}</b></font>
			</div>
		</div>
		<!-- 根据后台动态生成功能菜单 -->
	<!-- 根据后台动态生成功能菜单 -->
	<div class="easyui-panel" style="padding-bottom:0px;background:#B3DFDA;">
		<a class="easyui-menubutton" data-options="menu:'#0'">系统管理</a>
		<a class="easyui-menubutton" data-options="menu:'#1'">微信管理</a>
		<a class="easyui-menubutton" data-options="menu:'#2'">网上办公</a>
		<a class="easyui-menubutton" data-options="menu:'#3'">财务管理</a>
		<a class="easyui-linkbutton" data-options="plain:true" onclick="javascript:logout()">退出系统</a>
	</div>
	<div id="0" style="width:150px;">
		<div>
			<span>组织机构</span>
			<div>
				<div onclick="javascript:addTab('011','部门管理','?jsessionid=80449683B37933FF74772662A5DDFBAA')">部门管理</div>
				<div onclick="javascript:addTab('012','用户管理','?jsessionid=80449683B37933FF74772662A5DDFBAA')">用户管理</div>
				<div onclick="javascript:addTab('013','角色管理','?jsessionid=80449683B37933FF74772662A5DDFBAA')">角色管理</div>
			</div>
		</div>
	</div>
	<div id="1" style="width:150px;">
		<div onclick="javascript:addTab('11','实体店','/wxshop?jsessionid=80449683B37933FF74772662A5DDFBAA')">实体店</div>
		<div onclick="javascript:addTab('12','活动管理','/wxact?jsessionid=80449683B37933FF74772662A5DDFBAA')">活动管理</div>
	</div>
	<div id="2" style="width:150px;">
	</div>
	<div id="3" style="width:150px;">
	</div>

	</div>
	
	<!-- 定义左侧导航部分 -->
	<div data-options="region:'west',split:true,title:'自定义导航栏'" style="width:200px;padding:10px;">
		<!-- 定义树状控件 -->
		<div class="easyui-panel" style="padding:0px" data-options="border:false">
			<ul id="tt" class="easyui-tree" style="width:100%" data-options="url:'<%=ctx%>/tree_data1.json',method:'get'"></ul>
		</div>
	</div>
	<!-- 定义右侧办公区域 -->
	<div data-options="region:'center',title:''" style="overflow:hidden">
		<div id="tabui" class="easyui-tabs" style="width:100%;height:100%;margin:0px;margin-right:0px;">
		</div>
	</div>
	
	<script>

	</script>
	
</body>
</html>

Logo图片
在这里插入图片描述

上面部分分为A区和B区，A区分为左右中三部分，分别显示公司Logo，系统名称和登录用户，B区是菜单导航区。
如下图
在这里插入图片描述

A区的控件定位使用DIV+CSS，如下代码

		<!-- 定义面板 -->
		<div class="easyui-panel" style="height:50px;padding-bottom:0px;background:#B3DFDA;" data-options="border:false">
			<!-- 显示Logo Div -->
			<div style="width:38%;float:left;margin-left:2%">
				<img height="50px" src="<%=ctx%>/static/images/qxnlogo.png"/>
			</div>
			<!-- 显示系统名称 Div -->
			<div style="width:60%;float:right;margin:0;padding:0">
				<p style="font-size:18pt;font-weight:bold;color:black;margin:0;padding:0">古方红糖创客平台</font></p>
			</div>
			<!-- 显示登录用户 Div -->
			<div id="userdiv" style="position:absolute;bottom:30px;right:20px;">
				<font color="black"><b>当前用户:${user.name}</b></font>
			</div>
		</div>

B区的功能菜单需要借助后台,菜单控件按照Easyui的约定实现
在这里插入图片描述

例程代码

<div id="mm" class="easyui-menu" style="width:120px;">   
    <div>New</div>   
    <div>   
        <span>Open</span>   
        <div style="width:150px;">   
            <div><b>Word</b></div>   
            <div>Excel</div>   
            <div>PowerPoint</div>   
        </div>   
    </div>   
    <div data-options="iconCls:'icon-save'">Save</div>   
    <div class="menu-sep"></div>   
    <div>Exit</div>   
</div>

菜单代码需要通过后台配置生成，现在先使用静态代码生成，下一节将其动态化

		<!-- 根据后台动态生成功能菜单 -->
		<div class="easyui-panel" style="padding-bottom:0px;background:#B3DFDA;">
			<a class="easyui-menubutton" data-options="menu:'#0'">系统管理</a>
			<a class="easyui-menubutton" data-options="menu:'#1'">微信管理</a>
			<a class="easyui-menubutton" data-options="menu:'#2'">网上办公</a>
			<a class="easyui-menubutton" data-options="menu:'#3'">财务管理</a>
			<a class="easyui-linkbutton" data-options="plain:true" onclick="javascript:logout()">退出系统</a>
		</div>
		<div id="0" style="width:150px;">
			<div>
				<span>组织机构</span>
				<div>
					<div onclick="javascript:addTab('011','部门管理','?jsessionid=80449683B37933FF74772662A5DDFBAA')">部门管理</div>
					<div onclick="javascript:addTab('012','用户管理','?jsessionid=80449683B37933FF74772662A5DDFBAA')">用户管理</div>
					<div onclick="javascript:addTab('013','角色管理','?jsessionid=80449683B37933FF74772662A5DDFBAA')">角色管理</div>
				</div>
			</div>
		</div>
		<div id="1" style="width:150px;">
			<div onclick="javascript:addTab('11','实体店','/wxshop?jsessionid=80449683B37933FF74772662A5DDFBAA')">实体店</div>
			<div onclick="javascript:addTab('12','活动管理','/wxact?jsessionid=80449683B37933FF74772662A5DDFBAA')">活动管理</div>
		</div>
		<div id="2" style="width:150px;">
		</div>
		<div id="3" style="width:150px;">
		</div>

在这里插入图片描述