自定义页面

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

示例1

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

  1. <?php
  3. use Illuminate\Contracts\Support\Renderable;
  4. use Dcat\Admin\Admin;
  6. class MyPage implements Renderable
  7. {
  8.     // 定义页面所需的静态资源，这里会按需加载
  9.     public static $js = [
  10.          // js脚本不能直接包含初始化操作，否则页面刷新后无效
  11.         'xxx/js/page.min.js',
  12.     ];
  13.     public static $css = [
  14.         'xxx/css/page.min.css',
  15.     ];
  17.     public function script()
  18.     {
  19.         return <<<JS
  20.         console.log('所有JS脚本都加载完了');
  21.         // 初始化操作写在这里
  22. JS;        
  23.     }
  25.     public function render()
  26.     {
  27.         // 在这里可以引入你的js或css文件
  28.         Admin::js(static::$js);
  29.         Admin::css(static::$css);
  31.         // 需要在页面执行的JS代码
  32.         // 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行
  33.         Admin::script($this->script());
  35.         return view('admin.pages.my-page')->render();
  36.     }
  37. }

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

  1. <div>
  2.   <h3>自定义页面演示</h3>
  3. </div>
  4. <script>
  5. Dcat.ready(function () {
  6.     // js代码也可以放在模板里面
  7.     console.log('所有JS脚本都加载完了!!!');
  8. });
  9. </script>

使用

  1. public function index(Content $content)
  2. {
  3.     return $content->body(new MyPage());
  4. }

示例2

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

  1. public function index(Content $content)
  2. {
  3.     return $content
  4.         ->header('Dashboard')
  5.         ->description('Description...')
  6.         ->body(function (Row $row) {
  7.             $row->column(6, function (Column $column) {
  8.                 $column->row(Dashboard::title());
  9.                 $column->row(new Examples\Tickets());
  10.             });
  12.             $row->column(6, function (Column $column) {
  13.                 $column->row(function (Row $row) {
  14.                     $row->column(6, new Examples\NewUsers());
  15.                     $row->column(6, new Examples\NewDevices());
  16.                 });
  18.                 $column->row(new Examples\Sessions());
  19.                 $column->row(new Examples\ProductOrders());
  20.             });
  21.         });
  22. }