大家好，欢迎来到IT知识分享网。
今天来分享一个我前端技术——-如何使用Easy UI快速搭建一个后台，本博主也只是在官网文档学习了一个小时左右，就已经会使用了，当你学了Easy UI后，一个后台短短两分钟就可以over了，好了，别的不多说了，直接开始表演了；
下面这张图是效果图：
这是我搭建一个SSM（Spring Spring MVC Mybatis）框架体系时候用easy ui快速搭建的一个后台，一个简单的crud，做完后后台管理可以做成这样，今天我只给一个模板，各位大表哥可以自行复制粘贴，自行修改我不足的地方，以下将给出代码自行粘贴：
<body class=”easyui-layout”>
<div region=”north” style=”height: 78px; background-color: #E0ECFF”> </div>
<div region=”west” style=”width: 200px” title=”导航菜单” split=”true”> </div>
<div data-options=”region:’center'” style=”background:#eee;”> </div>
<div region=”south” style=”height: 25px;padding: 5px” align=”center”> </div>
</body>
此为页面的一个整体布局，从效果图我们可以看出来整个界面分为四个部分分别是 上下左右四个部分 现在我们已经通过easyui实现了这个效果，此时你已经可以看到真题布局的效果了：
看起来似乎还行，接下来我们往东西南北四个大模块”加屎加尿”,让他变的有模有样，
<div class=”easyui-accordion” data-options=”fit:true,border:false”>
<div title=”常用操作” data-options=”selected:true,iconCls:’icon-item'” style=”padding: 10px”>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-writeblog'” style=”width: 150px”>新增</a>
</div>
<div title=”管理” data-options=”iconCls:’icon-bkgl'” style=”padding:10px;”>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-writeblog'” style=”width: 150px;”>写博客</a>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-bkgl'” style=”width: 150px;”>信息管理</a>
</div>
<div title=”类别管理” data-options=”iconCls:’icon-bklb'” style=”padding:10px”>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-bklb'” style=”width: 150px;”>类别信息管理</a>
</div>
<div title=”评论管理” data-options=”iconCls:’icon-plgl'” style=”padding:10px”>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-review'” style=”width: 150px”>评论审核</a>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-plgl'” style=”width: 150px;”>评论信息管理</a>
</div>
<div title=”个人信息管理” data-options=”iconCls:’icon-personal'” style=”padding:10px”>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-personal'” style=”width: 150px;”>修改个人信息</a>
</div>
<div title=”系统管理” data-options=”iconCls:’icon-system'” style=”padding:10px”>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-link'” style=”width: 150px”>友情链接管理</a>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-modifyPassword'” style=”width: 150px;”>修改密码</a>
<a href=”#” class=”easyui-linkbutton”
data-options=”plain:true,iconCls:’icon-refresh'” style=”width: 150px;”>刷新系统缓存</a>
<a href=”#” class=”easyui-linkbutton” data-options=”plain:true,iconCls:’icon-exit'”
style=”width: 150px;”>安全退出</a>
</div>
</div>
把此段代码往west里面加，此时你将发现左边的导航栏已然出现：
到了这里咱不急，慢慢来，接下来用选项卡做个首页：
<div class=”easyui-tabs” fit=”true” border=”false” id=”tabs”>
<div title=”首页” data-options=”iconCls:’icon-home'”>
<div align=”center” style=”padding-top: 100px”><font color=”red” size=”10″>欢迎使用</font></div>
</div>
</div>
此段代码加入center：
此时的后台依然变成这样了，接下来在north块加入：
<table style=”padding: 5px” width=”100%”>
<tr>
<td width=”50%”> <h2>Easy UI搭建后台</h2> </td>
<td valign=”bottom” align=”right” width=”50%”> <font size=”3″> <strong>欢迎：</strong>admin</font> </td>
</tr>
</table>
再往 south加入：
<div region=”south” style=”height: 25px;padding: 5px” align=”center”>
Copyright <strong>一回首一辈子</strong> 的博客 版权所有</div>
之后基本一个后台该有的都有了，剩下的就是自行修改了，还有在做的各位会发现很多图标都没有出来，这些图标需要大家自定义，如需做成跟我一样的效果图，还需往前往官网jeasy.com学习选项卡，布局，数据表格，文本框，日期时间框，表单，分页等等。。。。。
此处我只提供一个简单后台，可以让正在奋斗后台的你比别人早点睡，少熬几个小时夜，次篇博客无须多想，导入三个CSS文件，再导入一个jQuery的库文件跟一个easy ui的js文件，其他拿起就是copy，pasty
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/26247.html
