Dcat Admin 構建頁面佈局

辣粉and五斤發表於2021-09-26

Dcat Admin這個CMS後臺管理框架,是基於laravel-admin進行的二次開發。我之所以選擇它,主要一點也是被其豐富的元件吸引。畢竟現在身邊沒有能配合的前端。如果自己能把那些表單輕鬆搞定,實在是一件很開心的事。

Dcat 如果操作熟練後,每個模組建立完資料表以後,配套的CURD就已經建好了。搜尋都有了。PHP開發人員就可以輕鬆很多,把注意力放在其它地方了。

這是一篇學習總結筆記,用於日後自己的記憶喪失之時,我還能靠著它進行復習。
官方關於頁面佈局的手冊地址:開發前必讀《Dcat Admin 中文文件》

接下來是我自己的總結性筆記.

我現在的需求是這樣的,製作一個頁面,在最上面寫上一些提示資訊,單獨為一行。
下面的一行進行左右分欄。

Dcat Admin 構建頁面佈局

在Dcat框架中底層封裝了內容類檔案:

use Dcat\Admin\Layout\Content;

其中的body()方法可以設定頁面內容。在body()方法中,可以直接填寫字串。

public function index(Content $content){
   return $content->body("這是一個自定義頁面");
}

也可以放入匿名函式,從而進行頁面佈局。在做頁面佈局的時候,需要引入兩個類檔案。

use Dcat\Admin\Layout\Row;
use Dcat\Admin\Layout\Column;

下面是index類的完整程式碼:
public function index(Content $content){
       //$tab是選項卡的程式碼,先刪掉後面在貼上。

        return $content
                ->body(function(Row $row) use($tab){
                     $row->column(12,$this->showMessage());

                     $row->column(12,function(Column $column) use ($tab){
                        $column->row(function(Row $row) use($tab){
                            $row->column(6,$this->form());
                            $row->column(6,$tab->withCard());  
                        });
                     });
                });
    }

現在介紹程式碼:
在body()方法中傳入匿名函式,放置Row這個類作為引數。Dcat框架採用了 bootstrap 的柵格系統,每行的長度是 12。

//這種寫法是定義了一個列,它的長度為12,就代表佔滿了螢幕,引數2的 showMessage 返回了一些html字串。
$row->column(12,$this->showMessage());  

接下來的程式碼,要設定左右分欄,所以先做了一個大的外框,可以把它理解成iframe標籤。

$row->column(12,function(Column $column) use ($tab){

然後在用$column->row()設定一行

$column->row(function(Row $row) use($tab){

最後設定兩個子列,每個列佔用6個寬度。

$row->column(6,$this->form());
$row->column(6,$tab->withCard()); 

左右分欄的完整程式碼:

$row->column(12,function(Column $column) use ($tab){
      $column->row(function(Row $row) use($tab){
           $row->column(6,$this->form());
           $row->column(6,$tab->withCard());  
       });
});

注意先是$row->column(), 如果要在內部繼續巢狀佈局時,就要轉換成$column->row()先設定一行,然後在用$row->column()做列。東西理解後就不難,但發現總結成筆記,這塊就好繞口。哈哈。

手冊裡,到是這樣來介紹。
Dcat Admin 構建頁面佈局

#製作Tab選項卡

框架還供了多種頁面元件,比如Tab選項卡
使用前需要引入這個Tab類檔案

use Dcat\Admin\Widgets\Tab;

然後按照下面的程式碼,例項化Tab類為物件,通過add()方法設定選項卡的內容。
引數1:是選項卡的名字
引數2:是要顯示的內容
引數3:true代表預設選中狀態

public function index(Content $content){

        $tab = Tab::make();
        $tab->add('未執行',$this->grid(), true);
        $tab->add('已執行',$this->executeTable());
 最後呼叫$tab->withCard() 方法就會顯示出選項卡了

完整程式碼如下:這塊我又把佈局換成了三行1列的形式。

 public function index(Content $content){

        $tab = Tab::make();
        $tab->add('未執行',$this->grid(), true);
        $tab->add('已執行',$this->executeTable());

        return $content
                ->translation($this->translation())
                ->title("批量匯入資料")
                ->description($this->description()['index'] ?? trans('admin.list'))
                ->body(function(Row $row) use($tab){
                     $row->column(12,$this->showMessage());

                     $row->column(12,$this->form());
                     $row->column(12,$tab->withCard());  
                });
    }

效果圖:

Dcat Admin 構建頁面佈局

目前我的計劃是,使用Dcat做一個資料統計分析後臺,然後用Elasticsearch做搜尋引擎+大分據分析。

如果本週內能運用熟練,估計開發進度會快很多。自己能搞定的,就不用做圖的了,哈哈。

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章