單頁應用程式 (SPA) 可為網站使用者提供引人入勝的體驗。開發人員希望能夠使用框架構建站SPA點,而作者希望無縫地編輯AEM使用框架構建的站SPA點的內容。
創SPA作功能提供了全面的解決方案,可支SPA持內AEM部。 本文介紹了SPAReact框架上的簡化應用程式,並說明了它的組合方式,使您能夠快速啟動並運SPA行。
本文基於React框架。 有關Angular框架的相應文檔,請參見 入門 — SPAAngular。
本文概括了簡單功能的基本功SPA能,以及使您的運行所需要知道的最低值。
有關如何工作的SPA詳細AEM資訊,請參閱以下文檔:
為了能夠在內部創作內容,SPA必須將內容儲存在內AEM容模型中並由內容模型公開。
如SPA果不遵守內AEM容模型合同,則在外部開發的項目將無法授權。
本文檔將介紹使用React框架建立SPA的簡化結構,並說明其工作原理,以便您可以將此理解應用到您自己SPA的。
除了預期的React依賴關係外,示例還SPA可以利用其他庫來提高創SPA建效率。
的 package.json
檔案定義了整個包的SPA要求。 此處列AEM出了工作的最SPA小依賴關係。
"dependencies": {
"@adobe/aem-react-editable-components": "~1.0.4",
"@adobe/aem-spa-component-mapping": "~1.0.5",
"@adobe/aem-spa-page-model-manager": "~1.0.3"
}
由於此示例基於React框架,因此有兩個React-specific依賴項在 package.json
檔案:
react
react-dom
的 aem-clientlib-generator
可使建立客戶端庫成為生成過程的一部分。
"aem-clientlib-generator": "^1.4.1",
有關此項的進一步詳細資訊,請參閱 在GitHub上。
的 aem-clientlib-generator
在 clientlib.config.js
的下界。
module.exports = {
// default working directory (can be changed per 'cwd' in every asset option)
context: __dirname,
// path to the clientlib root folder (output)
clientLibRoot: "./../content/jcr_root/apps/my-react-app/clientlibs",
libs: {
name: "my-react-app",
allowProxy: true,
categories: ["my-react-app"],
embed: ["my-react-app.responsivegrid"],
jsProcessor: ["min:gcc"],
serializationFormat: "xml",
assets: {
js: [
"dist/**/*.js"
],
css: [
"dist/**/*.css"
]
}
}
};
實際構建應用可利用 Webpack 除aem-clientlib-generator外,還用於自動建立客戶端庫。 因此,build命令將類似於:
"build": "webpack && clientlib --verbose"
生成後,可以將包上載到實AEM例。
任何AEM項目都應利用 項AEM目原型,它支SPA持使用React或Angular的項目,並利SPA用SDK。
包括依賴項和生成應用程式(如前所述)將為您留SPA下一個工作包,您可以將其上載到AEM實例。
本文檔的下一節將介紹如何SPA構AEM建in 、驅動應用程式的重要檔案以及它們如何協同工作。
以簡化的影像元件為例,但應用程式的所有元件都基於相同的概念。
當然,SPA進入的切入點 index.js
此處顯示的檔案經過簡化,可以專注於重要內容。
import ReactDOM from 'react-dom';
import App from './App';
import { ModelManager, Constants } from "@adobe/aem-spa-page-model-manager";
...
ModelManager.initialize().then((pageModel) => {
ReactDOM.render(
<App cqChildren={pageModel[Constants.CHILDREN_PROP]} cqItems={pageModel[Constants.ITEMS_PROP]} cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]} cqPath={ModelManager.rootPath} locationPathname={ window.location.pathname }/>
, document.getElementById('page'));
});
C.C.C.的主要功能 index.js
就是利用 ReactDOM.render
函式,以確定在DOM中注入應用程式的位置。
這是此函式的標準使用,不是此示例應用所獨有。
當使用元件模板(如JSX)靜態實例化元件時,必須將值從模型傳遞到元件的屬性。
通過呈現應用, index.js
呼叫 App.js
,此處以簡化版本顯示,重點介紹重要內容。
import {Page, withModel } from '@adobe/aem-react-editable-components';
...
class App extends Page {
...
}
export default withModel(App);
App.js
主要用於包裝構成應用的根元件。 任何應用的入口點都是頁面。
通過呈現頁面, App.js
呼叫 Page.js
以簡化版本列出。
import {Page, MapTo, withComponentMappingContext } from "@adobe/aem-react-editable-components";
...
class AppPage extends Page {
...
}
MapTo('my-react-app/components/structure/page')(withComponentMappingContext(AppPage));
在此示例中, AppPage
類擴展 Page
,其中包含可隨後使用的內容方法。
的 Page
接收頁面模型的JSON表示,並處理內容以包裝/裝飾頁面的每個元素。 有關 Page
可在文檔中找到 藍SPA圖。
在呈現頁面時, Image.js
如圖所示。
import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';
require('./Image.css');
const ImageEditConfig = {
emptyLabel: 'Image',
isEmpty: function() {
return !this.props || !this.props.src || this.props.src.trim().length < 1;
}
};
class Image extends Component {
render() {
return (<img src={this.props.src}>);
}
}
MapTo('my-react-app/components/content/image')(Image, ImageEditConfig);
中的核心SPA思想AEM是將元件映射SPA到元件AEM,並在修改內容時更新元件(反之亦然)。 查看文檔 編SPA輯器概述 獲取此通信模型的摘要。
MapTo('my-react-app/components/content/image')(Image, ImageEditConfig);
的 MapTo
方法將組SPA件映射到AEM元件。 它支援使用單個字串或字串陣列。
ImageEditConfig
是配置對象,它通過為編輯器提供生成佔位符所需的元資料來幫助啟用元件的創作功能
如果沒有內容,則將標籤作為佔位符提供以表示空內容。
來自模型的資料作為元件的屬性動態傳遞。
可以導出元件並使其保持可編輯狀態。
import React, { Component } from 'react';
import { MapTo } from '@adobe/aem-react-editable-components';
...
const EditConfig = {...}
class PageClass extends Component {...};
...
export default MapTo('my-react-app/react/components/structure/page')(PageClass, EditConfig);
的 MapTo
函式返回 Component
這是擴展了所提供的 PageClass
類名和屬性。 此元件可以導出,以便以後在應用程式的標籤中實例化。
使用 MapTo
或 withModel
函式。 Page
元件,用 ModelProvider
提供標準元件訪問頁面模型最新版本或該頁面模型中精確位置的元件。
有關詳細資訊,請參閱 藍SPA圖文檔。
預設情況下,使用 withModel
的子菜單。
對於單頁應用程式中的元件來說,經常需要共用資訊。 有幾種建議的方法來執行此操作,其複雜程度的增加順序如下所列。