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的页面。
转载于:https://www.cnblogs.com/zhrea/p/3661986.html
YII与Ace Admin 的集成相关推荐
- easy admin java_GitHub - zzccbb8/easyadmin: 简易的java后台管理框架，基于SpringBoot+FreeMark+ace admin+mysql...
easyadmin 简介 一个简单好看的后台开发模板框架,目前具备用户管理,菜单管理和角色管理3个功能,也只打算做这3个,毕竟这是所有后台管理框架的核心,而本项目也只是打算做一个模板框架而已 优点 一 ...
- spring admin mysql_easyadmin: 简易的java后台管理框架，基于SpringBoot+FreeMark+ace admin+mysql...
easyadmin 数据库一定要用utf8mb4编码,记得先执行manager.sql,再执行initdata.sql,其中tenant表不用管,这是我打算做的另外一个项目设计的表,因为直接复制的本项 ...
- easyui前端框架模板_.NET Core基于Ace Admin的响应式框架
(给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架 基于Ace Admin框架菜单导航 ...
- html响应式布局 ace,.NET Core基于Ace Admin的响应式框架
原标题:.NET Core基于Ace Admin的响应式框架 转自:netnr cnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架 基于Ace A ...
- ace admin switch 开关中英文切换
今天在开发项目的时候,遇到了ace admin switch开关切换的问题,默认的是英文,想改为中文,一开始以为是在js中控制的,可是找了很久都没有找到,后来在ace.min.css中找到了input ...
- Naive Ui Admin前端集成框架
简介 Naive Ui Admin 是基于 vue3,vite2,TypeScript,搭配使用 Naive Ui 组件库形成一套开箱即用的中后台前端解决方案,Naive Ui Admin 遵守 Na ...
- html ace编辑器,Springboot 集成 Ace editor前端编辑器
一.引入Ace editor 本质上Ace editor只是一个js而已.而该js引用了其他js(如扩展.主题等js),因此将ace editor.js引入项目时最好复制整个文件夹,不能只复制一个ac ...
- Spring Boot 2.x整合Websocket（基于Spring Boot 2.x 前后端分离 iview admin vue 集成activiti工作流...
宣传官网 xb.exrick.cn 在线Demo xboot.exrick.cn 开源版Github地址 github.com/Exrick/x-bo- 开发文档 www.kancloud.cn/ex ...
- bootstrap ace admin 整合java HTML5
获取[下载地址] QQ: 313596790 [免费支持更新] 支持三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体 [新录针对本系统的视频教程 ...
最新文章
- body,td,th {
- 数据集获取加速神器来了！
- jquery-autoComplete 插件使用
- HDFS文件系统基本文件命令、编程读写HDFS
- 楼层标高怎么引上去_【强烈推荐】工程图纸怎么看？
- java反射 获取方法_java反射之获取类的信息方法(推荐)
- 前端学习（3121）：react-hello-react的总结state
- LeetCode 160. Intersection of Two Linked Lists
- Mybatis SQL 语句中 IF函数不支持
- Python跨目录引用模块(文件)
- linux-gcc 编译时头文件和库文件搜索路径
- 【转】总结oninput、onchange与onpropertychange事件的用法和区别
- 单元测试Error creating bean with name org.springframework.web.servlet.resource.Resource
- SPSS 17.0中文版常用功能与应用实例精讲
- 读《史蒂夫•乔布斯传》（七）
- Python三个数字排列大小
- 区块链打击食品欺诈：以挪威三文鱼为例
- 插画师如何确定自己的风格？教你如何一步步找到自己绘画风格！
- 前端框架千千万，抓住两条主线成一半
- vue项目打包部署到测试服务器（转载）