Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台，介绍及安装配置详细教程（1）后端 GraphQL api 示例数据 管理员账号

本文由 PurePeace 原创

• Saleor系列教程之1、saleor介绍及后端GraphQL服务安装配置：
  Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台saleor，介绍及安装配置详细教程（1）后端 GraphQL api 示例数据 管理员账号：https://blog.csdn.net/qq_26373925/article/details/104265313

• Saleor系列教程之2、saleor前端安装配置教程：
  Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台saleor，介绍及安装配置详细教程（2）前端 商城页面：https://blog.csdn.net/qq_26373925/article/details/104270046

• Saleor系列教程之3、saleor Dashboard安装配置教程：
  Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台saleor，介绍及安装配置详细教程（3）Dashboard 管理后台：https://blog.csdn.net/qq_26373925/article/details/104271600

---

项目：saleor
stars：6.7k
简介：开源的无头电子商务平台（商城&网店）
官网：https://saleor.io/

---

github（后端）：https://github.com/mirumee/saleor
github（前端）：https://github.com/mirumee/saleor-dashboard
github（dashboard）：https://github.com/mirumee/saleor-dashboard

• 这个项目之前是一件合体的东西（前端+后端+dashboard）三合一，现在三样东西拆开来，分成了三个项目（我裂开），所以与之前（2.9版本）相差较大

---

saleor文档（Next版）：https://docs.saleor.io/docs/next/index.html

• 特别注意不是2.9版本文档！那个版本即将停止维护了，但是他们官网还没改。。

演示（商城）：https://pwa.saleor.io/
后台演示（dashboard）：https://pwa.saleor.io/dashboard/

---

1、介绍

saleor是这样介绍自己的：

A modular, high performance, headless e-commerce storefront built with
Python, GraphQL, Django, and ReactJS.

翻译过来大概就是：

• 一个模块化、高性能，使用Python、GraphQL、Django、ReactJS等技术构建的无头电子商务平台（Headless eCommerce）

无头电子商务是个名词，详细解释可以看这篇文章：https://zhuanlan.zhihu.com/p/92992305

这里我摘了几段话简单解释：

• 什么是无头电子商务（Headless eCommerce）？ 无头电子商务（Headless eCommerce）本质上是指网站“前端与后端完全分离”的电子商务开发模式。

• 相较于传统电商（Traditional eCommerce），无头电商通过API独立调用网站前后端逻辑构架。消费者体验、多渠道可拓展性、内容维护与响应速度、开发难度与时间成本获得显著优化。目前品牌方正期待为用户提供独特、定制且整合的购物体验，而无头电商显著了消解了达到上述目标的难度。

• 最重要的是，无头电商模式下“API即服务”，因此他能够跨越任何渠道与设备并处理电子商务流程，包括但不仅限于如下渠道的无缝链接：官网、小程序、原生APP、智能与穿戴设备（如智能手表、车载仪表盘的订单系统）、ERP及门店订单管理系统等。

大概就是这样

---

2、安装

官方文档（windows）：https://docs.saleor.io/docs/next/getting-started/installation-windows/
官方文档（linux）：https://docs.saleor.io/docs/next/getting-started/installation-linux/
官方文档（macos）：https://docs.saleor.io/docs/next/getting-started/installation-macos/

接下来我选择在自己的windows10系统下安装，需要在其它系统下安装请看官方文档

- 依赖

---

1、python

• Python3.8：https://www.python.org/downloads/
• 安装时请勾选 Add Python 3.8 to PATH （将python加入系统环境变量）

2、Node.js

• 要求安装Node.js 10或更高的版本：https://nodejs.org/en/download/
• 安装时请勾选 Add to PATH（将Node.js加入系统环境变量）

3、PostgreSQL

• 要求安装9.4或更高版本：https://www.postgresql.org/download/windows/

4、GTK+

• 下载windows-64位安装程序：https://github.com/tschoonj/GTK-for-Windows-Runtime-Environment-Installer/releases
• 安装时请勾选 Set up PATH environment variable to include GTK+

5、Visual C++ build tools

• C++ 生成工具：https://visualstudio.microsoft.com/visual-cpp-build-tools/
• 或者在这里找：https://go.microsoft.com/fwlink/?linkid=840931

- 项目安装

---

1、克隆项目

• 在某目录下打开命令行（cmd / powershell）输入命令：
• 使用git命令需要先安装git）

git clone https://github.com/mirumee/saleor.git

• 稍微有点大，下载时间可能会比较久
  像这样直接克隆到的项目是后端（GraphQL服务）
  

接着进入克隆好的项目目录

cd saleor

---

2、安装项目依赖

此步骤请务必在虚拟环境下进行！以免出现未知问题

• 创建并激活python虚拟环境：https://docs.python.org/3/tutorial/venv.html
• 因为有很多需要编译的轮子，所以安装用时会比较久

python -m pip install -r requirements.txt

---

4、设置SECRET_KEY（密钥）

• 在项目目录中还有一个名为saleor的文件夹，我们进入它，然后找到settings.py
• 在其中找到这段代码（大概在第180行附近）

# Make this unique, and don't share it with anybody.
SECRET_KEY = os.environ.get("SECRET_KEY")

可以看出，这里原本是在系统环境变量里找到 SECRET_KEY 并进行赋值的

• 我们直接手动将 SECRET_KEY 变量赋值，就不用改环境变量了，随便一个字符串即可，但最好要够安全
• 这里有django官方对secret-key的说明：https://docs.djangoproject.com/en/1.11/ref/settings/#secret-key

---

5、创建PostgreSQL数据库用户

