使用 Filament 构建功能齐全的 Laravel 管理仪表板

**由 Kayode Adeniyi 撰写✏️**

为 Web 应用程序构建管理仪表板不仅仅需要设置 CRUD 操作。Laravel 为该过程提供了强大的后端框架，但您需要额外的工具来创建丰富的管理面板或仪表板。

这正是 Filament 的用武之地。Filament 是一个基于 Laravel 的开源库，提供了一套优雅的 UI 组件，用于构建功能齐全的管理仪表板。

在本文中，我们将直接了解 Filament 功能的核心。我们将通过创建一个示例管理仪表板来实现这一点，该仪表板利用三个强大的 Filament 组件：表单生成器、通知和操作。然后，我们将学习构建交互式、可靠且可扩展的管理面板的高级技术和最佳实践。

无论您是希望增强工具包的经验丰富的 Laravel 开发人员，还是刚刚开始使用 Filament，本指南都将为您提供构建令人印象深刻的界面所需的知识，同时保持代码干净且易于维护。

使用 Filament 设置 Laravel 环境

创建新的 Laravel 项目

如果您是从头开始，请创建一个新的 Laravel 项目。打开终端并运行以下命令来设置全新的 Laravel 安装：

composer create-project --prefer-dist laravel/laravel filament-admin```
{% endraw %}


Once the installation is complete, navigate into the project directory:
{% raw %}


```bash
cd filament-admin```
{% endraw %}


### Installing Filament

Filament is available as a Composer package, making integration into your Laravel project straightforward. To install Filament, run the following command:
{% raw %}


```bash
composer require filament/filament

安装后，您需要发布 Filament 的资产和配置文件。此步骤将 Filament 的资源复制到您的项目中，以便您根据需要修改和自定义它们：

php artisan filament:install

设置数据库

打开你的 `.env` 文件并配置数据库连接以完成设置。配置数据库后，运行 Laravel 迁移以创建 Filament 功能所需的默认表：

