Filamentphp：第一眼

作为Laravel开发者，我们知道一个框架可以多么高效：它提供了一套常用组件、可重用功能，最重要的是，一整套指南，使所有使用该框架的人都能更高效。

了解了这一点，FilamentPHP团队的优秀成员创建了一个框架中的框架，它由以下几个部分组成：有一个表单构建器、一个表构建器和通知包，还有一个结合这些的仪表板。使用仪表板，你可以创建资源，这些资源使你能够轻松地为你应用程序添加具有导航、表格和表单的CRUD页面。它已经被精心设计，非常灵活，如果你需要的话，可以自行修改。在此处查看他们的演示：Filament演示。

在这篇文章中，我们将首次了解Filament，并在未来的文章中继续发展我们目前的工作。为起飞做准备！

应用程序

在这个系列中，我要做一些“元”的事情。

不，不是社交媒体/虚拟现实公司。在这个迷你系列的整个过程中，我将编写一个应用程序，它会显示它在Fly.io上的部署信息。对于每个在你的应用程序中的机器，它都有一个Machine模型，它与一个指定机器运行位置的Region模型相关联。这使我们能够做一件非常酷的事情：我们可以让机器互相ping并查看它们的响应速度。在这篇文章中，我们将为这个应用程序奠定基础。

设置Filament

因此，创建一个新的 Laravel 项目，并使用 composer require filament/filament:"^2.0" 安装 Filament 管理面板。现在，运行迁移并使用 php artisan make:filament-user 创建一个用户。

Filament 是为了成为一个管理面板而构建的，但我将不再遵循这个规则，而将 Filament 用于整个应用程序。我听说 Filament v3 将更好地支持这个想法，但至少目前它也运行良好。为了让 Filament 成为我们应用程序中唯一的东西，我移除了默认的欢迎页面，并将 Filament 的 URL 从 /admin 改为 / 主页 URL。您可以通过将 FILAMENT_PATH="/" 添加到您的 .env 文件中来实现这一点。之后，只需从 web.php 中移除默认的路由，并删除 resources/views/welcome.blade.php 文件。

现在，让我们来看看 Filament 管理面板本身。我将在这里使用两个模型：一个 Region 模型，其中包含关于 Fly.io 上每个地区的资料，以及一个 Machine 模型，其中包含关于将应用程序部署到的每个机器的资料。《Machine》将与《Region》建立一对多关系，这意味着每个《Machine》属于一个《Region》。我将在后面的设置中使用这个设置来展示不同地区之间的延迟，但这将是另一篇文章的主题 😉。

如果您想跟进，以下是一些模型

class Region extends Model
{
    protected $fillable = ['iata_code', 'name'];

    public function machines(): \Illuminate\Database\Eloquent\Relations\hasMany
    {
        return $this->hasMany(Machine::class);
    }
}

iata_code 和 name 都是普通字符串。

class Machine extends Model
{
    protected $fillable = ['machine_id', 'region_id'];

    public function region(): \Illuminate\Database\Eloquent\Relations\BelongsTo
    {
        return $this->belongsTo(Region::class);
    }
}

Machine_id 是一个字符串，而 region_id 是对 Region 模型的外键 ID。

添加 RegionResource

让我们首先添加一个用于我们的 Region 的资源，因为这是最简单的。该模型有两个属性：＜code＞iata_code＜/code＞是该地区机场的代码（LAX 为洛杉矶），而 name 就是该地区的名称。

在 Filament 中，＜a rel="nofollow noopener noreferrer" target="_blank" href="https://filamentphp.com/docs/2.x/admin/resources/getting-started">资源实际上是对处理所有 CRUD 操作的超级强大类，使用表单和表格。它几乎就像是魔法！您可以选择是否需要为模型显示单独的查看和编辑页面，或者可以采用“简单”的单视图并使用模态框进行创建和更新。我是简单的人，所以我将使用 php artisan make:filament-resource Region --simple 创建一个简单的 Region 模型资源。你比我聪明，所以你可能会让 Filament 自动生成表单和表格。使用 composer require doctrine/dbal --dev 安装 doctrine/dbal 包，然后向命令中添加 --generate：＜code＞php artisan make:filament-resource Region --simple --generate＜/code＞。这要容易得多！

这就是它默认的样子：＜img src="https://fly.io/laravel-bytes/2023-06-14/img_1.png" alt="">＜/p＞

我们已经拥有了所有所需的内容：我们可以在 Region 模型上执行所有 CRUD 操作，包括表单输入的验证！我将将 IATA 代码的标签改为全大写，方法是打开 RegionResource，然后在 iata_code 属性的 TextInput 上添加 ->label("IATA Code")。当我们正在改变标签时，我们也可以将 maxLength 从 255 改为 3。这就是现在 form() 的样子：

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('iata_code')
                    ->label("IATA Code")
                    ->required()
                    ->maxLength(3),
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255),
            ]);
    }

我们可以在表的列上做相同的事情

public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('iata_code')
+                   ->label('IATA Code'),
                ...
    }

这就是几乎所有的表和表单的自定义方式：创建正确的字段，并使用静态方法将其更改为您所需的内容！

最后一件事情：我在这里玩了一个小把戏！我为“地区”导航项目使用了不同的图标。我想要一个比默认的“集合”图标更具地区特色的图标，因此我将 RegionResource 类中的 $navigationIcon 从 heroicon-o-collection 改为 heroicon-o-globe。这更合理。

添加 MachineResource

对于机器资源，让我们稍微改变一下，不要使用“简单”的资源。这意味着我们将拥有用于索引、编辑、创建和查看操作的不同的页面。运行php artisan make:filament-resource Machine --generate，就这样：一个MachineResource！对于图标，我建议使用heroicon-o-chip图标。

现在让我们看看MachineResource。这里发生了一些特别的事情，我需要你对它的兴奋程度和我一样：在form方法中，有一个TextInput，就像在RegionResource中一样，但现在还有一个Select。这允许你使用Machine模型上的关系附加一个相关的Region。Filament将会预加载区域，并在创建Machine时允许用户从列表中选择。非常酷。

让我们再让它更酷一些：让我们通过在Select字段上添加->searchable()和->preload()来使用户能够通过在字段中输入来过滤区域。预加载在这里不是必需的，但它通过在用户输入之前显示结果并加快过滤速度来增强体验。让我们看看它是如何工作的！

现在，在我让你回去看猫视频之前，我们还需要做一个最后的变更：机器资源的创建表单看起来有点奇怪，输入字段看起来像是被随意放在页面上的。让我们把它们组合成一张卡片！我还会在卡片上使用->columns(3)来排列两个字段，并在Select字段上使用->columnSpan(2)。

public static function form(Form $form): Form
{
    return $form
        ->schema([
+           Forms\Components\Card::make()
+               ->schema([
                    Forms\Components\TextInput::make('machine_id')
                        ->required()
                        ->maxLength(255),
                    Forms\Components\Select::make('region_id')
                        ->relationship('region', 'name')
                        ->required()
                        ->searchable()
                        ->preload()
+                       ->columnSpan(2),
+               ])
        ]);
}

这就是它现在的样子