视图

未匹配的标注
本文档最新版为 11.x,旧版本可能放弃维护,推荐阅读最新版!

视图

介绍

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

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

<!-- 视图存储在 resources/views/greeting.blade.php -->

<html>
    <body>
        <h1>你好, {{ $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 中编写前端模板。得益于 Inertia,Laravel 使这变得轻而易举,这个库可以轻松地将你的 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
{
    /**
     * 注册任何应用程序服务。
     */
    public function register(): void
    {
        // ...
    }

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

视图组件

视图组件(View Composers)是在渲染视图时调用的回调或类方法。如果你希望在每次渲染某个视图时都将一些数据绑定到该视图上,视图组件可以帮助你将这些逻辑组织到一个地方。如果你的应用程序中的多个路由或控制器返回同一个视图,并且总是需要某个特定的数据,那么视图组件会特别有用。

通常,视图组件会在你的应用程序的某个 服务提供者 中注册。在这个例子中,我们假设 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
{
    /**
     * 注册任何应用程序服务。
     */
    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) {
            // ...
        });
    }
}

既然我们已经注册了视图组件,那么每当 profile 视图被渲染时,App\View\Composers\ProfileComposer 类的 compose 方法就会被执行。让我们来看一个视图组件类的例子:

<?php

namespace App\View\Composers;

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

class ProfileComposer
{
    /**
     * 创建一个新的 profile composer。
     */
    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) {
    // ...
});

视图的 "Creator"

视图的 "Creator" 与视图组件非常相似;但是,它们在视图被实例化后会立即执行,而不是等到视图即将被渲染时才执行。要注册一个视图的 creator,请使用 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

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/laravel/12.x/vi...

译文地址:https://learnku.com/docs/laravel/12.x/vi...

上一篇 下一篇
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~