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());
});
});
}
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：