静态资源

未匹配的标注

静态资源加载

Dcat Admin支持了js脚本按需加载的功能,开发者只需在控制器中或其他任意位置(包括view)中引入需要用到的js组件即可,而无需在项目初始化时引入所有的js组件。

更改静态资源域名

打开配置文件config/admin.php,找到assets_server参数进行更改即可;也可以在.env中加上

ADMIN_ASSETS_SERVER=http://xxx.com

注册路径别名

打开app/Admin/bootstrap.php,然后加入以下代码

Admin::asset()->alias('@my-name1', 'assets/admin1');
Admin::asset()->alias('@my-name2', 'assets/admin2');

// 也可以批量注册
Admin::asset()->alias([
    '@my-name1' => 'assets/admin1',
    '@my-name2' => 'assets/admin2',
]);

使用别名

Admin::js('@my-name1/index.js');
Admin::css('@my-name1/index.css');

注册组件

当某个组件的jscss文件比较多的话,我们可以把这些静态资源文件统一注册成一个组件,这样使用的时候会更方便。打开app/Admin/bootstrap.php,然后加入以下代码

Admin::asset()->alias('@editor-md', [
    'js' => [
        // 支持使用路径别名
        '@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' => [
        '@admin/dcat/plugins/editor-md/css/editormd.preview.min.css',
        '@admin/dcat/extra/markdown.css',
    ],
]);

使用

Admin::requireAssets(['@editor-md']);

如果你只需要加载这个组件的jscss,并不想加载所有文件,那么可以用以下方法

// 只加载js文件
Admin::js('@editor-md');

// 只加载css文件
Admin::css('@editor-md');

使用动态参数

use Dcat\Admin\Admin;

// 注册前端组件别名
// {lang} 为动态参数
Admin::asset()->alias('@test', [
    'js' => ['/vendor/test/js/{lang}.min.js'],
]);

// {lang} 会被替换为 zh_CN
Admin::requireAssets('@test', ['lang' => 'zh_CN']);
// 也可以这样使用
Admin::requireAssets('@test?lang=zh_CN');

加载js脚本

Admin::js方法可以引入js脚本,使用如下:

class UserController extend Controller
{
    public function index()
    {
        Admin::js('/assets/js/index.js');

        Admin::js([
            '/assets/js/index2.js'
        ]);
    }
}

加载css脚本

Admin::css方法可以引入css脚本,使用如下:

class UserController extend Controller
{
    public function index()
    {
        Admin::css('/assets/css/index.css');

        Admin::css([
            '/assets/css/index2.css'
        ]);
    }
}

动态添加js代码

Admin::script方法可以动态添加js代码,使用如下:

    public function index()
    {
        Admin::script(
            <<<JS
    console.log('Hello world!');
JS            
        );
    }

动态添加css代码

Admin::style方法可以动态添加css代码,使用如下:

    public function index()
    {
        Admin::style(
            <<<CSS
    body {
        color: #333;
    }
CSS            
        );
    }

在模板中引入静态资源

在模板中手动引入静态资源需要使用admin_asset函数:

// 引入css
<link rel="stylesheet" href="{{ admin_asset("vendor/dcat-admin/dcat-admin/main.min.css") }}">

// 引入js
<script src="{{ admin_asset('vendor/dcat-admin/dcat-admin/main.min.js')}}"></script>

在模板中添加js代码

要在模板中添加的js代码需要放在Dcat.ready方法内执行,这样才能保证你的js代码在所有js脚本加载完成之后执行。

<script>
Dcat.ready(function () {
   console.log('所有js都加载完成了'); 
});
</script>

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~