在此可选的 AEM Headless开发人员历程, 您了解AEM如何将无头交付与传统的全栈CMS功能结合使用,以及如何使用AEM SPA编辑器框架创建可编辑的SPA,以及如何集成外部SPA,从而根据需要启用编辑功能。
此时,您应该已完成整个 AEM Headless开发人员历程 并了解AEM中无头投放的基础知识,包括对以下内容的了解:
因此,您现在要么已开始使用您的第一个AEM Headless项目,要么已拥有执行此操作所需的所有知识。 恭喜!
那么,为什么您要阅读此额外的、可选的历程延续? 你可能记得 快速入门 我们简要讨论了AEM如何不仅支持无头交付和传统的全栈模型,而且还支持结合两者优点的混合模型。 尽管不是传统的无头模式,但这种混合模式可以为某些项目提供前所未有的灵活性。
本文在您对AEM Headless的了解基础上,深入探讨了如何创建您自己的单页应用程序(SPA),这些应用程序实际上可以在AEM中编辑。 这样,您便可以创建内容并将其直接交付到SPA,但该SPA仍可在AEM中进行编辑。
本文档可帮助您了解单页应用程序是如何使用AEM SPA Editor框架开发的。 阅读本文档后,您应:
在开始使用AEM中的SPA之前,需要满足一些要求。
单页应用程序(SPA)与常规页面的不同之处在于,它在客户端呈现,且主要由Javascript驱动,它依赖Ajax调用来加载数据和动态更新页面。 大多数或所有内容在单页加载中检索一次,并根据用户与页面的交互,根据需要异步加载其他资源。
这减少了页面刷新的需求,并为用户提供了无缝、快速且更像本机应用程序体验的体验。
AEM SPA编辑器允许前端开发人员创建可集成到AEM站点中的SPA,从而允许内容作者像任何其他AEM内容一样轻松地编辑SPA内容。
通过更快、更流畅、更像本机应用程序,SPA不仅对网页的访客非常有吸引力,而且对营销人员和开发人员也非常有吸引力,因为SPA的工作方式很有吸引力。
有关SPA及其使用原因的完整说明,请参阅 其他资源 部分,以获取更多部门内文档的链接。
在AEM上开发单页应用程序时,假定前端开发人员在创建SPA时遵循标准的最佳实践。 如果您作为前端开发人员,遵循以下一般最佳实践以及一些特定于AEM的原则,则您的SPA将能够与AEM及其内容创作功能结合使用。
有关AEM如何处理SPA的完整说明,请参阅 其他资源 部分,以获取更多部门内文档的链接。
使用常用SPA框架(如React和Angular)构建的站点通过动态JSON加载其内容,并且不提供AEM页面编辑器放置编辑控件所必需的HTML结构。
要在AEM中启用SPA的编辑功能,需要SPA的JSON输出与AEM存储库中的内容模型之间的映射,才能保存对内容所做的更改。
AEM中的SPA支持引入了一个精简JS层,当该层在页面编辑器中加载时,会与SPA JS代码交互,通过该层可以发送事件,并且可以激活编辑控件的位置以允许进行上下文编辑。 此功能基于Content Services API端点概念,因为SPA中的内容需要通过Content Services加载。
有关AEM SPA编辑器的完整说明,请参阅 其他资源 部分,以获取更多部门内文档的链接。
如果您现有SPA, AEM支持将其嵌入到AEM中,以便内容作者可以在AEM编辑器中看到该内容。 在将在其中使用内容片段的最终应用程序上下文中,通过内容片段查看他们正在创建的内容时,此选项非常有用。
此外,只需进行少量更改,您就可以在AEM编辑器中启用对外部SPA的某些编辑功能。
RemotePage组件允许在AEM中渲染外部SPA。
有关如何在AEM中使外部SPA可编辑的完整说明,请参阅 其他资源 部分,以获取更多部门内文档的链接。
要开始开发您自己的SPA for AEM,请查看以下文档:
如果您需要调整现有SPA以在AEM中使用它,请查看以下文档:
请参阅下面的 其他资源 可让您更深入地了解AEM中的SPA主题。
以下是一些其他资源,可更深入地了解本文档中提到的一些概念。