在现代 Web 应用程序中，使用 Content Management System (CMS) 变得越来越普遍。事实上，大多数开发人员已经使用过至少一种 CMS 来管理和发布内容，例如 WordPress。然而，传统的 CMS 并不适用于现代 Web 应用程序，因为它们通常只适用于特定的 Web 框架或不提供足够的灵活性。
于是 Headless CMS 应运而生，它为开发人员提供了一种新的方式来管理内容并将其集成到任何 Web 应用程序中。Headless CMS 将内容从展示逻辑中解耦出来，以 API 的方式提供内容，使得开发人员可以自由选择他们最喜欢的前端框架，例如 React。
在本文中，我们将介绍 Headless CMS 在 React 项目中的应用实践，并提供示例代码作为学习和参考。我们将使用 Strapi 作为 Headless CMS，React 作为前端框架，以及 Apollo Client 作为数据层。
什么是 Headless CMS？
Headless CMS 是一种内容管理系统，它与特定的展示逻辑解耦，以 API 的形式提供数据。这意味着开发人员可以从任何设备或平台上访问和消费数据，包括 Web、移动设备、IoT 设备或任何其他设备。
Headless CMS 将内容划分为两部分：内容库和应用程序。内容库是所存储的内容，而应用程序则是消费数据的应用。Headless CMS 将这些内容库提供给任何应用，这些应用可根据自己的需要自由改变内容的呈现方式。这一点是 Headless CMS 的主要优势，因为其使开发人员能够更快速、更自由地创建灵活的应用程序。
为什么选择 Headless CMS？
Headless CMS 是现代 Web 应用程序的较好选择，因为它们提供以下优势：
灵活性
由于 Headless CMS 仅提供 API，因此它们为开发人员提供了更大的灵活性和自由度。开发人员可以在任何时候使用他们最喜欢的框架进行开发，也可以在任何时候定制数据的呈现方式。同时，由于开发人员可以自由选择他们使用的前端框架，因此 Headless CMS 可以适应各种不同的开发情况。
设备无关性
Headless CMS 的另一个优势是它们提供了跨设备的数据访问。该 CMS 可以为多个数据消费者提供 API，包括 Web 应用程序、移动设备、IoT 设备等。这使得数据更容易被消费，而不必担心在特定平台上呈现数据的问题。
可扩展性
Headless CMS 的第三个优势是其可扩展性。将应用程序和内容库分开可以使系统更快地响应变化。如果需要更改应用程序的前端，开发人员可以快速地进行修改，而不必担心对内容库造成任何影响。这使得应用程序的开发和修改变得更加容易。
Strapi 作为 Headless CMS
Strapi 是一个自我托管的 Headless CMS，建立在 Node.js、Koa.js 和 MongoDB 之上。它提供了一个基于 REST API 的后端管理工具，支持多种文件上传方式，提供了可自定义的权限控制，以及完全自由的内容建模。最重要的是，Strapi 对于开发人员来说是开源的，适用性广泛，易于定制和拓展。下面，我们将使用 Strapi 作为 Headless CMS，将其集成到 React 项目中。
在 React 项目中使用 Strapi
在这一部分中，我们将介绍如何使用 Strapi 在 React 项目中实现 Headless CMS 的功能。首先，我们需要使用 React 负责内容的显示，并使用 Apollo Client 负责数据的获取。同时，我们会使用 Strapi 提供的 API 来获取数据。
安装 Strapi
要使用 Strapi 作为 Headless CMS，我们首先需要创建一个 Strapi 实例。你可以创建一个本地实例，也可以使用 Strapi 提供的公共服务。在这里，我们将使用本地实例。
你可以通过以下命令来安装 Strapi：
npm install strapi@beta -g
安装完成后，在命令行中运行 Strapi：
strapi new my-project
这将为你创建一个名为 my-project 的新项目。接下来，我们需要安装 MongoDB，Strapi 默认使用 MongoDB 来管理数据。你可以在此处下载MongoDB。
创建 Strapi 实例
安装完成后，我们需要运行 Strapi 实例。你可以通过以下命令启动 Strapi：
cd my-project strapi start
现在，你的 Strapi 实例已经在本地启动了。你可以通过访问 http://localhost:1337/admin 来访问 Strapi 的管理员控制台。在那里，你可以创建内容模型、添加数据、定义字段、配置 API 和更多其他操作。
我们将在 Strapi 中创建一个 simple-article 模型，你可以在管理员控制台中找到。该模型包含标题、内容和摘要等字段。
在创建完成后，你可以使用以下命令验证 Strapi 的 API 是否可用：
curl http://localhost:1337/simple-article
这将返回 Strapi 的 API 数据。
创建 React 应用
现在，我们需要创建 React 应用，我们将在其中使用 Strapi 的 API。
首先，让我们使用 Create React App 创建 React 应用程序：
npx create-react-app my-project
在应用程序的根目录中创建一个 .env 文件，并添加以下内容：
REACT_APP_API_URL=http://localhost:1337
然后，我们需要安装 Apollo Client 和它的依赖项：
npm install @apollo/client graphql
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- --- - ---- -----------------
----- ------------ - ----
----- -------- -
-------- -
-----
-------
-
-
--
------ ------- -------- ----- -
----- - -------- ------ ---- - - -----------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -------------------- ------ ------- -- -- -
---- ------------
----------------
----------------
------
---
-在这里，我们使用了 @apollo/client 和 gql 函数来进行 GraphQL 查询。在查询中，我们使用了 articles 查询来从 Strapi 中获取文章的标题和内容。我们使用 useQuery 调用来执行该查询，然后分别处理其中的 loading、error 和 data 数据。
现在，我们需要将 Apollo Client 配置为使用 Strapi 的 API，打开 src/index.js 并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------
------ - ------------- -------------- -------------- - ---- -----------------
----- ------ - --- --------------
---- ----------------------------- - -----------
------ --- ----------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--在这里，我们使用 ApolloClient 来配置 Apollo Client，然后使用 InMemoryCache 来响应查询结果。我们使用 .env 文件中定义的 API URL 来连接 Strapi 的 GraphQL API，最后通过 ApolloProvider 将 App 包装为子组件以实现 Apollo Client 的响应。
现在，我们已经将 Strapi 集成到 React 应用程序中，并使用 GraphQL 查询获取数据。尝试运行应用程序：
npm start
你应该会看到从 Strapi 中获取的数据。在 Strapi 的管理员控制台中添加和编辑文章，然后返回 React 应用程序，你将看到它们出现在页面中。
结论
在本文中，我们介绍了 Headless CMS 的概念和优势，并使用 Strapi 作为 Headless CMS，以及 React 和 Apollo Client，展示了如何将 Strapi 集成到 React 应用程序中。我们在上面提供了完整的示例代码，以便你快速入门。
Headless CMS 是一种非常有用的工具，可帮助开发人员更自由、快速地构建出灵活且易于管理的 Web 应用程序。如果你还没有尝试过 Headless CMS，那么现在是开始的好时机。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67454229c1a23897ea8eb43d