inertia-adonisjs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

<essential_principles>

How Inertia + AdonisJS Works

Inertia + AdonisJS 工作原理

Inertia is a bridge between AdonisJS and React. You keep server-side routing and controllers, while the client swaps page components without full reloads.

Inertia是AdonisJS与React之间的桥梁。你可以保留服务端路由和控制器，同时客户端无需完全重载页面即可切换组件。

1. Server-Driven Pages

1. 服务端驱动页面

Controllers render Inertia responses with props:

return ctx.inertia.render("users/show", { user: new UserDto(user) });

控制器通过props渲染Inertia响应：

return ctx.inertia.render("users/show", { user: new UserDto(user) });

2. No Client-Side Routing

2. 无客户端路由

Routes live in

start/routes.ts

. Inertia intercepts links and form submissions, making XHR requests and swapping components.

路由存放在

start/routes.ts

中。Inertia会拦截链接和表单提交，发起XHR请求并切换组件。

3. DTOs for Props

3. 用于Props的DTO

Props are sent to the client. Use DTOs to control the shape and avoid leaking fields.

Props会发送到客户端。使用DTO来控制数据结构，避免泄露字段。

4. Validation at the Edge

4. 边缘验证

Validate on the server with VineJS. Let the validator throw and let Inertia handle the errors. </essential_principles>

<intake> **What would you like to do?**

Set up Inertia in AdonisJS
Create a new page/component
Build a form with validation
Debug an Inertia issue
Something else

Then read the matching workflow from
workflows/
and follow it. </intake>

<routing> | Response | Workflow | |----------|----------| | 1, "setup", "install", "start", "new" | `workflows/setup-inertia.md` | | 2, "page", "component", "create", "render" | `workflows/create-page.md` | | 3, "form", "validation", "submit", "useForm" | `workflows/build-form.md` | | 4, "debug", "fix", "error", "not working" | `workflows/debug-inertia.md` | | 5, other | Clarify, then select workflow or references | </routing>

<verification_loop>

使用VineJS在服务端进行验证。让验证器抛出错误，由Inertia处理这些错误。 </essential_principles>

<intake> **你想要执行什么操作？**

在AdonisJS中配置Inertia
创建新页面/组件
构建带验证的表单
调试Inertia问题
其他操作

然后阅读
workflows/
中对应的工作流并遵循执行。 </intake>

<routing> | 响应 | 工作流 | |----------|----------| | 1, "setup", "install", "start", "new" | `workflows/setup-inertia.md` | | 2, "page", "component", "create", "render" | `workflows/create-page.md` | | 3, "form", "validation", "submit", "useForm" | `workflows/build-form.md` | | 4, "debug", "fix", "error", "not working" | `workflows/debug-inertia.md` | | 5, other | 明确需求，然后选择工作流或参考文档 | </routing>

<verification_loop>

After Every Change

每次修改后检查

Does the page render? Check for
```
X-Inertia
```
response header
Are props received?
```
console.log(usePage().props)
```
Does navigation work? Links should not full-reload
Do forms submit? Check Network tab for XHR requests
Are errors displayed? Trigger validation failure

// Frontend debug
console.log(usePage().props);

Report to the user:

"Inertia response: ok"
"Props received: X keys"
"Navigation: SPA mode ok" </verification_loop>

<reference_index>

页面是否渲染？ 检查
```
X-Inertia
```
响应头
是否接收到Props？
```
console.log(usePage().props)
```
导航是否正常？ 链接不应触发页面完全重载
表单是否提交成功？ 在网络标签页检查XHR请求
错误是否显示？ 触发验证失败场景

// 前端调试代码
console.log(usePage().props);

向用户反馈：

"Inertia响应：正常"
"已接收Props：X个键值对"
"导航：SPA模式正常" </verification_loop>

<reference_index>

Domain Knowledge

领域知识

All in

references/

Core: setup.md, responses.md, forms.md, validation.md Data Flow: shared-data.md, links.md Quality: testing.md Cookbook: cookbook.md </reference_index>

<workflows_index>

所有内容都在

references/

目录下：

核心： setup.md, responses.md, forms.md, validation.md 数据流： shared-data.md, links.md 质量： testing.md 参考手册： cookbook.md </reference_index>

<workflows_index>

Workflows

工作流

All in

workflows/

File	Purpose
setup-inertia.md	Install and configure Inertia for AdonisJS
create-page.md	Build new pages with props
build-form.md	Forms with validation and useForm
debug-inertia.md	Find and fix Inertia issues
</workflows_index>

所有内容都在

workflows/

目录下：

文件	用途
setup-inertia.md	为AdonisJS安装和配置Inertia
create-page.md	基于Props构建新页面
build-form.md	带验证和useForm的表单开发
debug-inertia.md	排查和修复Inertia问题
</workflows_index>