AEM成长之路

尚未秃头的农工

已于 2024-03-01 15:30:51 修改

阅读量956

点赞数 20

分类专栏： AEM学习之路文章标签： maven ide javascript

于 2024-03-01 15:28:17 首次发布

本文链接：https://blog.csdn.net/Youmiko/article/details/136397595

版权

AEM学习之路专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、了解AEM🌴

在我们接触一门新语言时候得先去了解一下他的特性以及相关要点，好比在谈恋爱一样，得先了解对方是一个怎样的人在开始慢慢去接触。

(一)、什么是AEM

官方给出的解释是：
Adobe Experience Manager (AEM) is a comprehensive content management solution for building websites, mobile apps, and forms. AEM makes it easy to manage your marketing content and assets.

基于个人的理解：
AEM是Adobe旗下的一款CMS,主要用作与创建以及维护和部署一些大型的商用网站拥有以下几大特点。

组件化开发：大部份的厂商一般都是一次性开发好网站的所有内容包括功能，一般以页面为单位，同时管理者只能通过B端来编辑对应的数据在展示到C端上。而AEM具有一定的逻辑代码的最小单元是组件。首先AEM会给我们提供一些常用的基础组件如面包屑、图片、富文本编辑等组件，同时开发者也可以自定义开发组件。
数据库：传统的CMS系统一般是依赖MySqul等数据库来存储，AEM截然不同次采用文档型数据库（JCR）进行存储。结构如下

灵活性：普通的网站需要我们在B端进行编辑对应的数据然后保存到数据库后，最终内容才能呈现在C端上，而AEM所见及所得可以直接在我们组件上进行编辑更改文案等数据，并且可以直观的看到效果。
常用场景：
1. 网站管理和内容管理：
  - 创建和管理网站的各种内容，包括页面、图片、视频、文档等。
  - 使用模板和组件来设计布局网站页面。
  - 管理多语言和多渠道的内容。
2. 数字资产管理：
  - 管理和组织数字资产，例如图像、视频、音频等。
  - 提供搜索、标记、版本控制等功能来管理大量的数字资产。
3. 个性化和体验管理：
  - 根据用户的行为和属性提供个性化的内容和体验。
  - 进行A/B测试和多变量测试以优化用户体验。
4. 数字营销和营销自动化：
  - 创建和管理营销活动的内容和资产。
  - 跟踪和分析营销活动的效果，以便优化营销策略。
5. 电子商务集成：
  - 与电子商务平台集成，管理产品信息、目录和订单。
  - 提供电子商务功能，如购物车、支付集成等。

(二)、AEM技术架构

1.AEM三大核心分层和三大核心技术架构图读解

数据层(Apache Jackrabbit Oak)： AEM是以 Java Content Repostory(JCR)这个java内容仓库规范作为数据存储模型，它提供了一种层次化的数据存储和检索机制。数据层包括了存储在CRX中的所有内容，例如网站页面、数字资产、配置数据等。

Web层：Apache Sling是一个内容驱动的Web应用构建框架。基于REST原则，使用资源路径来映射HTTP请求到特定的处理器。在Apache Sling中内容被视为资源，每个资源都有一个以为的路径和一组属性。借助Sling提供的HTL（sightly）语言解析引擎。可以在html中轻松的引入后台Sling Moddel，并使用HTL标签渲染model中的数据。
AEM中常用的Sling API

应用层：在AEM中，应用层包含了处理业务逻辑和提供功能的部分。应用层包括了AEM中的组件、服务和工作流程，用于处理用户请求、执行操作和与其他系统交互。包括了个性化体验、探索和检索、工作流程管理、电子邮箱营销等。

2.AEM需要掌握的三大核心技术

(1) Apache Sling

(2) Java JCR & Apache Jackrabbit

(3) Apache Felix

3.AEM渲染层模板语言：HTL

HTML 模板语言 (HTL) 是 Adobe Experience Manager 中适用于 HTML 的首选和推荐的服务器端模板系统。像在所有 HTML 服务器端模板系统中一样，HTL 文件通过指定 HTML 本身、一些基本的表示逻辑和要在运行时计算的变量来定义发送到浏览器的输出。

