Saleor：基於Python、Django、GraphQL、React.js的開源免費無頭電子商務平臺，介紹及安裝配置詳細教程（3）Dashboard 管理後臺

本文由 PurePeace 原創

• Saleor系列教程之1、saleor介紹及後端GraphQL服務安裝配置：
  基於Python、Django、GraphQL、React.js的開源免費無頭電子商務平臺saleor，介紹及安裝配置詳細教程（1）後端 GraphQL api 示例數據 管理員賬號：https://blog.csdn.net/qq_26373925/article/details/104265313

• Saleor系列教程之2、saleor前端安裝配置教程：
  基於Python、Django、GraphQL、React.js的開源免費無頭電子商務平臺saleor，介紹及安裝配置詳細教程（2）前端 商城頁面：https://blog.csdn.net/qq_26373925/article/details/104270046

• Saleor系列教程之3、saleor Dashboard安裝配置教程：
  基於Python、Django、GraphQL、React.js的開源免費無頭電子商務平臺saleor，介紹及安裝配置詳細教程（3）Dashboard 管理後臺：https://blog.csdn.net/qq_26373925/article/details/104271600

---

上一篇教程（2）主要介紹了saleor前端服務的安裝配置

• 地址在這：https://blog.csdn.net/qq_26373925/article/details/104270046

---

現在，我們來安裝saleor的dashboard（管理後臺）

github：https://github.com/mirumee/saleor-storefront
demo：https://pwa.saleor.io/
文檔：https://docs.saleor.io/docs/next/dashboard/using-saleor/

---

準備

• 1、Node.js 10及以上版本的環境
• 2、成功配置並啓動了saleor的GraphQL後端服務（詳見第一篇教程）

當你能夠正常訪問 http://localhost:8000/graphql/時，即是滿足了條件

開始

---

1、克隆Dashboard項目

• 找一個目錄，在其中打開命令行（cmd / powershell）運行以下命令
• git命令需要安裝git

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

• 目前直接克隆到的默認是Next版本，可以在克隆完成後進入項目目錄，輸入 git checkout master 確認版本

進入dashboard項目目錄

cd saleor-dashboard

---

2、安裝依賴

• 在項目目錄下打開命令行，執行安裝依賴

npm i

等待片刻（許久）即可

---

3、啓動Dashboard

• 啓動前端之前，打開 package.json 找到第193行左右
• 這是啓動命令，我們爲它的內容增加 API_URI 參數

增加前

"start": "webpack-dev-server --open -d",

增加後

 "start": "cross-env API_URI=http://127.0.0.1:8000/graphql/ webpack-dev-server --open -d",

• 使用本地運行GraphQL的api服務：API_URI=http://127.0.0.1:8000/graphql/
• 使用saleor的演示api：API_URI=https://pwa.demo.saleor.rocks/graphql/

然後就可以運行Dashboard了！

npm start

• Dashboard的默認地址是 http://localhost:9000，打開看看效果吧（使用演示api）
• npm start 之後需要等待幾十秒左右的時間後才能顯示出頁面（正在編譯）

看到頁面後可直接輸入管理員賬號密碼登錄

• 管理員賬號密碼就是你在教程（1）中所設置的，如果沒有設置就再回去看看

登錄成功！

---

至此，saleor Dashboard安裝運行成功，整個網站可以跑起來了！

• 系列教程之1、saleor介紹及後端GraphQL服務安裝配置：
  Saleor：基於Python、Django、GraphQL、React.js的開源免費無頭電子商務平臺，介紹及安裝配置詳細教程（1）後端 GraphQL api 示例數據 管理員賬號：https://blog.csdn.net/qq_26373925/article/details/104265313

• 系列教程之2、saleor前端安裝配置教程：
  Saleor：基於Python、Django、GraphQL、React.js的開源免費無頭電子商務平臺，介紹及安裝配置詳細教程（2）前端 商城頁面：https://blog.csdn.net/qq_26373925/article/details/104270046

• 系列教程之3、saleor Dashboard安裝配置教程：
  Saleor：基於Python、Django、GraphQL、React.js的開源免費無頭電子商務平臺，介紹及安裝配置詳細教程（3）Dashboard 管理後臺：https://blog.csdn.net/qq_26373925/article/details/104271600

---

2020年2月11日 PurePeace