T-DOC

视图与自定义页面

Dcat Admin 中文文档 /

视图与自定义页面

视图

在Dcat Admin中我们可以用admin_view函数渲染视图，这个功能借鉴了vue的设计思想，可以把HTML、CSS和JS代码写在同一个模板文件中，让代码分层更清晰更简洁易读，如

<div class="my-class">...</div>

<style>
    .my-class {
        color: blue;
    }
</style>

<script require="@test1,@test2" init=".my-class">
    $this.css({background: 'red'})
</script>

在php中渲染这个视图

public function index(Content $content)
{
    return $content->body(admin_view('...'));
}

示例解析

上面示例中的代码，其实相当于下面的代码

<div class="my-class">...</div>

public function index(Content $content)
{
    admin_require_assets(['@test1', '@test2']);

    admin_style('.my-class {
        color: blue;
    }');

    admin_script(
        <<<JS
Dcat.init('.my-class', function (\$this, id) {
    \$this.css({background: 'red'})
});
JS
    );

    return $content->body(view('...'));
}

很显然，使用admin_view渲染视图会让你的代码更简洁易读，关于Dcat.init以及script标签中的init和require属性的用法，请参考文档静态资源以及动态监听元素生成 (init)章节。

自定义页面

在Dcat Admin中构建自定义页面非常简单，可以参考如下两个例子

示例1

{tip} Dcat Admin构建的是一个单页应用，加载的JS脚本只会执行一次，所以初始化操作不能直接放在JS脚本中，应该使用Admin::script方法载入。

<?php

namespace App\Admin\Pages;

use Illuminate\Contracts\Support\Renderable;

class MyPage implements Renderable
{
    public function render()
    {
        return admin_view('admin.pages.my-page');
    }
}

视图admin.pages.my-page，注意视图代码里面不要包含<body>和<html>等标签

<div class="my-class">
  <h3>自定义页面演示</h3>
</div>

<!-- 
     引入页面所需的静态资源，这里会按需加载
    js脚本不能直接包含初始化操作，否则页面刷新后无效 
-->
{!! admin_js(['xxx/js/page.min.js']) !!}
{!! admin_css(['xxx/js/page.min.css']) !!}

<script init=".my-class">
    // js代码也可以放在模板里面
    console.log('所有JS脚本都加载完了!!!');

    $this.on('click', function () {
        ...
    });
</script>

使用

public function index(Content $content)
{
    return $content->body(new MyPage());
}

示例2

后台的仪表盘页面/admin，也可以看做是一个自定义页面，代码实现如下

public function index(Content $content)
{
    return $content
        ->header('Dashboard')
        ->description('Description...')
        ->body(function (Row $row) {
            $row->column(6, function (Column $column) {
                $column->row(Dashboard::title());
                $column->row(new Examples\Tickets());
            });

            $row->column(6, function (Column $column) {
                $column->row(function (Row $row) {
                    $row->column(6, new Examples\NewUsers());
                    $row->column(6, new Examples\NewDevices());
                });

                $column->row(new Examples\Sessions());
                $column->row(new Examples\ProductOrders());
            });
        });
}