视图与自定义页面

未匹配的标注

视图与自定义页面

视图

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 网站上。

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~