Yii2 整合 Color Admin 后台 UI 库

最新推荐文章于 2024-04-23 10:01:35 发布

外来物种

最新推荐文章于 2024-04-23 10:01:35 发布

阅读量378

点赞数

分类专栏：后端技术文章标签： php web yii

本文链接：https://blog.csdn.net/dmlk31/article/details/110791951

版权

后端技术专栏收录该内容

30 篇文章 0 订阅

订阅专栏

▪ 环境

基于 Yii2 高级模板和 Color Admin 2.2

▪ 后台 UI 库

通常做后台的时候我们都会选择一个成熟的 UI 库，既省心又省力：

以上都是一些优秀的 UI 开源库，你随时通过下载、GitHub 甚至于 Composer 等方式获取。

相比我更喜欢 Color Admin；但因为它是收费的，所以基本上目前你无通过 GitHub 和 Composer 方式获取，只能通过付费下载的方式获取。

接下来我将详解一下如果将 Color Admin UI 库整合到 Yii2 中的 后台模块(backend)。

▪ Yii2 的资源管理（Assets）

在正式编码前，你需要大致了解 Yii2 的资源管理机制，可以直接访问官网的权威手册进行查阅。

▪ Yii2 整合 Color Admin 库

1. 引入源码

由于 Color Admin 无法通过 Composer 下载并管理，也就说无法直接安装到 /vendor 目录，所有我们就在根目录下新建一个 library 用于存放那些无法通过 Composer 安装的第三方库。

我们将 Color Admin 源码放到以下目录：

/library/ColorAdmin/V2.2

2. 新建 Color Admin 资源包类

在 /common/config/bootstrap.php 文件里新建 library 目录的别名，内容如下：

Yii::setAlias('@library', dirname(dirname(__DIR__)).'/library');

新增资源包类文件 /backend/assets/ColorAdminAsset.php，内容如下：

<?php

namespace backend\assets;

use Yii;
use yii\web\AssetBundle;

/**
 * Color Admin 资源包
 */
class ColorAdminAsset extends AssetBundle
{
    public $baseUrl = '@web';
    public $sourcePath = '@library/ColorAdmin/V2.2';

    public $js = [
        // 基础脚本
        'plugins/pace/pace.min.js',
        'plugins/jquery/jquery-1.9.1.min.js',

        'plugins/bootstrap/js/bootstrap.min.js',
        'plugins/jquery/jquery-migrate-1.1.0.min.js',
        'plugins/jquery-ui/ui/minified/jquery-ui.min.js',

        'crossbrowserjs/html5shiv.js',
        'crossbrowserjs/respond.min.js',
        'crossbrowserjs/excanvas.min.js',

        'plugins/jquery-cookie/jquery.cookie.js',
        'plugins/slimscroll/jquery.slimscroll.min.js',

        // 消息通知
        'plugins/gritter/js/jquery.gritter.js',

        // 时间选择器
        'plugins/bootstrap-datepicker/js/bootstrap-datepicker.js',
        'plugins/bootstrap-datepicker/js/locales/bootstrap-datepicker.xxxxxxxxxx.js',

        // 下拉框
        'plugins/bootstrap-select-1.10/bootstrap-select.min.js',

        // 初始化脚本
        'js/apps.min.js',
        'js/form-slider-switcher.demo.min.js',
    ];

    public $css = [
        // 基础样式
        'css/style-responsive.min.css',

        'css/animate.min.css',
        'css/theme/default.css',

        'plugins/jquery-ui/themes/base/minified/jquery-ui.min.css',
        'plugins/bootstrap/css/bootstrap.css',
        'plugins/font-awesome/css/font-awesome.min.css',

        // 消息通知
        'plugins/gritter/css/jquery.gritter.css',

        // 时间选择器
        'plugins/bootstrap-datepicker/css/datepicker.css',
        'plugins/bootstrap-datepicker/css/datepicker3.css',

        // 下拉框
        'plugins/bootstrap-select-1.10/bootstrap-select.min.css',
    ];

    public $depends = [
    ];
}

以上配置代码中除了引入 Color Admin 基础脚本样式，还默认引入了常用的几个 UI 组件部分。

3. 使用 Color Admin 资源包类

资源包类建立完成后，那么接下来就需要把 Color Admin 的脚本和样式引入到视图中使用了，编辑 /backend/view/layouts/main.php，添加如下内容：

use backend\assets\ColorAdminAsset;
ColorAdminAsset::register($this);

至此，Color Admin 就整合成功了；打开页面查看源码可以发现 Color Admin 资源包类 ColorAdminAsset 中定义的脚本和样式已全部加载。

X. 如何优雅的按需加载 Color Admin 的其他插件

在 ColorAdminAsset 的成员 $js 和 $css 我们默认加载了 Color Admin 最基础的脚本和样式，实际开发中我们根据页面需要加载不同的插件，而之前的代码无法实现这种按需加载。修改代码如下：

