檢視

簡介
- 使用 React / Svelte / Vue 編寫檢視
建立與渲染檢視
向檢視傳遞資料
- 與所有檢視共享資料
檢視合成器 (View Composers)
- 檢視建立器 (View Creators)
最佳化檢視

簡介

當然，直接從路由和控制器中返回完整的 HTML 文件字串是不切實際的。值得慶幸的是，檢視提供了一種方便的方式，可以將所有的 HTML 放入單獨的檔案中。

檢視將你的控制器/應用程式邏輯與表示邏輯分離，並存儲在 resources/views 目錄中。在使用 Laravel 時，檢視模板通常使用 Blade 模板語言編寫。一個簡單的檢視可能如下所示

1<!-- View stored in resources/views/greeting.blade.php -->
2 
3<html>
4    <body>
5        <h1>Hello, {{ $name }}</h1>
6    </body>
7</html>

<!-- View stored in resources/views/greeting.blade.php -->

<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

由於此檢視儲存在 resources/views/greeting.blade.php 中，我們可以使用全域性 view 輔助函式來返回它，如下所示

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

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

想了解更多關於如何編寫 Blade 模板的資訊？請檢視完整的 Blade 文件以開始使用。

使用 React / Svelte / Vue 編寫檢視

許多開發者不再傾向於透過 Blade 在 PHP 中編寫前端模板，而開始傾向於使用 React、Svelte 或 Vue 來編寫模板。得益於 Inertia，Laravel 讓這一過程變得非常輕鬆。Inertia 是一個可以將你的 React / Svelte / Vue 前端與 Laravel 後端無縫結合的庫，而無需構建單頁應用 (SPA) 的典型複雜性。

我們的 React、Svelte 和 Vue 應用入門套件為你的下一個由 Inertia 驅動的 Laravel 應用程式提供了一個絕佳的起點。

建立與渲染檢視

你可以透過在應用程式的 resources/views 目錄中放置一個副檔名為 .blade.php 的檔案，或者使用 make:view Artisan 命令來建立檢視

1php artisan make:view greeting

php artisan make:view greeting

.blade.php 副檔名告知框架該檔案包含一個 Blade 模板。Blade 模板包含 HTML 以及 Blade 指令，允許你輕鬆輸出值、建立 “if” 語句、遍歷資料等。

建立檢視後，你可以使用全域性 view 輔助函式從應用程式的路由或控制器中返回它

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

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

檢視也可以使用 View 門面 (facade) 返回

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

use Illuminate\Support\Facades\View;

return View::make('greeting', ['name' => 'James']);

如你所見，傳遞給 view 輔助函式的第一個引數對應於 resources/views 目錄中檢視檔案的名稱。第二個引數是一個數據陣列，這些資料將在檢視中可用。在本例中，我們傳遞了 name 變數，該變數透過 Blade 語法在檢視中顯示。

巢狀檢視目錄

檢視也可以巢狀在 resources/views 目錄的子目錄中。“點”符號可用於引用巢狀檢視。例如，如果你的檢視儲存在 resources/views/admin/profile.blade.php，你可以從應用程式的路由/控制器中返回它，如下所示

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

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

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

建立第一個可用的檢視

使用 View 門面的 first 方法，你可以建立給定檢視陣列中存在的第一個檢視。如果你的應用程式或包允許自定義或覆蓋檢視，這將非常有用

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

use Illuminate\Support\Facades\View;

return View::first(['custom.admin', 'admin'], $data);

判斷檢視是否存在

如果你需要判斷檢視是否存在，可以使用 View 門面。如果檢視存在，exists 方法將返回 true

1use Illuminate\Support\Facades\View;
2 
3if (View::exists('admin.profile')) {
4    // ...
5}

use Illuminate\Support\Facades\View;

if (View::exists('admin.profile')) {
    // ...
}

向檢視傳遞資料

正如你在前面的示例中看到的，你可以將資料陣列傳遞給檢視，以使這些資料在檢視中可用

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

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

以這種方式傳遞資訊時，資料應該是鍵值對陣列。向檢視提供資料後，你可以在檢視中使用資料的鍵來訪問每個值，例如 <?php echo $name; ?>。

除了向 view 輔助函式傳遞完整的陣列資料外，你還可以使用 with 方法向檢視新增單個數據片段。with 方法返回一個檢視物件例項，以便你可以在返回檢視之前繼續鏈式呼叫其他方法

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

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

