用Easy UI快速搭建一个后台

今天来分享一个我前端技术-------如何使用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

用Easy UI快速搭建一个后台相关推荐

使用SpringBoot一小时快速搭建一个简单后台管理（增删改查）（超详细教程）
最近也是临近期末了,各种的期末大作业,后台管理也是很多地方需要用到的,为了方便大家能快速上手,快速搭建一个简单的后台管理,我花了两天时间整理了一下我会从0开始介绍,从数据库的设计到前端页面的引入最后 ...
使用飞冰+dva快速构建一个后台系统
使用飞冰+dva快速构建一个后台系统写在前面最近我们接到这样一个需求,要写一个后台管理系统,时间很急,产品也只是给出了原型稿,把功能陈列了一下,给出的要求就是先注重功能,用起来再去考虑美化.但是作 ...
用Vue2.5和Elemnt-ui2搭建一个后台模版:提高篇（1.搭建框架）
前言:用vue做后台管理系统做了半年,最近element-ui升级到2了,所以决定搭建一个基于ele2的后台模版,在这我将手把手javascript:void(null)分享一下如何从0搭建一个后台系 ...
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
如何快速搭建一个属于自己的网站？
随着互联网的发展,网站建设的技术也越来越成熟,建站的方式也愈加丰富和多样.同时,互联网时代,无论是组织还是个人,无论是大企业还是小社团,拥有一个属于自己的网站,必不可少. 可是,不同的组织.不同的人, ...
创建微服务架构的步骤_如何快速搭建一个微服务架构？
原标题:如何快速搭建一个微服务架构? 微服务火了很久,但网上很少有文章能做到成熟地将技术传播出来,同时完美地照顾"初入微服务领域人员",从 0 开始,采用通俗易懂的语言去讲解微服务 ...
使用Django+MySQL快速搭建一个属于自己的网站
使用Django+MySQL快速搭建一个属于自己的网站 Hello小伙伴们,你们好啊~~ 又是日常get新技能的一天, 今天,咱们来整理一下如何使用VMware Workstation上进行openE ...
为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
使用Azure认知服务快速搭建一个目标检测平台
文章目录前言 1. 认知服务 2. 环境配置 2.1 创建资源 2.2 创建python环境 3. 代码实现 3.1 图片检测 3.2 视频检测 4. 检测效果结束语前言博主参与了由CSD ...

用Easy UI快速搭建一个后台

用Easy UI快速搭建一个后台相关推荐

最新文章

热门文章