Inertia.js 用于 PHP：完整指南与示例

\n\n

1. 这是什么以及为什么需要它

\n\n

Inertia.js 既不是传统意义上的框架，也不是用于创建 SPA（单页应用）的库。它更像是一座“桥梁”或“适配器”，允许您使用经典的服务器端框架（在我们的例子中是基于 PHP 的 Laravel）和任何现代前端框架（React、Vue.js 或 Svelte）来创建现代单页应用，而无需编写单独的 REST API。

\n\n

Inertia.js 解决的主要问题是摒弃了传统的“服务器渲染 HTML”或“服务器返回 JSON，前端自行决定渲染内容”的方法。取而代之的是，Inertia 提供了第三条路径：您像往常一样用 PHP 编写控制器，但不再返回 Blade 模板或 JSON 响应，而是返回一个包含数据和组件名称的 Inertia 响应。客户端的 Inertia（JavaScript）会拦截此响应，找到相应的组件（React/Vue）并使用接收到的数据进行渲染。页面之间的导航无需完全重新加载，就像 SPA 一样，但所有路由和业务逻辑仍保留在服务器端。

\n\n

为什么需要它？首先，它极大地简化了架构：您无需维护两个独立的应用程序（后端 API 和前端 SPA），也无需重复实现授权和验证逻辑。其次，它保留了 Laravel 的所有优势（Eloquent ORM、用于邮件的 Blade 组件、Artisan、中间件）以及 React/Vue 的所有优势（响应式、组件化方法、庞大的生态系统）。第三，它提供了出色的开发者体验（DX）：您在一个仓库中工作，使用一个路由器（Laravel），而 Inertia 透明地管理客户端上的应用程序状态。

\n\n

2. 安装

\n\n

安装分为两部分：服务器端（PHP）和客户端（JavaScript）。假设您已经安装了 Laravel（版本 8、9、10 或 11）。

\n\n

步骤 1：安装服务器端包（PHP）

\n

在您的 Laravel 项目根目录下的终端中执行：

\n

composer require inertiajs/inertia-laravel

\n\n

步骤 2：安装客户端适配器（JavaScript）

\n

选择您的前端框架并执行相应的命令：

\n\n

对于 React：

\n

npm install @inertiajs/react react react-dom

\n\n

对于 Vue 3：

\n

npm install @inertiajs/vue3 vue

\n\n

对于 Svelte：

\n

npm install @inertiajs/svelte svelte

\n\n

步骤 3：发布配置（可选）

\n

php artisan vendor:publish --provider="Inertia\\ServiceProvider"

\n\n

步骤 4：配置根模板

\n

创建文件 resources/views/app.blade.php，内容如下：

\n

<!DOCTYPE html>\n<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">\n<head>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>@yield('title', config('app.name'))</title>\n    @viteReactRefresh\n    @vite(['resources/js/app.jsx'])\n    @inertiaHead\n</head>\n<body>\n    @inertia\n</body>\n</html>

\n

指令 @inertia 是 Inertia 插入您应用程序的位置。@inertiaHead 用于从组件管理标题。

\n\n

步骤 5：配置 Vite（如果您使用 Vite）

\n

在文件 vite.config.js 中，为 React 或 Vue 添加插件：

\n

import { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\nimport react from '@vitejs/plugin-react'; // 或 @vitejs/plugin-vue\n\nexport default defineConfig({\n