随着现代 Web 应用程序的复杂性不断增加，我们需要更高效地协作来满足客户需求和项目时间表。传统的 Content Management System (CMS) 并不总是适用于这种情况，因为它们通常限制了开发人员的创造力和灵活性。相比之下，Headless CMS 允许前端工程师和技术人员使用 API 返回的数据以及开发人员自定义前端架构，以达到快速变更的目的。
在这篇文章中，我们将探讨如何在大型团队中协作使用 Headless CMS，以帮助读者更好地理解这个技术并获得成功。
什么是 Headless CMS？
Headless CMS 是指 CMS 的一个变体，其中内容管理系统 (CMS) 与其前端展示无关。与传统的 CMS 相比，Headless CMS 将内容存储在后端，而 API 然后将其呈现给任何需要信息的前端应用程序。这就为前端工程师带来了很大的灵活性，可以根据需要自定义展示内容。
关于 Headless CMS 的优点包括：
- 前端团队可以使用自己的技能和工具来开发应用，而不是依靠 CMS 底层技术。
- CMS 只用于存储内容和管理它，这意味着可以缩短项目交付时间。
- 对于企业公司，Headless CMS 可以帮助实现多个应用程序，而在同一个 CMS 中管理所有内容。
如何使用 Headless CMS？
让我们以一个示例开始，了解如何使用 Headless CMS 进行协作。假设我们正在开发一个电子商务网站，并需要一个 CMS 来存储产品信息、顾客评论等。我们可以使用一个 Headless CMS，如 Strapi。
步骤 1：设置 Strapi
对于此示例，我们将使用 Strapi 进行 Headless CMS 的设置。
安装 Strapi 并按照说明进行设置。有关更详细的说明，请参见 Strapi 的官方文档。
配置 Strapi 中的内容。我们将创建一个新的“产品”内容类型，并将其添加到 Strapi 数据库中。为此，请依次执行以下操作：
- 点击“Content-Types Builder”。
- 点击“Create new collection type”。
- 命名此内容类型为“Product”。
- 添加所需的字段。例如，我们可以添加“名称”、“价格”、“描述”等字段。
保存并发布新的 Strapi 内容类型。
步骤 2：获取 Strapi API
一旦我们创建了内容，我们可以通过 API 框架将其暴露给我们的前端应用程序。我们可以使用 Strapi API 来获取和管理产品信息。
转到 Strapi 管理面板。
点击左侧菜单上的“Plugins”。
查找“Documentation & Configurations”插件并启用它。
点击“右上角”以打开 Strapi API 文档。在这里，我们可以找到所有可用的 API 路由和传递到它们中的参数。
现在我们可以使用 Strapi API 去请求我们想要的信息，如产品、评论或订单。
步骤 3：在前端应用程序中使用 Strapi
现在我们已经设置了 Strapi 并了解了如何使用其 API，我们可以开始在前端应用程序中使用它。这个示例中，我们将使用 React 作为我们的前端框架，并使用 Axios 来请求 Strapi API。
- 在 React 应用程序中创建一个产品列表组件。例如：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- -------
------ ----- ---- -------
----- ----------- - -- -- -
----- ---------- ------------ - ------------
------------ -- -
----- ------------- - ----- -- -- -
----- - ---- - - ----- -------------------------------------------
-----------------
-
---------------
-- ---
------ -
-----
-----------------
----
--------------------- -- -
--- -----------------
-----------------------
----------------------------
----------------------
-----
---
-----
------
-
-此 React 组件使用 Axios 发出 GET 请求来检索 Strapi API 中的产品信息。在 Strapi API URL 中包含“/products”以检索所有产品。
我们将数据存储在组件状态中，并在组件的渲染方法中循环和展示数据。这将生成一个产品列表，并显示产品名称、描述和价格。
步骤 4：进行协作
一旦设置了 Strapi 和前端框架，现在我们可以在协作环境中使用它们。
如果您是一个大型团队的一员，为了管理您的 Strapi 数据，您需要指定至少一位负责人。这个负责人有权访问 Strapi 的管理面板，并负责协调团队的活动。
此外，您需要为团队成员设置角色和权限。在 Strapi Settings 菜单中，可以为每个用户指定角色，并为他们分配适当的权限。这将确保每个团队成员仅看到他们需要的内容，并仅有针对特定内容的访问权限。
总结
在本质上相同的情况下，Headless CMS 提供了更高的灵活性和更多的自由。但是，在大型团队中，团队成员需要设定一个清晰的协作体系，把握成为一个成功 Headless CMS 小组所需的团队流程和工具。所以严密的流程规范和适当的团队管理技巧及其应该得到充分重视。希望我们在将来的合作中根据技能水平与个性，规定明确的团队协作流程，才能真正发挥 Headless CMS 的优势并实现协作的愿景。
代码：https://github.com/StrapiAcademy/react-strapi-ecommerce-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b54f2968c7c53b0dad708