YII与Ace Admin 的集成

目录

一、 前言... 1

二、为什么要使用YII+ace. 1

三、新建YII模块... 1

四、如何修改模板... 3

五、注意的地方... 4

六、整合的不足之处... 4

 

一、 前言

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的页面。