Web组件

[AEM Headlessas a Cloud Service]{class="badge informative"}

示例应用程序是探索Adobe Experience Manager (AEM)的Headless功能的绝佳方法。 此Web组件应用程序演示了如何使用使用AEM GraphQL API的持久查询来查询内容,以及如何呈现部分UI(使用纯JavaScript代码完成)。

带有AEM Headless的Web组件

查看 GitHub上的源代码

先决条件 prerequisites

应在本地安装以下工具:

AEM要求

Web组件可与以下AEM部署选项配合使用。

此示例应用程序依赖于 basic-tutorial-solution.content.zip 需要安装且需要 部署配置 已准备就绪。

IMPORTANT
Web组件旨在连接到 AEM发布 环境,但是,如果在Web组件的中提供身份验证,则可以从AEM Author源内容 person.js 文件。

使用方法

  1. 克隆 adobe/aem-guides-wknd-graphql 存储库:

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. 导航到 web-component 子目录。

    code language-shell
    $ cd aem-guides-wknd-graphql/web-component
    
  3. 编辑 .../src/person.js 文件以包含AEM连接详细信息:

    aemHeadlessService 对象,更新 aemHost 以指向您的AEM发布服务。

    code language-plain
    # AEM Server namespace
    aemHost=https://publish-p123-e456.adobeaemcloud.com
    
    # AEM GraphQL API and Persisted Query Details
    graphqlAPIEndpoint=graphql/execute.json
    projectName=my-project
    persistedQueryName=person-by-name
    queryParamName=name
    

    如果连接到AEM Author服务,则在 aemCredentials 对象,提供本地AEM用户凭据。

    code language-plain
    # For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance)
    username=admin
    password=admin
    
  4. 打开终端并运行以下命令: aem-guides-wknd-graphql/web-component

    code language-shell
    $ npm install
    $ npm start
    
  5. 新浏览器窗口将打开一个静态HTML页,该页包含位于的Web组件 http://localhost:8080.

  6. 人员信息 Web组件显示在网页上。

代码

以下摘要介绍了Web组件的构建方式、它如何连接到AEM Headless以使用GraphQL持久查询检索内容,以及数据如何呈现。 完整的代码可在上找到 GitHub.

Web组件HTML标记

可重复使用的Web组件(又称自定义元素) <person-info> 已添加到 ../src/assets/aem-headless.html HTML页。 它支持 hostquery-param-value 属性来驱动组件的行为。 此 host 属性的值覆盖 aemHost 值自 aemHeadlessService 中的对象 person.js、和 query-param-value 用于选择要呈现的人员。

    <person-info
        host="https://publish-p123-e456.adobeaemcloud.com"
        query-param-value="John Doe">
    </person-info>

Web组件实施

person.js 定义Web组件功能,下面是其中的关键亮点。

PersonInfo元素实施

<person-info> 自定义元素的类对象通过使用 connectedCallback() 生命周期方法、附加影子根、获取GraphQL持久查询和DOM操作以创建自定义元素的内部影子DOM结构。

// Create a Class for our Custom Element (person-info)
class PersonInfo extends HTMLElement {

    constructor() {
        ...
        // Create a shadow root
        const shadowRoot = this.attachShadow({ mode: "open" });
        ...
    }

    ...

    // lifecycle callback :: When custom element is appended to document
    connectedCallback() {
        ...
        // Fetch GraphQL persisted query
        this.fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue).then(
            ({ data, err }) => {
                if (err) {
                    console.log("Error while fetching data");
                } else if (data?.personList?.items.length === 1) {
                    // DOM manipulation
                    this.renderPersonInfoViaTemplate(data.personList.items[0], host);
                } else {
                    console.log(`Cannot find person with name: ${queryParamValue}`);
                }
            }
        );
    }

    ...

    //Fetch API makes HTTP GET to AEM GraphQL persisted query
    async fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue) {
        ...
        const response = await fetch(
            `${headlessAPIURL}/${aemHeadlessService.persistedQueryName}${encodedParam}`,
            fetchOptions
        );
        ...
    }

    // DOM manipulation to create the custom element's internal shadow DOM structure
    renderPersonInfoViaTemplate(person, host){
        ...
        const personTemplateElement = document.getElementById('person-template');
        const templateContent = personTemplateElement.content;
        const personImgElement = templateContent.querySelector('.person_image');
        personImgElement.setAttribute('src',
            host + (person.profilePicture._dynamicUrl || person.profilePicture._path));
        personImgElement.setAttribute('alt', person.fullName);
        ...
        this.shadowRoot.appendChild(templateContent.cloneNode(true));
    }
}

注册 <person-info> 元素

    // Define the person-info element
    customElements.define("person-info", PersonInfo);

跨源资源共享(CORS)

此Web组件依赖于在目标AEM环境中运行的基于AEM的CORS配置,并假定主机页面运行于 http://localhost:8080 在开发模式及以下为本地AEM Author服务的CORS OSGi配置示例。

请查阅 部署配置 用于相应的AEM服务。

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