视图

简介
- 使用 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

资源

合作伙伴