SPA簡介和逐步說明| Adobe Experience Manager

本文逐步說明如何使用基本的SPA應用程式進行編寫，並說明其與基礎AEM SPA編輯器的關聯。

注意. 若專案需要SPA架構的用戶端轉譯(例如React或Angular),SPA Editor是建議的 ... ExperienceLeague 登入 學習 課程 建議課程 教學課程 事件 講師指導培訓 瀏覽內容資料庫 檢視所有學習選項 說明文件 社群 社群之家 AdvertisingCloud Analytics AudienceManager CampaignStandard ExperienceCloud ExperienceManager ExperiencePlatform Target Workfront 檢視所有社群 意見回饋面板 技術支援 登入 全新的改善搜尋 透過改善的相關性、額外的篩選功能以及跨所有學習與社群內容搜尋的能力，您可更輕鬆地找到所需內容。

解除 立即搜尋 Deutsch English Español Français Italiano Nederlands Português Svenska 中文(简体) 中文(繁體) 日本語 한국어 AdobeExperienceCloud AdobeDocumentCloud 設定檔 設定檔 成就 完成您的設定檔後請檢閱您的獎勵。

書籤 完成您的設定檔後請檢閱您的書籤。

登出 學習 課程 建議課程 教學課程 事件 講師指導培訓 瀏覽內容資料庫 檢視所有學習選項 搜尋結果 說明文件 社群 社群之家 AdvertisingCloud Analytics AudienceManager CampaignStandard ExperienceCloud ExperienceManager ExperiencePlatform Target Workfront 檢視所有社群 意見回饋面板 技術支援 首頁 開啟案例需要權利。

開啟票證 開啟案例需要權利。

我的案例 設定檔 設定檔 成就 完成您的設定檔後請檢閱您的獎勵。

書籤 完成您的設定檔後請檢閱您的書籤。

