React 应用程序(或任何 SPA)应如何与 HATEOAS 后端交互?
How should a React app (or any SPA) interact with a HATEOAS back-end?
基本问题是每一页应该有一个 HATEOAS 入口点还是整个应用程序有一个入口点?
我见过的大多数示例都是使用 HATEOAS 后端实现单个页面,例如使用 prev
和 next
link 分页的列表。但是,当应用程序导航到具有完全不同功能并需要不同入口点的不同页面时会发生什么?如何组织这样一款应用程序?
具体示例:我们有一个带有标签导航的应用程序。主页选项卡显示产品目录,因此入口点是 /products
产品的 returns 页 1 以及分页 links。但是,现在我单击必须显示过去订单列表的订单选项卡。此页面需要一个完全不同的入口点 /orders
,主页选项卡对其一无所知。事实上,用户可以使用深度 link.
直接导航到订单选项卡
如何思考这个问题?是否有说明方法的示例?
有几种不同的方法可以解决这个问题。这是两个:
- SPA 从 uri 获取上下文(例如 id),并使用它在 API 上进行搜索。 API 可以描述模板化 links/actions 以通过 ID 搜索资源。
- 不用做 client-side 路由,让服务器决定渲染什么。
我们更倾向于#2。如果我们有一个 uri,例如:
https://spa.example/https://api.example/foo/bar
我们获取此 uri 的路径部分并点击 API。根据 API 的响应,我们决定渲染什么。这意味着大部分的这种端点的路由都委托给了服务端,感觉更符合HATEOAS
本例中的路径部分是一个完整的绝对 URI,但我们也支持相对 URI,并且有一个默认的基本 URI。所以实际上这两个 uri 是等价的(对于我们的 SPA):
https://spa.example/https://api.example/foo/bar
https://spa.example/foo/bar
我们开发并使用 ketting / react-ketting 来完成大部分繁重的工作
基本问题是每一页应该有一个 HATEOAS 入口点还是整个应用程序有一个入口点?
我见过的大多数示例都是使用 HATEOAS 后端实现单个页面,例如使用 prev
和 next
link 分页的列表。但是,当应用程序导航到具有完全不同功能并需要不同入口点的不同页面时会发生什么?如何组织这样一款应用程序?
具体示例:我们有一个带有标签导航的应用程序。主页选项卡显示产品目录,因此入口点是 /products
产品的 returns 页 1 以及分页 links。但是,现在我单击必须显示过去订单列表的订单选项卡。此页面需要一个完全不同的入口点 /orders
,主页选项卡对其一无所知。事实上,用户可以使用深度 link.
如何思考这个问题?是否有说明方法的示例?
有几种不同的方法可以解决这个问题。这是两个:
- SPA 从 uri 获取上下文(例如 id),并使用它在 API 上进行搜索。 API 可以描述模板化 links/actions 以通过 ID 搜索资源。
- 不用做 client-side 路由,让服务器决定渲染什么。
我们更倾向于#2。如果我们有一个 uri,例如:
https://spa.example/https://api.example/foo/bar
我们获取此 uri 的路径部分并点击 API。根据 API 的响应,我们决定渲染什么。这意味着大部分的这种端点的路由都委托给了服务端,感觉更符合HATEOAS
本例中的路径部分是一个完整的绝对 URI,但我们也支持相对 URI,并且有一个默认的基本 URI。所以实际上这两个 uri 是等价的(对于我们的 SPA):
https://spa.example/https://api.example/foo/bar
https://spa.example/foo/bar
我们开发并使用 ketting / react-ketting 来完成大部分繁重的工作