php artisan migrate```
{% endraw %}


Completing this step means you’ve successfully installed Filament. You’re ready to begin building your application’s interface.

## Creating forms with Filament’s Form Builder

Filament’s Form Builder provides a powerful and flexible component for creating complex forms. These components are essential for any admin dashboard that requires data input and management. Filament’s form tools do just that, providing built-in validation, support for various input types, and conditional logic for handling dynamic fields.

### Defining the model and migration for users

To build our example, let’s start by creating a {% raw %}`User`{% endraw %} model with a corresponding migration file to store user data. Run the following command to generate the model and migration:
{% raw %}


```bash
php artisan make:model User -m```
{% endraw %}


In the generated migration file ({% raw %}`database/migrations/*_create_users_table.php`{% endraw %}), add the fields for the {% raw %}`users`{% endraw %} table:
{% raw %}


```php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->enum('role', ['admin', 'editor', 'viewer'])->default('viewer');
    $table->timestamps();
});

运行迁移以将相关更改应用到数据库：

php artisan migrate

这将创建一个“用户”表，其中有用于存储用户姓名、电子邮件和角色的字段，使我们能够在管理仪表板内管理用户数据。

使用 Filament 创建用户表单

接下来，您必须创建一个表单来捕获基本数据，例如用户的姓名、电子邮件和角色。Filament 的“表单”组件简化了此过程，提供了一系列输入类型和验证选项。

将“Forms\Components\TextInput 和 Forms\Components\Select”等组件所需的使用语句添加到您的文件中。

以下是用户表单的基本示例：

use Filament\Forms;

Forms\Components\TextInput::make('name')
    ->label('Full Name')
    ->required()
    ->placeholder('Enter full name')
    ->maxLength(50)
    ->validationAttribute('full name'),

Forms\Components\TextInput::make('email')
    ->label('Email Address')
    ->email()
    ->required()
    ->unique('users', 'email')
    ->placeholder('Enter email address')
    ->validationAttribute('email address'),

Forms\Components\Select::make('role')
    ->label('User Role')
    ->options([
        'admin' => 'Admin',
        'editor' => 'Editor',
        'viewer' => 'Viewer',
    ])
    ->default('viewer')
    ->required(),

上面的表单设置包括对必填字段和电子邮件唯一性的验证，以确保在保存之前用户输入的准确性。

验证和错误处理

Filament 通过使用 Laravel 的内置验证规则简化了表单验证。例如，我们可以向每个字段添加 `->required()` 或 `->unique()`，以确保输入并验证了必要的数据。然后，Filament 将直接在表单中显示任何验证错误，为用户提供即时反馈。

以下是带有自定义错误消息的示例：

Forms\Components\TextInput::make('email')
    ->required()
    ->email()
    ->unique('users', 'email')
    ->validationAttribute('email address'),

这种方法通过立即通知用户错误来改善用户体验，从而确保表单提交的数据有效。

条件逻辑和动态字段

Filament 的 Form Builder 支持条件逻辑，这意味着它允许字段根据用户输入出现或更改。例如，让我们看一个只有当另一个字段满足特定条件时才能使一个字段可见的情况：

Forms\Components\Select::make('role')
    ->options([
        'admin' => 'Admin',
        'editor' => 'Editor',
        'viewer' => 'Viewer',
    ])
    ->default('viewer')
    ->visible(fn ($get) => $get('role') === 'admin')
    ->label('User Role'),

这使得只有用户是管理员时“角色”字段才可见，从而减少表单混乱并提高可用性。

处理表单提交

Filament 使表单提交处理变得简单。以下是开始使用的方法。

在表单组件或控制器中定义一个“submit”方法来处理验证的数据并将其保存到数据库：

public function submit()
{
    $validatedData = $this->validate();

    User::create($validatedData);

    Notification::make()
        ->title('User Created')
        ->success()
        ->body('The user has been successfully created.')
        ->send();
}

上述函数验证表单数据，将其保存到数据库，并发送成功通知，通过提供即时反馈简化用户体验。我们将在下一节中详细讨论通知系统。

通过通知增强用户体验

管理仪表板受益于通知，通知用户有关成功操作、错误和其他更新的信息。Filament 的通知系统就是这样做的，允许您针对各种场景自定义消息。

基本通知

要创建通知，请使用“通知”类。这允许您设置标题、消息和通知类型：

use Filament\Notifications\Notification;

Notification::make()
    ->title('Action Successful')
    ->success()
    ->body('The operation completed successfully.')
    ->send();

使用 Laravel Echo 和 Pusher 进行实时通知

为了获得更动态的体验，请集成 Laravel Echo 和 Pusher 以显示实时通知。这在用户需要即时反馈的协作应用程序中特别有用。

首先，安装 Laravel Echo 和 Pusher：

composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js

然后，使用 Pusher 凭据配置您的 `.env` 文件并设置 `BROADCAST_DRIVER=pusher`。这允许您实时广播事件。

交互式仪表板的自定义操作

Filament 的 Actions 组件允许您添加具有特定行为的自定义按钮，例如删除数据或启动工作流。这样就可以轻松地直接在界面内执行特定操作。

创建基本动作

以下是带有确认步骤的删除操作的示例：

use Filament\Tables\Actions\Action;

Action::make('delete')
    ->label('Delete User')
    ->action(fn () => $this->deleteUser())
    ->color('danger')
    ->requiresConfirmation()
    ->icon('heroicon-s-trash');

`requiresConfirmation()` 方法在执行操作之前提示用户确认，减少意外删除。

高级多步骤操作

对于更复杂的工作流程，您可以设置多步骤操作。例如，存档用户可能首先确认操作，更新数据库，然后通知管理员：

Action::make('archive')
    ->label('Archive User')
    ->requiresConfirmation([
        'message' => 'Are you sure you want to archive this user?',
        'confirmButtonText' => 'Yes, archive',
        'cancelButtonText' => 'No, keep user',
    ])
    ->action(fn () => $this->archiveUser())
    ->after(fn () => Notification::make()->title('User Archived')->send());

这种级别的控制可确保顺畅的用户管理，并针对每种情况采取量身定制的操作。

结论

Filament 是一款功能强大的工具包，可用于在 Laravel 中构建交互式、功能齐全的管理仪表板。在本指南中，我们探索了它的三个组件：用于动态表单的表单生成器、用于实时反馈的通知和用于执行特定任务的操作。

通过将 Laravel 强大的后端与 Filament 的 UI 组件相结合，您可以构建直观、可靠且用户友好的管理仪表板，从而提高生产力和满意度。

Filament 为旨在创建全面管理仪表板的团队提供功能丰富且开发人员友好的解决方案。探索 Filament 的文档以发现更多可能性并立即开始构建引人入胜的高性能 Laravel 应用程序。

几分钟内即可设置 LogRocket 的现代错误跟踪：

新版本：

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

脚本标记：

Add to your HTML:

3.（可选）安装插件以便与您的堆栈进行更深入的集成：

立即开始