Headless CMS 解决方案手册-JavaScript中文网-JavaScript教程资源分享门户

什么是 Headless CMS

Headless CMS（无头 CMS）是一种基于 API 的 CMS 架构，它将内容管理系统的前端界面与内容后端部分解耦，将数据层、存储、查询、操作等全部或部分暴露为 API 供开发者调用，开发者可以使用任何前端框架或平台对其进行访问和使用，既能够承载内容的管理，也能够满足前端应用程序的数据接口需求。

Headless CMS 解决了传统 CMS 与前端的紧耦合问题，开发者不再受限于特定的开发语言和前端框架，可以在任意平台和设备上使用 API 从而完成前端与内容的连接和交互，更易于扩展和集成。

为什么需要 Headless CMS

Headless CMS 最大的优点就是大幅提高了前后端交互的灵活性与可扩展性。传统的 CMS 使用 MVC 或 MVVM 等模式进行开发，在一定程度上通过封装、抽象屏蔽了后端数据服务的细节，但是前后端还是存在耦合，而 Headless CMS 完美解决了这个问题，它可以专注于数据的管理，同时通过 API 完美对接了前端页面数据展示的需求。

对于前端来说，主要的优势在于：

自由度更高：开发者可选取适合自己的前端框架，不受制于特定的 CMS；
更快速的渲染：API 无需加载整个页面，仅传递数据，减少传输时间；
多渠道支持：内容可以在多个平台和设备上进行展示，例如网站、移动应用、电视等。

同样，对于后端开发来说，Headless CMS 的优势也十分明显：

分离展示与业务逻辑：提高了应用程序的可维护性与可扩展性；
可以将数据服务托管在云端：通过服务提供商将数据部署到云端，可节省团队的开发、部署和维护成本；
单一数据源：所有数据都可以被管理方便，对数据的修改、删除、查询等也更加方便。

Headless CMS 解决方案

Headless CMS 不但带来了解耦的好处，也带来了一些新的问题，例如如何贯彻前后端分离原则、如何管理数据、如何开发和集成等等。不过在这个问题上，有很多解决方案。

1. Strapi

Strapi 是自由开源、跨平台的 Headless CMS，由 Node.js 编写。Strapi 提供了一个易于使用和集成的控制面板，让开发人员能够轻松管理数据。同时它也提供了一组 REST API 接口，用于与前端相连。

安装

在 Strapi 的官网下载 Strapi CLI 工具。

使用下面的代码进行项目初始化。

npx create-strapi-app my-project --quickstart
cd my-project
npm run develop

即可启动 Strapi 并访问 http://localhost:1337。

示例代码

获取单个博客文章：

fetch(`http://localhost:1337/posts/${postId}`)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

2. Contentful

Contentful 是一个“API-最大化”的 CMS。由于它的灵活性和开放性，Contentful 十分适合于开发响应式网站、移动应用和其他现代软件应用。

安装

访问 Contentful 官网并创建一个全新项目。接下来创建“Content Model”（内容模型）并生成 API 密钥，接下来即可获取 RESTful API。

示例代码

获取依据类型筛选的所有博客文章：

fetch(`https://cdn.contentful.com/spaces/${space}/environments/${environment}/entries?access_token=${access_token}&content_type=post`).then(response => response.json()).then(data => { console.log(data); });

3. Prismic

Prismic 是一种“无头” CMS ，它帮助开发人员轻松管理和分发内容。Prismic 提供了一些模板来快速构建静态站点和应用程序。

安装

访问 Prismic 官网并注册账户。之后创建一个新的 API 并在 Cloudinary 上上传资源。

接下来在 Prismic 中完成文档的创建和发布操作。

示例代码

获取单个博客文章：

fetch(`https://${repourl}.cdn.prismic.io/api/v2/documents/search?ref=${ref}&q=[[at(document.type,"post")][at(my.post.uid,"${slug}")]]&access_token=${access_token}`).then(response => response.json()).then(data => { console.log(data); });

4. GraphQL

GraphQL 是一种新型的 API 开发语言，它使您可以更好地控制数据查询。GraphQL 可以在前后端之间快速轻松地交换数据，让您的应用程序效率更高、更可靠。通过 GraphQL，您可以更方便地以任何方式获取数据。

安装

使用 GraphQL 之前，您需要定义一组架构。可以使用 NodeJS 的 Apollo Server、 Prisma GraphQL 或 Hasura 等工具快速配置架构。

示例代码

获取依据类型选择的所有博客文章：

-- -------------------- ---- -------
----- --------------- - ----
  ----- ------------- -
    ----- -
      --
      -----
      ------
      ----
    -
  -
--

------ ------- -------- ------ ------------ -- -
  ------ -
    ------- -----
      ------
        --------------------------
      -------
      -------- ---------------------------------
        -------- ---- -----------------
        ---
          ----- -- - ------ ------- - ------ -- -------- - ---- ---- ---- ---- --
          -- ----------------------------------- ------- --------------
        ----
      ----------
      -------- ----------------------------------- ---------------------------
        --- ------------------------------------------
        --- ----------------------------
          -------------------- --- ----- ----- -- -- -
            --- ------------------------------- ---------
              -------
              --- --
              ----
              --- --
              ------
            -----
          ---
        -----
      -----------
    ---------
  --
-

总结

Headless CMS 解决了传统 CMS 与前端的紧耦合问题，轻松连接和灵活地在任意平台和设备上使用。Strapi、Contentful、Prismic 和 GraphQL 是现在流行的 Headless CMS 解决方案之一，其中 Strapi 目前最为受欢迎。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6475d928968c7c53b02db6ae