視圖

簡介
- 在 React / Vue 中編寫視圖
建立和渲染視圖
將資料傳遞給視圖
- 與所有視圖共享資料
視圖合成器
- 視圖建立器
最佳化視圖

簡介

當然，直接從路由和控制器返回整個 HTML 文件字串是不切實際的。幸運的是，視圖提供了一種方便的方法，將我們所有的 HTML 放置在單獨的檔案中。

視圖將您的控制器/應用程式邏輯與您的呈現邏輯分開，並儲存在 resources/views 目錄中。使用 Laravel 時，視圖範本通常使用 Blade 範本語言編寫。一個簡單的視圖可能如下所示

<!-- View stored in resources/views/greeting.blade.php -->
 
<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

由於此視圖儲存在 resources/views/greeting.blade.php，我們可以像這樣使用全域的 view 輔助函式來返回它

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

想要了解更多關於如何編寫 Blade 範本的資訊嗎？查看完整的 Blade 文件以開始使用。

在 React / Vue 中編寫視圖

許多開發人員開始傾向於使用 React 或 Vue 編寫其前端範本，而不是通過 Blade 在 PHP 中編寫範本。感謝 Inertia，一個可以輕鬆將您的 React / Vue 前端連接到 Laravel 後端的函式庫，而無需建構 SPA 的典型複雜性，Laravel 使這一切變得輕鬆。

我們的 Breeze 和 Jetstream 入門套件為您下一個由 Inertia 驅動的 Laravel 應用程式提供了一個很好的起點。此外，Laravel Bootcamp 完整示範了如何建構由 Inertia 驅動的 Laravel 應用程式，包括 Vue 和 React 中的範例。

建立和渲染視圖

您可以通過在應用程式的 resources/views 目錄中放置一個帶有 .blade.php 副檔名的檔案，或使用 make:view Artisan 命令來建立視圖

php artisan make:view greeting

.blade.php 副檔名通知框架，該檔案包含 Blade 範本。Blade 範本包含 HTML 以及允許您輕鬆回顯值、建立「if」語句、迭代數據等的 Blade 指令。

建立視圖後，您可以使用全域的 view 輔助函式，從應用程式的其中一個路由或控制器返回它

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

也可以使用 View facade 返回視圖

use Illuminate\Support\Facades\View;
 
return View::make('greeting', ['name' => 'James']);

如您所見，傳遞給 view 輔助函式的第一個引數對應於 resources/views 目錄中的視圖檔案名稱。第二個引數是一個數據陣列，應提供給視圖。在這種情況下，我們傳遞了 name 變數，該變數使用 Blade 語法顯示在視圖中。

巢狀視圖目錄

視圖也可以巢狀在 resources/views 目錄的子目錄中。可以使用「點」表示法來引用巢狀視圖。例如，如果您的視圖儲存在 resources/views/admin/profile.blade.php，您可以像這樣從應用程式的其中一個路由/控制器返回它

return view('admin.profile', $data);

視圖目錄名稱不應包含 . 字元。

建立第一個可用的視圖

使用 View facade 的 first 方法，您可以建立給定視圖陣列中存在的第一個視圖。如果您的應用程式或套件允許自訂或覆寫視圖，這可能會很有用

use Illuminate\Support\Facades\View;
 
return View::first(['custom.admin', 'admin'], $data);

判斷視圖是否存在

如果需要判斷視圖是否存在，您可以使用 View facade。如果視圖存在，exists 方法將返回 true

use Illuminate\Support\Facades\View;
 
if (View::exists('admin.profile')) {
    // ...
}

將資料傳遞給視圖

如您在先前的範例中所見，您可以將數據陣列傳遞給視圖，以使該數據可供視圖使用

return view('greetings', ['name' => 'Victoria']);

當以此方式傳遞資訊時，數據應該是具有鍵/值對的陣列。將數據提供給視圖後，您可以使用數據的鍵存取視圖中的每個值，例如 <?php echo $name; ?>。

