视图


介绍

当然,直接从路由和控制器返回完整的 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 编写视图

Inertia 是一个库,使将 React 或 Vue 模板与 Laravel 后端无缝连接变得轻而易举,而无需像构建 SPA 时那样遇到典型的复杂性。因此,许多开发人员已经开始更喜欢使用 React 或 Vue 编写其前端模板,而不是通过 Blade 在 PHP 中编写。

通过 Breeze 和 Jetstream 的入门套件,您可以获得一个很好的起点,为您的下一个 Laravel 应用程序提供支持。此外,Laravel Bootcamp 提供了构建由 Inertia 提供支持的 Laravel 应用程序的完整演示,包括 Vue 和 React 示例。

创建和渲染视图

你可以在应用程序的 resources/views 目录下放置扩展名为 .blade.php 的文件来创建视图。.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('emails.customer')) {
    // ...
}

传递数据给视图

正如你在之前的例子中看到的,你可以传递一个数据数组给视图,以使得数据在视图中可用:

return view('greetings', ['name' => 'Victoria']);

在以这种方式传递信息时,数据应当是一个键/值对数组。在视图中,可以通过键名访问每个值,例如 <?php echo $name; ?>

与其使用 view 辅助函数一起传递完整的数据数组,你可以使用 with 方法将单独的数据添加到视图中。with 方法返回视图对象实例,这样你就可以在返回视图之前继续链接方法:

return view('greeting')
            ->with('name', 'Victoria')
            ->with('occupation', 'Astronaut');

共享数据给所有视图

偶尔,你可能需要共享数据给应用程序渲染的所有视图。你可以使用 View 门面的 share 方法来实现这个目的。通常,你应该在服务提供者的 boot 方法中调用 share 方法。你可以将它们添加到 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\ViewServiceProvider 来存储此逻辑。

我们将使用 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 ViewServiceProvider 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) {
            // ...
        });
    }
}

请记住,如果您创建了一个新的服务提供程序来包含视图组件的注册,则需要将服务提供程序添加到config/app.php 配置文件的 providers 数组中。

注册了 ProfileComposer 后,每当渲染 profile 视图时,App\View\Composers\ProfileComposer 类的 compose 方法都会被执行。下面我们来看一个 composer 类的示例:

<?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 都是通过服务容器进行解析的,因此您可以在 composer 的构造函数中 type-hint 任何依赖项。

将 Composer 附加到多个视图

您可以通过将视图数组作为 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) {
    // ...
});

视图创建者

视图创建者与视图组成器非常相似;但是,它们是在视图被实例化后立即执行而不是等到视图即将呈现时执行的。要注册视图创建器,请使用 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

点赞 取消点赞 收藏 取消收藏

<< 上一篇: 响应

>> 下一篇: Blade 模板