隨著 Laravel 應(yīng)用程序的發(fā)展，管理導(dǎo)航菜單可能會變得具有挑戰(zhàn)性，特別是對于基于角色的訪問控制等動態(tài)元素。這篇博文探討了如何使用菜單生成器系統(tǒng)簡化和構(gòu)建菜單，使它們更易于維護(hù)、擴(kuò)展和擴(kuò)展。

問題

在許多 Laravel 項目中，Blade 模板使用條件處理菜單可見性：

@can('viewAdmin')
    <a href="{{ route('administration.index') }}">
        {{ __('Administration') }}
    </a>
@endcan

雖然這種方法適用于簡單的應(yīng)用程序，但隨著菜單數(shù)量的增加，它會變得混亂且難以管理。

解決方案

菜單生成器系統(tǒng)將菜單邏輯封裝到可重用的類中，改進(jìn)：

1. 可維護(hù)性：集中菜單定義。
2. 可擴(kuò)展性：根據(jù)角色或權(quán)限動態(tài)生成菜單。
3. 可重用性：跨視圖共享菜單。

通過贊助我的工作來支持我為開發(fā)者社區(qū)賦能的使命——您的貢獻(xiàn)幫助我構(gòu)建和分享有價值的工具、見解和資源：在此處了解更多信息。

逐步實施

1.為 viewAdmin 定義一個 Gate

要控制對管理菜單的訪問，請在 AuthServiceProvider 中定義 viewAdmin 門：

use Illuminate\Support\Facades\Gate;
use App\Models\User;

class AuthServiceProvider extends ServiceProvider
{
    public function boot()
    {
        $this->registerPolicies();

        Gate::define('viewAdmin', function (User $user) {
            return $user->hasRole('admin'); // Replace with your app's role-checking logic
        });
    }
}

2.創(chuàng)建 MenuItem 類

MenuItem 類定義菜單項的所有屬性，例如標(biāo)簽、URL、圖標(biāo)和可見性：

<?php

namespace App\Actions\Builder;

use CleaniqueCoders\Traitify\Contracts\Builder;
use InvalidArgumentException;

class MenuItem implements Builder
{
    private string $label;
    private string $url;
    private string $target = '_self';
    private array $attributes = [];
    private array $children = [];
    private string $icon = 'o-squares-2x2';
    private ?string $description = null;
    private ?string $tooltip = null;
    private $visible = true;
    private array $output = [];

    public function setLabel(string $label): self
    {
        $this->label = $label;

        return $this;
    }

    public function setUrl(string $url): self
    {
        $this->url = $url;

        return $this;
    }

    public function setTarget(string $target): self
    {
        $this->target = $target;

        return $this;
    }

    public function addAttribute(string $key, string $value): self
    {
        $this->attributes[$key] = $value;

        return $this;
    }

    public function addChild(MenuItem $child): self
    {
        $this->children[] = $child;

        return $this;
    }

    public function setIcon(string $icon): self
    {
        $this->icon = $icon;

        return $this;
    }

    public function setDescription(string $description): self
    {
        $this->description = $description;

        return $this;
    }

    public function setTooltip(string $tooltip): self
    {
        $this->tooltip = $tooltip;

        return $this;
    }

    public function setVisible($visible): self
    {
        if (! is_bool($visible) && ! is_callable($visible)) {
            throw new InvalidArgumentException('The visible property must be a boolean or a callable.');
        }

        $this->visible = $visible;

        return $this;
    }

    public function isVisible(): bool
    {
        return is_callable($this->visible) ? call_user_func($this->visible) : $this->visible;
    }

    public function build(): self
    {
        $this->output = [
            'label' => $this->label,
            'url' => $this->url,
            'target' => $this->target,
            'attributes' => $this->attributes,
            'icon' => $this->icon,
            'description' => $this->description,
            'tooltip' => $this->tooltip,
            'children' => array_filter(
                array_map(fn (MenuItem $child) => $child->build()->toArray(), $this->children),
                fn (array $child) => ! empty($child) 
            ),
        ];

        return $this;
    }

    public function toArray(): array
    {
        return $this->output;
    }

    public function toJson(int $options = 0): string
    {
        return json_encode($this->toArray(), $options, 512);
    }
}

3.創(chuàng)建菜單生成器

菜單構(gòu)建器動態(tài)解析和構(gòu)造菜單：

namespace App\Actions\Builder;

class Menu
{
    public static function make()
    {
        return new self;
    }

    public function build(string $builder)
    {
        $class = match ($builder) {
            'navbar' => Navbar::class,
            'sidebar' => Sidebar::class,
            'administration' => Administration::class,
            default => Navbar::class,
        };

        $builder = new $class;
        return $builder->build();
    }
}

使用輔助函數(shù)訪問菜單：

<?php

use App\Actions\Builder\Menu;

if (! function_exists('menu')) {
    function menu(string $builder)
    {
        return Menu::make()->build($builder)->menus();
    }
}

4.管理菜單

