12.6.7 集成AdminLTE后台主题及菜单展示-Yii2框架从入门到精通(中)

当前位置:　首页>> 技术小册>> Yii2框架从入门到精通(中)

12.6.7 集成AdminLTE后台主题及菜单展示

在Web应用的开发中，后台管理界面的美观与易用性对于提升用户体验至关重要。Yii2框架作为一个高效、灵活的PHP开发框架，支持通过集成第三方主题库来快速搭建美观的后台管理系统。AdminLTE是一个流行的基于Bootstrap的后台管理模板，它提供了丰富的界面组件和预定义的样式，使得开发者能够轻松构建出既美观又实用的后台界面。本章节将详细介绍如何在Yii2项目中集成AdminLTE后台主题，并实现菜单的动态展示。

1. 准备工作

在开始集成之前，请确保你的Yii2项目已经搭建完成，并且具备基本的开发环境（如PHP、Composer、数据库等）。同时，你还需要了解Yii2的模块、视图、布局等基本概念。

2. 引入AdminLTE

2.1 使用Composer安装

虽然AdminLTE通常不直接通过Composer安装（因为它是HTML/CSS/JS的集合，而非PHP库），但你可以通过Composer安装一些封装了AdminLTE的Yii2扩展包，这些扩展包可能已经为你处理好了文件结构和一些基础配置。如果找不到合适的扩展包，你也可以手动下载AdminLTE的官方资源包并整合到你的项目中。

这里，我们假设你选择手动下载AdminLTE。首先，访问AdminLTE的官方网站或GitHub仓库下载最新版本。下载后，解压并将所需文件（如CSS、JS、图片和HTML模板文件）放置到你的Yii2项目的合适位置，比如web/assets/adminlte目录下。

2.2 配置Asset Bundle

为了在Yii2中方便地管理和使用AdminLTE的CSS和JS文件，你需要创建一个Asset Bundle。在assets目录下创建一个新的PHP类文件，例如AdminLteAsset.php，并继承自yii\web\AssetBundle。在该类中，指定AdminLTE的CSS和JS文件的路径，以及其他必要的配置。

// assets/AdminLteAsset.php
namespace app\assets;
use yii\web\AssetBundle;
class AdminLteAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'assets/adminlte/css/adminlte.min.css',
    ];
    public $js = [
        'assets/adminlte/js/adminlte.min.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

3. 布局文件调整

接下来，你需要在Yii2的布局文件中（通常是views/layouts/main.php或类似文件）引入AdminLTE的样式和脚本，并调整HTML结构以符合AdminLTE的布局要求。

// views/layouts/main.php
<?php
use app\assets\AdminLteAsset;
AdminLteAsset::register($this);
?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <!-- Meta tags and title -->
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!-- Header -->
    <header class="main-header">
        <!-- Logo -->
        <a href="index2.html" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>A</b>LT</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>Admin</b>LTE</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->
                    <!-- Notifications: style can be found in dropdown.less -->
                    <!-- Tasks: style can be found in dropdown.less -->
                    <!-- User Account: style can be found in dropdown.less -->
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>Alexander Pierce</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu" data-widget="tree">
                <!-- 动态菜单项将在这里通过PHP代码生成 -->
                <?php echo $this->render('_menu'); ?>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <?= Html::encode($this->title) ?>
                <small>it all starts here</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active"><?= Html::encode($this->title) ?></li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <?= $content ?>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- Footer -->
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.4.0
        </div>
        <strong>Copyright &copy; 2014-2019 <a href="https://adminlte.io">AdminLTE</a>.</strong> All rights
        reserved.
    </footer>
</div>
<!-- ./wrapper -->
<?php $this->endBody() ?>
</body>
</html>

4. 实现动态菜单

为了实现动态菜单，你可以创建一个视图文件（如views/layouts/_menu.php），并在其中通过PHP代码生成菜单项。菜单项的数据可以来源于数据库、配置文件或硬编码的数组。这里以数据库为例，假设你有一个menu表来存储菜单项的信息。

// views/layouts/_menu.php
<?php
use yii\helpers\Html;
// 假设你有一个方法来从数据库获取菜单项
$menuItems = \app\components\MenuHelper::getMenuItems();
foreach ($menuItems as $item) {
    // 根据菜单项的级别和类型生成相应的HTML结构
    if ($item['parent_id'] == 0) { // 假设parent_id为0表示顶级菜单
        echo '<li class="treeview">';
        echo Html::a($item['label'], '#' . $item['url'], ['class' => 'treeview-link']);
        echo '<ul class="treeview-menu">';
        // 递归调用以生成子菜单项
        generateSubMenu($item['id'], $menuItems);
        echo '</ul>';
        echo '</li>';
    }
}
function generateSubMenu($parentId, $menuItems) {
    foreach ($menuItems as $item) {
        if ($item['parent_id'] == $parentId) {
            echo '<li>';
            echo Html::a($item['label'], '#' . $item['url']);
            if (isset($item['children']) && count($item['children']) > 0) {
                echo '<ul class="treeview-menu">';
                generateSubMenu($item['id'], $item['children']);
                echo '</ul>';
            }
            echo '</li>';
        }
    }
}
?>