4.相关官网学习文档：

Adobe Experience Manager6.5文档：https://experienceleague.adobe.com/docs/experience-manager-65.html?lang=zh-Hans
Adobe Experience Manager as a Cloud Service文档：https://experienceleague.adobe.com/docs/experience-manager-cloud-service.html
Core Components Introduction：https://experienceleague.adobe.com/docs/experience-manager-core-components/using/introduction.html?lang=en

(三)、开发前准备事项

由于AEM是Adobe面向企业的不对个人免费开发，相关资料只能从公司内部继承下。

1、获取AEM实例

3.1.1、获取启动jar包

3.1.2、在D磁盘下建立一个新文件夹，在此文件夹里放入我们的启动jar包。注意：云服务版本可以不需要许可证，非云版本会有一个license.properties文件放入与启动jar包同级下。

3.1.3、双击直接启动jar包，跑完进程后会生成我们的crx-quickstarg文件夹。

3.1.4、进程结束后会自动运行在默认浏览器上，端口号是默认的4502，网址：http://localhost:4502/aem/start.html 账号密码都是admin。

3.1.5、Touch UI Manager是AEM的核心控制台主要提供了一些页面管理（页面的创建和编辑），资产管理（图片视频等素材），Touch UI控制台是运维人员和AEM管理员的主要控制台。

3.1.6、http://localhost:4502/crx/de/index.jsp
Crx/de控制台可以被说为是数据库管理工具主要用来查看JCR的底层数据，同时包括我们的AEM代码，以及用户创建的页面添加的组件及对应的信息内容。可以说整个数据都可以在这里查看的到，在这里进行修改都会立即生效。

2、环境搭建相关依赖

3.2.1、开发工具：推荐使用IDEA（2023.1.5版本）

下载地址：https://www.jetbrains.com/idea/download/#section=windows

3.2.2、开发环境（Java环境配置属于基础默认都会）

JVAV JDK11： https://cfdownload.adobe.com/pub/adobe/coldfusion/java/java11/java11018/jdk-11.0.18_windows-x64_bin.exe

Maven https://dlcdn.apache.org/maven/maven-3/3.9.6/binaries/apache-maven-3.9.6-bin.zip

3.2.3、根据公司需求可能会需要额外配置一些站点相关包

例如一些工程编译包、数据包site-data-backup.zip、资产包、权限组包。
需要我们进入 http://localhost:4502/crx/packmgr/index.jsp 对相关的包进行解析。

3、项目工程编译

3.3.1、基于环境搭建工作完成情况下并且需要确定已经启动了我们的AEM jar包。这时候可以通过拉取公司代码，或者在可以使Project Code。此代码最符合AEM规范的基础代码。

https://github.com/adobe/aem-project-archetype/tree/master/src/main/archetype

3.3.2、在IDEA中配置编译命令

3.3.3、运行编译命令等到下载Maven依赖

3.3.4、AEM同步前端代码到本地server

插件清单

AEM IDE
AEM Support

获取插件注册码

地址：https://ipfs.io/ipfs/bafybeiatyghkzrrtodzt3stm652rkrjxndg4hq2ublfdmifk7plg5k5brq/

点击赋值按钮获取注册码，重启IDEA对应插件填充即可

使用AEM Support推送命令

选择目录或者在文件编辑区，鼠标右键 – Push to Author推送

推送成功

(四)、分析项目结构

core : is a Java bundle containing all core functionality like OSGi services, listeners, and schedulers, as well as component-related Java code such as servlets and request filters.
ui.apps : contains the /apps and /etc parts of the project, i.e. JS and CSS clientlibs, components, templates, runmode-specific configs, as well as Hobbes tests.
ui.content : contains sample content using the components from the ui.apps module.
ui.tests : is a Java bundle containing JUnit tests that are executed server-side. This bundle is not to be deployed onto production.
ui.launcher : contains glue code that deploys the ui.tests bundle (and dependent bundles) to the server and triggers the remote JUnit execution.
ui.frontend : (optional) contains the artifacts required to use the Webpack-based front-end build module.

