视图与自定义页面

视图

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

  1. <div class="my-class">...</div>
  3. <style>
  4.     .my-class {
  5.         color: blue;
  6.     }
  7. </style>
  9. <script require="@test1,@test2" init=".my-class">
  10.     $this.css({background: 'red'})
  11. </script>

在php中渲染这个视图

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

示例解析

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

  1. <div class="my-class">...</div>
  1. public function index(Content $content)
  2. {
  3.     admin_require_assets(['@test1', '@test2']);
  5.     admin_style('.my-class {
  6.         color: blue;
  7.     }');
  9.     admin_script(
  10.         <<<JS
  11. Dcat.init('.my-class', function (\$this, id) {
  12.     \$this.css({background: 'red'})
  13. });
  14. JS
  15.     );
  17.     return $content->body(view('...'));
  18. }

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

自定义页面

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

示例1

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

  1. <?php
  3. namespace App\Admin\Pages;
  5. use Illuminate\Contracts\Support\Renderable;
  7. class MyPage implements Renderable
  8. {
  9.     public function render()
  10.     {
  11.         return admin_view('admin.pages.my-page');
  12.     }
  13. }

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

  1. <div class="my-class">
  2.   <h3>自定义页面演示</h3>
  3. </div>
  5. <!-- 
  6.      引入页面所需的静态资源，这里会按需加载
  7.     js脚本不能直接包含初始化操作，否则页面刷新后无效 
  8. -->
  9. {!! admin_js(['xxx/js/page.min.js']) !!}
  10. {!! admin_css(['xxx/js/page.min.css']) !!}
  12. <script init=".my-class">
  13.     // js代码也可以放在模板里面
  14.     console.log('所有JS脚本都加载完了!!!');
  16.     $this.on('click', function () {
  17.         ...
  18.     });
  19. </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. }