如何使用 AEM 建立單頁應用程式 (SPA) create-spa

Last update: Tue Sep 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

在 AEM Headless 開發人員歷程的此延續部分 (選擇性)，您將了解 AEM 如何將 Headless 傳遞與傳統的全堆疊 CMS 功能相結合。您也會了解如何使用 AEM 的 SPA 編輯器框架建立可編輯的 SPA，以及整合外部 SPA，以便視需要啟用編輯功能。

到目前為止 story-so-far

此時，您應該已經完成了整個AEM Headless 開發人員歷程並了解 AEM Headless 傳遞的基本知識，包括了解：

到現在，您現在已經將您的第一個 AEM Headless 專案上線，或是已經掌握完成此作業的知識。恭喜！

那麼你為什麼要閱讀這個額外的、選擇性的歷程延續部分呢？您回想起快速入門中我們曾討論到 AEM 不僅支援 Headless 傳遞和傳統全堆疊模型，而且還支援結兩者優點的混合模型。雖然不是傳統的 Headless 模型，但這類混合模型可以為特定專案提供前所未有的靈活性。

本文章以您對 AEM Headless 的了解為基礎，深入探討如何建立您自己的單頁應用程式 (SPA)，這些應用程式可在 AEM 中編輯。如此一來，您可以建立內容並將其以 Headless 方式傳遞到 SPA，但該 SPA 在 AEM 中仍然是可編輯的。

本文件可協助您了解如何使用 AEM SPA 編輯器框架開發單頁應用程式。閱讀本文件後，您應該：

有一些要求必須符合，才能開始在 AEM 使用 SPA。

單頁應用程式 (SPA) 與傳統頁面的不同之處在於它是在用戶端呈現並且主要由 JavaScript 驅動，依賴 Ajax 呼叫來載入資料和動態更新頁面。在單頁載入時一次擷取大部分或所有內容，並根據使用者與頁面的互動，視需要非同步載入其他資源。

此功能減少了頁面重新整理的需要，讓使用者擁有順暢、快速且像是使用原生應用程式的體驗。

AEM SPA 編輯器允許前端開發人員建立可整合到 AEM 網站的 SPA，從而允許內容作者輕鬆編輯 SPA 內容，像編輯任何其他 AEM 內容一樣輕鬆。

SPA 可以更流暢、快速且像是原生應用程式，使其成為極具吸引力的體驗。由於 SPA 的運作本質，不僅網頁訪客受益，行銷人員和開發人員也受益。

如需 SPA 的完整說明以及使用它們的原因，請參閱其他資源章節以取得更多深入文件的連結。

在 AEM 開發單頁應用程式是假設前端開發人員在建立 SPA 時有遵守標準最佳做法。如果作為前端開發人員，您遵循這些一般最佳做法和一些 AEM 的特定原則，您的 SPA 可透過 AEM 及其內容編寫功能運作。

如需 AEM 如何處理 SPA 的完整說明，請參閱其他資源章節以取得更多深入文件的連結。

使用常見 SPA 框架 (例如 React 和 Angular) 建置的網站是透過動態 JSON 載入其內容。它們不提供 AEM 頁面編輯器放置編輯控制項時所需的 HTML 結構。

若要能在 AEM 中編輯 SPA，SPA 的 JSON 輸出與 AEM 存放庫中的內容模型之間必須要有對應，才能儲存內容的變更。

AEM 中的 SPA 支援帶入一個薄 JavaScript 層，在頁面編輯器中載入內容時會與 SPA JavaScript 程式碼互動，如此可以傳送事件。可以啟動編輯控制項的位置以允許進行情境式編輯。此功能是以內容服務 API 端點概念為建置基礎，因為來自 SPA 的內容必須透過內容服務載入。

如需 AEM SPA 編輯器的完整說明，請參閱其他資源章節以取得更多深入文件的連結。

如果您已有 SPA，AEM 支援將其內嵌到 AEM，以便您的內容作者可在 AEM 編輯器看到它。對於透過內容片段建立的內容，此功能可大力協助在終端應用程式 (其會取用該內容) 的情境下檢視該內容。

此外，只需少量變更，您就可以在 AEM 編輯器中對外部 SPA 進行特定編輯。

RemotePage 元件允許在 AEM 中呈現外部 SPA。

如需如何讓外部 SPA 可在 AEM 中編輯的完整說明，請參閱其他資源章節以取得更多深入文件的連結。

若要開始開發您自己的 SPA 以在 AEM 中使用，請查看以下文件：

如果您必須調整現有 SPA 以在 AEM 使用它，請查看以下文件：

請參閱下面的其他資源，可以讓您更深入地了解 AEM 的 SPA 主題。

以下是一些其他資源，它們對本文件提到的一些概念有更深入的探討。

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab