文档AEM 6.5用户指南

如何使用 AEM 创建单页应用程序 (SPA) create-spa

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 管理员
  • 开发人员

在AEM Headless开发人员历程的这一可选续编中，您将了解Adobe Experience Manager (AEM)如何将headless交付与传统的全栈CMS功能相结合，以及如何使用AEM SPA编辑器框架创建可编辑的SPA，并集成外部SPA，从而根据需要启用编辑功能。

迄今为止的故事 story-so-far

此时，您应已完成整个 AEM Headless 开发人员历程，并已了解 AEM 中的 Headless 交付的基础知识，包括了解：

  • Headless 和 Headful 内容交付之间的区别。
  • AEM 的 Headless 功能。
  • 如何编排 AEM Headless 项目。
  • 如何在 AEM 中创建 Headless 内容。
  • 如何在 AEM 中检索和更新 Headless 内容。
  • 如何使用 AEM Headless 项目上线。

因此，您现在或者已经启动了您的第一个AEM Headless项目，或者已经具备了执行此项目的知识。 恭喜！

那么，为什么您需要阅读此历程的这一附加可选延续部分呢？您可能会记得，在快速入门中，曾简要讨论AEM如何不仅支持Headless投放和传统的全栈模型，还可以支持将两者的优势结合起来的混合模型。 虽然此混合模型不是传统 Headless 模型，但它可以为某些项目提供前所未有的灵活性。

本文基于您对 AEM Headless 的了解，深入探讨如何创建自己的可在 AEM 中编辑的单页应用程序 (SPA)。通过这种方式，您可以创建内容并将其无头交付到SPA，但该SPA在AEM中保持可编辑状态。

目标 objective

本文档将帮助您了解如何使用 AEM SPA Editor 框架来开发单页应用程序。阅读本文档后，您应：

  • 了解 SPA 编辑器的基本功能。
  • 了解为 AEM 构建完全可编辑的 SPA 的要求。
  • 了解如何将外部 SPA 集成到 AEM 中。
  • 了解应该如何实施或不应该实施服务器端渲染。

要求和先决条件 requirements-prerequisites

开始在 AEM 中使用 SPA 之前，需要满足多项要求。

知识 knowledge

  • 有关使用 React 或 Angular 框架创建 SPA 的开发经验
  • 有关创建内容片段和使用编辑器的基本 AEM 技能
  • 请务必查看AEM🔗中的Headful和Headless文档，以尽可能了解各级SPA集成。

工具 tools

  • 用于测试部署项目的沙盒访问
  • 用于数据建模和测试的本地开发实例
  • 现有的外部 SPA（可选，具体取决于选择的集成模型）
  • AEM 项目原型

什么是 SPA？ what-is-a-spa

单页应用程序 (SPA) 与传统页面的不同之处在于，它在客户端呈现且主要由 JavaScript 驱动，并且依靠 Ajax 调用来加载数据和动态更新页面。大多数内容或所有内容在单个页面加载中检索一次，并基于用户与页面的交互按需异步加载其他资源。

这减少了页面刷新需求，并为用户提供了一种无缝、快速且更类似于本机应用程序体验的体验。

利用 AEM SPA Editor，前端开发人员可以创建可集成到 AEM 站点中的 SPA，从而允许内容作者像编辑任何其他 AEM 内容那样轻松地编辑 SPA 内容。

为什么使用 SPA？ why-spa

由于SPASPA的工作方式具有的性质，它变得更快、更流畅，并且更像原生应用程序，因此不仅对于网页访客，对于营销人员和开发人员而言，它也是一种颇具吸引力的体验。

有关 SPA 的完整说明以及使用 SPA 的原因，请参阅其他资源部分，获取指向更深入文档的链接。

AEM 如何处理 SPA

在 AEM 上开发单页应用程序时，假定前端开发人员在创建 SPA 时遵循标准最佳实践。作为前端开发人员，如果您遵循这些一般最佳实践和一些AEM特定原则，您的SPA将可以使用AEM及其内容创作功能。

  • 可移植性 – 与任何组件一样，应构建尽可能可移植的 SPA 组件。应使用可移植且可重用的组件构建 SPA。
  • AEM 推动站点结构 – 前端开发人员创建组件并拥有其内部结构，但依赖 AEM 来定义站点的内容结构。
  • 动态呈现 – 所有呈现都应是动态的。
  • 动态路由 – SPA 负责路由，AEM 负责侦听它并根据它进行提取。任何路由也应是动态的。

有关 AEM 如何处理 SPA 的完整说明，请参阅其他资源部分，获取指向更深入文档的链接。

AEM SPA Editor aem-spa-editor

使用 React 和 Angular 等常见 SPA 框架构建的站点通过动态 JSON 加载其内容，并且不提供 AEM 页面编辑器放置编辑控件时所需的 HTML 结构。

要在 AEM 中启用 SPA 编辑，需要 SPA 的 JSON 输出与 AEM 存储库中的内容模型之间的映射以保存对内容所做的更改。

AEM 中的 SPA 支持引入了一个薄的 JS 层，该层在页面编辑器中加载时与 SPA JS 代码进行交互，从而发送事件并激活编辑控件的位置以允许进行上下文编辑。此功能基于内容服务 API 端点概念构建，因为来自 SPA 的内容需要通过内容服务进行加载。

有关 AEM SPA Editor 的完整说明，请参阅其他资源部分，获取指向更深入文档的链接。

适应现有 SPA existing-spas

如果您目前拥有 SPA，AEM 支持将其嵌入 AEM 中，以便内容作者能够在 AEM 编辑器中看到它。在最终应用程序将使用的上下文中，通过内容片段查看他们创建的内容时，这将很有用。

此外，只需进行少量更改，即可在 AEM 编辑器中启用对外部 SPA 的某些编辑功能。

RemotePage 组件允许在 AEM 中呈现外部 SPA。

有关如何使外部 SPA 在 AEM 中可编辑的完整说明，请参阅其他资源部分，获取指向更深入文档的链接。

后续内容 what-is-next

要开始为 AEM 开发您自己的 SPA，请查看以下文档：

如果您需要调整现有 SPA 以在 AEM 中使用它，请查看以下文档：

请参阅下面的其他资源，更深入地了解 AEM 中的 SPA 主题。

其他资源 additional-resources

以下是一些附加资源，它们对本文档中提及的一些概念进行了更深入的探讨。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2