协议

未匹配的标注

协议

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

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 状态,以及跟踪站点资源版本等必要的信息。页面对象包含以下四个属性:

  1. component:JavaScript 页面组件的名称。
  2. props:页面 props(数据)。
  3. url:页面 URL。
  4. 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-DataX-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...

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:2
讨论数量: 0
发起讨论 只看当前版本


暂无话题~