SPA编辑器项目 create-project
了解如何使用Adobe Experience Manager (AEM) Maven项目作为与AEM SPA编辑器集成的Angular应用程序的起点。
目标
- 了解基于Maven原型构建的新AEM SPA Editor项目的结构。
- 将起始项目部署到AEM的本地实例。
您将构建的内容
在本章中,将部署一个新的AEM项目,该项目基于 AEM项目原型. AEM项目通过非常简单的AngularSPA起点引导。 本章中使用的项目将作为WKND SPA实施的基础,并在以后的章节中构建该项目。
经典的Hello World消息。
前提条件
查看所需的工具和设置说明 本地开发环境. 确保已在中启动新的Adobe Experience Manager实例 作者 模式,正在本地运行。
获取项目
有多个选项可为AEM创建Maven多模块项目。 本教程使用最新的 AEM项目原型 作为教程代码的基础。 为了支持多个AEM版本,已对项目代码进行了修改。 请查阅 有关向后兼容性的说明.
aemVersion
原型的属性。-
通过Git下载本教程的起点:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-spa.git $ cd aem-guides-wknd-spa $ git checkout Angular/create-project-start
-
以下文件夹和文件结构表示由本地文件系统上的Maven原型生成的AEM项目:
code language-plain |--- aem-guides-wknd-spa |--- all/ |--- core/ |--- dispatcher/ |--- ui.apps/ |--- ui.apps.structure/ |--- ui.content/ |--- ui.frontend / |--- it.tests/ |--- pom.xml |--- README.md |--- .gitignore |--- archetype.properties
-
从生成AEM项目时,使用了以下属性 AEM项目原型:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 属性 价值 aemVersion 云 appTitle WKND SPAANGULAR appId wknd-spa-angular groupId com.adobe.aem.guides frontendmodule angular 包 com.adobe.aem.guides.wknd.spa.angular includeExamples n note note NOTE 请注意 frontendModule=angular
属性。 这会告知AEM项目原型使用启动器引导项目 angular代码库 与AEM SPA编辑器一起使用。
构建项目
接下来,使用Maven编译、生成项目代码并将其部署到AEM的本地实例。
-
确保AEM的实例在本地端口上运行 4502.
-
从命令行终端验证Maven是否已安装:
code language-shell $ mvn --version Apache Maven 3.6.2 Maven home: /Library/apache-maven-3.6.2 Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
-
从运行以下Maven命令
aem-guides-wknd-spa
要生成项目并将项目部署到AEM的目录:code language-shell $ mvn -PautoInstallSinglePackage clean install
如果使用 AEM 6.x:
code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
应编译项目的多个模块并将其部署到AEM。
code language-plain [INFO] ------------------------------------------------------------------------ [INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT: [INFO] [INFO] wknd-spa-angular ................................... SUCCESS [ 0.473 s] [INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s] [INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min] [INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [ 0.694 s] [INFO] WKND SPA Angular - UI apps ......................... SUCCESS [ 6.351 s] [INFO] WKND SPA Angular - UI content ...................... SUCCESS [ 2.885 s] [INFO] WKND SPA Angular - All ............................. SUCCESS [ 1.736 s] [INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [ 2.563 s] [INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [ 1.846 s] [INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [ 0.270 s] [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------
Maven配置文件 autoInstallSinglePack 编译项目的各个模块并将单个包部署到AEM实例。 默认情况下,此包将部署到本地在端口上运行的AEM实例 4502 并且具有 管理员:管理员.
-
导航到 包管理器 在本地AEM实例上: http://localhost:4502/crx/packmgr/index.jsp.
-
您应该会看到以下三个包
wknd-spa-angular.all
,wknd-spa-angular.ui.apps
和wknd-spa-angular.ui.content
.项目所需的所有自定义代码都捆绑在这些包中,并安装在AEM运行时中。
-
您还应该看到以下项目的多个包:
spa.project.core
和core.wcm.components
. 这些是原型自动包含的依赖项。 有关以下内容的更多信息 可在此处找到AEM核心组件.
创作内容
接下来,打开原型生成的入门SPA并更新某些内容。
-
导航至 站点 控制台: http://localhost:4502/sites.html/content.
WKND SPA包括基本站点结构,其中包含国家/地区、语言和主页。 此层次结构基于原型的默认值
language_country
和isSingleCountryWebsite
. 可以通过更新 可用属性 生成项目时。 -
打开 us > en > WKND SPA Angular Home Page 选择页面并单击 编辑 菜单栏中的按钮:
-
A 文本 组件已添加到页面。 您可以像在AEM中编辑任何其他组件一样编辑此组件。
-
添加其他 文本 组件添加到页面。
请注意,创作体验类似于传统AEM Sites页面的创作体验。 当前可用的组件数量有限。 在本教程中会添加更多内容。
Inspect单页应用程序
接下来,验证这是使用浏览器的开发人员工具的单页应用程序。
-
在 页面编辑器,单击 页面信息 菜单> 查看已发布的项目:
这将使用查询参数打开一个新选项卡
?wcmmode=disabled
可以有效地关闭AEM编辑器: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled -
查看页面源并注意文本内容 Hello World 或未找到任何其他内容。 您应该会看到如下所示的HTML:
code language-html ... <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="spa-root"></div> <script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script> ... </body> ...
clientlib-angular.min.js
是加载到页面上的AngularSPA,负责呈现内容。内容来自何处?
-
返回到选项卡: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
-
打开浏览器的开发人员工具,并在刷新期间检查页面的网络流量。 查看 XHR 请求:
应该有请求 http://localhost:4502/content/wknd-spa-angular/us/en.model.json. 该文档包含所有将驱动SPA的内容,并使用JSON格式化。
-
在新选项卡中,打开 http://localhost:4502/content/wknd-spa-angular/us/en.model.json
请求
en.model.json
表示将驱动应用程序的内容模型。 在Inspect中输入JSON输出,您应该能够找到表示 文本 组件。code language-json ... ":items": { "text": { "text": "<p>Hello World! Updated content!</p>\r\n", "richText": true, ":type": "wknd-spa-angular/components/text" }, "text_98796435": { "text": "<p>A new text component.</p>\r\n", "richText": true, ":type": "wknd-spa-angular/components/text" }, ...
在下一章中,我们将检查JSON内容如何从AEM组件映射到SPA组件,以形成AEM SPA编辑器体验的基础。
note note NOTE 安装浏览器扩展以自动格式化JSON输出可能会有所帮助。
恭喜! congratulations
恭喜,您刚刚创建了第一个AEM SPA Editor项目!
现在操作很简单,但在接下来的几个章节中添加了更多功能。
后续步骤 next-steps
集成SPA — 了解SPA源代码如何与AEM项目集成,并了解可用于快速开发SPA的工具。