作為將完整數據陣列傳遞給 view 輔助函式的替代方法，您可以使用 with 方法將個別數據片段新增到視圖中。with 方法返回視圖物件的實例，以便您可以在返回視圖之前繼續串連方法

return view('greeting')
            ->with('name', 'Victoria')
            ->with('occupation', 'Astronaut');

有時，您可能需要與應用程式渲染的所有視圖共享數據。您可以使用 View facade 的 share 方法來實現。通常，您應該將對 share 方法的呼叫放置在服務提供者的 boot 方法中。您可以將它們新增到 App\Providers\AppServiceProvider 類別中，或產生一個單獨的服務提供者來存放它們

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\View;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        View::share('key', 'value');
    }
}

視圖合成器

視圖合成器是在渲染視圖時呼叫的回調或類別方法。如果您有每次渲染視圖時都要綁定到視圖的數據，視圖合成器可以幫助您將該邏輯組織到單一位置。如果應用程式中的多個路由或控制器返回相同的視圖，並且始終需要特定的數據片段，則視圖合成器可能特別有用。

通常，視圖合成器將在您應用程式的其中一個服務提供者中註冊。在此範例中，我們假設 App\Providers\AppServiceProvider 將存放此邏輯。

我們將使用 View facade 的 composer 方法來註冊視圖合成器。Laravel 不包含基於類別的視圖合成器的預設目錄，因此您可以隨意組織它們。例如，您可以建立一個 app/View/Composers 目錄來存放應用程式的所有視圖合成器

<?php
 
namespace App\Providers;
 
use App\View\Composers\ProfileComposer;
use Illuminate\Support\Facades;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\View;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Using class based composers...
        Facades\View::composer('profile', ProfileComposer::class);
 
        // Using closure based composers...
        Facades\View::composer('welcome', function (View $view) {
            // ...
        });
 
        Facades\View::composer('dashboard', function (View $view) {
            // ...
        });
    }
}

現在我們已經註冊了合成器，每次渲染 profile 視圖時，都會執行 App\View\Composers\ProfileComposer 類別的 compose 方法。讓我們看看合成器類別的範例

<?php
 
namespace App\View\Composers;
 
use App\Repositories\UserRepository;
use Illuminate\View\View;
 
class ProfileComposer
{
    /**
     * Create a new profile composer.
     */
    public function __construct(
        protected UserRepository $users,
    ) {}
 
    /**
     * Bind data to the view.
     */
    public function compose(View $view): void
    {
        $view->with('count', $this->users->count());
    }
}

如您所見，所有視圖合成器都是通過服務容器解析的，因此您可以在合成器的建構函式中類型提示您需要的任何相依性。

將合成器附加到多個視圖

您可以通過將視圖陣列作為 composer 方法的第一個引數傳遞，一次將視圖合成器附加到多個視圖

use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;
 
View::composer(
    ['profile', 'dashboard'],
    MultiComposer::class
);

composer 方法也接受 * 字元作為萬用字元，允許您將合成器附加到所有視圖

use Illuminate\Support\Facades;
use Illuminate\View\View;
 
Facades\View::composer('*', function (View $view) {
    // ...
});

視圖建立器

視圖「建立器」與視圖合成器非常相似；但是，它們會在視圖被實例化後立即執行，而不是等到視圖即將渲染時才執行。要註冊視圖建立器，請使用 creator 方法

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;
 
View::creator('profile', ProfileCreator::class);

最佳化視圖

預設情況下，Blade 範本視圖是按需編譯的。當執行渲染視圖的請求時，Laravel 將判斷是否存在視圖的編譯版本。如果檔案存在，Laravel 將判斷未編譯的視圖是否比編譯的視圖更近修改過。如果編譯的視圖不存在，或未編譯的視圖已修改，Laravel 將重新編譯視圖。

在請求期間編譯視圖可能會對效能產生小的負面影響，因此 Laravel 提供了 view:cache Artisan 命令來預先編譯應用程式使用的所有視圖。為了提高效能，您可能希望將此命令作為部署流程的一部分執行

php artisan view:cache

您可以使用 view:clear 命令清除視圖快取

php artisan view:clear