使用Laravel Filament快速搭建优雅美观的后台面板流程步骤

Laravel  /  管理员 发布于 1年前   519

Filament后台面板是快速创建精美的TALL技术栈的工具箱，可以创建页面、控制面板、模块、图表、插件等，
下面看看如何使用Filament搭建一个CRUD后台面板。

注意：本文将假定你已经创建了一个新的 Laravel 项目，并且已经配置好了数据库

1. 安装要求

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

2. 安装和登录

在命令行输入：

composer require filament/filament

如果你想访问项目的登录页面，使用以下网址：

https://your-url/admin
或
http://your-url/admin

如果你还没创建用户，可以在命令行中使用如下命令创建：

php artisan make:filament-user

然后，你就可以在如下终端输入相关用户信息：

Name:
> admin
Email address:
> [email protected]
Password:
>
Successful! [email protected] may now log in at http://laravel-filament.cn/admin/login.

之后，我们就可以用这个用户名密码登录。

3. 模型

接下来，我们将使用如下命令创建新模型及对应的迁移文件：

php artisan make:model Project -m

打开 database/migration 中的迁移文件，添加如下字段：

  public function up()

  {
      Schema::create('projects', function (Blueprint $table) {
          $table->id();
          $table->string('name');
          $table->text('description');
          $table->date('start_date');
          $table->date('deadline');
          $table->foreignId('user_id');
          $table->timestamps();
      });
  }

执行迁移：

php artisan migrate

下一步便是打开 App\Models\Project.php 并添加 fillable 字段和关联：

 protected $fillable = [

    'name',
    'description',
    'start_date',
    'deadline',
    'user_id'
];
public function user()
{
    return $this->belongsTo(User::class);
}

4. 项目资源

Filament 中的资源 (Resource) 用于管理表格、表单、视图等。

它就像是某种控制器，配置了我们所需要的，用于模型和 CRUD 的资源。使用以下命令创建资源：

php artisan make:filament-resource Project

这个命令会生成这么一些文件：

+-- ProjectResource.php
+-- ProjectResource
|   +-- Pages
|   |   +-- CreateProject.php
|   |   +-- EditProject.php
|   |   +-- ListProjects.php

此时的后台面板中，你就能看到对应的菜单了。

5. 定义表格

打开 app/Filament/Resources/ProjectResource.php 文件，

你会看到有一个静态的 table() 方法，里面包含了 columns() 和 filters()。

紧接着我们就可以像这样定义表格 (数据库字段)：

  public static function table(Table $table): Table
  {
      return $table
            ->columns([
                Tables\Columns\TextColumn::make('name')->sortable()->searchable(),
                Tables\Columns\TextColumn::make('description'),
                Tables\Columns\TextColumn::make('start_date'),
                Tables\Columns\TextColumn::make('deadline'),
                Tables\Columns\TextColumn::make('user.name'),
            ])
            ->filters([]);
    }

注意：只要使用像 user.name 这样的点语法就可以使用 belongsTo 关联。

6. 创建项目表单

在 app/Filament/Resources/ProjectResource.php 文件里，我们可以在静态 form 方法中

，以这样的方式创建表单控件：

   public static function form(Form $form): Form
   {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')->required(),
                Textarea::make('description'),
                DatePicker::make('start_date')->format('Y-m-d')->displayFormat('m/d/Y'),
                DatePicker::make('deadline')->format('Y-m-d')->displayFormat('m/d/Y'),
                BelongsToSelect::make('user_id')->relationship('user', 'name')
            ]);
    }

别忘了引入 Textarea, DatePicker, BelongsToSelect。

当使用日期时，format() 函数会将对应的格式化日期存入数据库中。

在 BelongsToSelect 中，我们需要在 *make * 中输入外键，关联接收两个参数：

第一个是关联名称，第二个是你要显示的字段名。

完成后，你就可以打开 create 页面，查看表单。

接下来，你就可以使用该表单添加一些数据，然后去查看相应表格展示页。

就是这么简单！只需几分钟，我们就创建了一个后台面板，同时也完成了一个 CRUD 模块。

如果你需要了解更多 Filament 的情况，可以查看 Filament 中文文档。

https://laravel-filament.cn/