Headless CMS 是一种将内容管理系统 (CMS) 与构建内容管理系统的前端完全分离的解决方案。这种方法使得前端团队可以集中精力开发用户界面，而不需要考虑 CMS 后端的问题。使用 Headless CMS 可以提高网站的可定制性和灵活性，使网站的开发和维护更加容易。
本文将讨论如何使用 Headless CMS 快速构建可定制化的电商网站。
什么是 Headless CMS?
传统 CMS 通常将内容的管理和呈现功能紧密耦合在一起。这就要求开发人员在设计界面时考虑到 CMS 后端的限制和局限性。这种耦合关系的问题是：
- 对于开发人员来说，需要花费大量的时间和精力来编写 CMS 后端代码。
- 对于非开发人员，他们很难定制和改变网站的外观和感觉。如果他们想尝试调整网站的设计，他们必须寻求开发人员的帮助。
- CMS 的局限性可能会限制前端团队的灵活性。如果您想要使用一些新技术或技术框架来设计您的电商网站，您可能会受到 CMS 后端的限制。
Headless CMS 却将内容管理和呈现功能解耦，将其分为两个单独的部分：
- Content Management System (CMS)：这是一个后端服务，用于管理所有需要用于电商网站的内容（比如产品名称，产品图片，类别等等）。您可以使用 Headless CMS 更新和管理这些内容。这个服务可以在云端或者您自己的服务器上运行。
- Frontend：这是网站的用户界面。它使用 API 调用 CMS 来展示和呈现内容。这个部分可以使用任意前端技术（比如 React 或者 Angular）来编写。
为什么要使用 Headless CMS?
使用 Headless CMS 有几个优点：
- 可定制化：Headless CMS 允许您使用任意技术框架来构建前端，从而使网站更具有定制化和创新性。
- 灵活性：所有前端代码都是独立的，因此，您可以按照自己的需求进行修改，而不需要考虑 CMS 后端的限制。
- 前后端的分离：通过将两个部分分离，可以更好地分配工作。开发团队可以专注于前端的工作，同时非开发团队可以专注于使用 Headless CMS 管理内容。
- 可维护性：Headless CMS 的后端为您处理所有的后端任务，比如数据备份，安全性等等。这意味着您可以更好地集中精力于您的前端代码，而不需要为后端代码操心。
使用 Headless CMS 构建电商网站
接下来，我们将使用一个名为 Strapi 的 Headless CMS 来构建一个简单的电商网站。Strapi 是一个包含所有需要的 CMS 功能的开源 CMS 后端服务。
1. 安装 Strapi
为了安装 Strapi，我们需要使用 Node.js。在终端中输入以下命令进行安装：
$ npm install -g strapi
2. 创建 Strapi 应用程序
在终端中，使用以下命令创建一个 Strapi 应用程序：
$ strapi new my-strapi-app
这个命令将创建一个名为 my-strapi-app 的新项目。
3. 创建 CMS 模型
在 Strapi 中，您可以使用模型来管理您的内容。一个模型代表了一个数据对象，例如产品名称，产品图片和产品描述。
为了创建一个新模型，我们可以使用 Strapi 的generate:api 命令：
$ cd my-strapi-app $ strapi generate:api products
这样将会在 my-strapi-app/api 目录下创建一个新的 products 模型。
现在您可以在 Strapi 的用户界面中自定义模型。您可以添加/删除字段，编写自定义验证规则等等。
4. 添加内容
通过 Strapi 的用户界面，您可以添加或者修改产品的内容，并将其保存到 Strapi 的数据库中。
5. 使用 CMS 内容在前端展示产品
现在，我们需要在前端使用添加的内容。首先需要安装一个用来调用 API 的库，我们以 axios 作为示例：
npm install axios
接下来，我们可以发出一个 GET 请求来获取我们的产品数据：
import axios from "axios";
axios
.get("http://localhost:1337/products")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));上述代码将向 Strapi 发出一个 GET 请求来获取所有产品数据，并将其打印到控制台中。
6. 展示内容
我们可以使用我们喜欢的任何框架，比如 React 来展示这些内容。为了将产品数据显示在网页中，我们可以使用从 API 获取的数据来生成组件。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
------ ----- ----------- - -- -- -
----- ---------- ------------ - -------------
------------ -- -
-----
--------------------------------------
---------------- -- ---------------------------
-------------- -- --------------------
-- ----
------ -
-----
----------------------- -- -
---- -----------------
-----------------------
----------------------------
---- ------------------------------------------------------------ --
------
---
------
--
--注意，上面的 JSX 中，我们同样使用了process.env.REACT_APP_API_URL来获取是否存在环境变量，并可从中获得请求后端数据的 URL 。
结论
使用 Headless CMS 可以极大地提高网站的可定制性和灵活性。通过完全分离前端和后端，Headless CMS 允许您使用自己喜欢的前端技术来构建电商网站
最后，Headless CMS 相信在不久的将来将变得更加流行并得到广泛应用。因此，我们需要花一些时间来学习如何构建可定制化且具有灵活性的电商网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709dd6bd91dce0dc87c8ebc