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的官方网站](https://adminlte.io/)或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文件的路径，以及其他必要的配置。

```php
// 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的布局要求。

```php
// views/layouts/main.php
<?php
use app\assets\AdminLteAsset;

AdminLteAsset::register($this);
?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

<header class="main-header">
        
        <a href="index2.html" class="logo">
            
            <span class="logo-mini"><b>A</b>LT</span>
            
            <span class="logo-lg"><b>Admin</b>LTE</span>
        </a>
        
        <nav class="navbar navbar-static-top">
            
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>

<div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    
                    
                    
                    
                </ul>
            </div>
        </nav>
    </header>

<aside class="main-sidebar">
        
        <section class="sidebar">
            
            <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>

<ul class="sidebar-menu" data-widget="tree">
                
                <?php echo $this->render('_menu'); ?>
            </ul>
        </section>
        
    </aside>

<div class="content-wrapper">
        
        <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>

<section class="content">
            <?= $content ?>
        </section>
        
    </div>

<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>

<?php $this->endBody() ?>
</body>
</html>
```

#### 4. 实现动态菜单

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

```php
// 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>';
        }
    }
}
?>
```

注意：上面的`generateSubMenu`函数是一个简化的示例，实际情况下你可能需要根据`menuItems`数组的具体结构来调整代码。此外，为了简化示例，`MenuHelper::getMenuItems()`方法并未在代码中定义，你需要根据自己的

该分类下的相关小册推荐：

Shopify应用实战开发

PHP合辑3-数组函数

Laravel(10.x)从入门到精通(十三)

Laravel(10.x)从入门到精通(十三)

Laravel(10.x)从入门到精通(三)

Laravel(10.x)从入门到精通(三)

Workerman高性能框架-GatewayWorker

Workerman高性能框架-GatewayWorker

PHP程序员的设计模式

全面构建Magento2电商系统

全面构建Magento2电商系统

PHP合辑1-基础入门

Laravel(10.x)从入门到精通(十六)

Laravel(10.x)从入门到精通(十六)

Laravel(10.x)从入门到精通(十四)

Laravel(10.x)从入门到精通(十四)

PHP8入门与项目实战（2）

剑指PHP(从入门到进阶)