SPA编辑器项目 create-project

了解如何使用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版本,已对项目代码进行了修改。 请查阅 有关向后兼容性的说明.

CAUTION
最佳做法是使用 最新 的版本 原型 为实际实施生成新项目。 AEM项目应使用以下工具定位AEM的单个版本: aemVersion 原型的属性。
  1. 通过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
    
  2. 以下文件夹和文件结构表示由本地文件系统上的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
    
  3. 从生成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的本地实例。

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

  2. 从命令行终端验证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
    
  3. 从运行以下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 并且具有 管理员:管理员.

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

  5. 您应该会看到以下三个包 wknd-spa-angular.allwknd-spa-angular.ui.appswknd-spa-angular.ui.content.

    WKND SPA包

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

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

创作内容

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

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

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

  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:

    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,负责呈现内容。

    内容来自何处?

  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输出,您应该能够找到表示 文本 组件。

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

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4