使用 Python Django 框架和 Htmx 建立單一產品商店
- 王林原創
- 2024-09-12 10:15:45307瀏覽
這是使用 Django、htmx 和 Stripe 創建單一產品電子商務網站的兩部分系列中的第一部分。在這一部分中，我們將啟動 Django 專案並將其與 htmx 整合。
在第二部分中，我們將使用 Stripe 處理訂單。
我們出發吧！
為什麼選擇 Django、htmx 和 Stripe？
我們將使用 Django、htmx 和 Stripe 來建立我們的網站，因為：
- Django 是一個 Python Web 框架，具有出色的 ORM、模板和路由系統。它有一些開箱即用的功能（如身份驗證）和多個在線可用的開源包。我們將使用 Django 來建立網站。
- htmx 是一個 JavaScript 程式庫，只需使用 html 屬性即可為您的網站帶來現代感 - 您實際上不必編寫任何 JavaScript（當然您可以）。我們將使用 htmx 為我們的頁面提供一些互動性。
- Stripe 是一個具有出色 API 的支付平台 — 它可以處理付款和信用卡資訊。它也與 Google 和 Apple Pay 完美整合。我們將使用 Stripe 來促進產品付款。
最終產品的工作原理如下：
- 用戶訪問我們的網站，可以看到有關我們產品的一些信息，包括其價格和描述。
- 一旦使用者點擊「購買」按鈕，他們就會被重新導向到 Stripe 的結帳會話。
- 如果付款成功，他們會再次重定向到我們的網站。我們保存他們的訂單訊息，並向客戶和所有員工用戶發送確認電子郵件，通知他們最近的購買。
現在讓我們設定 Django 項目，建立初始視圖，並使用 htmx 建立購買表單。
配置您的 Django Python 項目
要設定我們的項目，我們需要創建一個虛擬環境，啟動它並安裝所需的軟體包。然後我們可以創建 Django 專案和 Django 應用程式。
建立虛擬環境
讓我們從創建一個虛擬環境開始，這樣我們就可以隔離我們的依賴項：
python -m venv .venv
以下是我們在 Linux/Mac 上啟動它的方法：
source .venv/bin/activate
在 Windows 上：
.venv\Scripts\activate
安裝所需的軟體包
在我們啟動的虛擬環境中，我們需要一些軟體包來完成這項工作：
pip install django stripe django-htmx python-dotenv
在這裡，我們安裝了：
- 姜戈
- Stripe 可與 stripe API 搭配使用。
- django-htmx，它提供了一些與 htmx 一起使用的輔助功能。
- python-dotenv 從 .env 檔案載入環境變數。
創建 Django 項目
在與我們的虛擬環境相同的目錄中，我們建立一個名為 ecommerce_site 的 Django 專案：
django-admin startproject ecommerce_site .
在 Django 中，由一個或多個「應用程式」組織程式碼是一種很好的做法。每個應用程式都是一個執行特定操作的套件。一個專案可以有多個應用程序，但對於這個簡單的商店，我們可以只擁有一個包含大部分程式碼的應用程式 - 我們的電子商務平台的視圖、表單和模型。讓我們創建它並將其稱為電子商務：
python manage.py startapp ecommerce
並將此應用程式新增至 ecommerce_site/settings.py 中的 INSTALLED_APPS 中：
# ecommerce_site/settings.py
INSTALLED_APPS = [
# ... the default django apps
"ecommerce", # ⬅️ new
]
如果您在設定時遇到問題，請查看最終產品。在此階段，您的文件結構應如下所示：
ecommerce_site/ ├── .venv/ # ⬅️ the virtual environment ├── ecommerce_site/ # ⬅️ the django project configuration │ ├── __init__.py │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── ecommerce/ # ⬅️ our app setup │ ├── templates/ │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── models.py │ ├── tests.py │ └── views.py └── manage.py
建立模板
現在我們已經配置了項目，我們需要建立一些基本佈局。在 templates 目錄中，新增一個 base.html 檔案 - 所有其他模板將從該模板繼承。新增用於使用者互動的 htmx、用於基本樣式的 mvp.css 以及 Django 產生的訊息到範本：
<!-- ecommerce/templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>One-Product E-commerce Site</title>
<!-- include htmx ⬇️ -->
<script
src="https://unpkg.com/htmx.org@1.9.11"
integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"
crossorigin="anonymous"
></script>
<!-- include mvp.css ⬇️ -->
<link rel="stylesheet" href="https://unpkg.com/mvp.css" />
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-boost="true">
<header>
<h1>One-Product E-commerce Site</h1>
</header>
<main>
<section>
{% if messages %} {% for message in messages %}
<p><mark>{{ message }}</mark></p>
{% endfor %} {% endif %}
</section>
{% block content %} {% endblock %}
</main>
</body>
</html>
在同一個 templates 目錄中為我們的主頁視圖建立一個 home.html 範本。它應該擴展 base.html 並僅填充其內容部分。
<!-- ecommerce/templates/home.html -->
{% extends "base.html" %} {% block content %}
<section>{% include "product.html" %}</section>
{% endblock %}
在此範本中，我們包含了product.html 範本。 Product.html 將呈現有關我們產品的一些詳細資訊和占位符圖像。讓我們在同一個 templates 目錄中建立它：
<!-- ecommerce/templates/product.html --> <form> <img src="https://picsum.photos/id/30/400/250" alt="mug" /> <h3>mug<sup>on sale!</sup></h3> <p>mugs are great - you can drink coffee on them!</p> <p><strong>5€</strong></p> <button type="submit" id="submit-btn">Buy</button> </form>
建立主視圖
在 ecommerce/views.py 中，我們將建立將渲染主頁模板的視圖：
# ecommerce/views.py
from django.shortcuts import render
def home(request):
return render(request, 'home.html')
並將其加入 ecommerce_site/urls.py 中的 urlpatterns 中：
# ecommerce_site/urls.py
from django.contrib import admin
from django.urls import path
from ecommerce import views # ⬅️ new
urlpatterns = [
path("admin/", admin.site.urls),
path("", views.home, name="home"), # ⬅️ new
]
現在我們可以使用以下指令來執行伺服器：
python manage.py runserver
如果您在瀏覽器中跳到 http://127.0.0.1:8000，您應該會看到以下內容：
It might feel like overkill to add a dedicated product.html template instead of just the product details in the home.html template, but product.html will be useful for the htmx integration.
Add the Form and Use Htmx
Great! We now have a view that looks good. However, it doesn’t do much yet. We'll add a form and set up the logic to process our product purchase. Here’s what we want to do:
- Allow the user to select how many products (mugs) they want to buy.
- When the user clicks “Buy”, make a POST request to a different view called purchase in the backend using hx-post.
- In that view, validate the form and wait for 2 seconds to simulate the Stripe integration (we'll cover this in the second part of this guide).
- Replace the form content with the purchase view response.
- While the order is processing, show a loading message and disable the “Buy” button, so that the user doesn’t accidentally make multiple orders.
Let's go step by step.
1: Add a Quantity Order Form
Let’s first create and add a simple order form to our view allowing a user to select the number of mugs they want. In ecommerce/forms.py, add the following code:
# ecommerce/forms.py
from django import forms
class OrderForm(forms.Form):
quantity = forms.IntegerField(min_value=1, max_value=10, initial=1)
In ecommerce/views.py, we can initialize the form in the home view:
# ecommerce/views.py
from ecommerce.forms import OrderForm # ⬅️ new
def home(request):
form = OrderForm() # ⬅️ new - initialize the form
return render(request, "home.html", {"form": form}) # ⬅️ new - pass the form to the template
And render it in the template:
<!-- ecommerce/templates/product.html -->
<form method="post">
<!-- Same product details as before, hidden for simplicity -->
<!-- render the form fields ⬇️ -->
{{ form }}
<!-- the same submit button as before ⬇️ -->
<button type="submit" id="submit-btn">Buy</button>
</form>
2: Make a POST Request To a Different View
When the user clicks "Buy", we want to process the corresponding POST request in a dedicated view to separate the different logic of our application. We will use htmx to make this request. In the same ecommerce/templates/product.html template, let's extend the form attributes:
<!-- ecommerce/templates/product.html -->
<!-- add the hx-post html attribute ⬇️ -->
<form method="post" hx-post="{% url 'purchase' %}">
<!-- Same product details as before, hidden for simplicity -->
{{ form }}
<button type="submit" id="submit-btn">Buy</button>
</form>
With this attribute, htmx will make a POST request to the purchase endpoint and stop the page from reloading completely. Now we just need to add the endpoint.
3: Create the Purchase View
The purchase view can be relatively simple for now:
# ecommerce/views.py
import time # ⬅️ new
# new purchase POST request view ⬇️
@require_POST
def purchase(request):
form = OrderForm(request.POST)
if form.is_valid():
quantity = form.cleaned_data["quantity"]
# TODO - add stripe integration to process the order
# for now, just wait for 2 seconds to simulate the processing
time.sleep(2)
return render(request, "product.html", {"form": form})
In this view, we validate the form, extract the quantity from the cleaned data, and simulate Stripe order processing. In the end, we return the same template (product.html). We also need to add the view to the urlpatterns:
# ecommerce_site/urls.py
# ... same imports as before
urlpatterns = [
path("admin/", admin.site.urls),
path("", views.home, name="home"),
path("purchase", views.purchase, name="purchase"), # ⬅️ new
]
We now need to tell htmx what to do with this response.
4: Replace the Form Content With the Purchase View Response
Htmx has a hx-swap attribute which replaces targeted content on the current page with a request's response.
In our case, since the purchase view returns the same template, we want to swap its main element — the