一、 前言... 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**
五、注意的地方
a、 要理解bootstrap中,是新的一行。
b、 要理解柵格化,這在自己頁面控制項的重新布局是需要的。比如:表示佔父元素水平空間的一半。c、除了基本的控制項使用外,還有圖示,提示等效果。:綠色的筆圖,bigger-110表示大小4:紅色(danger)圓圈中數字4
雙分割線
六、整合的不足之處
a、 選單傳遞的方式 menu_parent,menu_child,不方便。b、 當第一次整體ui載入完後,後續的選單點獲取的頁面應該使用ajax傳遞,應該在main的body裡留好div,存放controller->render的頁面。Yii框架整合Ucenter更新與增強
在我前面的博文中提出了整合ucenter到yii應用的方法,還有一些不完美,那就是,登入 退出需要手動輸出js到頁面上來通知其他應用。那麼如何做到自動處理,而不需要特別照顧?我發現只需要繼承cwebuser類,實現自己的webuser類,並覆蓋登入和退出兩個事件即可,不多說,上 php class ...
YII相關學習資料整合
yii2的框架,因為國內關於yii2框架的具體中文資料還是比較少,下面整理一些比較好的中文資料。1 yii2的底層和架構方面 a yii2的目前的官方中文社群文件,翻譯還算是比較明白,最好從這裡入手 b yii2的關於底層方面的解說,說的比較通俗易解 c 牛人從底層分析說解yii2,設計的整個設計都...
Yii系列 Yii2 0的安裝與除錯
接上一節的話,我們最終選擇了yii框架作為我們的主要開發框架,今天,我就和大夥來聊聊如何安裝與除錯yii2.0,以及後續會和大夥聊聊如何在yii2.0上快速擼 好的,composer這個利器我們在 這一章節中已經講了如何安裝,今天我們就要開始安裝我們的yii2.0原始碼啦。切換到乙個可通過 web ...