后台界面
电商类项目分为前端系统与后台管理系统，前端系统面向终端用户使用，一般设计十分炫动，色彩对比比较鲜明，容易引起消费者注意力，需要由美术及页面美工功底的设计人员开发设计。后台系统使用用户比较专一，不需要太多炫动效果，应该色调比较平淡，开发工程师借助一些前端开发JS类库可以实现后台界面设计，基本上不需美工参与即可到达普通用户的要求。古方红糖创客系统后台管理界面使用easyui开发设计界面框架，在本节中讲解如何设计界面框架。
Easyui提供丰富的界面控件，开发工程师掌握这些控件就可以开发出比较美观的用户界面，通常的界面框架将网页分为上下左右几部分，再在不同部分中添加不同的功能。如下图：
Easyui提供布局管理器界面控件，只要按照约定就可设计出比较美观的界面
layout（布局）
使用$.fn.layout.defaults重写默认值对象。
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
代码如下：
将某个层布局化
<p id="cc" class="easyui-layout" style="width:600px;height:400px;">
<p data-options="region:'north',title:'North Title',split:true" style="height:100px;"></p>
<p data-options="region:'south',title:'South Title',split:true" style="height:100px;"></p>
<p data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></p>
<p data-options="region:'west',title:'West',split:true" style="width:100px;"></p>
<p data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></p>
</p>
将整个网页布局化
<body class="easyui-layout">
<p data-options="region:'north',title:'North Title',split:true" style="height:100px;"></p>
<p data-options="region:'south',title:'South Title',split:true" style="height:100px;"></p>
<p data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></p>
<p data-options="region:'west',title:'West',split:true" style="width:100px;"></p>
<p data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></p>
</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">
<!-- 顶部区域 -->
<p data-options="region:'north',border:false" style="height:80px;background:#B3DFDA;padding:0px 0px">
<!-- 定义面板 -->
<p class="easyui-panel" style="height:50px;padding-bottom:0px;background:#B3DFDA;" data-options="border:false">
<!-- 显示Logo Div -->
<p style="width:38%;float:left;margin-left:2%">
<img height="50px" src="<%=ctx%>/static/images/qxnlogo.png"/>
</p>
<!-- 显示系统名称 Div -->
<p 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>
</p>
<!-- 显示登录用户 Div -->
<p id="userp" style="position:absolute;bottom:30px;right:20px;">
<font color="black"><b>当前用户:${user.name}</b></font>
</p>
</p>
<!-- 根据后台动态生成功能菜单 -->
<!-- 根据后台动态生成功能菜单 -->
<p 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" style="width:150px;">
<p>
<span>组织机构</span>
<p>
<p style="width:150px;">
<p style="width:150px;">
</p>
<p id="3" style="width:150px;">
</p>
</p>
<!-- 定义左侧导航部分 -->
<p data-options="region:'west',split:true,title:'自定义导航栏'" style="width:200px;padding:10px;">
<!-- 定义树状控件 -->
<p 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>
</p>
</p>
<!-- 定义右侧办公区域 -->
<p data-options="region:'center',title:''" style="overflow:hidden">
<p id="tabui" class="easyui-tabs" style="width:100%;height:100%;margin:0px;margin-right:0px;">
</p>
</p>
<script>
</script>
</body>
</html>
Logo图片
上面部分分为A区和B区，A区分为左右中三部分，分别显示公司Logo，系统名称和登录用户，B区是菜单导航区。
如下图
A区的控件定位使用DIV+CSS，如下代码
<!-- 定义面板 -->
<p class="easyui-panel" style="height:50px;padding-bottom:0px;background:#B3DFDA;" data-options="border:false">
<!-- 显示Logo Div -->
<p style="width:38%;float:left;margin-left:2%">
<img height="50px" src="<%=ctx%>/static/images/qxnlogo.png"/>
</p>
<!-- 显示系统名称 Div -->
<p 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>
</p>
<!-- 显示登录用户 Div -->
<p id="userp" style="position:absolute;bottom:30px;right:20px;">
<font color="black"><b>当前用户:${user.name}</b></font>
</p>
</p>
B区的功能菜单需要借助后台,菜单控件按照Easyui的约定实现
例程代码
<p id="mm" class="easyui-menu" style="width:120px;">
<p>New</p>
<p>
<span>Open</span>
<p style="width:150px;">
<p><b>word</b></p>
<p>excel</p>
<p>PowerPoint</p>
</p>
</p>
<p data-options="iconCls:'icon-save'">Save</p>
<p class="menu-sep"></p>
<p>Exit</p>
</p>
菜单代码需要通过后台配置生成，现在先使用静态代码生成，下一节将其动态化
<!-- 根据后台动态生成功能菜单 -->
<p 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" style="width:150px;">
<p>
<span>组织机构</span>
<p>
<p style="width:150px;">
<p style="width:150px;">
</p>
<p id="3" style="width:150px;">
</p>
相关阅读
卷积神经网络是一种前馈型神经网络, 受生物自然视觉认知机制启发而来的. 现在, CNN 已经成为众多科学领域的研究热点之一, 特别是
仔细想想，你会发现我们正处于大屏UI设计的一个有趣的阶段。2015年推出的Apple TV 已经是第四代产品了，但是其他的同类型产品尚且处
文章来源于实际项目中的一个产品开发，产品电路板上有一个电源管理芯片zs6366a，通过这个电源管理芯片来控制可充电电池的充放电，并提
要想发布一款能够位于App Store排行榜之首的产品，产品在质量和功能上的高标准表现是必不可少的，而为了达到这种高度，我们应该如何做
关于权限菜单的设计http://blog.csdn.net/bearyb1982/article/details/2448301权限设计（初稿）1. 前言：权限管理往往是一个极其复杂的