什麼是 Laravel 細絲以及如何使用它

熔絲 Laravel 是一個「加速」開發框架，它提供了多個全端組件。

它旨在簡化開發過程，使創建優雅的應用程式變得容易。

使用 TALL 堆疊（Tailwind CSS、Alpine.js、Laravel 和 Livewire）

6 minuti

長絲拉維爾 是一個內容管理框架，擁有一系列精美的全端元件。這 框架 為您的下一個應用提供最佳的入門套件 laravel。只需幾個步驟，您就可以建立一個漂亮的管理介面，並且它會產生易於使用且易於擴展的元件。

在問題上 laravel 燈絲教程 我們將看到設定您的專案的所有步驟 長絲拉維爾

組成部分 長絲拉維爾

讓我們看看它提供了哪些組件 Laravel 燈絲:

• 面板產生器：建立管理面板 Laravel，面向客戶的應用程式、平台 SaaS的 或您可以想像的任何其他應用程式。這 面板產生器 簡化創建強大管理介面的過程；
• 表單生成器：讓您輕鬆構建 非凡的形式 基於 的Livewire 具有超過 25 個預定義組件。產生的表單將由簡單的輸入欄位組成；
• 表格產生器: 創造 最佳化數據表 並基於交互 的Livewire 對於任何情況。透過排序、過濾和分頁以直觀的格式查看資料；
• 通知: 您可以使用管理 通知 透過使用即時發送訊息來讓用戶了解情況 的Livewire;
• 操作：開啟互動和滑蓋模式，保持流暢的使用者體驗。這 行動 它們使您能夠讓用戶參與並參與您的應用程式流程；
• 資訊列表產生器：查看有關特定實體的唯讀資料清單。它也在其他 Filament 套件中使用，例如 Panel Builder，用於顯示應用程式資源和關係管理器以及操作模式。學習 Infolist Builder 的功能將在創建您自己的自訂 Livewire 應用程式和使用 Filament 的其他軟體包時節省大量時間；
• 窗口小部件：為您的應用程式建立儀表板，其中包含即時圖表和統計資料。小部件可讓您建立用於監控和報告的動態視覺化；

基礎概念

Laravel Filament 包括適用於所有包的核心概念：

• All-in：不再重複重建相同的 UI 元件。 Filament 提供隨時可用的基本工具，節省您的時間和精力。
• 高堆疊： 燈絲 利用 TALL 堆疊（Tailwind CSS、Alpine.js、Laravel 和 Livewire）輕鬆建立動態、可維護的全堆疊應用程式。

安裝 長絲拉維爾

然後我們繼續安裝 Laravel 同 燈絲。但是，在繼續之前，請確保您符合以下使用要求 燈絲 V3。

PHP 8.1+
Laravel v10.0+
LiveWire v3.0+

步驟 1：首先安裝 laravel 透過執行給定的命令在您的系統中安裝最新版本 11 laravel.

composer create-project laravel/laravel filament-tutorial

安裝過程完成後，更新您的文件 .env 的名字是 數據庫 並使用指令執行遷移 php artisan migrate

步驟 2：接下來我們需要安裝 Filament 若要產生我們全新的管理介面，請執行以下命令。

composer require filament/filament:"^3.0-stable" -W

步驟 3：現在我們需要安裝面板產生器 燈絲，這將創建並註冊一個新的服務提供者 laravel 叫 AdminPanelProvider.

app/Providers/Filament/AdminPanelProvider.php

面板 燈絲 laravel 隨附預先安裝的軟體包，您無需單獨安裝（Form Builder, Table Builder, Notifications, Actions, Infolists，而 Widgets packages).

php artisan filament:install --panels

步驟 4：現在我們將使用以下命令建立第一個使用者。系統將要求您輸入您的姓名、電子郵件地址和密碼，如下所示。

php artisan make:filament-user

現在我們可以存取我們創建的管理介面並創建應用程式。

php artisan make:filament-user

Name:
> bloginnovazione

Email address:
> bloginnovazione@gmail.com

