使用 Laravel Filament 極速搭建美觀大方的後臺皮膚

Marden發表於2022-06-13
Laravel

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:
> admin@laravel-filament.cn
Password:
>
Successful! admin@laravel-filament.cn 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 中文文件。

本作品採用《CC 協議》，轉載必須註明作者和本文連結
Laravel Filament 中文站站長

相關文章