laravel-admin 來使用前端元件做個後臺首頁吧

it_cwc發表於2020-08-21

寫在前面：有錯改之，無錯那就是無錯唄

背景：因為`laravel-admin`自帶的首頁是一些引數方法，之前的專案未曾修改過，一直被客戶吐槽複雜（其實這頁就沒用用到過好吧！！！），所以自己用前端元件拼了一個。

結果

原圖後臺首頁

測試元件拼接

開始

首先是首頁的控制器

<?php
use Encore\Admin\Layout\Column;
use Encore\Admin\Layout\Content;
use Encore\Admin\Layout\Row;

    return $content
        ->title('這一個亂八七糟的首頁，哈')
        ->description('首頁')
        ->row(function (Row $row){
            $row->column(4, function (Column $column{
            $column->append();
        });
    });
?>

得知道這裡是使用了頁面內容 & 佈局
laravel-admin 將一個頁面分為為12列

經過

檢視頁

<canvas id="myChart" width="400" height="200"></canvas>
<script>
$(function () {
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: "bar",
        data: {
            // labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            labels: <?php echo $data['columnsName']; ?>,
            datasets: [{
                label: '# of Votes',
                // data: <?php echo $data['countId']; ?>,
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
});
</script>

這個是根據文件來的。其中
- type為檢視型別（詳見Chartjs官方文件）
- labels為列名
- data為資料資訊.
  
  值得注意的是：如果需要在首頁使用多個Chartjs，建議<canvas>標籤的id不要重複，如果重複後臺$column->append()會將它疊加到一起

控制器

<?php
use Encore\Admin\Widgets\Box;
 // 其中 $data 為所傳引數，切記格式為json格式
    $row->column(4, function (Column $column) use ($data) {
        $column->append(new Box('內容數量圖', view('admin.bar', ['data' => $data] ))); // 呼叫剛剛是建立的檢視
    });

?>

效果

控制器程式碼如下

<?php
use Encore\Admin\Widgets\InfoBox;

// 方法呼叫
$row->column(4, function (Column $column) {
        $column->append($this->infoBoxTest());
});

// 元件方法
public function infoBoxTest()
{
    // 引數1為標題 引數2為圖示 引數3為顏色 引數4為跳轉連結 引數5為資料
    $infoBox = new InfoBox('New Users', 'users', 'aqua', '/admin/users', '1024');
    return $infoBox->render();
}
?>

效果

控制器程式碼

<?php
use Encore\Admin\Widgets\Collapse;

// 方法呼叫
$row->column(4, function (Column $column) {
    $column->append($this->collapseTest());
});

// 元件方法
public function collapseTest()
{
    $collapse = new Collapse();
    $collapse->add('標題', '這是一些資訊');
    $collapse->add('內容', '<h2>111111</h2>');
    return $collapse->render();
}
?>

效果

來使用【laravel-admin 】前端元件做個後臺首頁吧

控制器程式碼

<?php
use Encore\Admin\Widgets\Box;

// 方法呼叫
$row->column(4, function (Column $column) {
    $column->append($this->boxTest());
});

// 元件方法
public function boxTest()
{
    $box = new Box();
    $box->removable();
    $box->collapsable();
    $box->style('info');
    $box->solid();
    $box->scrollable();
    $box->title('標題');
    $box->content('<h2>111111</h2>');
    return $box;
}
?>