• 我们安装的PostgreSQL自带了一个叫 pgAdmin 的管理工具
• windows10系统下直接在开始菜单输入就能找到了
  
• 运行后会打开一个网页，直接在界面上这样操作即可
  
• 用户名saleor，密码saleor，权限superuser
  
  
• 权限全打勾
  
• 角色：管理员（默认叫postgres）
  
• 同时可以在 settings.py 第50行处 DATABASES 字典修改数据库配置，改成你想要的密码

DATABASES = {
    "default": dj_database_url.config(
        default="postgres://saleor:saleor@localhost:5432/saleor", conn_max_age=600
    )
}

• 也可以执行这段sql创建用户

CREATE ROLE saleor WITH
	LOGIN
	SUPERUSER
	CREATEDB
	CREATEROLE
	INHERIT
	REPLICATION
	CONNECTION LIMIT -1
	PASSWORD 'saleor';
GRANT postgres TO saleor WITH ADMIN OPTION;

---

6、为saleor创建并初始化数据库

创建数据库

• 继续使用 pgadmin 操作即可，右击Databases点击Create
  
• 数据库名，默认设为saleor，数据库所有者为我们上一步创建的用户
  
  
• 也可以执行这段sql进行创建

CREATE DATABASE saleor
    WITH 
    OWNER = saleor
    ENCODING = 'UTF8'
    CONNECTION LIMIT = -1;

接着初始化数据库

• 在项目目录中打开命令行（cmd / powershell）执行

python manage.py migrate

然后等着出现一大堆ok

• 如果出现问题，请检查前两步骤中数据库用户、数据库是否创建正确，以及 settings.py 中的数据库配置是否正确
• 执行完后打开数据库，可以看到创建了一大堆数据表，那么代表我们这一步成功了

当然，这些数据表都是空的，所以接下来我们需要添加数据，并创建网站管理员账号

---

7、创建管理员账户

• 在项目目录中打开命令行，执行

python manage.py createsuperuser

• 稍作等待，然后根据提示输入Email（账号）密码，即可创建成功

我们可以在数据库表 account_user 中看到刚才新建的管理员账号

---

8、创建示例数据

• saleor又提供了一些示例数据（商品、订单等）我们把它也创建出来吧
• 在项目目录中打开命令行，执行

python manage.py populatedb --createsuperuser

• 稍作等待，数据就添加到我们的数据库表中了
• --createsuperuser 这个参数会额外创建一个管理员账户，
  账号为 [email protected] ，密码为 admin

同样地，可以打开数据库查看数据表，我就不发图了

---

9、初始化前端资源

在项目目录中打开命令行（cmd / powershell），执行

• 如果这一步出现错误，请检查 Node.js 的版本

npm install

---

下面是无需执行的命令：

npm run build-assets

• 如果你查看的其它教程或文档中提到了这段代码，说明针对的saleor版本不是Next，而是2.9或之前的版本，请注意。
• 在Next版本中，此命令会执行失败（因为无需此步骤）

---

8、邮箱服务

• 在项目目录打开命令行，运行

npm run build-emails

---

9、启动服务器

• 在项目目录打开命令行，运行

python manage.py runserver

接下来打开网页，http://127.0.0.1:8000/graphql/

看到这里，属于后端的GraphQL服务已经启动成功了

• GraphQL其实就是一种api，让你可以像写sql那样（类似吧）访问api
  
• 这里是saleor关于GraphQL服务的文档：https://docs.saleor.io/docs/next/api/intro/
• api文档：https://docs.saleor.io/docs/next/api-reference/

试试在页面左侧写入以下内容，然后点击网页上的箭头按钮：

• 这是查询数据库中前三个商品的语句

query {
  products(first: 3) {
    edges {
      node {
        id
        name
        description
        category {
          name
        }
      }
    }
  }
}

• 如果数据库中有商品数据，服务器会像这样返回json数据：

{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "id": "UHJvZHVjdDo3Mg==",
            "name": "Apple Juice",
            "description": "Fell straight from the tree, on to Newton’s head, then into the bottle. The autumn taste of English apples. Brought to you by gravity.",
            "category": {
              "name": "Juices"
            }
          }
        },
        {
          "node": {
            "id": "UHJvZHVjdDo3NA==",
            "name": "Banana Juice",
            "description": "Build your protein the natural way, with exotic banana juice made from ripe fruit and packed with all the goodness of the tropical sun.",
            "category": {
              "name": "Juices"
            }
          }
        },
        {
          "node": {
            "id": "UHJvZHVjdDo3OQ==",
            "name": "Bean Juice",
            "description": "Bean there, drunk that! The energy drink for the health-conscious. Brand new bean juice; from allotment to bottle in under 8 hours.",
            "category": {
              "name": "Juices"
            }
          }
        }
      ]
    }
  }
}

• 如果没有数据，那么就会返回这样的玩意儿

{
  "data": {
    "products": {
      "edges": []
    }
  }
}

搞定~

---

至此，saleor后端GraphQL服务及示例数据已经安装完毕，接下来安装前端和dashboard吧。

• 系列教程之1、saleor介绍及后端GraphQL服务安装配置：
  Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台saleor，介绍及安装配置详细教程（1）后端 GraphQL api：https://blog.csdn.net/qq_26373925/article/details/104265313

• 系列教程之2、saleor前端安装配置教程：
  Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台saleor，介绍及安装配置详细教程（2）前端 商城页面：https://blog.csdn.net/qq_26373925/article/details/104270046

• 系列教程之3、saleor Dashboard安装配置教程：
  Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台saleor，介绍及安装配置详细教程（3）Dashboard 管理后台：https://blog.csdn.net/qq_26373925/article/details/104271600

---

2020年2月11日 PurePeace