前言
在现代网站开发中，使用 CMS（内容管理系统）几乎是一种标配。然而，传统的 CMS 一般会将前后端紧密耦合在一起，不仅增加了系统本身的复杂度，还限制了前端开发人员的自由度。
Headless CMS 则是一种新型的 CMS，它将前后端分离，只提供后端数据接口。这样一来，前端开发人员只需要专注于页面开发，完全脱离后端开发的束缚，大大提高了开发效率和灵活性。
本文将带您深入了解 Headless CMS，讲解如何使用它来搭建轻量级博客。
什么是 Headless CMS
Headless CMS 是一种新型的 CMS，它基于 RESTful API 或 GraphQL API 来提供后端数据接口，完全脱离了前端模板的束缚。这意味着，可以将 Headless CMS 与任何前端框架和语言一起使用，比如 React、Vue、Angular、JavaScript、PHP 等。
Headless CMS 的优势在于它允许前端开发人员聚焦于页面设计和功能实现上。而其它传统的 CMS 系统，往往对前端开发人员的自由度有所限制。
一些流行的 Headless CMS 有：Strapi、Contentful、Sanity、Prismic 等。
选择 Headless CMS
在选择 Headless CMS 的时候，需要考虑以下几点：
API 设计
API 是 Headless CMS 最重要的一部分。它需要易用、通用、可扩展。考虑以下几个方面：
- 是否可以自定义 API？
- 支持哪些常见的 API 标准（如 REST 和 GraphQL）？
- API 的限制和限速是什么？
这些问题通常会影响到你的开发速度和体验。
可扩展性
Headless CMS 通常需要深度定制，因此，可扩展性是 Headless CMS 的另一要点。尝试了解以下内容：
- 有多少可定制的字段类型？
- 是否支持自定义字段类型？
- 是否有给 API 增加功能的插件？
服务的稳定性
你是否想要放心地使用 Headless CMS，并且不用考虑系统故障？
建议查看一下 Headless CMS 的用户评价或者在线服务（远程头信息）提供商的系统状态记录，这样会让你对系统的可用性产生更准确的了解。
社区支持
Headless CMS 通常由社区支持，因此，社区的活跃度可以很好地反映一款 Headless CMS 被认可的程度，同时也意味着有好处：
- 确认社区提供的资源是否仍然活跃，例如博客文章、视频教程和插件等。 -考虑社区是否提供有价值的插件和代码库。
- 社区是否有对开发者的支持，例如论坛或 Slack 群组？
价格
Headless CMS 的价格在建议中应该是一个次要的，但是也不应该完全忽略，这里有几个要注意的点：
- 价格标签中是否有隐藏费用？
- 是否关注可扩展服务的价格？
默认情况下，一般都会有限制的免费版本，用于适合低级别使用的客户，如果你需要更多扩展的选项，则需要升级至付费的选项。
在本文中，我们将使用 Strapi 这个 Headless CMS 作为例子，这个 CMS 提供了基本的 CRUD API、文件上传、用户管理、插件管理等等。其中，文件上传和插件管理是其最大的优势之一。另外，它还是一个开源软件，如果你有需要的话，可以在 Github 上找到其源代码。
环境设置
本文的示例将使用 Strapi 作为 CMS，并使用 React 和 Axios 来展示内容。这里假设你已经熟悉了 React 和 Axios，并在本地运行起来了。如果不了解，请自行参考相关文档。
安装 Strapi
在安装 Strapi 之前，我们需要先安装 Node.js。安装方法可参考官方文档。
安装完成后，使用以下命令安装 Strapi：
--- ------- ----------- --
此命令将在全局安装 Strapi，并保证你可以在命令行中使用 strapi 命令。
创建 Strapi 项目
在安装 Strapi 之后，我们需要创建一个项目。使用以下命令创建一个名为 my-blog 的项目：
------ --- ------- ------------
以上命令将在当前目录下创建一个名为 my-blog 的 Strapi 项目，并下载必需的依赖项。
安装 Strapi 插件
为了将 Strapi 用作博客的后端，我们需要安装以下插件：
插件：Users
该插件添加了一个名为 "Users" 的菜单项，如果你需要管理用户，则必须安装此插件。要安装此插件，请在 Strapi 项目文件夹中运行以下命令：
------ ------- -----------------
插件：GraphQL
该插件将添加 GraphQL API 到 Strapi 项目，使数据变得更加可查询。要安装此插件，请在 Strapi 项目文件夹中运行以下命令：
------ ------- -------
创建内容模型
一个 CMS 系统的核心部分是内容模型，我们需要先确定 Strapi 项目中的内容模型。在这里，我们将创建一个名为 Article 的内容模型，每篇文章将包含 title、content 和 author 数据。
创建内容类型
创建首个 Collection Type —— 即名为 Article 的内容类型。它由三种字段类型构成：Rich Text（富文本）、Text（文本）和 Single Relation。
（1）点击 "Content-Types Builder" 菜单，并选择 "Create new collection type"。
（2）在 "Collection name" 输入框中，输入 "Article"。
（3）使用以下内容按顺序添加字段：
- title：短文本
- content：富文本
- author：单一关联，关系为 “User”
运行服务
最后一步是启动 Strapi 项目，并确保 GraphQL API 应该生成。使用以下命令启动 Strapi 项目：
------ -----
访问 API
访问你的 Strapi 项目 API，可以通过以下命令获得：
---- -----------------------------
这将提供一个标准的登录窗格，并列出可用的 API。
使用 React 访问 API
现在，让我们开始使用 React 创建一个博客页面，并从 Strapi API 获取文章。
安装 React
首先，确保你已经安装了 Node.js 和 npm。然后，我们将使用 create-react-app，一个快速创建 React 项目的工具：
--- ------- -- ---------------- ---------------- ------- -- ------- --- -----
此命令将在当前目录下创建一个名为 my-blog 的 React 应用。
安装 Axios
Axios 是一个流行的 JavaScript 库，用于在浏览器和 Node.js 中处理 HTTP 请求。使用以下命令安装它：
--- ------- -----
开始编码
编写 React 组件，用于从 GraphQL API 中获取文章，然后将其呈现在页面上。在这里，我们将创建一个 Article 组件，它将从 GraphQL API 中获取文章并将其呈现在页面上。
下面是整个 Article.js 文件的完整代码：
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
------ ------- -------- --------- -
----- ---------- ------------ - -------------
------------ -- -
----- ------------- - ----- -- -- -
----- ------ - ----- ------
-------------------------------------------------------------------
--
---------------------------------------
--
----------------
-- ----
------ -
-----
----------------------- -- -
---- ------------------
------------------------
---- -------------------------- ------- --------------- -- --
------
---
------
--
-结论
本教程简要介绍 Headless CMS 和 Strapi。我们从头开始，创建了一个 Strapi 项目，然后使用 React 和 Axios 访问该 API，并将文章呈现在页面上。这是一个简单的示例，但我认为它足以让您了解如何在 React 和 Strapi 之间创建一个博客。
如果你需要更多的功能，您可以创建自己的相关模型和服务，以满足特殊的需求。这种模式在 Headless CMS 中特别有效，因为它为前端开发人员提供了更高的灵活性，在完全脱离后端开发过程的前提下，提供了稳定和可扩展的后端数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6721f1ab2e7021665e09877a