- 這是一個用 Django, Bootstrap, MySQL(或SQLite), Docker 架設並部署在 Heroku 的購物網站。
- 響應式(RWD)網站設計
- 首頁圖片輪播(Carousel)
- 首頁商品導覽換頁(Paginator)
- 使用者登入驗證與註冊(django auth)
- 第三方登入驗證(Google、GitHub)
- 利用URL patterns增刪購物車內容(Restful API)
- 將商品加入購物車(django-shopping-cart)並提交訂單(session)
- 發送訂單確認的電子郵件給顧客(SMTP + Gmail)
- Admin管理後臺可以上傳產品圖片(django-filer)
- 前端:
- HTML5
- CSS3
- jquery
- Bootstrap(4.5.2)
- 後端:
- Django(3.1.7)
- session
- form
- email(SMTP+Gmail)
- django-allauth(Google、GitHub)
- django-shopping-cart
- djagno-filer
- Django(3.1.7)
- 資料庫:
- 部署:
- 尚未有帳號密碼，所以導至登入頁面
- 第三方登入(Google、GitHub)
- 或是註冊帳號，成功後會寄發註冊成功的電子郵件
- 登入成功後，進入首頁
- 使用者個人資料
- 分類檢視，例如選擇"書籍"
- 選購商品，加入購物車
- 按下"我要訂購"，並輸入訂購資訊，再按下"下訂單"
- 發送電子郵件通知訂單給顧客
- 若想增加商品圖片，可以在Admin管理後臺上傳圖片
底下為MySQL Workbench的EER Diagram
-
myshop_product: 是 商品 的資料表，有sku,name,description,stock,price...等欄位 -
myshop_category: 是 商品類別 的資料表，有name這個欄位，並以category_id為 Foreign key 與myshop_product資料表做關聯 -
auth_user: 是 Django auth 內建的 user(使用者) model，有內建的欄位，ex:password,last_login,username... -
myshop_profile: 擴充內建的 user(使用者) model，多增加一個male的欄位，並以user_id為 foreign key 與auth_user資料表做關聯 -
myshop_order: 按下 "我要訂購" 所儲存的資料表，內含訂購填寫的full_name,address,phone...等欄位，並以user_id為 foreign key 與auth_user資料表做關聯 -
myshop_orderitem: 按下 "下訂單" 所儲存的資料表，內含訂單詳細資訊如price,quantity,name...等欄位，並以order_id為 foreign key 與myshop_order資料表做關聯 -
cart_item: 是 Django-shopping-cart 內建的購物車內容 的資料表，有quantity,unit_price...等欄位
遠端下載repo
git clone https://github.com/DysonMa/Madi-Ecommerce.git
以下是範本，要依照個人需求修改
[Django]
SECRET_KEY =
[Gmail]
email =
client_secret =
[MySQL]
client_secret =
[Django] SECRET_KEY: 可以不用編輯，因為是demo版，所以仍然附在code裡面[Gmail] email: 輸入寄件者的信箱[Gmail] client_secret: 用來核准寄信的密鑰，須至 Google Gmail API 申請 申請，詳細步驟可以參考這裡[MySQL] client_secret: 用來連線MySQL的密碼
- 進入資料夾
cd Madi-Ecommerce
- 創建一個虛擬環境叫做
myenv
python -m venv myvenv
- 開啟虛擬環境
myvenv\Scripts\activate
- pip安裝相依的套件
pip install -r requirements.txt
- migrate資料
python manage.py makemigrations
python manage.py migrate
- 建立superuser，輸入使用者名稱/Password
python manage.py createsuperuser
- 在本地端 run server
python manage.py runserver
- 到 https://localhost:8000/ 就可以看到網站
- 利用剛剛輸入的使用者名稱/Password登入網站
- 進入資料夾
cd Madi-Ecommerce
- 利用
docker-compose建立並啟動環境
docker-compose up --build
docker-compose up
- 查看 container 的 ID
docker ps -a
- 進入bash
docker exec -it <Web Container ID> bash
- 在 bash 輸入指令，migrate資料
python manage.py makemigrations
python manage.py migrate
- 在 bash 輸入指令，建立superuser，輸入使用者名稱/Password
python manage.py createsuperuser
- 到 https://localhost:8000/ 就可以看到網站
- 利用剛剛輸入的使用者名稱/Password登入網站
- 因為資料庫是全新的，所以商品需要手動加入
- 點選上方導覽列的
後臺管理，再點選左邊MYSHOP/Categorys，點選右上方的新增 CATEGORY，輸入想增加的商品類別 - 點選左邊
MYSHOP/Products，點選右上方的新增 PRODUCT，會看到下圖即可開始依照欄位建立商品，圖片可以從static/images裏頭上傳
- 需要到 Google-API-Dashboard 申請一組憑證，並記錄下來
- 需要到 Github 第三方驗證上方申請一組憑證，並記錄下來
- 點選上方導覽列的
後臺管理，再點選左邊網站/網站，點選中間的example.com，網域名稱改為localhost:8000/，顯示名稱改為localhost - 再點選左邊
社群帳號/社群應用程式，點選右上方的新增 社群應用程式，進到下面畫面，選擇Google或GitHub，並輸入剛剛申請的憑證，接著別忘了底下的localhost:8000/要加入到右邊，底下是Google的範例。
詳細教學:
- 因為部署到 github 會有
client_secret外露的資安問題，所以編輯一個config.ini的組態設定檔，內含各種密碼，透過configer的讀取方式，避免暴露密碼，也方便統一管理所需要的參數
django-shopping-cart內建的add函式無法存取 product，導致OrderItem這個 model 無法跟Product這個 model 以 foreign key 做關聯，地端程式碼可以手動修改，但部署到 Heroku 就無法修改套件py檔內容，因此最後 Heroku app 取消關聯到Product這個資料表python manage.py makemigrations若失效，要進到migrations資料夾，手動查找每個版本的py檔，找出與model修正有關聯的檔案，手動修正或刪除，重新執行此指令即可成功運行
- 本機作業環境是 Windows，利用
pip freeze > requirements.txt指令會生成pywin300這個套件，但Heroku是Linux環境，所以會部署失敗，需要手動刪除此套件 - Heroku 預設的資料庫是 PostgreSQL，因此
settings裏頭要修改DB連結的方式，才能在 Heroku 上部署成功 - Heroku 部署需要提供三個檔案，
Procfile、requirements.txt、runtime.txt