使用 Filament 和 Laravel 建立強大的管理面板：逐步指南

Laravel 是一個強大的 PHP 框架，為開發 Web 應用程式提供了堅實的基礎。 Filament 是一個開源、優雅的 Laravel 管理面板和表單建構器，可簡化管理介面的建立。本指南將引導您使用最新版本的 Filament 和 Laravel 建立強大的管理面板。

Laravel SaaS Starter - 在一天而不是幾週內啟動您的下一個 Saas
只需一天而不是幾週即可啟動您的下一個 Laravel Saas 專案！已經建構了每個 SaaS 都需要的功能
www.laravelsaas.store

先決條件
在我們開始之前，請確保您的開發電腦上安裝了以下軟體：

PHP >= 8.0
作曲家
Node.js 和 NPM
MySQL 或 Laravel 支援的任何其他資料庫

第 1 步：設定新的 Laravel 項目

首先，使用 Composer 建立一個新的 Laravel 專案：

composer create-project --prefer-dist laravel/laravel filament-admin
cd filament-admin

接下來，設定環境變數。將 .env.example 檔案重新命名為 .env 並使用您的憑證更新資料庫設定：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=filament_db
DB_USERNAME=root
DB_PASSWORD=your_password

執行以下命令產生應用程式金鑰並遷移預設的 Laravel 表：

php artisan key:generate
php artisan migrate

第 2 步：安裝燈絲

要安裝 Filament，請使用 Composer：

composer require filament/filament

接下來，發佈 Filament 資產與配置：

php artisan filament:install

第 3 步：設定驗證

Filament 需要身份驗證才能管理對管理面板的存取。 Laravel 提供內建的身份驗證鷹架。為了簡單起見，讓我們使用 Laravel Breeze：

composer require laravel/breeze --dev
php artisan breeze:install

按照提示選擇您喜歡的前端選項（Blade、Vue、React）。在這個例子中，我們將使用 Blade:

php artisan migrate
npm install
npm run dev

確保您有一個使用者可以登入。您可以使用 Laravel Tinker 建立一個：

php artisan tinker

>>> \App\Models\User::factory()->create(['email' => 'admin@example.com']);

第 4 步：配置燈絲

如果您使用角色或權限，請更新使用者模型以實現 Filament HasFilamentRoles 合約。目前，我們將確保任何經過身份驗證的使用者都可以存取 Filament。

In app/Providers/FilamentServiceProvider.php, define the authorization logic:

use Filament\Facades\Filament;

public function boot()
{
    Filament::serving(function () {
        Filament::registerUserMenuItems([
            'account' => MenuItem::make()
                ->label('My Account')
                ->url(route('filament.resources.users.edit', ['record' => auth()->user()]))
                ->icon('heroicon-o-user'),
        ]);
    });

    Filament::registerPages([
        // Register your custom pages here
    ]);

    Filament::registerResources([
        // Register your custom resources here
    ]);
}

protected function gate()
{
    Gate::define('viewFilament', function ($user) {
        return in_array($user->email, [
            'admin@example.com',
        ]);
    });
}

第 5 步：建立資源

Filament 資源是具有 CRUD 介面的 Eloquent 模型。讓我們建立一個用於管理 Post 模型的資源。

生成模型、遷移與工廠：

php artisan make:model Post -mf

定義遷移檔案中的欄位：

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

運行遷移：

php artisan migrate

接下來，產生Filament資源：

php artisan make:filament-resource Post

此指令為資源建立必要的檔案。開啟 app/Filament/Resources/PostResource.php 並定義資源欄位：

use Filament\Resources\Pages\Page;
use Filament\Resources\Pages\CreateRecord;
use Filament\Resources\Pages\EditRecord;
use Filament\Resources\Pages\ListRecords;
use Filament\Resources\Forms;
use Filament\Resources\Tables;
use Filament\Resources\Forms\Components\TextInput;
use Filament\Resources\Forms\Components\Textarea;
use Filament\Resources\Tables\Columns\TextColumn;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

    protected static ?string $navigationIcon = 'heroicon-o-collection';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->required()
                    ->maxLength(255),
                Textarea::make('content')
                    ->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title'),
                TextColumn::make('content')
                    ->limit(50),
                TextColumn::make('created_at')
                    ->dateTime(),
            ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListRecords::route('/'),
            'create' => Pages\CreateRecord::route('/create'),
            'edit' => Pages\EditRecord::route('/{record}/edit'),
        ];
    }
}

第 6 步：新增導航

將資源新增至 Filament 側邊欄。開啟 app/Providers/FilamentServiceProvider.php 並註冊資源：

use App\Filament\Resources\PostResource;

public function register()
{
    Filament::registerResources([
        PostResource::class,
    ]);
}

第 7 步：客製化燈絲

燈絲是高度可客製化的。您可以變更主題、組件等。例如，若要自訂原色，請更新 config/filament.php 檔案：

'brand' => [
    'primary' => '#1d4ed8',
],

您也可以依照文件建立自訂頁面、小工具和表單元件：Filament 文件。

Laravel SaaS Starter - 在一天而不是幾週內啟動您的下一個 Saas
只需一天而不是幾週即可啟動您的下一個 Laravel Saas 專案！已經建構了每個 SaaS 都需要的功能
www.laravelsaas.store

結論

在本指南中，我們逐步介紹了設定新的 Laravel 專案、安裝 Filament、設定驗證、建立資源以及自訂 Filament 管理面板。這將為您使用 Filament 和 Laravel 建立強大的管理面板奠定堅實的基礎。如需更多高級功能和定制，請參閱官方文件並探索 Filament 的功能。

編碼愉快！

以上是使用 Filament 和 Laravel 建立強大的管理面板：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！