提供永久免费的API接口，查看更多API接口，如果您有其他免费API资源，请联系我们，造福人类。

定制开发，免费评估，免费咨询，价格便宜，售后保障，前往开发服务中心或联系开发客服中心

在本教程中，您将学习什么是Headless CMS，以及Headless CMS的优缺点。最后，您将使用GraphCMS（仅后端内容管理系统）构建购物车，然后，您可以继续使用无头CMS和React构建您选择的任何Web应用程序。

要继续进行，您需要在计算机上安装Node和npm / yarn。如果尚未完成此操作，请按照以下快速指南在机器上安装yarn或npm。您还需要对React，Node.js和GraphQL查询有基本的了解。（当然，您始终可以熟练掌握React和GraphQL技能！）

随着数字产品的不断发展，我们消费的内容也在不断发展。可扩展的跨平台内容管理系统对于确保产品的增长速度至关重要。传统的CMS提供了在单个环境中拥有内容，编辑界面，模板和自定义代码的便利。但是随着移动时代的变化，这已经远远不够。我们需要一种新型的CMS，它可以通过任何需要无头CMS的渠道提供内容。无头CMS为您提供了管理内容并将其传送到任何渠道的好处。该API使用最喜欢的工具和编程语言通过任何渠道在任何设备上提供内容，并且还提供更高级别的安全性和更好的可伸缩性。

在实践中这看起来像什么？

当您拿走CMS的前端时会发生什么？最大的区别是，不能单独使用无头CMS构建网站。使用传统的CMS，所有操作都在同一位置进行。

无头CMS不具备让您构建网站的功能-它没有网站主题或模板。要使用无头CMS，您必须先构建网站或应用程序或其他体验，然后使用CMS的API将内容插入其中。

为什么要关心无头？

无头CMS附带API友好方法，这使得可以通过API（RESTful或GraphQL）发布内容。它允许您使用相同的API在各种渠道（如Android或IOS应用，智能手表，AR / VR等）上传递内容。无头CMS使开发人员能够快速利用创造力。使用传统的CMS，更改可能很耗时，例如，要调整网站的一部分，您需要重新实施整个CMS。使用无头CMS，您可以在不影响后端基础架构的情况下对前端进行更改，从而节省了时间和资源，从而使其变得更好。

传统与无头CMS：优缺点

在无头和传统CMS之间进行选择可能很复杂。事实是，它们都有潜在的优点和缺点。

传统CMS优点

• 它允许轻松定制。他们中的许多人都有拖放作用，这使没有编程经验的人可以轻松地与他们无缝地合作。

• 由于您所需的一切（内容管理，设计等）均已可用，因此在传统CMS上设置内容更加容易。

传统CMS缺点

• 前端和后端的耦合为维护和定制带来了更多的时间和金钱。

• 传统的CMS（例如Wordpress）在很大程度上依赖于插件和主题，这些插件和主题可能包含恶意代码或错误，并降低了网站或博客的速度。以下是18,305个易受攻击的WordPress插件，主题的列表。这是Drupal开发人员的安全措施。请点击这里获取更多的事实。

无头CMS专业人士

• 由于前端和后端彼此分离，因此您可以选择哪种前端技术适合您的需求。这也为开发人员在开发阶段提供了灵活性。

• 利用无头CMS构建的平台（博客，网站等）可以部署为在各种显示器（例如Web，移动设备，AR / VR等）上工作。

无头CMS缺点

• 它们使您无需管理后端基础结构，设置站点，应用程序的演示文稿组件。

• 它们的实施成本可能更高-与使用传统CMS相比，使用分析构建用户友好平台所涉及的成本很高。

无头CMS的最佳用例

无头CMS可以具有以下用例：

• 静态网站生成器（例如Gridsome，Gatsby）

许多使用静态网站生成器（例如Gridsome，Hugo或Gatsby）创建的Jamstack网站都使用无头CMS来管理内容，它们无法访问数据库，因此内容可以存储在无头CMS中，并在构建期间通过API提取并按以下方式部署静态文件。

• 行动应用程式（iOS，Android）

对于移动工程师而言，无头CMS的优势在于，API使他们能够从管理其网站内容的同一后端将内容传送到IOS / Android应用程序，从而使事情保持同步。

• 网络应用

这种方法涉及通过API提供内容，然后由Web应用程序使用它，但提供了一个集中的位置来管理内容。一个示例是使用HTML，CSS和JavaScript构建的电子商务应用程序，其内容和产品数据由CMS维护并通过外部API提供服务。

无头CMS的类型

有无头CMS列表，您可能需要检查一下。

请注意，本文并非旨在推广任何服务或产品。

