YII与Ace Admin 的集成
目录
一、 前言
yii-bootstrap扩展是已经将YII+Bootstrap完美结合,但今天我们讨论的不是它,面是基于bootstrap风格的ace admin(具体介绍,大家上网搜索);
先来张效果图:
图1 整体效果图
二、为什么要使用YII+ace
ace是前端模板,所以后台用什么语言或框架并不重要。但打开ace源码,您会发现很混乱,不知从哪里下手。本文将使用YII作为后台,结合Ace,为大家展示以搭积木的方式来构建自己的超酷后台。
三、新建YII模块
a、 放置好ace的js、css文件,生成yii模块;
图2 模块文件
b、 新建布局文件main.php,在此文件里引入UI的框架和固定的部分;main.php里固定上面的导航条和左边的菜单;
c、 在controller里引用此布局
图3 引用ace布局文件
d、 根据需要,在action里渲染具体的页面部分
图4 渲染视图
上图中,视图registerd里就只写表单部分,框架的其它部分已经在main.php里加载了;
图4中三个属性的说明见下图:menuID指示了当前点击的菜单
图5 菜单配置与页面上的有关系
四、如何修改模板
由于YII的布局文件存在的,所以开发者只需要写需要的部分。比如要开发图6这个页面,步骤如下:
图6 开发示例页面
a、 写action,并render到register页面
b、 Register中的控件从ace模板文件中copy而来,复杂的控制和布局通过组合实现,这一点跟搭积木很像;具体copy方式如下:用chrome打开模板页面,选择所需的控件。如图7所示:先copy父元素,再嵌套子元素;
图7 chrom中copy代码
提示:如果不采用此种方式,而是直接复制模板上的代码,您会发现ace模板的代码很混乱,不太容易组装成自己的页面。
五、注意的地方
a、 要理解bootstrap中,<div class=’row’></div>是新的一行。
b、 要理解栅格化,这在自己页面控件的重新布局是需要的。比如:
<div class="col-sm-6"></div>表示占父元素水平空间的一半。
C、除了基本的控件使用外,还有图标,提示等效果。
<i class="green icon-edit bigger-110"></i>:绿色的笔图,bigger-110表示大小
<span class="badge badge-danger">4</span>:红色(danger)圆圈中数字4
<div class="hr hr8 hr-double"></div>双分割线
…………
六、整合的不足之处
a、 菜单传递的方式 menu_parent,menu_child,不方便。
b、 当第一次整体UI加载完后,后续的菜单点获取的页面应该使用ajax传递,应该在main的body里留好div,存放controller->render的页面。