使用 Python Django 框架和 Htmx 建立單一產品商店-Python教學-PHP中文網

這是使用 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，您應該會看到以下內容：

Build a One-Product Shop With the Python Django Framework and Htmx

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

<!-- ecommerce/templates/product.html -->

<!-- add the hx-swap html attribute ⬇️ -->
<form method="post" hx-post="{% url 'purchase' %}" hx-swap="outerHTML">
  <!-- Same product details as before, hidden for simplicity -->

  {{ form }}
  <button type="submit" id="submit-btn">Buy</button>
</form>

登入後複製

The value outerHTML will replace the entire target element with the response from the purchase view. By default, the htmx target is the same element making the call — in our case, the element.

5: Tell Htmx What to Do When the Request Is Triggered

htmx provides some helper utilities for when a request is processing. In our case, we want to:

Disable the "Buy" button (to avoid a form re-submission) by using the hx-disabled-elt attribute.
Show a loading message on the screen by using the htmx-indicator class. This class changes its element's opacity when the request is triggered.

<!-- ecommerce/templates/product.html -->

<!-- add the hx-disabled-elt html attribute ⬇️ -->
<form
  method="post"
  hx-post="{% url 'purchase' %}"
  hx-swap="outerHTML"
  hx-disabled-elt="#submit-btn"
>
  <!-- Same product details as before, hidden for simplicity -->

  {{ form }}
  <button type="submit" id="submit-btn">Buy</button>

  <!-- add a loading message with the htmx-indicator class ⬇️ -->
  <p class="htmx-indicator"><small>Getting your mug ready...</small></p>
</form>

登入後複製

Once the customer clicks the "Buy" button, htmx will disable that same button (identifiable by its submit-btn id), and show a loading message by changing the opacity of the p.htmx-indicator element.

The Result

Jump over to the browser.

You can see the final result in this GitHub repository.

It doesn’t do much else yet. But, if form validation fails, errors will display directly on the form, without the need to refresh the entire page. If the form succeeds, we will process the Stripe order accordingly. We'll see how to do this in the second part of this guide.

Wrapping Up

We've now set up the basics for our one-product ecommerce site. We've configured our Django project, integrated it with htmx to give our site some interactivity, and set up a basic order form for our product.

In the second part of this guide, we'll handle orders with Stripe, save the results in our database, and notify users after a successful purchase.

Until then, happy coding!

P.S. If you'd like to read Python posts as soon as they get off the press, subscribe to our Python Wizardry newsletter and never miss a single post!

以上是使用 Python Django 框架和 Htmx 建立單一產品商店的詳細內容。更多資訊請關注PHP中文網其他相關文章！