在 Administration 類中定義特定于管理的菜單項：

<?php

namespace App\Actions\Builder\Menu;

use App\Actions\Builder\MenuItem;
use CleaniqueCoders\Traitify\Contracts\Builder;
use CleaniqueCoders\Traitify\Contracts\Menu;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Gate;

class Administration implements Builder, Menu
{
    private Collection $menus;

    public function menus(): Collection
    {
        return $this->menus;
    }

    public function build(): self
    {
        $this->menus = collect([
            (new MenuItem)
                ->setLabel(__('Issues'))
                ->setUrl(url(config('telescope.path')))
                ->setTarget('_blank')
                ->setVisible(fn () => Gate::allows('viewTelescope'))
                ->setTooltip(__('View Telescope issues'))
                ->setDescription(__('Access application issues using Laravel Telescope'))
                ->setIcon('o-bug'), // Heroicon outline for a bug

            (new MenuItem)
                ->setLabel(__('Queues'))
                ->setUrl(url(config('horizon.path')))
                ->setTarget('_blank')
                ->setVisible(fn () => Gate::allows('viewHorizon'))
                ->setTooltip(__('Manage queues'))
                ->setDescription(__('Access Laravel Horizon to monitor and manage queues'))
                ->setIcon('o-cog'), // Heroicon outline for settings/tasks

            (new MenuItem)
                ->setLabel(__('Access Control'))
                ->setUrl(route('security.access-control.index'))
                ->setVisible(fn () => Gate::allows('viewAccessControl'))
                ->setTooltip(__('Manage access control'))
                ->setDescription(__('Define and manage access control rules'))
                ->setIcon('o-lock-closed'), 

            (new MenuItem)
                ->setLabel(__('Users'))
                ->setUrl(route('security.users.index'))
                ->setVisible(fn () => Gate::allows('viewUser'))
                ->setTooltip(__('Manage users'))
                ->setDescription(__('View and manage user accounts'))
                ->setIcon('o-user-group'), 

            (new MenuItem)
                ->setLabel(__('Audit Trail'))
                ->setUrl(route('security.audit-trail.index'))
                ->setVisible(fn () => Gate::allows('viewAudit'))
                ->setTooltip(__('View audit trails'))
                ->setDescription(__('Audit logs for security and activity tracking'))
                ->setIcon('o-document-text'), 
        ])->reject(fn (MenuItem $menu) => ! $menu->isVisible())
            ->map(fn (MenuItem $menu) => $menu->build()->toArray());

        return $this;
    }
}

5.定義路線

為管理頁面添加以下路由配置：

<?php

use Illuminate\Support\Facades\Route;

Route::middleware(['auth:sanctum', 'verified', 'can:viewAdmin'])
    ->as('administration.')
    ->prefix('administration')
    ->group(function () {

        Route::view('/', 'administration.index')->name('index');

    });

6.在刀片模板中的用法

導(dǎo)航菜單 (navigation-menu.blade.php):

@can('viewAdmin')
    <a href="{{ route('administration.index') }}">
        <x-icon name="o-computer-desktop" />
        {{ __('Administration') }}
    </a>
@endcan

管理菜單 (administration/index.blade.php):

<x-app-layout>
    <x-slot name="header">{{ __('管理') }}</x-slot>;
    <div>




<hr>

<p><strong>輸出</strong></p>

<p>這是您可以獲得的最終輸出：</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173418649412401.jpg" class="lazy" alt="Building Dynamic and Maintainable Menus in Laravel"></p>
<blockquote>
<p>通過贊助我的工作來支持我為開發(fā)者社區(qū)賦能的使命——您的貢獻(xiàn)幫助我構(gòu)建和分享有價值的工具、見解和資源：在此處了解更多信息。</p>
</blockquote>


<hr>

<h3>
  
  
  <strong>結(jié)論</strong>
</h3>

<p>這個<strong>菜單生成器系統(tǒng)</strong>通過以下方式簡化了 Laravel 中的導(dǎo)航管理：</p>

<ol>
<li>集中菜單定義以提高可維護(hù)性。</li>
<li>使用角色或權(quán)限動態(tài)控制菜單可見性。</li>
<li>跨視圖和布局重用菜單邏輯。</li>
</ol>

<p>通過采用這種方法，即使在復(fù)雜的應(yīng)用程序中，您也可以無縫擴(kuò)展您的導(dǎo)航系統(tǒng)。 </p>

<p>您可能想從數(shù)據(jù)庫加載菜單詳細(xì)信息并構(gòu)建您想要的菜單。但對我來說，這已經(jīng)足夠好了。我沒有項目要求我使用數(shù)據(jù)庫驅(qū)動的菜單配置。</p>

<p>代碼可以在這里找到。 </p>

<p>嘗試一下并分享您的想法！ ？</p>


<hr>

<p>照片由 Unsplash 上的 LinedPhoto 拍攝</p>


          </div>

            
  

            
        

以上是在 Laravel 中構(gòu)建動態(tài)且可維護(hù)的菜單的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！