使用 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年前 自动加精
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 42
翟宇鑫

新项目试试 :+1:

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

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

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

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

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

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

1年前 评论

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

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年前

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

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

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

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年前

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

1年前 评论

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

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

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

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

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

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

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

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

有没有权限管理组件

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

1年前 评论

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

1年前 评论

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

10个月前 评论
小李世界 10个月前
Johnson16 (作者) 10个月前
小李世界 10个月前
Johnson16 (作者) 10个月前
<link rel="stylesheet" href="http://filament.test/filament/assets/app.css?id=e76ddadadaa8057215e3fbdd7bacdf9a" />

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

10个月前 评论
alante

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

3周前 评论
alante (作者) 3周前

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