”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 使用 Filament 和 Laravel 构建强大的管理面板:分步指南

使用 Filament 和 Laravel 构建强大的管理面板:分步指南

发布于2024-11-08
浏览:519

Building Robust Admin Panels with Filament and Laravel: A Step-by-Step Guide

Laravel 是一个强大的 PHP 框架,为开发 Web 应用程序提供了坚实的基础。 Filament 是一个开源、优雅的 Laravel 管理面板和表单构建器,可简化管理界面的创建。本指南将引导您使用最新版本的 Filament 和 Laravel 构建强大的管理面板。

Laravel SaaS Starter - 在一天而不是几周内启动您的下一个 Saas
只需一天而不是几周即可启动您的下一个 Laravel Saas 项目!凭借已构建的功能,每个 SaaS 都需要
www.laravelsaas.store

先决条件
在开始之前,请确保您的开发计算机上安装了以下软件:

PHP >= 8.0
作曲家
Node.js 和 NPM
MySQL 或 Laravel 支持的任何其他数据库

第 1 步:设置新的 Laravel 项目

首先,使用Composer创建一个新的Laravel项目:

composer create-project --prefer-dist laravel/laravel filament-admin
cd filament-admin

接下来,设置环境变量。将 .env.example 文件重命名为 .env 并使用您的凭据更新数据库配置:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=filament_db
DB_USERNAME=root
DB_PASSWORD=your_password

运行以下命令生成应用程序密钥并迁移默认的 Laravel 表:

php artisan key:generate
php artisan migrate

第 2 步:安装灯丝

要安装 Filament,请使用 Composer:

composer require filament/filament

接下来,发布Filament资产和配置:

php artisan filament:install

第 3 步:设置身份验证

Filament 需要身份验证才能管理对管理面板的访问。 Laravel 提供内置的身份验证脚手架。为了简单起见,让我们使用 Laravel Breeze:

composer require laravel/breeze --dev
php artisan breeze:install

按照提示选择您喜欢的前端选项(Blade、Vue、React)。在本例中,我们将使用 Blade:

php artisan migrate
npm install
npm run dev

确保您有一个用户可以登录。您可以使用 Laravel Tinker 创建一个:

php artisan tinker

>>> \App\Models\User::factory()->create(['email' => '[email protected]']);

第 4 步:配置灯丝

如果您使用角色或权限,请更新用户模型以实施 Filament HasFilamentRoles 合约。目前,我们将确保任何经过身份验证的用户都可以访问 Filament。

In app/Providers/FilamentServiceProvider.php, define the authorization logic:

use Filament\Facades\Filament;

public function boot()
{
    Filament::serving(function () {
        Filament::registerUserMenuItems([
            'account' => MenuItem::make()
                ->label('My Account')
                ->url(route('filament.resources.users.edit', ['record' => auth()->user()]))
                ->icon('heroicon-o-user'),
        ]);
    });

    Filament::registerPages([
        // Register your custom pages here
    ]);

    Filament::registerResources([
        // Register your custom resources here
    ]);
}

protected function gate()
{
    Gate::define('viewFilament', function ($user) {
        return in_array($user->email, [
            '[email protected]',
        ]);
    });
}

第 5 步:创建资源

Filament 资源是具有 CRUD 接口的 Eloquent 模型。让我们创建一个用于管理 Post 模型的资源。

生成模型、迁移和工厂:

php artisan make:model Post -mf

定义迁移文件中的字段:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

运行迁移:

php artisan migrate

接下来,生成Filament资源:

php artisan make:filament-resource Post

此命令为资源创建必要的文件。打开 app/Filament/Resources/PostResource.php 并定义资源字段:

use Filament\Resources\Pages\Page;
use Filament\Resources\Pages\CreateRecord;
use Filament\Resources\Pages\EditRecord;
use Filament\Resources\Pages\ListRecords;
use Filament\Resources\Forms;
use Filament\Resources\Tables;
use Filament\Resources\Forms\Components\TextInput;
use Filament\Resources\Forms\Components\Textarea;
use Filament\Resources\Tables\Columns\TextColumn;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

    protected static ?string $navigationIcon = 'heroicon-o-collection';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->required()
                    ->maxLength(255),
                Textarea::make('content')
                    ->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title'),
                TextColumn::make('content')
                    ->limit(50),
                TextColumn::make('created_at')
                    ->dateTime(),
            ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListRecords::route('/'),
            'create' => Pages\CreateRecord::route('/create'),
            'edit' => Pages\EditRecord::route('/{record}/edit'),
        ];
    }
}

