前言
伴随着数字化时代的到来，电子商务已经成为市场竞争的必要手段，而在建设 e-commerce 网站时，如何选择合适的技术方案一直是个大问题。传统的 CMS 和 e-commerce 技术是一种常见技术方案，然而，随着 headless CMS 的出现和开源框架的流行，我们可以使用这些新兴技术实现更加灵活高效的 e-commerce 网站。
Headless CMS 简介
Headless CMS 是一种特殊的 CMS，与传统CMS不同，Headless CMS 只提供管理数据的功能，通过 RESTful API 向前端程序提供业务数据，使得前端开发者可以更加灵活地实现功能。Headless CMS 将后端数据解耦出来，将前后端分离，给前端开发者提供了更大的自由度。
目前较为流行的 Headless CMS 包括 Strapi、Contentful 等。本文以 Strapi 为例。
前端开发框架
Headless CMS 解耦出来的数据需要被前端 UI 所调用，因此需要使用一些类型的前端框架，在本文中，我们选择 React 作为前端框架。
开源框架
使用 Headless CMS 的优势之一就是可以选择更加适合业务和自身技术栈的开源框架。在本文中，我们选择了「Saleor」作为开源 e-commerce 框架。
Saleor 是使用 Python 和 Django 等技术栈实现的 e-commerce 开源项目。Saleor 的优势在于其开发者团队对项目的重视和高质量的代码。从 Saleor 的 GitHub 页面中可以看到，开发者团队对该项目的维护非常频繁，同时 Saleor 也拥有一系列完善的开发、测试、部署工具。此外，Saleor 还支持多语言、多货币，更加方便地满足不同国家和地区的需求。
构建 E-commerce 网站
在本节中，我们将详细阐述如何通过 Headless CMS 和 Saleor 开发框架构建 e-commerce 网站。
1. 使用 Strapi 搭建 Headless CMS
在开发中，网站数据通常是比较敏感且动态变化的。因此，我们有必要使用 CMS 来方便管理网站数据。在本文中，我们将使用 Strapi 作为 headless CMS。
1.1 安装 Strapi
需要先安装 Node.js 和 npm
可以通过 npm 安装 Strapi 客户端
npm install strapi@alpha -g
1.2 创建 Strapi 项目
在本文中，我们将在项目根目录创建一个 Strapi 项目，并使用 SQLite 数据库来作为数据存储。通过运行以下命令创建 Strapi 项目：
strapi new my-project
创建完项目后，我们需要进入到 Strapi 项目目录中：
cd my-project
在 Strapi 项目的根目录下，有一个 config 文件夹，其中的 database.js 文件中包含了我们需要修改的 SQLite 数据库配置。
1.3 使用 Strapi 创建数据模型和 API
我们将使用 Strapi 中的 Content Type Builder 来创建需要的数据模型和 API。在 Strapi 项目目录下运行以下命令，即可创建一个名为「Product」的数据模型和 API。其中，name、description、price 是 Product 数据模型的基本字段。
strapi generate:model product name:string description:string price:float
在 Strapi 项目目录下，可以找到对应的代码文件 /api/product/models/product.js 和 /api/product/controllers/product.js，此时已经成功创建了一个 Product 模型和 API。
1.4 配置 Strapi API
我们需要向 Product API 中添加更多字段，如 SKU、图片、分类、权重等。
在 /api/product/models/product.js 中新增代码：
-- -------------------- ---- -------
-------------- - -
----------- -
---- -
----- --------
--
------ -
----- --------
--
--------- -
----- --------
--
------- -
----- --------
-
-
-同时在 /api/product/controllers/product.js 中，将 CRUD API 中用到的字段改成新添加的字段。
1.5 测试 API
我们可以通过访问 /product 端点测试 API，例如：http://localhost:1337/product
2. 创建 Saleor 项目
Saleor 是一个 e-commerce 开源项目，使用 Saleor 框架可以快速构建一个商城。
2.1 安装 Saleor
我们可以通过 Saleor 官方提供的命令行工具开始构建项目。Saleor 使用 pipenv 来管理 Python 虚拟环境，此处先安装 pipenv：
pip install pipenv
安装后执行以下命令拉取 Saleor 仓库并切换到 Saleor 目录：
git clone https://github.com/mirumee/saleor.git cd saleor
2.2 创建并激活虚拟环境
在 Saleor 项目中，我们使用 pipenv 管理 Python 虚拟环境。在 saleor 目录中，执行以下命令即可创建一个新的虚拟环境：
pipenv install --dev
2.3 启动开发服务器
安装完依赖后，我们需要启动服务器来完成开发。在 Saleor 项目目录下执行：
cp .env.sample .env python manage.py runserver
开发服务器也可以通过 npm start 或 yarn start 启动
此时，我们已经成功启动 Saleor 开发服务器，可以在 localhost:8000 访问 Saleor 页面。
3. 通过 Saleor 后端来连接 Strapi 数据库
我们已经通过 Strapi 创建了一个数据模型并且可以通过 API 来访问它，接下来我们需要在 Saleor 中将 API 的数据插入数据库。
3.1 安装 Django Rest Framework
需要先安装 Django Rest Framework：
pipenv install djangorestframework
同时，在 settings.py 中配置新的应用程序：
INSTALLED_APPS = [ # ... 'rest_framework', ]
3.2 定义 Saleor 中的 Product 模型
在 Saleor 项目的 /product/models.py 中新增代码：
-- -------------------- ---- ------- ---- --------- ------ ------ ----- ---------------------- ---- - -------------------------------- ----------- - ------------------ ----- - ------------------- --- - -------------------------------- ----- - -------------------------------- -------- - -------------------------------- ------ - -------------------
3.3 创建 Serializers
在 Saleor 项目的 /product/serializers.py 中，我们需要创建 Serializers 来让 Product 和 Strapi API 相关联。
from rest_framework import serializers
from .models import Product
class ProductSerializer(serializers.ModelSerializer):
class Meta:
model = Product
fields = ('id', 'name', 'description', 'price', 'sku', 'image', 'category', 'weight')3.4 创建 Views
在 Saleor 项目的 /product/views.py 中，我们需要创建 Views 来从 Strapi API 中获取数据，并将其写入到 Saleor 数据库中。
-- -------------------- ---- -------
---- -------------- ------ --------
---- ------- ------ -------
---- ------------ ------ -----------------
------ --------
----- ----------------------------------------
-------- - ---------------------
---------------- - -----------------
--- -------------------
--- - -------------------------------
-------- - -----------------
------------- - ---------------
-------- - --
--- ---- -- --------------
- ---- --- ---- -- -- ------- -- ----- --- --- ----
------------------------
------------------
--------------------------------
--------------------
----------------
--------------------
--------------------------
-----------------------
------ --------
--- -------------------- ------------
-----------------这样，我们就完成了将 Strapi API 中的数据写入 Saleor 数据库的功能，同时 Saleor 还会根据数据自动生成相应的网站页面。
总结
通过本文，我们了解了什么是 Headless CMS，并通过 Strapi 和 Saleor 实现了完全前端的数据管理和 e-commerce 应用。同时，本文还涉及到了 React 和 Django 两种开发框架的使用，对前端开发者来说是一个比较接地气的实战教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496965548841e98943c7eaf