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项目应使用原型的aemVersion属性定位单一版本的AEM。
  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项目原型使用要与AEM SPA编辑器一起使用的启动程序Angular代码库引导项目。

构建项目

接下来,使用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. aem-guides-wknd-spa目录运行以下Maven命令以生成项目并将其部署到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配置文件​ autoInstallSinglePackage ​编译项目的各个模块并将单个包部署到AEM实例。 默认情况下,此包将部署到在端口​ 4502 ​上本地运行的AEM实例,并使用​ admin:admin ​的凭据。

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

    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输出,您应该能够找到表示​ Text ​组件的代码片段。

    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