AdobeExperienceCloud AdobeDocumentCloud 搜尋 登出 變更語言 Deutsch English Español Français Italiano Nederlands Português Svenska 中文(简体) 中文(繁體) 日本語 한국어 AdobeExperienceLeague Exit search ExperienceLeague Exitsearch 開發使用手冊概述 開發人員簡介 開始開發AEMSites-WKND教學課程 AEM核心概念 AEM觸控式UI的結構 AEM觸控式UI的概念 AEM開發—准則和最佳實務 使用用戶端端程式庫 開發與頁面差異 編輯器限制 CSRF保護框架 資料模型—大衛·紐謝勒的模型 貢獻AEM 安全性 參考資料 建立功能齊全的網站（傳統UI） 設計與設計工具（傳統UI） 移轉至TouchUI 平台 Sling速查表 使用Sling介面卡 標籤程式庫 範本 範本 頁面範本—可編輯 頁面範本—靜態 內容片段範本 最適化範本轉譯 在AEM中使用SlingResourceMerger 覆蓋 命名慣例 建立新的GraniteUI欄位元件 查詢產生器 為查詢產生器實作自訂述詞求值器 查詢產生器述詞參考 查詢產生器API 標記 標記 AEM標籤架構 在AEM應用程式中建立標籤 自訂由錯誤處理常式顯示的頁面 自訂節點類型 為圖形渲染添加字型 連接到SQL資料庫 將URL外部化 為卸載建立並佔用作業 設定Cookie使用情形 如何以程式設計方式存取AEMJCR 將服務與JMX控制台整合 開發大量編輯器 開發報表 元件 核心元件 樣式系統 元件概觀 AEM元件—基本概念 開發AEM元件 開發AEM元件—程式碼範例 內容服務的JSON匯出工具 為元件啟用JSON匯出 影像編輯器 裝飾標記 使用隱藏條件 配置多個就地編輯器 開發人員模式 測試您的UI 內容片段的元件 取得JSON格式的頁面資訊 國際化 國際化元件 國際化UI字串 使用翻譯工具管理字典 擷取字串以進行轉譯 傳統UI元件 開發AEM元件（傳統UI） 使用和擴充Widget（傳統UI） 使用xtype（傳統UI） 開發Forms（傳統UI） AEM中的Headful和Headless 無頭式體驗管理 無頭式與AEM 無頭歷程 無頭式開發人員歷程 了解AEM中的無頭 了解CMS無頭開發 AEMHeadlessasaCloudService快速入門 使用AEMHeadless的第一次體驗路徑 如何將內容模型為AEM內容模型 如何透過AEM傳送API存取您的內容 如何透過AEMAssetsAPI更新您的內容 如何把它們拼在一起 如何與無頭應用程式一起運行 選用—如何使用AEM建立單頁應用程式 無頭式內容架構者歷程 AEM無頭式內容架構師歷程概述 使用AEM建立無頭的內容模型—簡介 了解使用AEM建立無頭式內容模型的基本知識 了解如何在AEM中建立內容片段模型 快速入門手冊 簡介 建立設定 建立內容片段模型 建立資產資料夾 建立內容片段 存取及傳送內容片段 內容片段 以內容片段和GraphQL無周邊傳送 使用內容片段 為您的執行個體啟用內容片段功能 內容片段模型 管理內容片段 變化-編寫片段內容 Markdown 使用關聯內容 中繼資料-片段屬性 樹狀結構 預覽—JSON表示法 傳送API AssetsHTTPAPI 內容片段RESTAPI 內容片段GraphQLAPI AEMGraphQLAPI，含內容片段—範例內容與查詢 內容片段的遠端AEMGraphQL查詢驗證 混合與SPAAEM開發 混合SPA與AEM SPA簡介和逐步說明 SPAWKND教學課程 React快速入門 針對SPA實作React元件 開始使用Angular SPA深度潛水 開發SPAforAEM SPA編輯器概述 SPABlueprint SPA頁面元件 SPA的動態模型與元件對應 SPA模型路由 RemotePage元件 在AEM中編輯外部SPA SPA中的複合元件 SPA和伺服器端轉譯 為元件啟用JSON匯出 Launch整合 SPA參考資料 開發工具 開發工具 AEM現代化工具 對話方塊編輯器 對話方塊轉換工具 使用CRXDELite開發 使用Maven管理套件 如何使用Eclipse開發AEM專案 如何使用ApacheMaven建立AEM專案 如何使用IntelliJIDEA開發AEM專案 如何使用VLT工具 如何使用代理伺服器工具 AEMBrackets擴充功能 AEMDeveloperToolsforEclipse AEMRepoTool 個性化 ContextHub 設定內容中樞 新增ContextHub至頁面及存取商店 擴充ContextHub 範例ContextHub存放區候選項 範例ContextHubUI模組類型 ContextHub診斷 針對目標內容開發 ContextHubJavascriptAPI參考資料 ClientContext 詳細的客戶端上下文 用戶端內容JavascriptAPI 擴充AEM 使用AdobeDeveloperAppBuilder擴充AEM 自訂頁面編寫 自訂主控台 自訂頁面屬性的檢視 設定頁面以大量編輯頁面屬性 自訂和擴充內容片段 轉譯專用內容片段設定元件 體驗片段 延伸工作流程 開發和延伸工作流程 建立工作流模型 延伸工作流程功能 以程式設計方式與工作流程互動 工作流程步驟參考 工作流程最佳實務 工作流程處理序參考 AEM工作流程中的變數 擴展多站點管理器 追蹤與分析 擴充事件追蹤 將AdobeAnalytics追蹤新增至元件 自訂AdobeAnalytics架構 為Analytics實作伺服器端頁面命名 雲端服務 雲端服務設定 建立自訂CloudService 建立自訂擴充功能 表單 建立自訂表單對應 使用AdobeCampaign表單元件建立自訂AEM頁面範本 RequestAnalysisScript 將服務與JMX控制台整合 開發大量編輯器 擴充傳統UI 自訂網站主控台（傳統UI） 自訂歡迎控制台（傳統UI） 開發報表 測試 規劃 需要哪些測試環境？ 定義測試案例 測試—何時與誰？ 編譯測試計畫 追蹤結果並提供意見 測試和追蹤工具 接受與簽核 下一個版本…… 核取清單 艱難的一天 測試您的UI 最佳作法 最佳實務概述 AEM開發准則和最佳實務 開發最佳實務 內容架構 軟體體系結構 We.Retail參考實作 We.Retail參考實作 在We.Retail中嘗試內容片段 在We.Retail中試用核心元件 在We.Retail中試用可編輯的範本 在We.Retail中嘗試回應式版面 在We.Retail中嘗試全球化網站結構 在We.Retail中嘗試體驗片段 編碼提示 程式碼陷阱 OSGI套件組合 JCR整合 程式碼範例 疑難排解慢速查詢 行動網站 行動網站 建立裝置群組篩選器 網頁的回應式設計 為行動裝置建立網站 模擬器 文件 AEM6.5 Developing指南 SPA簡介和逐步說明 SPA簡介和逐步說明 單頁應用程式(SPA)可為網站使用者提供引人入勝的體驗。

開發人員希望能使用SPA架構建立網站，而作者則想在AEM中為使用此架構建立的網站順暢地編輯內容。

SPA編輯器提供全方位的解決方案，可支援AEM中的SPA。

本文逐步說明如何使用基本的SPA應用程式進行編寫，並說明其與基礎AEMSPA編輯器的關聯。

注意 若專案需要SPA架構的用戶端轉譯(例如React或Angular),SPAEditor是建議的解決方案。

