视图与自定义页面

未匹配的标注

视图与自定义页面

视图

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

<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标签中的initrequire属性的用法,请参考文档静态资源以及动态监听元素生成 (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());
            });
        });
}

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 2
发起讨论 查看所有版本


maxsky
Martin567
admin_view
0 个点赞 | 1 个回复 | 问答 | 课程版本 2.x