Web元件
[AEM Headlessas a Cloud Service]{class="badge informative"}
範例應用程式是探索Adobe Experience Manager (AEM)無周邊功能的絕佳方式。 此Web元件應用程式示範了如何使用AEM的GraphQL API透過持續性查詢來查詢內容，以及如何轉譯UI的一部分，使用純JavaScript程式碼完成。
在GitHub🔗上檢視原始程式碼
先決條件 prerequisites
下列工具應在本機安裝：
AEM需求
Web元件可與下列AEM部署選項搭配使用。
- AEM as a Cloud Service
- 使用AEM Cloud Service SDK進行本機設定
- 需要JDK 11 (如果連線到本機AEM 6.5或AEM SDK)
此範例應用程式依賴安裝basic-tutorial-solution.content.zip，且已具備必要的部署設定。
person.js檔案中有提供驗證，它就可以從AEM Author取得內容。使用方式
-
複製
adobe/aem-guides-wknd-graphql存放庫：code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git -
導覽至
web-component子目錄。code language-shell $ cd aem-guides-wknd-graphql/web-component -
編輯
.../src/person.js檔案以包含AEM連線詳細資料：在
aemHeadlessService物件中，更新aemHost以指向您的AEM Publish服務。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 -
開啟終端機並從
aem-guides-wknd-graphql/web-component執行命令：code language-shell $ npm install $ npm start -
新的瀏覽器視窗會開啟靜態HTML頁面，其中在http://localhost:8080嵌入網頁元件。
-
個人資訊 網頁元件會顯示在網頁上。
程式碼
以下摘要說明如何建立Web元件、元件如何連線至AEM Headless以使用GraphQL持續查詢擷取內容，以及資料如何呈現。 您可以在GitHub上找到完整的程式碼。
網頁元件HTML標籤
已將可重複使用的Web元件（亦稱為自訂元素） <person-info>新增到../src/assets/aem-headless.htmlHTML頁面。 它支援host和query-param-value屬性來驅動元件的行為。 host屬性的值會覆寫person.js中aemHeadlessService物件的aemHost值，而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服務的部署設定。