服务器端设置

安装 Inertia 的第一步是配置您的服务器端框架。Inertia 为 Laravel 提供了官方的服务器端适配器。对于其他框架,请查看 社区适配器

Inertia 针对 Laravel 进行了微调,因此本网站上的文档示例使用 Laravel。有关使用其他服务器端框架的 Inertia 示例,请参阅该适配器维护的特定于框架的文档。

Laravel 启动套件

Laravel 的 启动套件,Breeze 和 Jetstream,为新的 Inertia 应用程序提供开箱即用的脚手架。这些启动套件是使用 Laravel 和 Vue 或 React 开始构建新的 Inertia 项目的最快方式。但是,如果您想将 Inertia 手动安装到您的应用程序中,请参考下面的文档。

安装依赖项

首先,使用 Composer 包管理器安装 Inertia 服务器端适配器。

composer require inertiajs/inertia-laravel

根模板

接下来,设置将在首次访问应用程序页面时加载的根模板。这将用于加载您的网站资产(CSS 和 JavaScript),并将包含一个根 <div>,用于启动您的 JavaScript 应用程序。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

此模板应包含您的资产,以及 @inertia@inertiaHead 指令。

默认情况下,Inertia 的 Laravel 适配器将假设您的根模板名为 app.blade.php。如果您想使用其他根视图,可以使用 Inertia::setRootView() 方法更改它。

中间件

接下来我们需要设置 Inertia 中间件。您可以通过将 HandleInertiaRequests 中间件发布到您的应用程序来完成此操作,这可以通过以下 Artisan 命令完成。

php artisan inertia:middleware

发布中间件后,将 HandleInertiaRequests 中间件附加到应用程序的 bootstrap/app.php 文件中的 web 中间件组。

use App\Http\Middleware\HandleInertiaRequests;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

此中间件提供了一个 version() 方法用于设置您的 资产版本,以及一个 share() 方法用于定义 共享数据

创建响应

就是这样,您已经准备好服务器端了!现在您可以开始创建 Inertia 页面 并通过 响应 渲染它们。

use Inertia\Inertia;

class EventsController extends Controller
{
    public function show(Event $event)
    {
        return Inertia::render('Event/Show', [
            'event' => $event->only(
                'id',
                'title',
                'start_date',
                'description'
            ),
        ]);
    }
}