Password:
>

Success! bloginnovazione@gmail.com may now log in at http://localhost/admin/login.

要查看管理中心，請執行應用程式 php artisan serve，在瀏覽器中開啟應用程式並輸入 /admin 網址之後。您可以看到如圖所示的管理員登入部分，並輸入新建立使用者的憑證。

登入後可以看到管理面板：

現在您已準備好開始建立您的應用程式。

使用 Laravel 燈絲的房地產銷售項目

我最近開發了一個小型房地產/建築工地管理專案以及相關的房地產行銷和銷售活動。

如果您想更深入研究專案的結構，您可以 點擊此連結訪問 GitHub 上的存儲庫.

在專案中我創建了一些資源：

• 通路資源：用於銷售通路的管理；
• 房屋資源：用於財產管理
• 行銷資源* 用於管理行銷活動
• 銷售資源：用於銷售管理
• 工作現場：用於建築工地的管理

我透過對項目進行分組來設定導航選單。以下我報告班級內所做的設置 ChannelResource: 選單項 Channel 被分組在 Marketing, 帶圖標 globe-alt， 標籤 Canali 第五是導航選單項目的順序。

protected static ?string $model = Channel::class;
protected static ?string $navigationGroup = 'Marketing';
protected static ?string $navigationIcon = 'heroicon-o-globe-alt';
protected static ?string $navigationLabel = 'Canali';
protected static ?int $navigationSort = 5;

形成

在物業管理表中，我們使用了不同類型的資訊：

Select：利用一對多關係，允許選擇財產所屬的施工地點 worksite 指定於 model

Forms\Components\Select::make('worksite_id')
                    ->label('Cantiere')
                    ->relationship('worksite', 'name')
                    ->required(),

TextInput：允許設定屬性代碼、強制輸入、代碼標籤和最大長度 15 個字元

Forms\Components\TextInput::make('code')
                    ->label('Codice')
                    ->required()
                    ->maxLength(15),

Select：這樣就可以在公寓和別墅之間選擇房產類型

Forms\Components\Select::make('type')
                    ->label('Tipologia')
                    ->options([
                        'appartamento' => 'Appartamento',
                        'villa' => 'Villa',
                    ]),

FileUpLoad：允許上傳房產圖像，其中：

• preserveFilenames：保留檔案的原始名稱
• imagePreviewHeight：定義影像預覽的尺寸（高度）
• imageResizeTargetWidth e imageResizeTargetHeight：重新定義載入圖片的高度和寬度

Forms\Components\FileUpload::make('attachment')
                    ->image()
                    ->preserveFilenames()
                    ->imageResizeMode('cover')
                    ->imageCropAspectRatio('16:9')
                    ->imageResizeTargetWidth('300')
                    ->imageResizeTargetHeight('150')
                    ->imagePreviewHeight('250')
                    ->loadingIndicatorPosition('left')
                    ->panelAspectRatio('2:1')
                    ->panelLayout('integrated')
                    ->removeUploadedFileButtonPosition('right')
                    ->uploadButtonPosition('left')
                    ->uploadProgressIndicatorPosition('left'),

RichEditor：允許載入該字段 followup 帶有樣式設定和編輯工具列

Forms\Components\RichEditor::make('followup')
                    ->label('Follow Up')
                    ->maxLength(255),

枱燈

在加載項清單中，我們使用了以下方法：

ImageColumn：查看字段中儲存的屬性的照片 attachment

Tables\Columns\ImageColumn::make('attachment')
                    ->label('Foto'),

TextColumn：顯示待售房產的價格，使資訊可搜尋和訂購

Tables\Columns\TextColumn::make('price')
                    ->label('Prezzo')
                    ->searchable()
                    ->sortable(),

在問題上 laravel 燈絲教程 我們已經了解瞭如何在 Laravel 專案中設定filament，要了解有關在 Laravel 專案中管理權限的更多信息，您可以閱讀更多關於我們的文章 laravel 燈絲教程 對於角色設定.