文档AEMAEM 教程AEM Headless 教程

AEM Headless API和React

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 中级
  • 开发人员

欢迎阅读本教程一章，其中我们将探索配置React应用程序以使用AEM Headless SDK与Adobe Experience Manager (AEM) Headless API连接。 我们将介绍如何从AEM的GraphQL API检索内容片段数据并将其显示在React应用程序中。

AEM Headless API允许从任何客户端应用程序访问AEM内容。 我们将引导您配置React应用程序，以使用AEM Headless SDK连接到AEM Headless API。 此设置可在您的React应用程序与AEM之间建立可重复使用的通信渠道。

接下来，我们将使用AEM Headless SDK从AEM的GraphQL API检索内容片段数据。 AEM中的内容片段提供结构化内容管理。 利用AEM Headless SDK，您可以使用GraphQL轻松查询和提取内容片段数据。

一旦我们有内容片段数据，我们就会将它集成到您的React应用程序中。 您将学习如何以吸引人的方式格式化并显示数据。 我们将介绍在React组件中处理和呈现内容片段数据的最佳实践，确保与应用程序的UI无缝集成。

在本教程中，我们将提供说明、代码示例和实用提示。 最终，您将能够配置React应用程序以连接到AEM Headless API，使用AEM Headless SDK检索内容片段数据，并在您的React应用程序中无缝显示这些数据。 让我们开始吧！

克隆React应用程序

  1. 通过在命令行上执行以下命令，从Github克隆应用程序。

    code language-none 
    $ git clone git@github.com:lamontacrook/headless-first.git

  2. 转到headless-first目录并安装依赖项。

    code language-none 
    $ cd headless-first
$ npm ci

配置React应用程序

  1. 在项目的根目录下创建名为.env的文件。 在.env中设置以下值：

    code language-none 
    REACT_APP_AEM=<URL of the AEM instance>
REACT_APP_ENDPOINT=<the name of the endpoint>
REACT_APP_PROJECT=<the name of the folder with Content Fragments>
REACT_APP_TOKEN=<developer token>

  2. 您可以在Cloud Manager中检索开发人员令牌。 登录到AdobeCloud Manager。 单击​ Experience Manager> Cloud Manager。 选择相应的程序，然后单击“Environment（环境）”旁边的省略号。

    AEM Developer Console

    1. 单击​ 集成 ​选项卡
    2. 单击“本地令牌”选项卡和“获取本地开发令牌”按钮
    3. 将访问令牌从打开报价之后复制到关闭报价之前。
    4. 将复制的令牌粘贴为.env文件中REACT_APP_TOKEN的值。
    5. 现在，让我们通过在命令行上执行npm ci来构建应用程序。
    6. 现在启动React应用程序，并在命令行上执行npm run start。
    7. 在中。/src/utils名为context.js的文件包含用于将.env文件中的值设置为应用程序上下文的代码。

运行React应用程序

  1. 通过在命令行上执行npm run start来启动React应用程序。

    code language-none 
    $ npm run start

    React应用程序将启动并打开http://localhost:3000的浏览器窗口。 对React应用程序所做的更改将自动在浏览器中重新加载。

连接到AEM Headless API

  1. 要将React应用程序连接到AEM as a Cloud Service，让我们向App.js添加一些内容。 在React导入中，添加useContext。

    code language-javascript 
    import React, {useContext} from 'react';

    从context.js文件导入AppContext。

    code language-javascript 
    import { AppContext } from './utils/context';

    现在，在应用程序代码中，定义上下文变量。

    code language-javascript 
    const context = useContext(AppContext);

    最后，将返回代码包装在<AppContext.Provider> ... </AppContext.Provider>中。

    code language-javascript 
    ...
return(<div className='App'>
    <AppContext.Provider value={context}>
        ...
    </AppContext.Provider>
</div>);

    作为参考，App.js现在应如下所示。

    code language-javascript 
    import React, {useContext} from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './screens/home/home';