Project
├─ all                                 
├─ core                               # Java后台代码
├─ dispatcher                         # AEM dispatcher
├─ ui.apps                            # AEM组件和模板开发 
│  ├─ src/main/content/jcr_root/
│  │  ├─ apps/jackery                   
│  │     |
│  │     ├─ clientlibs                # 前端公共CSS和JS管理文件夹
│  │     │  ├─ clientlib-api          # 前端API接口管理（挂载到window.Project.API）
│  │     │  ├─ clientlib-base         # 基础CSS和JS管理（对应生成clientlib-base.xxx.min.css和clientlib-base.xxx.min.js）
│  │     │  ├─ clientlib-page         # 页面CSS和JS管理（对应生成clientlib-page.xxx.min.css和clientlib-page.xxx.min.js）
│  │     │  ├─ clientlib-utils        # 前端Utils管理（挂载到window.Project.utils和window.Project.fetch)
│  │     │  ├─ plugins                # 前端三方插件管理
│  │     │  ├─ ...         
│  │     |
│  │     ├─ components                # 组件及模板关联的page目录
│  │     ├─ ...                       # 各类组件
│  │     │  
│  │     ├─ custom-plugins            # 自定义插件组件目录
│  │     │  ├─ custom-common-plugins  # 公共插件组件（放置无需配置项的，仅有HTML+CSS+JS的插件功能）  
│  │     │  ├─ ...                    # 其他插件组件（后续放置需要配置项的插件功能，需要继续研发）   
│  │     │  
│  │     ├─ page                      # 根模板关联page（其他模板均继承它）
│  │     ├─ homepage                  # 首页模板关联page
│  │     ├─ product-page              # 产品页模板关联page
│  │     ├─ xfpage                    # Experience Fragments页模板关联page
│  │     ├─ ...                         
│  │     └─ structure                 # temple模板关联的page
│  │        ├─ *-page                 # 各模板关联的page，用于配置各个模板的属性            
│  │        ├─ header                 # 公共Header组件（Experience Fragments方式开发）           
│  │        └─ footer                 # 公共Feader组件（Experience Fragments方式开发）
│  │      
│  └─ src/main/content/META-INF/      # 工程代码同步到Server的文件目录过滤器管理
│  
├─ ui.config                          # AEM工程各类后端配置
│  └─ src/main/content/jcr_root/
│     └─ apps/Project/osgiconfig      # 匹配各环境的AEM配置（常见的各环境接口域名配置就在这里）
│  
├─ ui.content                         # AEM工程各类后端配置
│  ├─ src/main/content/jcr_root/
│     ├─ conf/Project/settings         
│     │  └─ wcm/templates         
│     │     └─ *-page                 # 各类页面模板
│     │ 
│     ├─ content/dam                  # AEM Assets资产管理存储目录（工程代码中不自动同步那些资源）
│     └─ etc
│        └─ map.publish.dev           # （待分析……）
│
├─ ui.frontend                        # AEM纯前端工程
├─ pom.xml                            # Maven依赖管理
├─ .gitignore                         # git提交忽略配置
└─ README.md                          # 工程说明

当你做好了以上的准备后，就可以近一步揭开她的面纱🎇，跟着我脚步一起探索吧！！！

尚未秃头的农工

关注

20
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
AEM成长之路

AEM是Adobe旗下的一款CMS,主要用作与创建以及维护和部署一些大型的商用网站拥有以下几大特点。组件化开发：大部份的厂商一般都是一次性开发好网站的所有内容包括功能，一般以页面为单位，同时管理者只能通过B端来编辑对应的数据在展示到C端上。而AEM具有一定的逻辑代码的最小单元是组件。首先AEM会给我们提供一些常用的基础组件如面包屑、图片、富文本编辑等组件，同时开发者也可以自定义开发组件。数据库：传统的CMS系统一般是依赖MySqul等数据库来存储，AEM截然不同次采用文档型数据库（JCR）进行存储。
复制链接

扫一扫