• 内容丰富，
  由API驱动的无头CMS，旨在创建，管理内容并将其分发到任何平台。与传统的CMS不同，它们提供了创建内容模型的功能，以便您可以决定要管理的内容类型。

• GraphCMS
  无头CMS，适用于希望为其数字产品构建GraphQL内容基础结构的用户。此CMS是完全从头开始针对API的完全构建的，允许创建者定义API参数的结构，权限和关系。在本文中，由于其GraphQL API方法，我们将使用GraphCMS。

• ButterCMS
  一种CMS，可以完全自由地构建具有完整SEO的网站或品牌博客，并支持任何技术堆栈。此工具可为您节省金钱和时间，以节省网站开发时间。Butter CMS是免维护的无头CMS工具，可以与任何语言或框架集成。强大的界面可帮助您轻松定义和自定义网站的每个元素。

• Directus
  一种开源工具，该工具使用动态API包装自定义SQL数据库，并提供直观的管理应用程序来管理其内容。免费自托管，或使用按需云服务管理所有全渠道数字体验。

• 健全性
  另一个API驱动的平台，用于管理结构化内容。借助Sanity，您可以使用API管理文本，图像和其他媒体。您还可以使用开源单页应用程序Sanity Studio快速设置您可以自定义的编辑环境。

• 敏捷性
  内置JAMStack的无头CMS内置页面管理。更快地构建，管理和部署。Agility CMS是Content-First Headless CMS，它使您可以选择任何编程语言，同时还能获得轻量级API的灵活性，速度和功能。从那里，添加页面管理，电子商务，在线票务和搜索等功能。敏捷CMS成为一个完整的数字体验平台-节省时间，消除限制，并允许在所有数字渠道之间实现无缝体验。

• Netlify CMS
  由Netlify创建的免费，开源，基于git的CMS。它允许您定义内容模型，集成第三方身份验证并扩展其后端（基于React的单页应用程序）的功能。

注意：上面提到的所有示例均具有免费和付费版本，但Directus和Netlify CMS是免费的。有关更多无头CMS的列表，请单击此处。

在本文中，我们使用的是GraphCMS-一个面向GraphqQL API的无头内容管理系统，它负责我们的后端体系结构。

使用GraphCMS

内容是动态和多渠道的，但是当前的内容管理系统（CMS）缺乏灵活性，无法满足现代数字内容分发的需求。GraphCMS是第一个基于GraphQL构建的HeadlessCMS，它的任务是促进内容创建者，开发者和消费者之间的轻松交流，从而为这一问题提供了解决方案。

GraphCMS可以接受几乎可以想象的任何类型的数据，包括图像，地图等。它甚至使角色和权限变得容易。尽管存在其他无头CMS解决方案，但GraphCMS旨在为开发人员提供无忧的体验。通过利用称为GraphQL的API规范。它消除了使用多个SDK与内容交付进行交互的需求，并提供了简单的多通道内容可访问性。它使创建丰富内容的应用程序变得非常容易。

GraphCMS和GraphQL

GraphCMS非常依赖GraphQL（其主干API规范）。GraphQL是API查询语言和运行时。它由Facebook在2012年开发，并于2015年开源。此后，Pinterest，Github，Twitter，Intuit，Coursera等公司都采用GraphQL为其移动应用程序，网站和API提供动力。GraphQL在提供构建和利用API规范的核心目的方面与REST类似。但是，GraphQL被非正式地称为“ REST 2.0”，它优化了REST提供的各种关键功能。

GraphQL的主要唯一性包括与协议无关的用法，受控的数据提取，可编辑的字段以及类型和深度错误处理。结果包括消除代码冗余，防止过度和不足获取数据以及显着减少网络请求。

作为一个具体的例子，让我们考虑一下查询与新闻源的关系。新闻提要帖子包含作者，标题和评论。如果使用基于REST的CMS，则必须为这3个不同的端点发出3个不同的服务器请求，而在基于GraphQL的CMS中，我们仅需对全部3个发出1个请求。因此，结果相对而言更快的查询速度和更少的网络流量-在实际使用案例中，它不仅是发出多个请求的实体，而且是成千上万的实体。

GraphQL通过将所有请求抽象到单个端点来降低构建API的复杂性。与传统的REST API不同，它是声明性的。所请求的全部返回。

GraphCMS拥有每月100万次API操作请求和500 GB资产流量的免费层级。此外，GraphCMS还提供了一个Graphiql管理界面，该界面提供对数据的完全访问权限，您可以下载所有内容，然后对新后端执行很多创建变异操作，以迁移所有内容。

在本文中，我们将使用每月100万次API操作和500 GB资产流量的免费套餐。您可以使用同一层进行测试，对于需要更多功能的项目，最好查看其定价页面。

2023-03-22 10:04:19