Lzh on GitHub

简介

当然,直接从路由和控制器返回整个 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 编写他们的前端模板。Laravel 通过 Inertia 使这变得轻松无痛,Inertia 是一个库,它可以轻松地将您的 React / Vue 前端与您的 Laravel 后端连接起来,而无需构建 SPA 的典型复杂性。

我们的 React 和 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 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