Back to Details

inertia-adonisjs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
<essential_principles>
<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:
ts
return ctx.inertia.render("users/show", { user: new UserDto(user) });
控制器通过props渲染Inertia响应：
ts
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?**
  1. Set up Inertia in AdonisJS
  2. Create a new page/component
  3. Build a form with validation
  4. Debug an Inertia issue
  5. 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> **你想要执行什么操作？**
  1. 在AdonisJS中配置Inertia
  2. 创建新页面/组件
  3. 构建带验证的表单
  4. 调试Inertia问题
  5. 其他操作
然后阅读
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

每次修改后检查

  1. Does the page render? Check for 
    X-Inertia
    response header
  2. Are props received? 
    console.log(usePage().props)
  3. Does navigation work? Links should not full-reload
  4. Do forms submit? Check Network tab for XHR requests
  5. Are errors displayed? Trigger validation failure
ts
// 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>
  1. 页面是否渲染？ 检查
    X-Inertia
    响应头
  2. 是否接收到Props？ 
    console.log(usePage().props)
  3. 导航是否正常？ 链接不应触发页面完全重载
  4. 表单是否提交成功？ 在网络标签页检查XHR请求
  5. 错误是否显示？ 触发验证失败场景
ts
// 前端调试代码
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/
:
FilePurpose
setup-inertia.mdInstall and configure Inertia for AdonisJS
create-page.mdBuild new pages with props
build-form.mdForms with validation and useForm
debug-inertia.mdFind 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>