簡介 文章目標 本文先介紹SPA的基本概念，然後使用簡單的SPA應用程式來示範基本內容編輯，引導讀者完成SPA編輯器的逐步說明。

接著深入探討頁面的建構，以及SPA應用程式與AEMSPA編輯器的關聯與互動方式。

本簡介和逐步說明的目標是向AEM開發人員說明SPA的相關性、其一般運作方式、AEMSPA編輯器如何處理SPA，以及它與標準AEM應用程式有何不同。

逐步說明以標準AEM功能和範例We.RetailJournal應用程式為基礎。

必須符合下列要求： AEM6.4版（含servicepack2或更新版本） 在此安裝範例GitHub上可用的We.RetailJournal應用程式。

注意 本檔案使用We.RetailJournal應用程式僅供示範之用。

它不應用於任何項目工作。

任何AEM專案皆應運用AEM專案原型，可支援使用React或Angular的SPA專案，並運用SPASDK。

什麼是SPA? 單頁應用程式(SPA)與傳統頁面不同，前者是在用戶端轉譯，主要是Javascript導向，需仰賴Ajax呼叫來載入資料並動態更新頁面。

根據使用者與頁面的互動，大部分或所有內容在單一頁面載入中會擷取一次，並視需要以非同步方式載入其他資源。

這可減少頁面重新整理的需求，並為使用者呈現流暢、快速的體驗，且感覺更像原生應用程式體驗。

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

為什麼是SPA? SPA更像原生應用程式，更加快速、流暢，不僅對網頁的訪客，而且由於SPA的運作方式，對行銷人員和開發人員而言，都成為極具吸引力的體驗。

訪客 訪客在與內容互動時需要類似原生的體驗。

有清楚的資料顯示，頁面越快，轉換發生的可能性就越大。

行銷人員 行銷人員想要提供豐富、類似原生的體驗，以吸引訪客充分參與內容。

個人化可讓這些體驗更具吸引力。

開發人員 開發人員想要將內容與簡報之間的疑慮徹底分離。

清潔分離使系統更具可擴充性，並允許獨立的前端開發。

SPA如何運作？ SPA的主要思想是減少呼叫和對伺服器的依賴，以將伺服器呼叫所造成的延遲降至最低，以便SPA接近原生應用程式的回應。

在傳統、循序的網頁中，只會載入即時頁面所需的資料。

這表示當訪客移至其他頁面時，會呼叫伺服器以取得其他資源。

當訪客與頁面上的元素互動時，可能需要進行其他呼叫。

由於頁面必須趕上訪客的要求，因此這多個呼叫可能會產生延遲或延遲的感覺。

為獲得更流暢的體驗，即接近訪客從行動裝置、原生應用程式預期的體驗，SPA會在首次載入時為訪客載入所有必要資料。

雖然一開始可能需要較長的時間，但之後就不需要額外的伺服器呼叫。

透過在用戶端上呈現，頁面元素的反應更快，且訪客與頁面的互動即時。

系統會以非同步方式呼叫可能需要的任何其他資料，以最大化頁面速度。

注意 如需SPA在AEM中如何運作的技術詳細資訊，請參閱文章AEM中的SPA快速入門. 如需深入了解SPA編輯器的設計、架構和技術工作流程，請參閱文章SPA編輯器概述. 使用SPA編輯內容體驗 建置SPA以運用AEMSPA編輯器時，內容作者在編輯和建立內容時沒有發現差異。

提供通用AEM功能，且不需要變更作者的工作流程。

注意 逐步說明以標準AEM功能和範例We.RetailJournal應用程式為基礎。

必須符合下列要求： AEM6.4版（含servicepack2） 在此安裝範例GitHub上可用的We.RetailJournal應用程式。

在AEM中編輯We.RetailJournal應用程式。

https://localhost:4502/editor.html/content/we-retail-journal/react.html 選取標題元件，並注意工具列的顯示方式與任何其他元件相同。

選擇編輯. 在AEM中以正常方式編輯內容，請注意變更會持續存在。

注意 請參閱SPA編輯器概述以取得現成文字編輯器和SPA的詳細資訊。

使用「資產瀏覽器」將新影像拖放至影像元件中。

變更持續存在。

如同任何非SPA應用程式，也支援其他製作工具，例如在頁面上拖放其他元件、重新排列元件以及修改版面。

注意 SPA編輯器不會修改應用程式的DOM。

SPA本身負責DOM。

若要查看其運作方式，請繼續閱讀本文的下一節SPA應用程式和AEMSPAEditor. SPA應用程式和AEMSPAEditor 體驗SPA對一般使用者的行為，然後檢查SPA頁面，有助於更清楚了解SAP應用程式如何與AEM中的SPA編輯器搭配運作。

