SPA编辑器项目

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

目标

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

将构建的内容

在本章中，将根据AEM项目原型部署新的AEM项目。 将为AEM项目启动一个非常简单的AngularSPA起点。 本章中使用的项目将用作实施WKND SPA的基础，并将在以后的章节中构建。

WKND SPAAngular入门项目

经典的“你好世界”消息。

前提条件

查看设置本地开发环境所需的工具和说明。 确保以​author​模式启动的新Adobe Experience Manager实例在本地运行。

获取项目

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

注意

最好使用​最新​版本的archetype生成一个用于实际实施的新项目。 AEM项目应使用原型的aemVersion属性来定位AEM的单个版本。

  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
    frontendModule 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. 从aem-guides-wknd-spa目录运行以下Maven命令以生成项目并将其部署到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配置文件​autoInstallSinglePackage​编译项目的各个模块并将单个包部署到AEM实例。 默认情况下，此包将部署到端口​4502​本地运行的AEM实例，并具有​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. 导航到​Sites​控制台：http://localhost:4502/sites.html/content。

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

  2. 选择​us > en > WKND SPA Angular Home Page​页面，然后单击菜单栏中的​编辑​按钮以打开该页面：

    站点控制台

  3. Text​组件已添加到页面中。 您可以像在AEM中编辑任何其他组件一样编辑此组件。

    更新文本组件

  4. 向页面中添加额外的​Text​组件。

    请注意，创作体验与传统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输出，您应该能够找到代表​Text​组件的代码片段。

    ...
":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的工具。

在此页面上