有時，你可能需要與應用程式渲染的所有檢視共享資料。你可以使用 View 門面的 share 方法來完成此操作。通常，你應該將 share 方法的呼叫放在服務提供者的 boot 方法中。你可以隨意將它們新增到 App\Providers\AppServiceProvider 類中，或者建立一個單獨的服務提供者來存放它們

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use Illuminate\Support\Facades\View;
 6 
 7class AppServiceProvider extends ServiceProvider
 8{
 9    /**
10     * Register any application services.
11     */
12    public function register(): void
13    {
14        // ...
15    }
16 
17    /**
18     * Bootstrap any application services.
19     */
20    public function boot(): void
21    {
22        View::share('key', 'value');
23    }
24}

<?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');
    }
}

檢視合成器 (View Composers)

檢視合成器是當檢視被渲染時呼叫的回撥或類方法。如果你有每次渲染檢視時都需要繫結到檢視的資料，檢視合成器可以幫助你將該邏輯組織到一個位置。如果同一個檢視被應用程式中的多個路由或控制器返回，並且始終需要某部分特定的資料，檢視合成器會特別有用。

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

我們將使用 View 門面的 composer 方法來註冊檢視合成器。Laravel 沒有為基於類的檢視合成器提供預設目錄，因此你可以根據需要自由組織它們。例如，你可以建立一個 app/View/Composers 目錄來存放應用程式的所有檢視合成器

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use App\View\Composers\ProfileComposer;
 6use Illuminate\Support\Facades;
 7use Illuminate\Support\ServiceProvider;
 8use Illuminate\View\View;
 9 
10class AppServiceProvider extends ServiceProvider
11{
12    /**
13     * Register any application services.
14     */
15    public function register(): void
16    {
17        // ...
18    }
19 
20    /**
21     * Bootstrap any application services.
22     */
23    public function boot(): void
24    {
25        // Using class-based composers...
26        Facades\View::composer('profile', ProfileComposer::class);
27 
28        // Using closure-based composers...
29        Facades\View::composer('welcome', function (View $view) {
30            // ...
31        });
32 
33        Facades\View::composer('dashboard', function (View $view) {
34            // ...
35        });
36    }
37}

<?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 方法就會被執行。讓我們看看合成器類的一個例子

 1<?php
 2 
 3namespace App\View\Composers;
 4 
 5use App\Repositories\UserRepository;
 6use Illuminate\View\View;
 7 
 8class ProfileComposer
 9{
10    /**
11     * Create a new profile composer.
12     */
13    public function __construct(
14        protected UserRepository $users,
15    ) {}
16 
17    /**
18     * Bind data to the view.
19     */
20    public function compose(View $view): void
21    {
22        $view->with('count', $this->users->count());
23    }
24}

<?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 方法，將檢視合成器一次性附加到多個檢視

1use App\Views\Composers\MultiComposer;
2use Illuminate\Support\Facades\View;
3 
4View::composer(
5    ['profile', 'dashboard'],
6    MultiComposer::class
7);

use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;

View::composer(
    ['profile', 'dashboard'],
    MultiComposer::class
);

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

1use Illuminate\Support\Facades;
2use Illuminate\View\View;
3 
4Facades\View::composer('*', function (View $view) {
5    // ...
6});

use Illuminate\Support\Facades;
use Illuminate\View\View;

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

檢視建立器 (View Creators)

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

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

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;

View::creator('profile', ProfileCreator::class);

最佳化檢視

預設情況下，Blade 模板檢視是按需編譯的。當執行渲染檢視的請求時，Laravel 會判斷編譯後的檢視檔案是否存在。如果檔案存在，Laravel 接著會判斷未編譯的檢視是否比編譯後的檢視修改時間更新。如果編譯後的檢視不存在，或者未編譯的檢視已被修改，Laravel 將重新編譯該檢視。

在請求期間編譯檢視可能會對效能產生輕微的負面影響，因此 Laravel 提供了 view:cache Artisan 命令來預編譯應用程式使用的所有檢視。為了提高效能，你可能希望在部署過程中執行此命令

1php artisan view:cache

php artisan view:cache

你可以使用 view:clear 命令來清除檢視快取

1php artisan view:clear

php artisan view:clear

檢視

簡介

使用 React / Svelte / Vue 編寫檢視

建立與渲染檢視

巢狀檢視目錄

建立第一個可用的檢視

判斷檢視是否存在

向檢視傳遞資料

檢視合成器 (View Composers)

將合成器附加到多個檢視

檢視建立器 (View Creators)

最佳化檢視

在此頁面上

產品

Packages

資源

合作伙伴