使用 Django 和 HTMX 建立待辦事項應用程式 - 建立前端並新增 HTMX 部分-Python教學-PHP中文網

首頁

後端開發

Python教學

使用 Django 和 HTMX 建立待辦事項應用程式 - 建立前端並新增 HTMX 部分

Susan Sarandon

Jan 06, 2025 am 12:00 AM

歡迎來到我們系列的第三篇！在本系列文章中，我記錄了自己對 HTMX 的學習，並使用 Django 作為後端。
如果您剛接觸該系列，您可能需要先查看第一部分和第二部分。

建立模板和視圖

我們將首先建立一個基本模板和一個指向索引視圖的索引模板，該索引視圖將列出資料庫中的待辦事項。我們將使用 DaisyUI（Tailwind CSS 的擴充功能）來使 Todos 看起來更漂亮。

這是設定視圖後、新增 HTMX 之前頁面的樣子：

Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

新增視圖和 URL

首先，我們需要更新專案根目錄中的 urls.py 文件，以包含我們將在「核心」應用程式中定義的 url：

# todomx/urls.py

from django.contrib import admin
from django.urls import include, path # <-- NEW

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("core.urls")), # <-- NEW
]

登入後複製

然後，我們為應用程式定義新的 URL，新增檔案 core/urls.py:

# core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
]

登入後複製

現在我們可以建立對應的視圖了，在core/views.py

# core/views.py

from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required


def index(request):
    return redirect("tasks/")


def get_user_todos(user: UserProfile) -> list[Todo]:
    return user.todos.all().order_by("created_at")


@login_required
def tasks(request):
    context = {
        "todos": get_user_todos(request.user),
        "fullname": request.user.get_full_name() or request.user.username,
    }

    return render(request, "tasks.html", context)

登入後複製

這裡有一些有趣的事情：我們的索引路由（主頁）將只重定向到任務 URL 和視圖。這將使我們能夠在未來自由地為應用程式實現某種登陸頁面。

任務視圖需要登錄，並在上下文中傳回兩個屬性：使用者的全名（如果需要的話會合併到使用者名稱）和待辦事項，按建立日期排序（我們可以在未來）。

現在讓我們來新增模板。我們將為整個應用程式提供一個基本模板，其中包括 Tailwind CSS 和 DaisyUI，以及任務視圖的模板。

<!-- core/templates/_base.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    {% block header %}
    {% endblock %}
  </head>
  <body>



<p>Note that we're adding Tailwind and DaisyUI from a CDN, to keep these articles simpler. For production-quality code, they should be  bundled in your app.</p>

<p>We're using the beta version of DaisyUI 5.0, which includes a new list component which suits our todo items fine.<br>
</p>

<pre class="brush:php;toolbar:false"><!-- core/templates/tasks.html -->

{% extends "_base.html" %}

{% block content %}
<div>



<p>We can now add some Todo items with the admin interface, and run the server, to see the Todos similarly to the previous screenshot. </p>

<p>We're now ready to add some HTMX to the app, to toggle the completion of the item</p>

<h2>
  
  
  Add inline partial templates
</h2>

<p>In case you're new to HTMX, it's a JavaScript library that makes it easy to create dynamic web pages by replacing and updating parts of the page with fresh content from the server. Unlike client-side libraries like React, HTMX focuses on <strong>server-driven</strong> updates, leveraging <strong>hypermedia</strong> (HTML) to fetch and manipulate page content on the server, which is responsible for rendering the updated content, rather than relying on complex client-side rendering and rehydration, and saving us from the toil of serializing to and from JSON just to provide data to client-side libraries.</p>

<p>In short: when we toggle one of our todo items, we will get a new fragment of HTML from the server (the todo item) with its new state.</p>

<p>To help us achieve this we will first install a Django plugin called django-template-partials, which adds support to inline partials in our template, the same partials that we will later return for specific todo items.<br>
</p>

<pre class="brush:php;toolbar:false">❯ uv add django-template-partials
Resolved 24 packages in 435ms
Installed 1 package in 10ms
 + django-template-partials==24.4

登入後複製

按照安裝說明，我們應該更新我們的settings.py 檔案

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "core",
    "template_partials",  # <-- NEW
]

登入後複製

在我們的任務範本中，我們將每個待辦事項定義為內嵌部分範本。如果我們重新加載頁面，它不應該有任何視覺差異。

<!-- core/templates/tasks.html -->

{% extends "_base.html" %}
{% load partials %} <!-- NEW -->

{% block content %}
<div>



<p>The two attributes added are important: the name of the partial, todo-item-partial, will be used to refer to it in our view and other templates, and the inline attribute indicates that we want to keep rendering the partial within the context of its parent template.</p>

<p>With inline partials, you can see the template within the context it lives in, making it easier to understand and maintain your codebase by preserving locality of behavior, when compared to including separate template files.</p>

<h2>
  
  
  Toggling todo items on and off with HTMX
</h2>

<p>To mark items as complete and incomplete, we will implement a new URL and View for todo items, using the PUT method. The view will return the updated todo item rendered within a partial template.</p>

