使用 Laravel Filament 极速搭建美观大方的后台面板

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 中文站站长
本帖由系统于 1年前 自动加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 42

上手有一定的门槛,熟练使用这些的前提是你需要掌握 livewire + Alpine.js

1年前 评论
Marden (楼主) 1年前

那个中文社区是楼主建的吧,在那边提问没有人管。。。这里说下。 自定义页面里边的 Action 无法弹出 Modal是怎么以回事?

protected function getActions(): array
    {
        return [
            $this->buildEnableDisableAction(),
        ];
    }

    private function buildEnableDisableAction()
    {
        return Actions\Action::make('enableDisable')
            ->requiresConfirmation()
            ->modalHeading('ssss')
            ->modalButton('bbbbb')
            ->form([
                Forms\Components\TextInput::make('sss')
            ])
            ->action(function ($data) {
               dd($data);
            });
    }

    protected function getViewData(): array
    {
        return [
            'enableDisableAction' => $this->buildEnableDisableAction(),
        ];
    }

如上,同样一个 Action ,在 getActions() 返回自动渲染在右上角就能弹出,如果仅仅在 getViewData() 返回然后在页面其他位置使用就弹不出来。我看了最终生成的 HTML 代码是一样的。

1年前 评论
Marden (楼主) 1年前
alante

感谢大佬布道filamentphp,但是遇到一个三级联动问题,请教一下怎么在表单上做三级联动,数据来源于一个区域表,用 id, pid, name, 怎么在选择了省之后,城市字段去获取选择的省份下的数据,谢谢解答

3周前 评论
alante (作者) 3周前
<link rel="stylesheet" href="http://filament.test/filament/assets/app.css?id=e76ddadadaa8057215e3fbdd7bacdf9a" />

网页源代码里的样式链接是这个

10个月前 评论

请问我安装好了,样式是错误的,如何解决呢?

10个月前 评论
小李世界 10个月前
Johnson16 (作者) 10个月前
小李世界 10个月前
Johnson16 (作者) 10个月前

楼主你的社区报证书错误。
我是想问 2.15 之后的通知独立成了 filament/notifications 包,2.14 升上来后通知都展示不出来,看请求 /livewire/message/filament.core.notifications 返回结果是空的,楼主清楚要怎么做么?官方 github discussions 搜不到什么有用信息。

1年前 评论

有没有权限管理组件

刚看了,有这个 github.com/chiiya/filament-access-...

1年前 评论

官方的文件上传组建 FileUpload,每次编辑的时候,都会重现下载之前的文件,导致这个组件几乎压根就不能用。这个组件是基于 Filepond 搭建的,每次下载好像仅仅为了获得文件大小。

这个问题十分困扰我,本来想试试 filament 的,卡在这个问题上了,不知道有没有朋友有使用 FileUpload 的经历?

我早上提了 issue github.com/filamentphp/filament/is...

1年前 评论
Marden (楼主) 1年前
xuchunyang (作者) 1年前

类似laravel-admin的项目吗?组件有一样丰富吗?比如文件上传这块? 同时拓展性怎么样

1年前 评论
Marden (楼主) 1年前

好看的,但是已经在用laravel-admin了,之后试试这个

1年前 评论
Marden (楼主) 1年前

挺不错的,使用 composer require doctrine/dbal 包和 --generate 标志来生成资源有惊喜

1年前 评论

请教楼主,filament的路由是写在哪里?写了个页面,能显示,但找不到页面的路由定义

1年前 评论
Marden (楼主) 1年前

感觉 tailwindcss 里边的一些语法都不支持?比如 py-10 设置 padding。

1年前 评论
Marden (楼主) 1年前

已经测试了一下,颜值确实高,现在担心的问题有4个:

  1. 社区是否活跃,遇到问题怕自己解决不了
  2. 是否能满足90%的场景,比如树形结构、模型关联、多图上传、JSON表单等稍微复杂一点的场景
  3. 是否有团队在维护?
  4. 是否支持直接写view?ui库便于使用吗?

用了两年的laravel-admin,已经被训练的不想写html,一直苦于laravel-admin莫名其妙的BUG的困扰,很想找一个能像laravel-admin一样不用写前端代码的框架,我下一个小项目用filament来踩一下坑

1年前 评论
Marden (楼主) 1年前
Marden (楼主) 1年前
薄荷蓝的晴天 1年前
Marden (楼主) 1年前

最近用了下,详情页要自定义吗?默认它是渲染表单,表单里面的一些关联取出全部来循环判断是否相等的,这不行吧。比如文章详情的作者,使用 Select,它就 select id, name from user,这用户多不是挂逼了。

1年前 评论
Marden (楼主) 1年前

这个项目不错,关注一段时间了,感谢翻译团队!

1年前 评论

样式很漂亮,很符合现在流行的UI风格

1年前 评论
Marden (楼主) 1年前
翟宇鑫

新项目试试 :+1:

1年前 评论
Marden (楼主) 1年前
翟宇鑫 (作者) 1年前
Marden (楼主) 1年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!