视图

点赞
0

11.x

11.x 10.x 9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1

Laravel 11 中文文档 /

本文档最新版为 10.x，旧版本可能放弃维护，推荐阅读最新版！

视图

介绍
- 在 React / Vue 中编写视图
创建和渲染视图
向视图传递数据
- 与所有视图共享数据
视图组合器
- 视图构造器
优化视图

介绍

当然，直接从路由和控制器返回整个 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 / Vue 中编写视图

许多开发者开始倾向于使用 React 或 Vue 来编写前端模板，而不是通过 Blade 用 PHP 编写。Laravel 通过 Inertia 库使得将 React / Vue 前端与 Laravel 后端连接变得轻而易举，而无需构建 SPA 的典型复杂性。

我们的 Breeze 和 Jetstream 启动套件为你的下一个由 Inertia 驱动的 Laravel 应用程序提供了很好的起点。此外，Laravel Bootcamp提供了构建由 Inertia 驱动的 Laravel 应用程序的完整演示，包括 Vue 和 React 的示例。

创建和渲染视图

你可以通过在应用程序的 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;

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

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

视图生成器

视图编辑器是在渲染视图时调用的回调或类方法。如果每次渲染视图时都要将数据绑定到该视图，则视图编辑器可以帮助你将该逻辑组织到一个位置。如果应用程序中的多个路由或控制器返回了相同的视图，并且始终需要特定的数据，则视图编辑器可能会特别有用。

通常，视图编写器将在应用程序的一个服务提供者中注册。在本例中，我们假设 App\Providers\AppServiceProvider 将包含此逻辑。

我们将使用 View 门面的 composer 方法来注册视图 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
    {
        // 基于Composer使用类...
        Facades\View::composer('profile', ProfileComposer::class);

        // 基于Composer使用闭包函数...
        Facades\View::composer('welcome', function (View $view) {
            // ...
        });

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

现在我们已经注册了 composer，每次渲染 profile 视图时，都会执行 App\View\Composers\ProfileComposer 类的 compose 方法。让我们看一下视图合成器类的例子：

<?php

namespace App\View\Composers;

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

class ProfileComposer
{
    /**
     * 创建新的配置文件合成器。
     */
    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 方法同时也接受通配符 *，表示将所有视图添加到视图合成器中:

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

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

视图构造器

视图构造器「creators」和视图合成器非常相似。唯一不同之处在于视图构造器在视图实例化之后执行，而视图合成器在视图即将渲染时执行。使用 creator 方法注册视图构造器:

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;

View::creator('profile', ProfileCreator::class);

现在我们已经注册了composer，每次呈现 profile 视图时，都会执行 App\View\Composers\ProfileComposer 类的 compose 方法。让我们来看看 composer 类的一个例子：

<?php

namespace App\View\Composers;

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

class ProfileComposer
{
    /**
     * 创建一个新的配置文件编辑器。
     */
    public function __construct(
        protected UserRepository $users,
    ) {}

    /**
     * 将数据绑定到视图。
     */
    public function compose(View $view): void
    {
        $view->with('count', $this->users->count());
    }
}

正如你所看到的，所有视图组合器都是通过服务容器解析的，因此你可以在组合器的构造函数中键入hint所需的任何依赖项。

将生成器附着到多个视图

通过将视图数组作为第一个参数传递给 composer 方法，可以将一个视图 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) {
    // ...
});

查看创建者

视图创建者「creators」与 composers 非常相似；但是，它们是在视图实例化后立即执行的，而不是等到视图即将渲染时才执行。要注册视图创建者，请使用 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

本文章首发在网站上。

原文地址：cndocs/11.x/vi...

译文地址：cndocs/11.x/vi...

视图 点赞 0 11.x 11.x 10.x 9.x 8.5 8.x 7.x 6.x 5.8 5.7 5.6 5.5 5.4 5.3 5.2 5.1

视图

介绍