视图

简介
- 使用 React/Vue 编写视图
创建和渲染视图
将数据传递给视图
- 与所有视图共享数据
视图合成器
- 视图创建器
优化视图

简介

当然，从您的路由和控制器中直接返回整个 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 在 PHP 中编写。Laravel 通过 Inertia 使这变得轻而易举，Inertia 是一个库，它使将您的 React/Vue 前端绑定到 Laravel 后端变得非常容易，而无需构建 SPA 的典型复杂性。

我们的 Breeze 和 Jetstream 入门套件为您提供了一个很好的起点，用于构建由 Inertia 提供支持的下一个 Laravel 应用程序。此外，Laravel Bootcamp 提供了构建由 Inertia 提供支持的 Laravel 应用程序的完整演示，包括 Vue 和 React 中的示例。

创建和渲染视图

您可以通过将扩展名为 .blade.php 的文件放在应用程序的 resources/views 目录中或使用 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;
 
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 门面的 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