视图

简介

当然，直接从路由和控制器返回整段 HTML 文档字符串并不现实。幸运的是，视图提供了一种便捷方式，把全部 HTML 放在独立文件中。

视图将控制器 / 应用逻辑与展示逻辑分离，并存放在 resources/views 目录。使用 Laravel 时，视图模板通常使用 Blade 模板语言编写。一个简单的视图可能如下所示：

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

INFO

想了解如何编写 Blade 模板？请参阅完整的 Blade 文档开始学习。

用 React / Vue 编写视图

许多开发者不再通过 Blade 用 PHP 编写前端模板，而更愿意使用 React、Svelte 或 Vue。Inertia 让这一切变得轻松：它能把你的 React / Svelte / Vue 前端与 Laravel 后端衔接起来，而无需面对构建 SPA 时常见的复杂性。

我们的 Breeze 与 Jetstream 起步套件能为你下一套基于 Inertia 的 Laravel 应用提供出色起点。此外，Laravel Bootcamp 完整演示了如何构建基于 Inertia 的 Laravel 应用，并包含 Vue 与 React 示例。

创建与渲染视图

你可以在应用的 resources/views 目录中放置扩展名为 .blade.php 的文件来创建视图，也可以使用 make:view Artisan 命令：

shell

php artisan make:view greeting

.blade.php 扩展名告诉框架该文件包含 Blade 模板。Blade 模板包含 HTML 以及 Blade 指令，让你可以轻松输出值、创建「if」语句、遍历数据等。

创建视图后，你可以使用全局 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);

WARNING

视图目录名不应包含 . 字符。

创建第一个可用视图

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

<?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

<?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

<?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 命令，用于预编译应用使用的全部视图。为提升性能，你可能希望在部署流程中运行该命令：

shell

php artisan view:cache

你可以使用 view:clear 命令清除视图缓存：

shell

php artisan view:clear

视图 ​

简介 ​

用 React / Vue 编写视图 ​

创建与渲染视图 ​

嵌套视图目录 ​

创建第一个可用视图 ​

判断视图是否存在 ​

向视图传递数据 ​

与所有视图共享数据 ​

视图合成器 ​

将合成器附加到多个视图 ​

视图创建器 ​

优化视图 ​

视图

简介

用 React / Vue 编写视图

创建与渲染视图

嵌套视图目录

创建第一个可用视图

判断视图是否存在

向视图传递数据

与所有视图共享数据

视图合成器

将合成器附加到多个视图

视图创建器

优化视图