静态资源加载
<h1>静态资源加载</h1>
<p><code>Dcat Admin</code>支持了<code>js</code>脚本按需加载的功能，开发者只需在控制器中或其他任意位置（包括<code>view</code>）中引入需要用到的<code>js</code>组件即可，而无需在项目初始化时引入所有的<code>js</code>组件。</p>
<h3>更改静态资源域名</h3>
<p>打开配置文件<code>config/admin.php</code>，找到<code>assets_server</code>参数进行更改即可；也可以在<code>.env</code>中加上</p>
<pre><code class="language-dotenv">ADMIN_ASSETS_SERVER=http://xxx.com</code></pre>
<h3>注册路径别名</h3>
<p>打开<code>app/Admin/bootstrap.php</code>，然后加入以下代码</p>
<pre><code class="language-php">Admin::asset()-&gt;alias('@my-name1', 'assets/admin1');
Admin::asset()-&gt;alias('@my-name2', 'assets/admin2');
// 也可以批量注册
Admin::asset()-&gt;alias([
'@my-name1' =&gt; 'assets/admin1',
'@my-name2' =&gt; 'assets/admin2',
]);</code></pre>
<p>使用别名</p>
<pre><code class="language-php">Admin::js('@my-name1/index.js');
Admin::css('@my-name1/index.css');</code></pre>
<h3>注册组件</h3>
<p>当某个组件的<code>js</code>和<code>css</code>文件比较多的话，我们可以把这些静态资源文件统一注册成一个组件，这样使用的时候会更方便。打开<code>app/Admin/bootstrap.php</code>，然后加入以下代码</p>
<pre><code class="language-php">Admin::asset()-&gt;alias('@editor-md', [
'js' =&gt; [
// 支持使用路径别名
'@admin/dcat/plugins/editor-md/lib/raphael.min.js',
'@admin/dcat/plugins/editor-md/lib/marked.min.js',
'@admin/dcat/plugins/editor-md/lib/prettify.min.js',
'@admin/dcat/plugins/editor-md/lib/jquery.flowchart.min.js',
'@admin/dcat/plugins/editor-md/editormd.min.js',
],
'css' =&gt; [
'@admin/dcat/plugins/editor-md/css/editormd.preview.min.css',
'@admin/dcat/extra/markdown.css',
],
]);</code></pre>
<p>使用</p>
<pre><code class="language-php">Admin::requireAssets(['@editor-md']);</code></pre>
<p>如果你只需要加载这个组件的<code>js</code>或<code>css</code>，并不想加载所有文件，那么可以用以下方法</p>
<pre><code class="language-php">// 只加载js文件
Admin::js('@editor-md');
// 只加载css文件
Admin::css('@editor-md');</code></pre>
<p>使用动态参数</p>
<pre><code class="language-php">use Dcat\Admin\Admin;
// 注册前端组件别名
// {lang} 为动态参数
Admin::asset()-&gt;alias('@test', [
'js' =&gt; ['/vendor/test/js/{lang}.min.js'],
]);
// {lang} 会被替换为 zh_CN
Admin::requireAssets('@test', ['lang' =&gt; 'zh_CN']);
// 也可以这样使用
Admin::requireAssets('@test?lang=zh_CN');</code></pre>
<h3>加载js脚本</h3>
<p><code>Admin::js</code>方法可以引入<code>js</code>脚本，使用如下：</p>
<pre><code class="language-php">class UserController extend Controller
{
public function index()
{
Admin::js('/assets/js/index.js');
Admin::js([
'/assets/js/index2.js'
]);
}
}</code></pre>
<h3>加载css脚本</h3>
<p><code>Admin::css</code>方法可以引入<code>css</code>脚本，使用如下：</p>
<pre><code class="language-php">class UserController extend Controller
{
public function index()
{
Admin::css('/assets/css/index.css');
Admin::css([
'/assets/css/index2.css'
]);
}
}</code></pre>
<h3>动态添加js代码</h3>
<p><code>Admin::script</code>方法可以动态添加<code>js</code>代码，使用如下：</p>
<pre><code class="language-php"> public function index()
{
Admin::script(
&lt;&lt;&lt;JS
console.log('Hello world!');
JS
);
}</code></pre>
<h3>动态添加css代码</h3>
<p><code>Admin::style</code>方法可以动态添加<code>css</code>代码，使用如下：</p>
<pre><code class="language-php"> public function index()
{
Admin::style(
&lt;&lt;&lt;CSS
body {
color: #333;
}
CSS
);
}</code></pre>
<h3>在模板中引入静态资源</h3>
<p>在模板中手动引入静态资源需要使用<code>admin_asset</code>函数：</p>
<pre><code class="language-html">// 引入css
&lt;link rel=&quot;stylesheet&quot; href=&quot;{{ admin_asset(&quot;vendor/dcat-admin/dcat-admin/main.min.css&quot;) }}&quot;&gt;
// 引入js
&lt;script src=&quot;{{ admin_asset('vendor/dcat-admin/dcat-admin/main.min.js')}}&quot;&gt;&lt;/script&gt;</code></pre>
<h3>在模板中添加js代码</h3>
<p>要在模板中添加的<code>js</code>代码需要放在<code>Dcat.ready</code>方法内执行，这样才能保证你的<code>js</code>代码在所有<code>js</code>脚本加载完成之后执行。</p>
<pre><code class="language-html">&lt;script&gt;
Dcat.ready(function () {
console.log('所有js都加载完成了');
});
&lt;/script&gt;</code></pre>