使用SPA應用程式 在發佈伺服器上或使用選項載入We.RetailJournal應用程式檢視為已發佈從頁面資訊功能表。

/content/we-retail-journal/react.html 請注意頁面結構，包括導覽至子頁面、天氣Widget和文章。

使用功能表導覽至子頁面，並查看頁面會立即載入，而不需重新整理。

當您導覽子頁面時，請開啟瀏覽器的內建開發人員工具並監控網路活動。

當您在應用程式中從頁面移至頁面時，流量非常小。

不會重新載入頁面，只會要求新影像。

SPA會完全在用戶端管理內容和路由。

因此，如果在子頁面導覽時頁面未重新載入，會如何載入？ 下一節，載入SPA應用程式，深入了解載入SPA的機制，以及如何以同步和非同步方式載入內容。

載入SPA應用程式 如果尚未載入，請在發佈伺服器上或使用選項載入We.RetailJournal應用程式檢視為已發佈從頁面資訊功能表。

/content/we-retail-journal/react.html 使用瀏覽器的內建工具檢視頁面來源。

請注意，來源的內容極為有限。

頁面內文中沒有任何內容。

它主要由樣式表和對React指令碼的調用組成，we-retail-journal-react.js. 此React指令碼是此應用程式的主要驅動程式，負責呈現所有內容。

使用瀏覽器的內建工具來檢查頁面。

請參閱DOM已完全載入的內容。

切換到檢查器中的「網路」頁簽，然後重新載入該頁。

忽略影像要求，請注意為頁面載入的主要資源為頁面本身、CSS、ReactJavascript、其相依性，以及頁面的JSON資料。

載入react.model.json的子句。

/content/we-retail-journal/react.model.json AEMSPAEditor會利用AEMContentServices以JSON模型傳送頁面的整個內容。

Sling模型會實作特定介面，為SPA提供必要資訊。

JSON資料的傳送會向下委派給每個元件（從頁面、到段落、到元件等）。

每個元件都會選擇公開的項目及呈現方式（在伺服器端使用HTL，或在用戶端使用React）。

當然，本文著重於使用React進行用戶端轉譯。

模型也可以將頁面分組，以便同步載入，減少所需的頁面重新載入次數。

在We.RetailJournal的範例中，home,blog，和aboutus頁面會同步載入，因為訪客通常會瀏覽這些頁面。

不過weather頁面會以非同步方式載入，因為訪客不太可能造訪頁面。

此行為非強制性，且可完全定義。

要查看行為中的這種差異，請重新載入頁面並清除檢查器的網路活動。

導覽至部落格，並在頁面功能表中導覽關於我們的頁面，查看未回報任何網路活動。

導覽至天氣頁面，並查看weather.model.json非同步呼叫。

與SPA編輯器互動 使用範例We.RetailJournal應用程式，運用內容服務進行JSON內容傳送以及非同步載入資源，可清楚知道應用程式的運作方式和在發佈時載入。

此外，對於內容作者，使用SPA編輯器建立內容在AEM中是順暢的。

在以下章節中，我們將探討可讓SPA編輯器將SPA中的元件與AEM元件建立關聯，並實現順暢的編輯體驗的合約。

在編輯器中載入We.RetailJournal應用程式，並切換至預覽模式。

https://localhost:4502/editor.html/content/we-retail-journal/react.html 使用瀏覽器的內建開發人員工具來檢查頁面內容。

使用選取工具，在頁面上選取可編輯的元件並檢視元素詳細資料。

請注意，元件有新的資料屬性data-cq-data-path. 例如 data-cq-data-path="root/responsivegrid/paragraph_1 此路徑允許檢索和關聯每個元件的編輯上下文配置對象。

這是編輯器唯一需要的標籤屬性，以便將其識別為SPA內的可編輯元件。

SPA編輯器會根據此屬性決定哪些可編輯的設定與元件相關聯，以便找到正確的框架、工具列等。

已載入。

還為標籤預留位置和資產拖放功能新增了某些特定類別名稱。

注意 這是AEM中伺服器端轉譯頁面的行為變更，其中cq為每個可編輯元件插入的元素。

SPA中的此方法不需要插入自訂元素，而僅需依賴其他資料屬性，讓前端開發人員可更輕鬆地加上標籤。

後續步驟 現在您已了解AEM中的SPA編輯體驗，以及SPA與SPA編輯器的關聯，深入了解SPA的建立方式。

AEM中的SPA快速入門顯示如何建置基本SPA以搭配AEM中的SPA編輯器運作 SPA編輯器概述深入探討AEM與SPA的通訊模型。

開發SPAforAEM說明如何吸引前端開發人員參與開發SPAforAEM，以及SPA如何與AEM架構互動。

Business.Adobe.com資源 本頁內容 檢視下一個: