协议

0.11

0.11

Inertia JS 中文文档 /

协议

以下是协议的详细说明。请务必先阅读它如何工作页面以获取高级概述。

HTML 响应

Inertia 应用的第一个请求是一个常规的整页浏览器请求，没有特殊的 Inertia 头部或数据。对于这些请求，服务器返回完整的 HTML 文档。

此 HTML 响应包括站点资产 (CSS, JavaScript) 以及 body 体中的根 <div>。根 <div> 是客户端应用程序的挂载点，它包含一个使用 JSON 编码的 data-page 属性page object作为初始页面。Inertia 使用这些信息来引导您的客户端框架，并显示初始化页面。

REQUEST

GET: http://example.com/events/80

Accept: text/html, application/xhtml+xml

RESPONSE

HTTP/1.1 200 OK

Content-Type: text/html; charset=utf-8

<html>
<head>
    <title>My app</title>
    <link href="/css/app.css" rel="stylesheet">
    <script src="/js/app.js" defer></script>
</head>
<body>

<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan&apos;s 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>

</body>
</html>

虽然 initial 初始化响应是 HTML， Inertia 不会在服务器端渲染 JavaScript 页面组件。

Inertia 响应

一旦启动了 Inertia 应用，所有后续对站点的请求都会通过 XHR 发出，并将特殊的 X-Inertia 头设置为 true。此标头指示该请求是由 Inertia 发出的，并且不是标准的整页访问。

当服务器检测到 X-Inertia 请求头时，不会响应完整的 HTML 文档，而是返回一个包含页面对象的 JSON 响应。

请求

GET: http://example.com/events/80

Accept: text/html, application/xhtml+xml

X-Requested-With: XMLHttpRequest

X-Inertia: true

X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5

响应

HTTP/1.1 200 OK

Content-Type: application/json

Vary: Accept

X-Inertia: true

{
  "component": "Event",
  "props": {
    "event": {
      "id": 80,
      "title": "Birthday party",
      "start_date": "2019-06-02",
      "description": "Come out and celebrate Jonathan's 36th birthday party!"
    }
  },
  "url": "/events/80",
  "version": "c32b8e4965f418ad16eaebba1d4e960f"
}

页面对象

Inertia 通过页面对象在服务端和客户端之间共享数据。该对象包含了渲染页面组件、更新浏览器 history 状态，以及跟踪站点资源版本等必要的信息。页面对象包含以下四个属性：

component：JavaScript 页面组件的名称。
props：页面 props（数据）。
url：页面 URL。
version：当前资源版本。

在进行标准的完整页面访问时，页面对象以 JSON 格式编码为根元素 <div> 的 data-page 属性。在进行 Inertia 访问时，页面对象作为 JSON 负载返回。

资源版本

一个单页面应用（SPA）常见的挑战是，在资源发生更改后如何刷新站点资源。Inertia 让这很简单，可以随意地跟踪站点资源当前版本。当资源更改时，Inertia 会自动进行完整页面访问，而不是 XHR 访问。

页面对象中包含一个 version 标识。该标识在服务端设置，可以是一个数字、字符串、文件哈希或者其它的。是什么不重要，只要当站点资源更改时它也改变就行。

每当 Inertia 发起请求， Inertia 都会将当前资产版本包括在请求头 X-Inertia-Version 中。当服务器接收到请求时，它会将请求头中 X-Inertia-Version 提供的资产版本与当前资产版本进行比较。这通常在中间件层处理。

如果资产版本相同，则请求只会按预期进行。但是，如果它们版本不同，服务器会立即返回一个 409 冲突 响应，并将 URL 包含在请求头的 X-Inertia-Location 中。此标头是必须的，因为可能会发生服务器端重定向。这会告诉 Inertia 最终的目标 URL 是什么。

请注意，409 冲突 只针对 GET 请求发送响应，而不针对 POST/PUT/PATCH/DELETE 请求发送响应。也就是说，如果其中一个 GET 请求后发生获取重定向，则将发送它们。

最后，如果在发生 409 冲突 响应时存在 Flash 会话数据，服务器将自动将此 data。

REQUEST

GET: http://example.com/events/80

Accept: text/html, application/xhtml+xml

X-Requested-With: XMLHttpRequest

X-Inertia: true

X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5

RESPONSE

409: Conflict

X-Inertia-Location: http://example.com/events/80

部分重载

当 Inertia 发出请求时，部分重新加载选项允许您在后续访问相同页面组件时从服务器请求道具(数据)的子集。如果某些页面数据过时是可以接受的，那么这将是一种有用的性能优化

当发出部分重新加载请求时，Inertia 包括两个附加的请求头：X-Inertia-Partial-Data 和 X-Inertia-Partial-Component

X-Inertia-Partial-Data 头是一个逗号分隔的列表，其中列出了需要返回的 props (数据)。
X-Inertia-Partial-Component 头包含部分重新加载的组件名称。这时必要的，因为部分重新加载仅适用于向同一页面组件发出的请求。如果最终目的地因任何原因而不同 (例如。用户已注销，现在处于登录页面)，则不会发生部分重新加载。

REQUEST

GET: http://example.com/events

Accept: text/html, application/xhtml+xml

X-Requested-With: XMLHttpRequest

X-Inertia: true

X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5

X-Inertia-Partial-Data: events

X-Inertia-Partial-Component: Events

RESPONSE

HTTP/1.1 200 OK

Content-Type: application/json

{
  "component": "Events",
  "props": {
    "auth": {...},       // NOT included
    "categories": [...], // NOT included
    "events": [...]      // included
  },
  "url": "/events/80",
  "version": "c32b8e4965f418ad16eaebba1d4e960f"
}

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/inertia/0.11/th...

译文地址：https://learnku.com/docs/inertia/0.11/th...

Markdown 文本

hmingv

Laravel 9.x 译者 139 声望

暂无个人描述~

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

贡献者：2

协议

0.11

0.11

协议

HTML 响应

Inertia 响应

页面对象

资源版本

部分重载

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

协议 0.11 0.11

协议

HTML 响应

Inertia 响应

页面对象

资源版本

部分重载

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

协议

0.11

0.11