README

在开始使用此库之前，重要的是要了解 Inertia.js 是什么，它是用来做什么的，以及它是如何工作的，请参阅官方 Inertia.js 网站

PHP PSR-15 InertiaJS 服务器端适配器，它可以与 Mezzio、Slim 或任何实现 PSR-15 接口的框架一起使用。

适配器是一个 PSR-15 中间件，用于检测 InertiaJS 请求，并准备和发送响应，以便由 InertiaJS 前端组件读取和渲染。安装和配置后，使用方式可以非常简单，如下所示：

// In some RequestHandlerInterface class

$inertia = $request->getAttribute(InertiaMiddleware::INERTIA_ATTRIBUTE);
return $inertia->render('MyFrontEndComponent', [
    'someProp' => 'someProp Prop Value',
    'ohterProp' => 'ohterProp Prop Value'
]);

使用方法

创建了一个小型应用程序，以演示如何在 Mezzio 应用程序中使用此适配器。

适配器设计用于与 Mezzio 无需太多努力即可协同工作。以下假设使用 Mezzio Skeleton 生成了一个 Mezzio 应用程序，并选择了 Twig 作为模板引擎。

安装

1- 安装适配器

composer require cherif/inertia-psr15

2- 将 inertia 中间件添加到中间件管道

<?php
//my-mezzio-app/config/pipeline.php

// ...
// - $app->pipe('/files', $filesMiddleware);
$app->pipe(\Cherif\InertiaPsr15\Middleware\InertiaMiddleware::class);

// Register the routing middleware in the middleware pipeline.
// This middleware registers the Mezzio\Router\RouteResult request attribute.
$app->pipe(RouteMiddleware::class);

// ...

3- 请参考 InertiaJS 安装客户端适配器。

4- 推荐使用 Webpack 构建前端应用程序，但是为了在 Twig 模板中渲染构建的 JS/CSS 资产，可以使用以下扩展：

composer require fullpipe/twig-webpack-extension

可能需要一个工厂来配置 Webpack 扩展

5- 配置模板以使用 Webpack 扩展和适配器附带 Inertia Twig 扩展，通过更新 config/autoload/template.global.php 和 webpack.global.php 如下所示：

<?php

// template.global.php

declare(strict_types=1);

use Cherif\InertiaPsr15\Twig\InertiaExtension;
use Fullpipe\TwigWebpackExtension\WebpackExtension;

return [
    'templates' => [
        'paths' => [
            'error' => [dirname(__DIR__, 2) . '/templates/error'],
            '__main__' => [dirname(__DIR__, 2) . '/templates']
        ]
    ],
    'twig' => [
        'extensions' => [
            WebpackExtension::class,
            InertiaExtension::class
        ]
    ]
];

<?php

// webpack.global.php

declare(strict_types=1);

return [
    'webpack' => [
        'manifest_file' => dirname(__DIR__, 2) . '/public/build/manifest.json',
        'public_dir' => dirname(__DIR__, 2) . '/build',
    ]
];

6- 适配器只需要一个后端模板来渲染应用程序。默认情况下，如果没有配置默认模板，它将查找 templates/app.html.twig。应用程序模板可能如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% webpack_entry_css 'build/app' %}
    </head>
    <body>
        {{ inertia(page) }}
        {% webpack_entry_js 'build/runtime' %}
        {% webpack_entry_js 'build/app' defer %}
    </body>
</html>

该模板使用 Webpack 扩展（webpack_entry_css、webpack_entry_js）来渲染资产，并使用 Inertia 扩展 inertia(page) 来挂载前端应用程序。

配置成功后，适配器可以用来渲染前端组件而不是 HTML 模板。

declare(strict_types=1);

namespace App\Handler;

use Cherif\InertiaPsr15\Middleware\InertiaMiddleware;
use Cherif\InertiaPsr15\Service\InertiaInterface;
use Mezzio\LaminasView\LaminasViewRenderer;
use Mezzio\Plates\PlatesRenderer;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use Psr\Http\Server\RequestHandlerInterface;

class HomePageHandler implements RequestHandlerInterface
{
    public function handle(ServerRequestInterface $request): ResponseInterface
    {
        /** @var InertiaInterface $inertia */
        $inertia = $request->getAttribute(InertiaMiddleware::INERTIA_ATTRIBUTE);
        return $inertia->render('Home', [
            'greeting' => 'Hello Inertia PSR-15'
        ]);
    }
}

版权

Mohammed Cherif BOUCHELAGHEM 2021

cherif / inertia-psr15

维护者

详细信息

README

使用方法

安装

版权