第 6 步:添加导航

将资源添加到Filament侧边栏。打开app/Providers/FilamentServiceProvider.php并注册资源:

use App\Filament\Resources\PostResource;

public function register()
{
    Filament::registerResources([
        PostResource::class,
    ]);
}

第 7 步:定制灯丝

灯丝是高度可定制的。您可以更改主题、组件等。例如,要自定义原色,请更新 config/filament.php 文件:

'brand' => [
    'primary' => '#1d4ed8',
],

您还可以按照文档创建自定义页面、小部件和表单组件:Filament 文档。

Laravel SaaS Starter - 在一天而不是几周内启动您的下一个 Saas
只需一天而不是几周即可启动您的下一个 Laravel Saas 项目!凭借已构建的功能,每个 SaaS 都需要
www.laravelsaas.store

结论

在本指南中,我们逐步介绍了设置新的 Laravel 项目、安装 Filament、设置身份验证、创建资源以及自定义 Filament 管理面板。这将为您使用 Filament 和 Laravel 构建强大的管理面板奠定坚实的基础。如需更多高级功能和定制,请参阅官方文档并探索 Filament 的功能。

编码愉快!

版本声明 本文转载于:https://dev.to/martintonev/building-robust-admin-panels-with-filament-and-laravel-a-step-by-step-guide-2pn3?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 将 JavaScript 转换为 TypeScript 的多年经验:我的关怀意见
    将 JavaScript 转换为 TypeScript 的多年经验:我的关怀意见
    I started my JS career in 2015, spent a year working exclusively with it, and then transitioned to TypeScript. I’d love to say 'And never looked back ...
    编程 发布于2024-11-08
  • x86 汇编中的“锁定”指令是否无限期地保留总线?
    x86 汇编中的“锁定”指令是否无限期地保留总线?
    理解x86汇编中的“Lock”指令x86汇编中的“lock”指令是一个前缀,它强制后续指令对总线的独占所有权。这可确保 CPU 在该指令的持续时间内完全控制高速缓存行。停用总线锁定与通常的理解相反,“lock”前缀不会导致 CPU 锁定无限期的公交车。执行后续指令后,锁会被释放。这允许 CPU 仅在...
    编程 发布于2024-11-08
  • Top itemmap Scraper 你应该知道的 4
    Top itemmap Scraper 你应该知道的 4
    有时需要组织并包含在新网站设计中的信息量可能会令人难以承受,从而使任务变得更加困难。站点地图是一个有用的规划工具,可以帮助组织和简化网站上需要的材料并删除任何不需要的页面。此外,精心设计的站点地图可为访问者提供积极的体验,从而提高转化率。 多年来,最好的网页设计方法一直包括站点地图;因此,它们并不是...
    编程 发布于2024-11-08
  • 如何在 Web 浏览器中跟踪 XMLHttpRequest 的进度更新?
    如何在 Web 浏览器中跟踪 XMLHttpRequest 的进度更新?
    获取 XMLHttpRequest 的进度更新Web 浏览器为客户端-服务器数据交换提供 XMLHttpRequest (XHR) 对象。虽然标准 XHR API 缺乏固有的进度跟踪功能,但有一些方法可以监控数据传输的进度。上传字节数:XHR 公开 xhr.upload。 onprogress 事件...
    编程 发布于2024-11-08
  • 如何在 JavaScript 中向回调函数传递参数?
    如何在 JavaScript 中向回调函数传递参数?
    在 JavaScript 中向回调函数传递参数在 JavaScript 中,回调函数通常用于在某个事件发生后执行特定任务。在定义这些函数时,通常需要向它们传递相关数据或参数。传递参数的一种简单方法是在调用回调函数时将它们显式设置为实参。例如:function tryMe(param1, param2...
    编程 发布于2024-11-08
  • 与 Jira 和 LLM 的互动项目报告
    与 Jira 和 LLM 的互动项目报告
    For all projects I worked on, I used some sort of project management system where project scope was defined as a list of tasks (tickets), and progress...
    编程 发布于2024-11-08
  • 如何在 PHP 中对不同格式的日期数组进行排序?
    如何在 PHP 中对不同格式的日期数组进行排序?
    PHP 日期数组排序在 PHP 中对日期数组进行排序可能很棘手,特别是当日期不是标准化格式时。In根据您的具体情况,您有不同格式的日期数组,例如“11-01-2012”和“01-01-2014”。使用 asort 函数(按升序对数组进行排序)在这种情况下不起作用,因为它将每个日期视为字符串并忽略年-...
    编程 发布于2024-11-08
  • 机器学习中的 C++:逃离 Python 和 GIL
    机器学习中的 C++:逃离 Python 和 GIL
    介绍 当 Python 的全局解释器锁 (GIL) 成为需要高并发或原始性能的机器学习应用程序的瓶颈时,C 提供了一个引人注目的替代方案。这篇博文探讨了如何利用 C 语言进行 ML,重点关注性能、并发性以及与 Python 的集成。 阅读完整的博客! ...
    编程 发布于2024-11-08
  • 如何在 PHP 中将 UTF-8 字符转换为 ISO-8859-1 并返回?
    如何在 PHP 中将 UTF-8 字符转换为 ISO-8859-1 并返回?
    将 UTF-8 字符转换为 ISO-88591 并返回 PHP当使用使用不同编码的多个脚本时,需要在字符集之间进行转换。其中一种转换涉及将 UTF-8 字符转换为 ISO-88591,反之亦然。尽管存在 utf_encode() 和 _decode(),但将 UTF-8 直接转换为 ISO-8859...
    编程 发布于2024-11-08
  • 以下是一些标题选项,使用问题格式,重点关注文章中提出的挑战和解决方案:

选项 1(直接且简洁):
* 如何避免 Angul 中的模板标签冲突
    以下是一些标题选项,使用问题格式,重点关注文章中提出的挑战和解决方案: 选项 1(直接且简洁): * 如何避免 Angul 中的模板标签冲突
    为 AngularJS 和 Django 定制模板标签由于模板标签冲突,将 AngularJS 与 Django 集成可能会带来挑战,两者都使用{{}}。为了克服这个问题,需要调整 AngularJS 或 Django 的模板标签语法。AngularJS 模板标签定制:在 AngularJS 1.0...
    编程 发布于2024-11-08
  • 每个开发人员都应该了解的高级 JavaScript 概念
    每个开发人员都应该了解的高级 JavaScript 概念
    JavaScript 是许多开发人员日常使用的语言,但其生态系统中存在许多隐藏的瑰宝,即使是经验丰富的开发人员也可能不熟悉。本文探讨了一些鲜为人知的 JavaScript 概念,它们可以显着提高您的编程技能。我们将介绍 代理、符号、生成器等概念,通过示例演示每个概念并解决问题以说明其强大功能。 最...
    编程 发布于2024-11-08
  • 直接用mysqli_函数替换mysql_函数会带来挑战吗?
    直接用mysqli_函数替换mysql_函数会带来挑战吗?
    盲目用 mysqli_ 替换 mysql_ 函数会导致问题吗?将代码库更新到 PHP 7 需要将已弃用的 mysql_ 函数替换为 mysqli_ 对应函数。然而,一个常见的误解是您可以直接进行全面替换。答案:不,事情没那么简单虽然函数名称可能会出现类似地,与 mysql_ 相比,mysqli_ 函...
    编程 发布于2024-11-08
  • 为什么 `malloc()` 在 C++ 中会导致“无效转换”错误?
    为什么 `malloc()` 在 C++ 中会导致“无效转换”错误?
    Malloc 分配问题:了解“无效转换”错误提供的代码在尝试使用 malloc 分配内存时引入了一个常见问题( )。该错误源于将 malloc() 的返回值直接分配给 char 指针而没有进行正确的转换。malloc() 函数在堆中保留一块内存并返回一个通用的 void 指针。但是,代码将此指针分配...
    编程 发布于2024-11-08
  • 如何在 Zend Framework 中确定客户端的时区?
    如何在 Zend Framework 中确定客户端的时区?
    客户端时区确定确定客户端时区对于时间敏感的应用程序至关重要。这个问题探讨了如何在 Zend Framework 中获取此信息。以秒偏移量形式检索时区获取时区的首选方法是作为距 UTC 的秒数。例如,俄罗斯莫斯科将返回 36060,而英国伦敦将返回 0。建议的解决方案建议的解决方案涉及利用jQuery...
    编程 发布于2024-11-08
  • 如何使用 React 构建通知功能
    如何使用 React 构建通知功能
    Hello everyone ?? In today's tutorial, we'll guide you through building a real-time notifications feature using SuperViz, a powerful platform for rea...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3