在传统 CMS 中，后端和前端是紧密耦合的。即使你想修改前端展示，也需要从后端入手进行修改，这样的方式十分繁琐。而 Headless CMS 可以通过剥离前后端的关联，解决这一痛点，将前端与后端逻辑分离开来，从而实现更为高效的开发流程。

Headless CMS 的定义

Headless CMS 是 CMS 的一种特殊形态。它专注于内容管理，与其它 CMS 的区别在于剥离了展示层，只保留了数据……

示例代码

我们以 Strapi CMS 为例，演示 Headless CMS 的应用。

1. 首先，你需要在本地启动 Strapi：

yarn develop

1. 在 Strapi 中新建一个 Content Type。

在 Strapi 后台系统中，依次点击【Collection Type】、【Add New Collection Type】，输入名称和描述，新建一个 Content Type。

1. 输入字段

Content Type 中可以包含任意多个字段，我们需要输入这些字段。点击【Add New Field】，输入名称和类型以及属性。

1. 测试 API

接着，我们测试 Strapi 的 API 是否正常。在浏览器中输入：

http://localhost:1337/api/{collection-name}

会返回指定的 Collection 的数据。

1. 在你的前端应用中使用 Strapi 数据

最后一个步骤是在你的前端应用中使用 Strapi 数据。在你的应用中使用 Fetch 或者 Axios 等 HTTP 请求库，从 Strapi 中请求数据。例如，在 React 中，你可以这样写：

useEffect(() => {
  fetch('http://localhost:1337/api/{collection-name}').then((res) => {
    setData(res.data);
  });
}, []);

这样代码，就能成功的获取到数据，并将其展示在页面之中。

总结

Headless CMS 通过添加前后端逻辑的解耦，解决了传统 CMS 中的痛点难点，使得前端开发更为高效。但是，Headless CMS 的理念和传统 CMS 不同，需要开发者重新认知和学习。

因此，在选择 CMS 之前，需要根据实际的需求权衡 Headless CMS 和传统 CMS 的优缺点，选择最为适合的方案。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659250edeb4cecbf2d727a20