视图渲染

基本使用

Laravel-admin在Laravel的视图渲染机制的基础上做了一些增强和补充，以便在构建更复杂的页面应用时，能够分离PHP和前端代码，更加贴合开发者的开发习惯。

下面以使用chart.js开发一个图表页面为例, 讲解如何使用：

首先创建视图文件resources/views/admin/chart.blade.php

<div class="card">
    <div class="card-header">
        <h4>{{ $title }}</h4>
    </div>
    <div class="card-body">
        <canvas id="visitors-chart"></canvas>
    </div>
</div>

<script src="//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<script>
    var visitorsChart = new Chart($('#visitors-chart'), {
        data: {
            labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
            datasets: [{
                type: 'line',
                data: [100, 120, 170, 167, 180, 177, 160],
                backgroundColor: 'transparent',
                borderColor: '#007bff',
                pointBorderColor: '#007bff',
                pointBackgroundColor: '#007bff',
                fill: false
            },
            {
                type: 'line',
                data: [60, 80, 70, 67, 80, 77, 100],
                backgroundColor: 'tansparent',
                borderColor: '#ced4da',
                pointBorderColor: '#ced4da',
                pointBackgroundColor: '#ced4da',
                fill: false
            }]
        },
        options: {
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{}],
                xAxes: [{}]
            }
        }
    });
</script>

<style>
    #visitors-chart {
        height: 200px;
    }
</style>

视图文件中的script和style标签会被提取并解析，最后渲染到页面的相应位置，script标签中的JS脚本会在Chart.min.js成功加载之后才执行

最后在控制器中使用这个图表视图：

<?php

use Encore\Admin\Layout\Content;

class ChartController extends Controller
{
    public function index(Content $content)
    {
        return $content
            ->title('Dashboard')
            ->description('介绍')
            ->view('admin.chart', ['title' => '标题..']);
    }
}

访问这个页面显示如下：

资源共用

如果有多个图表页面，每个页面都需要加载Chart.min.js，按照上面的写法每个视图文件都需要显式的通过<script>标签来引用它，这样显然增加了开发和维护成本，在laravel-admin中可以通过下面的方法来预定义依赖，然后在视图中引用。

首先在app/Admin/bootstrap.php定义依赖：

\Encore\Admin\Assets::define('chartjs', [
    'js' => 'https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js',
    //'css' => 'css/path',
]);

然后在视图文件中按照下面的方式使用：

<script require='chartjs'>
    var visitorsChart = new Chart($('#visitors-chart'), {
        ...
    });
</script>

如果有多个依赖, 使用逗号（,）隔开：<script require='chartjs,select2'>

如果页面没有视图文件，比如要在控制器action里面引入：

admin_assets_require('chartjs');

在加载一些前端库的时候，会出现多个文件依赖一个文件的情况，需要按照下面的方式定义:

\Encore\Admin\Assets::define('codemirror', [
    'dep' => [
        'https://cdn.jsdelivr.net/npm/codemirror@5.57.0/lib/codemirror.min.js',
    ],
    'js' => [
        'https://cdn.jsdelivr.net/npm/codemirror@5.57.0/addon/edit/matchbrackets.js',
        'https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/htmlmixed/htmlmixed.js',
        'https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/javascript/javascript.js',
        'https://cdn.jsdelivr.net/npm/codemirror@5.57.0/mode/xml/xml.js',
    ],
    'css' => [
        'https://cdn.jsdelivr.net/npm/codemirror@5.57.0/lib/codemirror.css'
    ],
]);

上面的定义表示，js中的文件将会在dep中的文件加载之后才加载。