什么是 Headless CMS？
Headless CMS (无头 CMS) 是指一种内容管理系统，它的特点是后端（Content Management System, CMS）与前端（Front-end）之间实现了完全的分离。Headless CMS 只提供内容管理功能，不涉及网站或应用程序的设计和渲染。
传统的 CMS 通常是绑定了特定的网站或者应用程序的。在用户进行网站或者应用程序更新时，他们只能使用特定的 CMS 工具。而 Headless CMS 的出现拆分了这种强制耦合关系，在创建一个灵活的“内容生态系统”上带来了方便性，为用户提供了一个全面的解决方案。
Headless CMS 工作原理
Headless CMS 可以使用任何的后端技术进行开发，如 Django, Node.js 或 Ruby on Rails 等。它们的处理方式其实非常类似于传统 CMS。但是，当使用了前端框架或移动应用程序时，开发人员就可以将请求 API 发往后端，接收到数据后，利用 API 去展示相应的内容，帮助我们实现数据和界面分离，具备快速迭代、多平台管理的特性。
Headless CMS 将内容储存在数据库中，然后通过 API 端点将数据发送到应用程序。这种方式让开发人员可以对其前端应用程序进行自由扩展，不受限于 CMS 完成的模板、主题或者特定的内容组织形式。开发人员可以用他们自己的方式创建和设计站点和应用程序，而 CMS 则专注于数据管理和 API。
Headless CMS 的优势
- 灵活性：Headless CMS 与传统 CMS（尤其是独立的 one-stop-shop）不同，它不仅仅是简单的内容发布工具。它是一种灵活的解决方案，可以被灵活定制来支持不同的前端开发方式。
- 性能：Headless CMS 通常能够更加高效地运作，因为前端不需要进行重复渲染。
- 高度的集成性：Headless CMS 通常可以直接与不同的服务和产品集成，例如 CDN 和第三方管理工具等等。
- 跨平台：Headless CMS 可以提供 API，帮助应用程序在多个平台上展示数据。
- 简化管理：Headless CMS 提供了一个友好、直观的管理界面，使内容管理者和编辑人员更加容易维护和更新内容。
- 多渠道支持：Headless CMS 是端点化技术的“投资保险”。您可以触达任何渠道（例如 Web、手机应用程序、桌面应用程序、HoloLen、谷歌眼镜），均能推入相同的内容。
Headless CMS 的实践
下面我们以 Strapi 为例，基于 React 创建 Headless CMS。
安装 Strapi
首先，输入以下命令来安装 Strapi。
--- ----------------- ------ -- ------ --- --- -------
此时，你就已经成功地建立了一个 Strapi 项目。可以在“http://localhost:1337/admin”界面中进行设置。
建立数据模型
在 Strapi CMS 中，我们需要费力地建立数据模型。Strapi 提供了一个基于 Node.js 的脚手架，我们可以使用该工具快速创建、测试和发布 API。
首先，我们需要用 Strapi 的界面来定义 API。在 Strapi 的管理界面中，点击左侧数列“Model” -> “+ CREATE NEW COLLECTION TYPE”来开始添加资源类型. 整个过程可以参考在线文档或者视频教程，这里不再赘述。
增加自定义字段
你可以很快就增加自定义字段，这取决于业务需求。例如，如果要创建一个“活动管理”板块，用户需要包含“开始时间、结束时间、地点、费用”等信息。
API 实现
由于 Strapi 本身就是用 Node.js 实现的，因此在 Strapi 的 API 需要 JavaScript 或 TypeScript。你可以跟着 Strapi Github 代码库中的文档，了解这个框架中的所有 API，查看如何将 API 集成到你的 React 应用程序中。
集成 Headless CMS 到 React 应用程序
集成 Headless CMS 到 React 应用程序的过程非常简单。你需要使用 Strapi 定义好的 API 端点，使用 React 生成视图，接着从 Strapi 中获取数据。具体来说，你需要定义一个用于在 Strapi API 端点中读取数据的函数。可以通过 Strapi 的 SDKs 或使用 Fetch API 来实现。
当数据已经准备好后，你可以开始在 React 应用程序中使用该数据来生成你的组件。
下面是一个简单的 Strapi + React 应用程序示例：
------ ----- ---- --------
----- ----- ------- --------------- -
----- - -
------- --
--
------------------- -
-------------------------------------
-------------- -- ----------------
---------- -- --------------- ------- ---- ----
-
-------- -
----- - ------ - - -----------
------ -
-----
---------------
----
------------------- ------ -- -
--- ------------
------------
-----
---
-----
------
--
-
-在这个例子中，我们首先定义了一个类，使用该类来发出网络请求，并在从 Strapi 获取到数据后将其存储在组件的状态中。我们来稍微分解一下组件如何工作。
第一次组件加载时，会触发 componentDidMount 方法，该方法会发起一个连接请求。如果连接请求返回的 HTTP 状态代码为 200，它就会将收到的数据解析为 JSON，并将结果存储在该组件中。在调用 setState 的过程中，组件将被更新并重新渲染。
最后，我们使用了存储在该组件状态中的数据来呈现我们的代码。
结论
本文详细解读了 Headless CMS 的定义、工作原理、优势以及实践，以 Strapi 为例实践了如何将 Headless CMS 集成到 React 应用程序中。
相信通过本文的学习，读者不仅可以更加理解 Headless CMS 背后的原理和思想，还能够在实践中不断地优化自己的项目，更好地应对不同的业务需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670e528f5f5512810260855b