前言
近年来，越来越多的网站将 CMS (Content Management System) 与 React 等前端技术结合使用来构建更加现代化的网站应用。然而，传统的 CMS 一般是集成了前后端的一体化系统，随着网站应用场景的复杂化，这种传统的 CMS 成为了越来越不合适的选择。
因此在近几年，出现了一种全新的 CMS 模式称为 Headless CMS，该模式与传统 CMS 相比，将 CMS 的数据管理和网站的展示分离，只提供数据 API 接口，并且支持 RESTful 和 GraphQL API，让开发者可以更加自由灵活地使用各种前端技术进行网站展示。本文将讲解如何使用 Headless CMS 和 React 技术来构建电商网站。
什么是 Headless CMS
Headless CMS 是指 CMS 的数据管理与网站的展示分离。它只提供数据 API 接口，并且支持 RESTful 和 GraphQL API，让开发者可以使用各种前端技术（如 React）来展示网站内容。与传统的 CMS 不同，Headless CMS 更加灵活和开放，它不会限制前端展示方式，同时也避免了各种繁琐的配置和维护。
Headless CMS 主要具有以下特点：
- 解耦合：数据管理和网站展示分离，完全解耦合，让网站构建更加灵活，可以使用多种前端技术。
- 开放性：支持 RESTful 和 GraphQL API，可以方便地对接各种前端构建工具和框架。
- 易用性：摒弃了传统 CMS 中繁琐的配置，开箱即用，更加易于使用和管理。
选择 Headless CMS
在选择 Headless CMS 时，需要根据自己的实际需求进行选择。以下是一些 Headless CMS 的推荐，供读者参考：
- Strapi：支持 RESTful 和 GraphQL API，提供了丰富的插件和模板，易于使用和扩展。
- Contentful：提供了完整的管理面板和 API 接口，可以与多种前端框架结合使用。
- Prismic：提供了可视化编辑器，通过自定义类型和字段进行数据管理，支持 RESTful 和 GraphQL API。
电商网站需求
下面我们开始构建一个电商网站的 Headless CMS 和 React 应用。在构建之前，我们需要先明确需求和功能，从而为后续的开发工作做好准备。
数据模型
在运营一个电商网站时，我们需要使用产品、分类、订单等多个数据模型进行数据管理。
- 产品模型：包括产品名称、价格、描述、分类、库存等信息。
- 分类模型：包括分类名称、分类描述等信息。
- 订单模型：包括订单号、产品、价格、数量等信息。
网站页面
在电商网站中，我们需要提供多个页面对外展示。
- 首页：展示推荐产品、推荐分类等信息。
- 产品列表页：展示所有产品，并支持根据分类进行筛选。
- 产品详情页：展示单个产品的详细信息，包括产品名称、价格、库存、描述等信息。
- 订单页面：展示所有订单，并支持根据订单状态进行筛选。
功能需求
在构建电商网站时，我们需要满足以下功能需求：
- 用户登录注册。
- 产品浏览，支持根据分类进行筛选。
- 产品购买，支持加入购物车、下单、支付等功能。
- 订单管理，支持订单查询、订单状态更新等功能。
Headless CMS 服务端搭建
我们使用 Strapi 来作为 Headless CMS 服务端。该工具易于部署和使用，并且支持 RESTful 和 GraphQL API。
安装和配置 Strapi
安装 Node.js 和 npm。
使用 npm 命令安装 Strapi。
npm install strapi@alpha -g
- 使用 Strapi 命令创建一个新的项目。
strapi new my-project
- 运行项目并访问 CMS 管理面板。
cd my-project yarn start
创建数据模型
在 Strapi 中创建数据模型非常简单。使用 Strapi 的可视化编辑器，我们可以轻松创建和编辑数据模型。
进入 Strapi 的管理面板，点击左侧的 "Content Type Builder"。
创建产品模型。在 "Content Type Builder" 页面点击 "Create new collection type"，输入名称为 "product"。在 "product" 下添加字段，包括产品名称、价格、描述、分类、库存等信息。
创建分类模型。同上，在 "Content Type Builder" 页面点击 "Create new collection type"，输入名称为 "category"。在 "category" 下添加字段，包括分类名称、分类描述等信息。
创建订单模型。同上，在 "Content Type Builder" 页面点击 "Create new collection type"，输入名称为 "order"。在 "order" 下添加字段，包括订单号、产品、价格、数量等信息。
API 接口
在 Strapi 中，每个模型创建后，Strapi 会为该模型自动生成对应的 RESTful API 接口。我们可以使用 Postman 或其他 HTTP 客户端工具测试这些接口是否正常访问。
React 前端应用
现在我们已经完成了 Headless CMS 的服务端部分，接下来我们将使用 React 来构建前端应用。
创建 React 应用
- 使用
create-react-app命令创建一个新的项目。
npx create-react-app my-app cd my-app npm start
- 安装需要的第三方库。
npm install --save react-router-dom axios react-redux redux redux-thunk
这里我们使用了 React Router 作为路由工具，并使用了 axios、redux、redux-thunk 来进行数据请求和状态管理。
配置 API 对接
我们需要配置 React 应用与 Strapi API 的对接。
- 打开
src目录下的index.js，修改代码如下，以使用 axios 进行 API 请求：
-- -------------------- ---- -------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ---------- ---- --------------
------ --- ---- --------
------ -------- ---- -------------
------ ----- ---- --------
---------------------- - ------------------------
----- ------------------------- - -----------------------------------------
----- ----- - ------------------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--- 创建一个
api目录，并在该目录下创建一个index.js文件，该文件用来封装所有 Strapi API 接口的方法。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -
------------- -
------ -----------------------
--
-------------- -
------ ---------------------- - ----
--
--------------- -
------ -------------------------
--
--------------- -
------ ------------------------ - ----
--
----------- -
------ ---------------------
--
------------ -
------ -------------------- - ----
--
----------------- -
------ --------------------- ------
--
--------------- ----- -
------ -------------------- - --- ------
-
-创建组件
在 React 应用中，我们需要创建多个组件来展示电商网站的不同页面。以下是该应用所需的组件列表：
- App：应用入口组件，用于渲染页面路由。
- Home：首页组件，展示推荐产品、推荐分类等信息。
- ProductList：产品列表组件，展示所有产品，并支持根据分类进行筛选。
- ProductDetail：产品详情组件，展示单个产品的详细信息，包括产品名称、价格、库存、描述等信息。
- OrderList：订单列表组件，展示所有订单，并支持根据订单状态进行筛选。
我们在 src 目录下创建以上组件，并根据实际需求进行开发。
路由配置
使用 React Router 来进行路由配置。
- 打开
src目录下的App.js文件，进行路由配置。
-- -------------------- ---- -------
------ - ------- ----- - ---- -------------------
------ ------- ---- -------------
------ ---- ---- ---------
------ ----------- ---- ----------------
------ ------------- ---- ------------------
------ --------- ---- --------------
----- --- ------- --------------- -
-------- -
------ -
------- ------------------
-----
------ -------- ----- ---------------- --
------ ---------------- ----- ----------------------- --
------ -------------------- ----- ------------------------- --
------ -------------- ----- --------------------- --
------
---------
--
-
-
------ ------- ----使用 Redux 进行状态管理
使用 Redux 来进行状态管理，方便程序的状态管理和共享。
- 创建各个组件的 Action 和 Reducer 文件，用来处理数据请求和更新。以下是 Order 相关的 Action 和 Reducer 文件示例。
- orderActions.js
-- -------------------- ---- -------
------ --- ---- ---------
------ ----- ------------ - ---------------
------ -------- ------------- -
------ ----- -------- -- -
----- --- - ----- ----------------
----------
----- -------------
-------- --------
--
-
-
------ -------- --------------- ----- -
------ ----- -------- -- -
----- ------------------- ------
----- --- - ----- ----------------
----------
----- -------------
-------- --------
--
-
-- orderReducer.js
-- -------------------- ---- -------
------ - ------------ - ---- --------------------------
------ ------- -------------- - --- ------- -
------------------- -
---- -------------
------ - --------- ---- -------------- --
--------
------ ------
-
-- 在
src目录下的reducers/index.js文件中对所有 Reducer 进行合并。
import { combineReducers } from 'redux';
import orderReducer from './orderReducer';
export default combineReducers({
orders: orderReducer
})- 在需要使用状态的组件中，使用
connect()方法将组件与 Redux 中的状态进行关联。以下是 OrderList 组件的使用示例：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------------ ----------- - ---- --------------------------
----- --------- ------- --------------- -
------------------- -
-------------------------
-
-------- -
-- ------
----- ------ - ----------------------
------ -
--- -- --------
--
-
-
-------- ---------------------- -
------ -
------- ------------
-
-
------ ------- ------------------------ - ------------ ----------- --------------总结
本文简要介绍了 Headless CMS 和 React 技术，以及如何基于 Strapi 和 React 技术构建电商网站。在具体实现上，我们通过 Strapi 创建数据模型和 API 接口，并使用 React 进行页面展示和状态管理。
以上示例仅仅是一个简单的例子。在实际应用中，可能会涉及到更复杂的业务逻辑和交互效果，读者需结合实际需求进行开发。希望本文能够对读者有所帮助，为 Headless CMS 和 React 技术的学习和应用提供借鉴和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64828e7e48841e98941f17b7