YII與Ace Admin 的整合

2022-05-09 09:18:10 字數 2157 閱讀 3788

一、 前言... 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 ...