视图与自定义页面
<h1>视图与自定义页面</h1>
<h2>视图</h2>
<p>在<code>Dcat Admin</code>中我们可以用<code>admin_view</code>函数渲染视图，这个功能借鉴了<code>vue</code>的设计思想，可以把<code>HTML</code>、<code>CSS</code>和<code>JS</code>代码写在同一个模板文件中，让代码分层更清晰更简洁易读，如</p>
<pre><code class="language-html">&lt;div class=&quot;my-class&quot;&gt;...&lt;/div&gt;
&lt;style&gt;
.my-class {
color: blue;
}
&lt;/style&gt;
&lt;script require=&quot;@test1,@test2&quot; init=&quot;.my-class&quot;&gt;
$this.css({background: 'red'})
&lt;/script&gt;</code></pre>
<p>在<code>php</code>中渲染这个视图</p>
<pre><code class="language-php">public function index(Content $content)
{
return $content-&gt;body(admin_view('...'));
}</code></pre>
<h4>示例解析</h4>
<p>上面示例中的代码，其实相当于下面的代码</p>
<pre><code class="language-html">&lt;div class=&quot;my-class&quot;&gt;...&lt;/div&gt;</code></pre>
<pre><code class="language-php">public function index(Content $content)
{
admin_require_assets(['@test1', '@test2']);
admin_style('.my-class {
color: blue;
}');
admin_script(
&lt;&lt;&lt;JS
Dcat.init('.my-class', function (\$this, id) {
\$this.css({background: 'red'})
});
JS
);
return $content-&gt;body(view('...'));
}</code></pre>
<p>很显然，使用<code>admin_view</code>渲染视图会让你的代码更简洁易读，关于<code>Dcat.init</code>以及<code>script</code>标签中的<code>init</code>和<code>require</code>属性的用法，请参考文档<a href="assets.md">静态资源</a>以及<a href="js.md#init">动态监听元素生成 (init)</a>章节。</p>
<h2>自定义页面</h2>
<p>在<code>Dcat Admin</code>中构建自定义页面非常简单，可以参考如下两个例子</p>
<h3>示例1</h3>
<p>> {tip} <code>Dcat Admin</code>构建的是一个单页应用，加载的<code>JS</code>脚本只会执行一次，所以初始化操作不能直接放在<code>JS</code>脚本中，应该使用<code>Admin::script</code>方法载入。</p>
<pre><code class="language-php">&lt;?php
namespace App\Admin\Pages;
use Illuminate\Contracts\Support\Renderable;
class MyPage implements Renderable
{
public function render()
{
return admin_view('admin.pages.my-page');
}
}</code></pre>
<p>视图<code>admin.pages.my-page</code>，注意视图代码里面不要包含<code>&lt;body&gt;</code>和<code>&lt;html&gt;</code>等标签</p>
<pre><code class="language-html">&lt;div class=&quot;my-class&quot;&gt;
&lt;h3&gt;自定义页面演示&lt;/h3&gt;
&lt;/div&gt;
&lt;!--
引入页面所需的静态资源，这里会按需加载
js脚本不能直接包含初始化操作，否则页面刷新后无效
--&gt;
{!! admin_js(['xxx/js/page.min.js']) !!}
{!! admin_css(['xxx/js/page.min.css']) !!}
&lt;script init=&quot;.my-class&quot;&gt;
// js代码也可以放在模板里面
console.log('所有JS脚本都加载完了!!!');
$this.on('click', function () {
...
});
&lt;/script&gt;</code></pre>
<p>使用</p>
<pre><code class="language-php">public function index(Content $content)
{
return $content-&gt;body(new MyPage());
}</code></pre>
<h3>示例2</h3>
<p>后台的仪表盘页面<code>/admin</code>，也可以看做是一个自定义页面，代码实现如下</p>
<pre><code class="language-php">public function index(Content $content)
{
return $content
-&gt;header('Dashboard')
-&gt;description('Description...')
-&gt;body(function (Row $row) {
$row-&gt;column(6, function (Column $column) {
$column-&gt;row(Dashboard::title());
$column-&gt;row(new Examples\Tickets());
});
$row-&gt;column(6, function (Column $column) {
$column-&gt;row(function (Row $row) {
$row-&gt;column(6, new Examples\NewUsers());
$row-&gt;column(6, new Examples\NewDevices());
});
$column-&gt;row(new Examples\Sessions());
$column-&gt;row(new Examples\ProductOrders());
});
});
}</code></pre>