import { AppContext } from './utils/context';

const App = () => {
const context = useContext(AppContext);
return (
    <div className='App'>
    <AppContext.Provider value={context}>
        <BrowserRouter>
        <Routes>
            <Route exact={true} path={'/'} element={<Home />} />
        </Routes>
        </BrowserRouter>
    </AppContext.Provider>
    </div>
);
};

export default App;

  2. 导入AEMHeadless开发工具包。 此SDK是应用程序用于与AEM的Headless API进行交互的帮助程序库。

    将此import语句添加到home.js。

    code language-javascript 
    import AEMHeadless from '@adobe/aem-headless-client-js';

    将以下{ useContext, useEffect, useState }添加到 React import语句中。

    code language-javascript 
    import React, { useContext, useEffect, useState } from 'react';

    导入AppContext。

    code language-javascript 
    import { AppContext } from '../../utils/context';

    在Home组件内，从AppContext获取context变量。

    code language-javascript 
    const Home = () => {
const context = useContext(AppContext);
...
}

  3. 初始化useEffect()中的AEM Headless SDK，因为context变量更改时AEM Headless SDK必须更改。

    code language-javascript 
    useEffect(() => {
const sdk = new AEMHeadless({
    serviceURL: context.url,
    endpoint: context.endpoint,
    auth: context.token
});
}, [context]);
    note note
    NOTE
    /utils下有一个正在从.env文件中读取元素的context.js文件。 作为参考，context.url是AEM as a Cloud Service环境的URL。 context.endpoint是上一课程中创建的端点的完整路径。 最后，context.token是开发人员令牌。

  4. 创建可公开来自AEM Headless SDK的内容的React状态。

    code language-javascript 
    const Home = () => {
const [content, setContent] = useState({});
...
}

  5. 将应用程序连接到AEM。 使用在上一课程中创建的持久查询。 初始化AEM Headless SDK后，让我们在useEffect中添加以下代码。 使useEffect依赖于context变量，如下所示。

    code language-javascript 
    useEffect(() => {
...
sdk.runPersistedQuery('<name of the endpoint>/<name of the persisted query>', { path: `/content/dam/${context.project}/<name of the teaser fragment>` })
    .then(({ data }) => {
    if (data) {
        setContent(data);
    }
    })
    .catch((error) => {
    console.log(`Error with pure-headless/teaser. ${error.message}`);
    });
}, [context]);

  6. 打开开发人员工具的“网络”视图以查看GraphQL请求。

    <url to environment>/graphql/execute.json/pure-headless/teaser%3Bpath%3D%2Fcontent%2Fdam%2Fpure-headless%2Fhero

    Chrome开发工具

    AEM Headless SDK对GraphQL请求进行编码，并添加提供的参数。 您可以在浏览器中打开请求。

    note note
    NOTE
    由于请求将发送到创作环境，因此您必须在同一浏览器的其他选项卡中登录到环境。

呈现内容片段内容

  1. 在应用程序中显示内容片段。 返回带有Teaser标题的<div>。

    code language-javascript 
    return (
<div className='main-body'>
    <div>{content.component && (content.component.item.title)}</div>
</div>
);

    您应会看到Teaser的标题字段显示在屏幕上。

  2. 最后一步是将Teaser添加到页面。 包中包含React Teaser组件。 首先，让我们包含导入。 在home.js文件的顶部，添加以下行：

    import Teaser from '../../components/teaser/teaser';

    更新返回语句：

    code language-javascript 
    return (
<div className='main-body'>
    <div>{content.component && <Teaser content={content.component.item} />}</div>
</div>
);

    现在，您应该会看到包含片段中包含内容的Teaser。

后续步骤

恭喜！您已成功更新React应用程序以使用AEM Headless SDK与AEM Headless API集成！

接下来，让我们创建一个更复杂的图像列表组件，以从AEM动态呈现引用的内容片段。

下一章：构建图像列表组件

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