随着互联网的快速发展，Web应用开发变得越来越普遍。前端开发是Web应用开发中至关重要的一部分。然而，在开发一个完整的Web应用时，数据的管理和维护也是极其重要的。传统的CMS缺乏灵活性和自定义程度，因此Headless CMS成为越来越流行的一种解决方案。本文将详细介绍Headless CMS，并介绍如何使用Strapi来构建一个基于React的Web应用。
Headless CMS 是什么？
Headless CMS是一种新兴的CMS类型，它提供了一个可配置的API后端，可以通过API连接到您选择的任何前端应用程序。这意味着您可以将内容管理系统与任何您选择的前端解决方案结合使用。与此相比，传统的CMS在前端和后端之间耦合紧密，难以灵活定制和升级。
Headless CMS通常模块化，并支持多种语言，这使您可以在一个应用程序中使用完全不同的技术堆栈。您可以使用任何现代Web开发技术，从Angular到React或Vue，或甚至使用静态站点生成器如Jekyll或Hugo。而Headless CMS则是数据源和API。
Strapi 简介
Strapi是一个推广Headless CMS的开源平台，它允许您构建和管理自己的API。Strapi提供了一套完全定制的CMS UI和一个可扩展的插件系统，这使得WWW和应用软件的开发过程变得更快、更容易。
Strapi已完全支持GraphQL，并支持同步和异步插件。此外，Strapi还提供了一个快速、现代化的管理UI，这使得内容编辑变得更加容易。在本文中，我们将重点介绍如何在React应用程序中使用Strapi API。
使用 Strapi API
我们将构建一个简单的博客应用程序，其中包含有关博客文章的信息。在这个应用中，我们将使用React作为我们的UI框架，并使用Strapi来管理我们的帖子数据。在开始之前，确保您已经安装了Node.js和npm。
设置 Strapi
我们需要安装Strapi到我们的项目中，想要这样做，我们可以使用npm。首先在项目的根目录下打开控制台，然后输入以下命令：
npm install strapi --save
我们可以通过运行以下命令来启动Strapi：
npx strapi start
如果一切顺利，将在您的控制台中看到Strapi服务器已经成功启动的消息。接下来，我们需要创建一个简单的内容类型来管理我们的帖子数据。
创建“文章”Content-Type
要创建我们的Content-Type，请打开Strapi的Web界面。默认情况下，Strapi运行在http://localhost:1337/admin中。在您的Web浏览器中打开界面，然后输入用户名和密码以登录。在登录后，单击左上角的“Content-Type Builder”选项卡。
单击“Add Content Type”按钮，然后输入“Post”作为 Content-Type的名称。然后，创建如下字段：
- Title (文本类型)
- Content (富文本类型)
现在，我们已经创建了我们的内容类型，现在我们需要使用Strapi API来获取和管理我们的数据。
启动 React 应用
我们将使用Create React App创建我们的React应用程序。如果您尚未安装Create React App，则需要在全局安装它。如果已经安装了Create React App，请跳过此步骤。
npm install create-react-app -g
在您的项目目录中运行以下命令，创建我们的React应用程序：
create-react-app my-app cd my-app npm start
如果一切顺利，你现在应该在浏览器中看到一个欢迎页面。
使用 Strapi API 获取数据
接下来，我们将使用Strapi API来获取帖子数据。要这样做，我们首先需要在我们的React应用程序中安装Axios，它是一个现代的Promise based HTTP客户端。
npm i axios
我们需要在src文件夹中创建一个文件夹，并在其中添加一个api.js文件。此文件将包含我们的API调用。打开api.js并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - ------------------------
----- -------- - -
----- ------------- -
----- --- - ----- ----------------------------------
------ ---------
--
--
------ ------- ---------在这个文件中，我们设置了我们的API端点（即Strapi服务器的地址），然后通过axios发送我们的请求。请注意，这里我们使用了Async/await来处理我们的promises，这使我们的代码看起来更加清晰和简洁。
然后，我们需要在App.js文件中调用我们的API来获取我们的数据。打开App.js并添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ -------- ---- --------
-------- ----- -
----- ------- --------- - -------------
------------ -- -
--------------------------------- -- -----------------
-- ----
------ -
---- ----------------
------ ---- ----------
----
--------------- -- -
--- --------------
---------------------
---------------------
-----
---
-----
------
--
-
------ ------- ----在这里，我们使用useState Hook来设置Posts集合，并在使用useEffect Hook获取我们的数据后将其设置。注意，我们使用模板字面量来呈现我们的集合列表。
现在，运行我们的应用程序，并查看浏览器中显示的数据。如果一切都按计划进行，您将看到您在Strapi中创建的文章数据。
创建新的帖子
我们还需要一种方法来创建新帖子。要创建新的帖子，我们将通过使用Strapi和Axios来将数据发送到我们的API：
async function createPost(title, content) {
const res = await axios.post(`${apiEndpoint}/posts`, { title, content });
return res.data;
}然后，我们可以在我们的UI组件中使用该API来创建新帖子：
-- -------------------- ---- -------
-------- ------------- --------- -- -
----- ------- --------- - -------------
----- --------- ----------- - -------------
----- ------------ - ----- - -- -
-------------------
----- ----------------- ---------
----------- ------ ------- ---
-------------
---------------
--
------ -
----- ------------------------
-------
------
------
-----------
-------------
----------- -- -------------------------
--
--------
--- --
-------
--------
---------
---------------
----------- -- ---------------------------
--
--------
--- --
------- -------------------- -------------
-------
--
-在这个文件中，我们使用useState Hook来处理我们的表单数据，然后在handleSubmit方法中发送我们的POST请求。在Promise解决后，我们使用我们的onAddPost回调函数将新帖子添加到我们的UI。我们还需要将NewPostForm添加到我们的App.js文件中：
-- -------------------- ---- -------
-------- ----- -
----- ------- --------- - -------------
------------ -- -
--------------------------------- -- -----------------
-- ----
----- ------------- - ---- -- -
--------------- -----------
--
------ -
---- ----------------
------ ---- ----------
------------ ------------------------- --
----
--------------- -- -
--- --------------
---------------------
---------------------
-----
---
-----
------
--
-现在，我们的应用程序可以获取、展示和创建文章数据。使用Strapi作为Headless CMS可以为您的应用程序提供灵活性和可扩展性，使您能够使用现代化的技术堆栈来构建Web应用程序。
结论
在本文中，我们了解了Headless CMS的概念，介绍了Strapi Headless CMS，然后展示了如何在一个React应用程序中使用Strapi API。我们演示了如何使用Axios来处理我们的POST和GET请求，以获取和管理数据。我们还创建了一个简单的UI组件，使我们能够创建新帖子并将其添加到我们的存在的帖子集合中。
Headless CMS让我们获得了更多的灵活性，这使我们可以使用任何前端技术堆栈来构建Web应用程序。使用Strapi轻松地将数据管理添加到您的应用程序制作过程中，并维持对数据的完全控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb8da144713626015e7c88