简介

当然,直接从路由和控制器返回完整的 HTML 文档字符串并不实用。幸运的是,视图提供了一种便捷的方式,可将我们所有的 HTML 放置在单独的文件中。

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

<!-- 存储在 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 / Svelte / Vue 编写视图

许多开发者不再通过 Blade 用 PHP 编写前端模板,而是开始更倾向于使用 React、Svelte 或 Vue 来编写模板。得益于 Inertia,Laravel 让这件事变得轻而易举,该库能让你轻松地将 React / Svelte / Vue 前端与 Laravel 后端连接起来,无需像构建 SPA 那样面对典型的复杂性。

我们的React、Svelte 和 Vue 应用启动套件,为你基于 Inertia 打造的下一个 Laravel 应用提供了绝佳的起点。

创建与渲染视图

你可以通过在应用的 resources/views 目录中放置一个以 .blade.php 为扩展名的文件,或者使用 make:view Artisan 命令来创建一个视图:

php artisan make:view greeting

.blade.php 扩展名会告知框架该文件包含Blade 模板。Blade 模板既包含 HTML,也包含 Blade 指令,通过这些指令,你可以轻松输出值、创建 “if” 语句、遍历数据等。

创建好视图后,你可以使用全局 view 辅助函数,从应用的某个路由或控制器中返回它:

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

也可以使用 View 外观返回视图:

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 外观的 first 方法,你可以创建给定视图数组中第一个存在的视图。如果你的应用或包允许自定义或覆盖视图,此功能会很有用:

use Illuminate\Support\Facades\View;

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

判断视图是否存在

如果你需要判断视图是否存在,可以使用 View 外观。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 外观的 share 方法来实现这一点。通常,你应该将调用 share 方法的代码放在服务提供者的 boot 方法中。你可以将它们添加到 App\Providers\AppServiceProvider 类中,或者生成一个单独的服务提供者来存放这些代码:

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * 注册任何应用服务。
     */
    public function register(): void
    {
        // ...
    }

    /**
     * 引导启动任何应用服务。
     */
    public function boot(): void
    {
        View::share('key', 'value');
    }
}

视图合成器

视图合成器是在视图被渲染时会调用的回调或类方法。如果有希望在视图每次渲染时都绑定到该视图的数据,视图合成器可以帮你将这些逻辑整合到同一个位置。如果应用中的多个路由或控制器返回同一个视图,且该视图始终需要某条特定数据,视图合成器就会特别有用。

通常,视图合成器会注册在应用的某个服务提供者中。在本示例中,我们假设 App\Providers\AppServiceProvider 将存放此逻辑。

我们将使用 View 外观的 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
{
    /**
     * 注册任何应用服务。
     */
    public function register(): void
    {
        // ...
    }

    /**
     * 引导启动任何应用服务。
     */
    public function boot(): void
    {
        // 使用基于类的合成器...
        Facades\View::composer('profile', ProfileComposer::class);

        // 使用基于闭包的合成器...
        Facades\View::composer('welcome', function (View $view) {
            // ...
        });

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

现在我们已经注册了合成器,App\View\Composers\ProfileComposer 类的 compose 方法会在 profile 视图每次渲染时执行。来看一个合成器类的示例:

<?php

namespace App\View\Composers;

use App\Repositories\UserRepository;
use Illuminate\View\View;

class ProfileComposer
{
    /**
     * 创建一个新的 profile 合成器。
     */
    public function __construct(
        protected UserRepository $users,
    ) {}

    /**
     * 将数据绑定到视图。
     */
    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 方法也接受 * 字符作为通配符,允许你将 composer 附加到所有视图:

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

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

视图创建器

视图“创建器”与视图 composer 非常相似;然而,它们在视图实例化之后立即执行,而不是等到视图即将渲染时才执行。要注册视图创建器,请使用 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