<?php

namespace backend\assets;

use Yii;
use yii\web\AssetBundle;

/**
 * Color Admin 资源包
 */
class ColorAdminAsset extends AssetBundle
{
    /**
     * 资源网址根路径
     *
     * @var string
     */
    public $baseUrl = '@web';

    /**
     * 资源物理源路径
     *
     * @var string
     */
    public $sourcePath = '@library/ColorAdmin/V2.2';

    /**
     * 脚本集
     *
     * @var array
     */
    public $js = [
        // 基础脚本
        'plugins/pace/pace.min.js',

        // 'plugins/jquery/jquery-1.9.1.min.js',
        'plugins/jquery-ui/ui/minified/jquery-ui.min.js',

        'plugins/bootstrap/js/bootstrap.min.js',
        'plugins/jquery/jquery-migrate-1.1.0.min.js',

        'crossbrowserjs/html5shiv.js',
        'crossbrowserjs/respond.min.js',
        'crossbrowserjs/excanvas.min.js',

        'plugins/jquery-cookie/jquery.cookie.js',
        'plugins/slimscroll/jquery.slimscroll.min.js',

        // 消息通知
        'plugins/gritter/js/jquery.gritter.js',

        // 时间选择器
        'plugins/bootstrap-datepicker/js/bootstrap-datepicker.js',
        'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.{$language}.min.js',

        // 下拉框
        'plugins/bootstrap-select-1.10/bootstrap-select.min.js',

        // 初始化脚本
        'js/apps.min.js',
        'js/form-slider-switcher.demo.min.js',
    ];

    /**
     * 样式集
     *
     * @var array
     */
    public $css = [
        // 基础样式
        'plugins/jquery-ui/themes/base/minified/jquery-ui.min.css',
        'plugins/bootstrap/css/bootstrap.css',
        'plugins/font-awesome/css/font-awesome.min.css',

        'css/animate.min.css',
        'css/style.min.css',
        'css/style-responsive.min.css',
        'css/theme/default.css',

        // 消息通知
        'plugins/gritter/css/jquery.gritter.css',

        // 时间选择器
        'plugins/bootstrap-datepicker/css/datepicker.css',
        'plugins/bootstrap-datepicker/css/datepicker3.css',

        // 下拉框
        'plugins/bootstrap-select-1.10/bootstrap-select.min.css',
    ];

    /**
     * 依赖集
     *
     * @var array
     */
    public $depends = [
    ];
    
    /**
     * 插件集
     * 插件集中插件默认不会自动启用
     * 如需启用，需要将插件名称赋值到视图中的 layoutColorAdminPlugins 变量
     *
     * @var array
     */
    public $plugins = [
        // 插件：苹果风格复选框
        'switchery' => [
            'js'  => ['plugins/switchery/switchery.min.js'],
            'css' => ['plugins/switchery/switchery.min.css'],
        ]
    ];

    /**
     * 注册资源文件
     *
     * @param \yii\web\View $view the view that the asset files are to be registered with.
     */
    public function registerAssetFiles( $view )
    {
        // 插件启用
        foreach( (array)$view->params['layoutColorAdminPlugins'] AS $plugin ){
            $this->js = array_merge($this->js, (array)$this->plugins[$plugin]['js']);
            $this->css = array_merge($this->css, (array)$this->plugins[$plugin]['css']);
        }

        // 动态变量 - 语言
        foreach( $this->js AS $i=>$v ) $this->js[$i] = str_replace('{$language}', Yii::$app->language, $v);
        foreach( $this->css AS $i=>$v ) $this->css[$i] = str_replace('{$language}', Yii::$app->language, $v);

        // 注册资源
        parent::registerAssetFiles($view);
    }
}

新增了插件集，根据实际使用需要将用到的插件全部放入到 $p l u g i n s 成员变量中，然后通过在控制器中设置视图的参数变量来加载插件：$ this->view->params[‘layoutColorAdminPlugins’] = array(‘switchery’);
支持插件语言包功能：部分插件会有国际化的语言包，所以在注册资源文件时我们将自动根据当前应用的语言来加载插件语言包

外来物种

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Yii2 整合 Color Admin 后台 UI 库

▪ 环境基于 Yii2 高级模板和 Color Admin 2.2▪ 后台 UI 库通常做后台的时候我们都会选择一个成熟的 UI 库，既省心又省力：BootstrapZUIamazeUI…以上都是一些优秀的 UI 开源库，你随时通过下载、GitHub 甚至于 Composer 等方式获取。相比我更喜欢 Color Admin；但因为它是收费的，所以基本上目前你无通过 GitHub 和 Composer 方式获取，只能通过付费下载的方式获取。接下来我将详解一下如果将 Color Ad
复制链接

扫一扫