SPA编辑器项目

了解如何使用Adobe Experience Manager (AEM) Maven项目作为与AEM SPA编辑器集成的Angular应用程序的起点。

目标

  1. 了解从Maven原型构建的新AEM SPA Editor项目的结构。
  2. 将起始项目部署到AEM的本地实例。

您将构建的内容

在本章中，将部署一个新的AEM项目，该项目基于 AEM项目原型. AEM项目通过非常简单的AngularSPA起点引导。 本章中使用的项目将作为WKND SPA实施的基础，并在以后的章节中构建该项目。

WKND SPAAngular入门项目

经典的Hello World消息。

前提条件

查看所需的工具和设置说明 本地开发环境. 确保已在中启动新的Adobe Experience Manager实例 作者 模式，正在本地运行。

获取项目

有几个选项可为AEM创建Maven多模块项目。 本教程使用了最新的 AEM项目原型 作为教程代码的基础。 为了支持多个AEM版本，已对项目代码进行了修改。 请查阅 关于向后兼容性的说明.

注意

最佳做法是使用 最新 的版本 原型 为实际实施生成新项目。 AEM项目应使用以下工具定位单个版本的AEM： aemVersion 原型的属性。

  1. 通过Git下载本教程的起点：

    $ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start

  2. 以下文件夹和文件结构表示由本地文件系统上的Maven原型生成的AEM项目：

    |--- 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

  3. 从生成AEM项目时，使用了以下属性 AEM项目原型：

    属性 价值
    aemVersion 云
    appTitle WKND SPAANGULAR
    appId wknd-spa-angular
    groupId com.adobe.aem.guides
    frontendemodule angular
    包 com.adobe.aem.guides.wknd.spa.angular
    includeExamples n
    注意

    请注意 frontendModule=angular 属性。 这会告知AEM项目原型使用启动程序引导项目 angular代码库 与AEM SPA编辑器一起使用。

生成项目

接下来，使用Maven编译、生成项目代码并将其部署到AEM的本地实例。

  1. 确保AEM的实例在端口上本地运行 4502.

  2. 从命令行终端验证是否已安装Maven：

    $ 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

  3. 从运行以下Maven命令 aem-guides-wknd-spa 要生成项目并将其部署到AEM的目录：

    $ mvn -PautoInstallSinglePackage clean install

    如果使用 AEM 6.x：

    $ mvn clean install -PautoInstallSinglePackage -Pclassic

    应编译项目的多个模块并将其部署到AEM。

    [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 并且拥有 admin：admin.

  4. 导航到 包管理器 在本地AEM实例上： http://localhost:4502/crx/packmgr/index.jsp.

  5. 您应该会看到以下三个包： wknd-spa-angular.all， wknd-spa-angular.ui.apps 和 wknd-spa-angular.ui.content.

    WKND SPA包

    项目所需的所有自定义代码都捆绑到这些包中，并安装在AEM运行时中。

  6. 您还应该看到以下项目的多个包： spa.project.core 和 core.wcm.components. 这些是原型自动包含的依赖关系。 有关以下内容的更多信息 可以在此处找到AEM核心组件.

创作内容

接下来，打开原型生成的入门SPA并更新某些内容。

  1. 导航到 站点 控制台： http://localhost:4502/sites.html/content.

    WKND SPA包括基本站点结构，其中包含国家/地区、语言和主页。 此层次结构基于原型的默认值 language_country 和 isSingleCountryWebsite. 可以通过更新 可用属性 生成项目时。

  2. 打开 us > en > WKND SPA Angular Home Page ，然后单击 编辑 菜单栏中的按钮：

    站点控制台

  3. A 文本 组件已添加到页面中。 您可以像AEM中的任何其他组件一样编辑此组件。

    更新文本组件

  4. 添加其他 文本 组件添加到页面。

    请注意，创作体验类似于传统AEM Sites页面的创作体验。 当前可用的组件数量有限。 在本教程中会添加更多内容。

Inspect单页应用程序

接下来，使用浏览器的开发人员工具验证这是一个单页应用程序。

  1. 在 页面编辑器，单击 页面信息 菜单> 查看已发布的项目：

    “以发布的形式查看”按钮

    这将使用查询参数打开一个新选项卡 ?wcmmode=disabled 可以有效地关闭AEM编辑器： http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

  2. 查看页面的源，并注意文本内容 Hello World 或找不到任何其他内容。 您应该会看到如下所示的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，负责呈现内容。

    内容来自何处？

  3. 返回到选项卡： http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

  4. 打开浏览器的开发人员工具，并在刷新期间检查页面的网络流量。 查看 XHR 请求：

    XHR请求

    应该有一个请求 http://localhost:4502/content/wknd-spa-angular/us/en.model.json. 该文档包含所有将驱动SPA的内容（格式为JSON）。

  5. 在新选项卡中，打开 http://localhost:4502/content/wknd-spa-angular/us/en.model.json

    请求 en.model.json 表示将驱动应用程序的内容模型。 Inspect 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编辑器体验的基础。

    注意

    安装浏览器扩展以自动格式化JSON输出可能很有帮助。

恭喜！

恭喜，您刚刚创建了第一个AEM SPA Editor项目！

现在很简单，但在接下来的几个章节中，添加了更多功能。

后续步骤

集成SPA — 了解SPA源代码如何与AEM项目集成，并了解可用于快速开发SPA的工具。

在此页面上