编程

使用 Filament 快速搭建 Laravel 后台

2287 2021-12-15 10:44:25

1.0  Filament 2.x 的最低要求:

  • PHP 8.0+
  • Laravel v8.0+
  • Livewire v2.0+

1. 1安装Laravel

composer create-project laravel/laravel filament-backend

1.2 安装 filament 包

composer require filament/filament

1.3.  数据迁移

php artisan migrate

1.4.  生成管理员

php artisan make:filament-user

2.0 如何使用 Filament

2.1 生成资源类

php artisan make:migration createCustomersTable
php artisan make:model Customer
php artisan make:filament-resource Customer

app/Filament/Resources 目录下生成一系列文件:

.
+-- CustomerResource.php
+-- CustomerResource
|   +-- Pages
|   |   +-- CreateCustomer.php
|   |   +-- EditCustomer.php
|   |   +-- ListCustomers.php

资源类 CustomerResource.php。资源类注册表单(forms)、表格(tables),关系(relations),以及和模型相关的页面 (pages).

Pages 目录下的类,用来自定义管理面板中和资源交互的页面。它们都是Livewire 组件,你可以按需自定义。

2.2.1 Forms 表单

资源类包含一个静态方法 form(), 用于位新建和编辑页面创建表单:

use App\Filament\Resources\CustomerResource\Pages;
use App\Filament\Resources\CustomerResource\RelationManagers;
use App\Filament\Roles;
use Filament\Resources\Forms\Components;
use Filament\Resources\Forms\Form;
use Filament\Resources\Resource;
use Filament\Resources\Tables\Columns;
use Filament\Resources\Tables\Filter;
use Filament\Resources\Tables\Table;

class CustomerResource extends Resource
{
    public static $icon = 'heroicon-o-collection';

    public static function form(Form $form)
    {
        return $form
            ->schema([
                Components\TextInput::make('name')->required(),
                Components\TextInput::make('email')->email()->required(),
            ]);
    }
    
//......
}

schema() 方法用于定义你的表单结果结构。他说字段数组,按照显示顺序排列。

可在源码内或者相关文档中查看可用的表单字段。

如果你想要节省时间,Filament 可以基于模型数据库栏为你自动生成一些字段和表格

php artisan make:filament-resource Customer --generate

2.2 页面隐藏组件

表单组件的 hidden() 方法能让你在页面中动态隐藏字段。

你可以通过传一个闭包到 hidden() 方法中,查看 Livewire 组件是不是在一个特定的页面中。在以下例子中,密码字段在编辑页面中被隐藏了:

use Livewire\Component;
 
Forms\Components\TextInput::make('password')
    ->password()
    ->required()
    ->hidden(fn (Component $livewire): bool => $livewire instanceof EditUser),

同样你也可以使用 visible 检测组件是不是可见:

use Livewire\Component;
Forms\Components\TextInput::make('password')    
	->password()    
	->required()    
	->visible(fn (Component $livewire): bool => $livewire instanceof CreateUser),

更多闭包的自定义信息,可查看文档

2.3 表格

资源类包含一个静态方法 table(),用于为列表页创建表格:

use Filament\Resources\Table;
use Filament\Tables;
use Illuminate\Database\Eloquent\Builder;
 
public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name'),
            Tables\Columns\TextColumn::make('email'),
            // ...
        ])
        ->filters([
            Tables\Filters\Filter::make('verified')
                ->query(fn (Builder $query): Builder => $query->whereNotNull('email_verified_at')),
            // ...
        ]);
}

columns() 方法用于定义你表格的列。它是列对象数组, 按照表格显示顺序排列。

过滤器 Filter 预定义管理员可以在表格中过滤的记录范围。这里 filters() 方法用于对此进行注册。

同样如果你想要节省时间,Filament 可以基于模型数据库栏为你自动生成一些列和表单字段

php artisan make:filament-resource Customer --generate

2.4 采用默认排序

如果数据列 sortable(),你可以选择使用 defaultSort() 方法默认排序。

use Filament\Resources\Table;
use Filament\Tables;
 
public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name')->sortable(),
            // ...
        ])
        ->defaultSort('name');
}

更多详情查看中文文档:https://laravel-filament.cn/docs