在现代应用程序的开发中，前端开发变得越来越复杂，需要集成各种工具和服务来创建动态体验。而 Headless CMS 已经成为了一个非常有用的工具，可以让您轻松地创建并更新您的网站和应用程序内容，从而提高效率。
什么是 Headless CMS？
Headless CMS 是一种不提供与网站外观和用户界面有关的功能的 CMS。它只关心储存和管理内容。在传统的 CMS 中，网站的外观和内容是耦合在一起的，而 Headless CMS 推出了一种新的形式，将内容与显示分离。它不提供模板或主题，而是将 API 作为访问内容的唯一方法。
由于 Headless CMS 的不依赖具体的界面设计，因此可以轻松地为各种不同的应用程序创建内容，无论是网站、移动应用程序、IoT 设备或者其他。Headless CMS 通过 RESTful API 让开发者可以轻松地访问它的内容。
为什么选择 Headless CMS？
Headless CMS 的主要优点是灵活性和可扩展性。它让您可以专注于内容，而不是将其耦合到网站外观和用户界面。因此，它更容易与各种技术和框架集成，如 React、Vue 和 Angular 等。
另一个重要的方面是，Headless CMS 可以提高您的整体生产力。通过简化内部数据管理，您可以更快地采用更改和更新。您无需为每个应用程序专门创建内容管理系统。相反，您可以使用一个 Headless CMS 来管理站点和应用程序中使用的所有内容。
使用 Headless CMS 创建产品页面
在这个示例中，我们将使用 Strapi 作为我们的 Headless CMS。我们将创建一个简单的 React 应用程序，通过使用 Strapi API 来获取内容，以及一些样式组件库（例如 Material UI），来帮助我们创建一个简单而漂亮的产品页面。
步骤 1：创建 Strapi 应用程序并添加一些内容
首先，您需要安装 Strapi 并创建一个新项目。
yarn create strapi-app my-strapi-app --quickstart
安装完成后，打开浏览器并导航到 http://localhost:1337/admin。登录以启动 Strapi 内容管理的后台。
接下来，创建一个包含产品信息的新集合类型。在左侧菜单中，单击“Plugins”并安装 GraphQL 插件。然后，单击左侧菜单“Plugins”中的“GraphQL”。在“Content Types”中单击“Add new type”并创建一个名称为“products”的新内容类型。手动添加一些字段，其中包括 “Title” 、“Description” 、“Image” 和 “Price”。
对于简单的演示，我们可以在 Strapi 中添加至少两个产品。这将确保我们有数据来测试和构建我们的应用程序。
步骤 2：创建 React 应用程序并访问 Strapi API
现在，我们将创建一个新的 React 应用程序。在终端中运行以下命令：
npx create-react-app my-strapi-app --template typescript cd my-strapi-app yarn add @material-ui/core react-router-dom
安装后，我们需要编写一些用于访问 Strapi API 的代码。我们将使用 axios 库来访问 Strapi API。
在 src 目录下创建一个新文件夹services并在其中创建一个新文件api.ts，包含以下内容：
import axios from "axios";
export function getProducts() {
return axios.get("http://localhost:1337/products");
}此代码将导出一个 getProducts 函数，该函数将 fetch Strapi API，并从 /products 端点获取所有产品。
步骤 3：创建我们的产品页面
我们现在可以开始使用 Strapi API 数据构建我们的产品页面了。在 src 目录下创建文件夹components并在其中创建新文件Product.tsx，包含以下内容：
-- -------------------- ---- -------
------ - ----- ---------- ------------ ---------- - ---- --------------------
------ ----- ---- --------
------ - ----------- - ---- -----------
------ --------- ------------ -
-------- ------------
-
------ ----- -------- ---------------------- - -- ------- -- -- -
------ -
------
---------- --------------- ------------ ------------------------- --
-------------
----------- ------------ ------------ ----------------
---------------
-------------
----------- --------------- -----------------------
---------------------
-------------
----------- --------------- -----------------------
------ --------------- -
-------------
--------------
-------
--
--在这个组件中，我们使用了 Material UI 和 TypeScript。它会引入并映射 ProductType 类型，该类型定义了我们希望在 Strapi API 中获取的产品数据结构。
现在，我们可以构建一个新组件来获取并显示所有的产品信息。
在 src 目录下创建文件夹pages并在其中创建一个新文件Products.tsx，包含以下内容：
-- -------------------- ---- -------
------ - ---- - ---- --------------------
------ ------ - ---------- -------- - ---- --------
------ - ----------- - ---- ------------------
------ - ------- - ---- ------------------------
------ - ----------- - ---- -----------
------ ----- --------- -------- - -- -- -
----- ---------- ------------ - ----------------------------
------------ -- -
----- -------- --------------- -
----- -------- - ----- --------------
---------------------------
-
-----------------------
-- ----
------ -
----- --------- ------------
----------------------- -- -
----- ---- ------ -----------------
-------- ----------------- --
-------
---
-------
--
--这个组件会 fetch Strapi API 并展示所有产品。我们现在可以在应用程序中使用新的 Products 组件。
在 src 目录下创建文件App.tsx，使用以下代码替换默认模板：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- --------------------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ - -------- - ---- -------------------
------ ------------
------ ----- ---- -------- - -- -- -
------ -
--------
---------- --------------
--------
------ ----- -------- -------------------- --
---------
------------
---------
--
--现在，打开您的应用程序并访问 http://localhost:3000/，您应该能够看到一个漂亮的产品页面，其中包含我们在 Strapi 中添加的产品！
总结
在本文中，我们介绍了什么是 Headless CMS，以及为什么您应该使用它来开发和管理您的应用程序内容。我们还演示了如何使用 Strapi API 来获取和显示在线产品页面。使用 Headless CMS 的主要好处之一是，通过使用单个服务，我们可以在多个应用程序中共享和管理所有内容。随着这种方法的不断成熟，Headless CMS 必将成为许多应用程序开发人员的日常工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e20d9ef6b2d6eab3d5cbe5