什么是 Headless CMS？
Headless CMS 是指一种内容管理系统，与传统的 CMS 不同，Headless CMS 并不关注内容的视觉呈现和展示，而只关注数据的创建、存储和获取。
Headless CMS 的工作原理如下：用户在 CMS 中创建数据，CMS 将数据存储在数据库中，并通过 RESTful API 或 GraphQL API 将数据暴露出来供前端调用。前端可以使用任何框架或库来获取数据，并将数据呈现成任何形式。
在 Headless CMS 中，前端团队有更多的自由度来设计和开发前端应用程序，因为他们不再受制于 CMS 本身提供的模板或主题。
什么是 whatCMS？
whatCMS 是一种可以检测网站使用了哪种 CMS 的工具。它可以检测出网站使用的 CMS 类型、版本信息以及任何相关的细节。whatCMS 可以通过这些信息来帮助开发人员了解最受欢迎的 CMS，并为他们的项目选择最佳的工具。
Headless CMS 和 whatCMS 之间的区别
Headless CMS 和 whatCMS 有明显的区别。Headless CMS 是一种 CMS 系统，旨在将数据呈现给前端开发人员。whatCMS 是一种工具，可以帮助开发人员识别哪种 CMS 在某个网站上使用。
如果你的目标是为前端开发人员提供完全的自由度，那么 Headless CMS 是最好的选择。在这种情况下，whatCMS 并没有什么用处。
相反，如果你正在寻找一种方法来确定最佳的 CMS 工具，以便开发特定的项目，那么 whatCMS 可能会更好一些。
首选 Headless CMS 的原因
对于前端开发人员来说，Headless CMS 具有许多优点：
1.灵活性
Headless CMS 具有 unmatched 的灵活性。开发人员可以任意选择前端框架和库，因此他们可以根据项目的特殊要求完全自定义前端应用程序。
此外，由于 Headless CMS 仅关注数据存储和获取，而不涉及页面呈现，因此更容易创建多个前端应用程序，每个应用程序都具有独特的布局和设计。
2.维护容易
由于 Headless CMS 仅负责数据存储和获取，因此与传统 CMS 相比，维护成本较低。当前端代码发生变化时，不需要考虑后端的任务，因此前端开发人员可以轻松地进行单独的更新。
3.无限选项
Headless CMS 可以跨平台使用，因此开发人员可以使用任何语言、框架和库来构建前端应用程序。开发人员可以选择他们最擅长的技术，而无需考虑 CMS 系统对此的支持。
基于 Headless CMS 的示例代码
下面是一个基于 Headless CMS 的示例代码，展示了如何使用一个已有的 CMS 系统来创建一个 React 应用程序。
创建应用程序
首先，创建一个新 React 应用程序。使用以下命令创建：
npx create-react-app my-app
安装必要的库
你需要安装 axios 库来执行 API 请求以及 react-router-dom 库用于页面导航。使用以下命令安装：
npm install axios react-router-dom
创建请求
创建一个 HTTP 请求，使用 axios 库获取 Headless CMS 的内容：
-- -------------------- ---- ------- -- ------------------- ------ ----- ---- -------- ----- ------- - ---------------------- ------ ----- ----------- - ----- ------ -- - ----- - ---- - - ----- ------------------------------------- ------ ----- --
创建页面
创建一个新页面，使用路由来导航。在以下示例中，我们创建一个名为“Home”的页面：
-- -------------------- ---- -------
-- ----------------------
------ ------ - --------- --------- - ---- --------
------ - ----------- - ---- ------------------
----- ---- - -- -- -
----- ---------- ------------ - ---------------
------------ -- -
----- --------- - ----- -- -- -
----- ---- - ----- ---------------------
------------------
--
------------
-- ----
------ -
-----
--------- -- ------------------------------- -- -
---- -----------------
------------------------
---------------------
------
---
------
--
--
------ ------- -----创建路由
最后，创建 React 路由，以便可以导航到新页面：
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
----- --- - -- -- -
--------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
---------
---------
--
------ ------- ----在此示例中，我们使用了 React 和 Headless CMS 创建了一个基本的应用程序。尽管这个示例很小，但它显示了 Headless CMS 和 React 是如何相互配合的。
结论
Headless CMS 和 whatCMS 是两种不同的工具，各有其优缺点。
如果你正在寻找一种完全控制前端呈现的方式，那么 Headless CMS 是最好的选择。使用 Headless CMS，你可以轻松地管理数据，并使用任何前端工具构建自己的应用程序。
如果你正在寻找一种方法来选择最佳的 CMS 工具，那么 whatCMS 可能会更好一些。whatCMS 提供了识别网站使用的 CMS 的能力，从而为您的项目选择一个最佳的 CMS 工具。
综上所述，Headless CMS 是一个非常有用的工具，可以大大简化前端开发。对于许多项目来说，Headless CMS 是首选的内容管理解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677267b96d66e0f9aad8bbe8