laravel-admin 使用經驗記錄一波

whs5280發表於2022-07-22
Laravel

1. 背景

由於快捷開發，最近一直在使用laravel-admin，陸陸續續也踩了不少坑；
所謂是好記性不如爛筆頭，整理一波並記錄一下；
首次在Learnku社群發表文章，希望仁兄們多多包含，指點一二

2. 自定義頁面的分頁樣式

釋出php artisan vendor:publish --tag=laravel-pagination

路徑views/vendor/pagination

預設使用的是tailwind.blade.php,複製bootstrap-4.blade.php替換即可

3. chart圖表的使用

composer require laravel-admin-ext/chartjs

php artisan vendor:publish --tag=laravel-admin-chartjs

建立一個view

<h4>近期訂單柱狀圖</h4>
<canvas id="myChart"></canvas>
<script>
    $(function () {
        var ctx = document.getElementById("myChart").getContext('2d');
        let date = "{{ $date }}";
        let dateArr = date.split(',');
        var total = "{{ $total }}";
        var totalArr = total.split(',');
        var myChart = new Chart(ctx, {
            type: 'bar',    // 型別值有line，bar，radar，doughnut，pie
            data: {
                labels: dateArr,    // 橫座標陣列
                datasets: [{
                    label: '近期訂單成交量',
                    data: totalArr,   // 縱座標陣列
                    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>

使用Content::body($content)將資料渲染給view

public function index(Content $content)
{
     $data = $this->orderGraph(7);

     return $content
         ->title('資料看板')
         ->description('Dashboard')
         ->row(view('dashboard')->with([
            'date'  => implode(',', $data[0]), 
            'total' => implode(',', $data[1])
        ]));
}

4. 檔案上傳

檔案上傳，使用$form->ignore('file')遮蔽file欄位，再用$file = request('file')接收file引數自定義處理

protected function form()
{
    $form->file('file', '匯入券碼')->required();
    $form->ignore('file');

    // 上傳檔案，儲存到表，並記錄file_id
    $form->submitted(function (Form $form) {
        $file = request('file');
        $result = UploadService()::upload($file);
        $form->model()->file_id = $result['file_id'];
    });

    // 透過file_id，分批匯入券碼
    $form->saved(function (Form $form) {
        FileService::importCsv($form->model()->file_id, (new CodeData())->getTable(), ['code'],
            [['key' => 'code_id', 'val' => $form->model()->id]],
            2, 1000);
    });

    return $form;
}

5. 圖片OSS配置

  • 這一部分文件是有詳細介紹的，但還是踩了些坑；

  • laravel不同版本，引入的aliyun-oss 包是不一樣的；

  • 這個包也別漏了 composer require "jacobcyl/ali-oss-storage: dev-master"

  • 配置config/filesystems檔案

    'oss' => [
    'driver' => 'oss',
    'access_id' => env('OSS_ACCESS_KEY_ID', ''),
    'access_key' => env('OSS_ACCESS_KEY_SECRET', ''),    
    'bucket' => env('OSS_BUCKET'),
    'endpoint' => env('OSS_ENDPOINT'),
    'ssl' => true,
    'isCName' => false,
    'debug' => false,
],

  • 配置config/admin檔案

    'upload' => [
    'disk' => 'oss',
    'directory' => [
    'image' => 'st/' . date("Ymd", time()),    // st是指bucket建立的資料夾目錄
    'file' => 'files',
    ],
],

6. 在form方法區別建立和編輯

使用Route::currentRouteName()獲取路由名稱，根據路由名稱做判斷
使用form->isCreating()、form->isEditing() 判斷

7. 不懂之處

rule()方法生效了，但沒頁面效果，很不友好，日誌也沒有:sweat:
$form->text('name')->rules('required|string|max:20')

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

相關文章