<p>First of all we need to add HTMX to our base template. Again, we're adding straight from a CDN for the sake of simplicity, but for real production apps you should serve them from the application itself, or as part of a bundle. Let's add it in the HEAD section of _base.html, right after Tailwind:<br>
</p>

<pre class="brush:php;toolbar:false">    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <script src="https://unpkg.com/htmx.org@2.0.4" ></script> <!-- NEW -->
    {% block header %}
    {% endblock %}

登入後複製

在 core/urls.py 上，我們將新增路線：

# core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
    path("tasks/<int:task_id>/", views.toggle_todo, name="toggle_todo"), # <-- NEW
]

登入後複製

然後，在core/views.py上，我們加入對應的視圖：

# core/views.py

from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_http_methods # <-- NEW

# ... existing code

# NEW
@login_required
@require_http_methods(["PUT"])
def toggle_todo(request, task_id):
    todo = request.user.todos.get(id=task_id)
    todo.is_completed = not todo.is_completed
    todo.save()

    return render(request, "tasks.html#todo-item-partial", {"todo": todo})

登入後複製

在return 語句中，我們可以看到如何利用範本部分：透過引用其名稱todo-item-partial 以及與我們要處理的項目名稱相符的上下文，我們只傳回部分在tasks.html中的循環中進行迭代。

我們現在可以測試開啟和關閉該項目：

Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

看起來我們只是在做一些客戶端工作，但是檢查瀏覽器中的網頁工具向我們展示瞭如何分派 PUT 請求並返回部分 HTML：

PUT 請求

Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

回覆

Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

我們的應用程式現已 HTMX 化！您可以在此處查看最終代碼。在第 4 部分中，我們將新增新增和刪除任務的功能。

以上是使用 Django 和 HTMX 建立待辦事項應用程式 - 建立前端並新增 HTMX 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1676

CakePHP 教程

1429

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

Related knowledge

Python與C：學習曲線和易用性 Apr 19, 2025 am 12:20 AM

Python更易學且易用，C 則更強大但複雜。 1.Python語法簡潔，適合初學者，動態類型和自動內存管理使其易用，但可能導致運行時錯誤。 2.C 提供低級控制和高級特性，適合高性能應用，但學習門檻高，需手動管理內存和類型安全。

學習Python：2小時的每日學習是否足夠？ Apr 18, 2025 am 12:22 AM

每天學習Python兩個小時是否足夠？這取決於你的目標和學習方法。 1)制定清晰的學習計劃，2)選擇合適的學習資源和方法，3)動手實踐和復習鞏固，可以在這段時間內逐步掌握Python的基本知識和高級功能。

Python vs.C：探索性能和效率 Apr 18, 2025 am 12:20 AM

Python在開發效率上優於C ，但C 在執行性能上更高。 1.Python的簡潔語法和豐富庫提高開發效率。 2.C 的編譯型特性和硬件控制提升執行性能。選擇時需根據項目需求權衡開發速度與執行效率。

Python vs. C：了解關鍵差異 Apr 21, 2025 am 12:18 AM

Python和C 各有優勢，選擇應基於項目需求。 1)Python適合快速開發和數據處理，因其簡潔語法和動態類型。 2)C 適用於高性能和系統編程，因其靜態類型和手動內存管理。

Python標準庫的哪一部分是：列表或數組？ Apr 27, 2025 am 12:03 AM

pythonlistsarepartofthestAndArdLibrary，herilearRaysarenot.listsarebuilt-In，多功能，和Rused ForStoringCollections，而EasaraySaraySaraySaraysaraySaraySaraysaraySaraysarrayModuleandleandleandlesscommonlyusedDduetolimitedFunctionalityFunctionalityFunctionality。

Python：自動化，腳本和任務管理 Apr 16, 2025 am 12:14 AM

Python在自動化、腳本編寫和任務管理中表現出色。 1)自動化：通過標準庫如os、shutil實現文件備份。 2)腳本編寫：使用psutil庫監控系統資源。 3)任務管理：利用schedule庫調度任務。 Python的易用性和豐富庫支持使其在這些領域中成為首選工具。

科學計算的Python：詳細的外觀 Apr 19, 2025 am 12:15 AM

Python在科學計算中的應用包括數據分析、機器學習、數值模擬和可視化。 1.Numpy提供高效的多維數組和數學函數。 2.SciPy擴展Numpy功能，提供優化和線性代數工具。 3.Pandas用於數據處理和分析。 4.Matplotlib用於生成各種圖表和可視化結果。

Web開發的Python：關鍵應用程序 Apr 18, 2025 am 12:20 AM

Python在Web開發中的關鍵應用包括使用Django和Flask框架、API開發、數據分析與可視化、機器學習與AI、以及性能優化。 1.Django和Flask框架：Django適合快速開發複雜應用，Flask適用於小型或高度自定義項目。 2.API開發：使用Flask或DjangoRESTFramework構建RESTfulAPI。 3.數據分析與可視化：利用Python處理數據並通過Web界面展示。 4.機器學習與AI：Python用於構建智能Web應用。 5.性能優化：通過異步編程、緩存和代碼優

See all articles

使用 Django 和 HTMX 建立待辦事項應用程式 - 建立前端並新增 HTMX 部分

建立模板和視圖

新增視圖和 URL

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題