前言
即使您不是前端工程师，也一定听说过“内容管理系统”（CMS）和“Headless CMS”。简单来说，一个内容管理系统就是允许您从网站上面获取和更新您的内容的系统。但随着 Web 技术的飞速发展，这个行业也在不断地变化和进化，特别是 Headless CMS 的出现，其由于其与 API 的结合，已经成为了高效率和灵活性的组合的一种最佳实践。
本文将讨论 Headless CMS 的数据管理以及自定义字段的应用实例，详细并有深度地探讨其学习方法和指导意义，如果您正在考虑使用 Headless CMS 或者对此类型的内容管理系统感兴趣，这篇文章一定会对您有所帮助。
Headless CMS 是什么？
Headless CMS 是一种新型的内容管理系统，它提供的完全解耦的、无容器的 API，让前端开发人员能够从任何应用程序中获取和管理内容。与传统的 CMS 不同，它并不关心如何渲染或者呈现内容，而是专注于数据的管理上。因此，Headless CMS 着重于内容的中心化、版本控制和多渠道输出，使得用户可以通过 API 从任何物理设备，任何平台获取到同样的内容。
如何学习 Headless CMS？
Headless CMS 的出现是让 Web 开发人员能够自由的选择最适合他们的技术栈，而不用受到传统 CMS 框架的限制。如果您想学习 Headless CMS，以下是一些你应该掌握的关键概念：
API
Headless CMS 最重要的概念就是 API，它是一个用于检索和提交内容的统一接口。接口的设计应该简单，但必须完整和可靠，用户可以在其基础上使用任何语言和技术来访问和管理数据。
数据库
Headless CMS 必须有一个高效、可靠的数据库来存储其所有的数据。用户应该能够以任何格式存储他们熟悉的数据类型：文本、数字、多媒体等等。
自定义字段
Headless CMS 提供了一些预定义的字段类型，如文本、日期和图片等等。但是，您也可以通过自定义字段来添加其他数据类型。
插件
部分 Headless CMS 可以通过插件来增强其功能。有些插件是预先安装的，而有些则可以手动安装。
内容发布
Headless CMS 中的内容发布、存档和回收都是通过发布系统来处理的。发布系统应该是灵活的，并具备对多端分发的支持。
实际应用示例
当您掌握了 Headless CMS 的基本概念和相关技术后，可以开始将其应用到实际的项目之中。以下是一个示例，这个示例将演示如何在 Strapi（一款热门的 Headless CMS）中使用自定义字段，在应用中存储并管理自定义数据类型。
第一步：安装 Strapi
Strapi 是一个开源的 Headless CMS 框架，它提供了一个方便的 Web 界面，可以帮助您轻松地管理您的数据。首先，您需要安装 Strapi，以便在您的应用程序中使用它。安装命令如下：
npm i strapi -g
第二步：创建一个 Strapi 应用程序
创建一个新项目，使用如下命令：
strapi new my-project
这将创建一个新项目并下载所需的依赖。
第三步：安装 Postgres 数据库
安装 Postgres 数据库来存储您的数据。安装完成之后，您需要在 Strapi 中配置它。到 Strapi 后台管理页面，在设置中的插件列表，安装 PostgreSQL 数据库插件。按照插件的指导，配置数据库连接信息。
第四步：创建自定义字段
在 Strpai 接口的相关字段页面，创建自定义字段。我们创建一个例子，自定义字段名为 Card，其中包含 title、image 和 description 三个字段：
{
"title": "Text",
"image": "Media",
"description": "Text",
}第五步：创建新数据类型
为了测试，创建一个名为 card 的新数据类型。在 Strapi 的后台管理页面，转到导航栏上的“内容类型”选项卡，单击“添加新类型”按钮，并将其命名为 card。然后选择“添加新字段”，将我们在前一步中创建的 Card 自定义字段添加到 card 类型中。
第六步：使用 API 检索数据
到页面 /content-types/card 可以查看 Strapi 生成的 Swagger API 文档，选择 API 调用，获取刚刚添加的 card 的结构化数据。
第七步：通过前端页面将数据存储到 Strapi
通过 JavaScript 和 Fetch API 实现将数据保存到 Strapi 当中。以下是一个示例：
-- -------------------- ---- -------
----- -------- - ----- ------ -- -
----- --- - ------------------------------
----- -------- - --- -----------
------------------------ ------------
------------------------------ ------------------
-------------- -
----- ----- - ----- ------------------------------- -- -----------------
------------------------------ -------
-
----- -------- - ----- ---------- -
------- -------
----- --------
---
------ ----- ----------------
--
----- ---- - -
------ ----- -------
------------ ----- -------------
------ -----------------------------------
--
------------------------------- -- -
------------------ ------- -----------
---------------- -- -
---------------------
---结论
Headless CMS 是一个非常值得学习和使用的内容管理方法。虽然对 Headless CMS 的开端对于某些人来说可能会感到有些陌生，了解其基本原理和学习相关技能之后，您大概率将能够轻松地将其应用到自己的项目中去。在不断的项目实践中不断探索 Headless CMS 的一些高级特性可能会是一件比较有趣的事情。
希望我们今天的分享能够帮助到您，并可以带领您走出又精彩的代码编写之旅！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747f9d25883fc5ebfed03a0