Headless CMS 是一种不同于传统 CMS 的新型解决方案，它允许开发者通过 RESTful API 获取站点内容数据，从而实现真正的内容信息解耦。传统 CMS 很多时候都是面向一整个站点的开发，HTML、CSS、JS 都被紧密耦合在一起，很难进行分离，而 Headless CMS 的出现，则允许前端和后端的分离开发，使模板和数据得以独立更改、扩展和进行部署和管理，为 Web 应用的灵活性和可维护性提供了新的思路和实践。
Headless CMS 的优势
Headless CMS 的出现对于前端开发者来说，带来了很多好处：
- 自由配置：开发者可以根据自己的需求自由定义站点的数据结构，数据可以被动态的调整、增加或删除；
- 跨平台使用：Headless CMS 通过 API 可以被多个应用共享，例如 Web 应用、移动应用、H5 小程序等都可以方便的使用 Headless CMS 的数据；
- 前后端分离：Headless CMS 移除了后端语言限制，极大程度上促进了前后端分离；
- 数据可重用：Headless CMS 中的数据是经过结构化处理的，因此可以跨站点、跨平台地使用。
Headless CMS 的实现
在实现 Headless CMS 时，主要需要考虑以下三个方面：
- 数据结构的设计：需要根据业务场景对数据结构进行设计，例如定义数据类型、字段验证规则、关系等；
- API 的实现：需要通过 API 与 Headless CMS 进行交互，比如 CRUD 操作；
- 数据获取的实现：需要在前端应用中通过 API 获取站点数据，并根据需求渲染页面，可以使用前端框架、工具等加速开发过程。
以下为一个基于 Strapi 实现的 Headless CMS 例子：
1. 数据结构的设计
在 Strapi 中，我们可以使用 Content-Type Manager 来设计数据结构。可以进入 Admin 界面，进入 Content-Type Manager，点击创建一个新的 Content-Type，如下图所示：
接下来你可以根据自己的业务逻辑添加字段，例如文章页面可以有标题、作者、阅读量等字段：
2. API 的实现
Strapi 中的 API 使用起来非常简单，只需要访问如下的 URL 即可：
http://localhost:1337/{content-type}其中 {content-type} 代表你定义的数据结构名称，例如上面我们定义的 "articles"，则 API 地址为：
http://localhost:1337/articles
该地址可以返回 "articles" 数据库中的所有记录，可以通过 GET、POST、PUT、DELETE 等 HTTP 动词进行数据操作。
3. 数据获取的实现
在前端应用中，可以通过 JavaScript 代码访问 Strapi API，调用例如 fetch API 之类的 AJAX 库来获取数据，然后使用 HTML 模板进行渲染，代码如下：
-- -------------------- ---- -------
---------------------------------------
---------- -- ------------
-------------- -- -
----- -------- - -
----
---------------------- -- --------------------------------------
-----
--
--------------------------------------------- - ---------
---通过以上代码，可以将 Strapi 中的数据列表渲染到页面当中。
总结
Headless CMS 的出现，为前端开发者提供了更多的选择，可以根据自己的需求灵活进行配置、增删改查数据，并提供了跨平台、可维护的解决方案。上述 Strapi 的例子仅仅演示了基本的用法，若搭建自己的 Headless CMS 平台，还需要考虑权限、扩展性等问题。但无论如何，Headless CMS 的出现是前后端分离方向中的重要里程碑和一种重要探索，应该为 Web 应用的前进而努力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497f38d48841e98944ff30c