歡迎來到我們系列的第三篇！在本系列文章中，我記錄了自己對 HTMX 的學習，並使用 Django 作為後端。
如果您剛接觸該系列，您可能需要先查看第一部分和第二部分。
建立模板和視圖
我們將首先建立一個基本模板和一個指向索引視圖的索引模板，該索引視圖將列出資料庫中的待辦事項。我們將使用 DaisyUI（Tailwind CSS 的擴充功能）來使 Todos 看起來更漂亮。
這是設定視圖後、新增 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
]
然後，我們?yōu)閼贸淌蕉x新的 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"),
]
現(xiàn)在我們可以建立對應的視圖了，在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 和視圖。這將使我們能夠在未來自由地為應用程式實現(xiàn)某種登陸頁面。
任務視圖需要登錄，並在上下文中傳回兩個屬性：使用者的全名（如果需要的話會合併到使用者名稱）和待辦事項，按建立日期排序（我們可以在未來）。
現(xiàn)在讓我們來新增模板。我們將為整個應用程式提供一個基本模板，其中包括 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中的循環(huán)中進行迭代。
我們現(xiàn)在可以測試開啟和關閉該項目：
看起來我們只是在做一些客戶端工作，但是檢查瀏覽器中的網(wǎng)頁工具向我們展示瞭如何分派 PUT 請求並返回部分 HTML：
PUT 請求
回覆
我們的應用程式現(xiàn)已 HTMX 化！您可以在此處查看最終代碼。在第 4 部分中，我們將新增新增和刪除任務的功能。
以上是使用 Django 和 HTMX 建立待辦事項應用程式 - 建立前端並新增 HTMX 部分的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Python Web應用程序中有哪些常見的安全漏洞（例如XSS，SQL注入）以及如何緩解它們？
Jun 10, 2025 am 12:13 AM
Web應用安全需重視，Python網(wǎng)站常見漏洞包括XSS、SQL注入、CSRF及文件上傳風險。針對XSS，應使用模板引擎自動轉義、過濾富文本HTML並設置CSP策略；防範SQL注入應採用參數(shù)化查詢或ORM框架，並驗證用戶輸入；防禦CSRF需啟用CSRFToken機制並對敏感操作二次確認；文件上傳漏洞則要限制類型、重命名文件並禁止執(zhí)行權限。遵循規(guī)範與使用成熟工具可有效降低風險，安全需持續(xù)關注與測試。
Python的UNITDEST或PYTEST框架如何促進自動測試？
Jun 19, 2025 am 01:10 AM
Python的unittest和pytest是兩種廣泛使用的測試框架，它們都簡化了自動化測試的編寫、組織和運行。 1.二者均支持自動發(fā)現(xiàn)測試用例並提供清晰的測試結構：unittest通過繼承TestCase類並以test\_開頭的方法定義測試；pytest則更為簡潔，只需以test\_開頭的函數(shù)即可。 2.它們都內置斷言支持：unittest提供assertEqual、assertTrue等方法，而pytest使用增強版的assert語句，能自動顯示失敗詳情。 3.均具備處理測試準備與清理的機制：un
Python如何處理函數(shù)中的可變默認參數(shù)，為什麼這會出現(xiàn)問題？
Jun 14, 2025 am 12:27 AM
Python的函數(shù)默認參數(shù)在定義時只被初始化一次，若使用可變對象（如列表或字典）作為默認參數(shù)，可能導致意外行為。例如，使用空列表作為默認參數(shù)時，多次調用函數(shù)會重複使用同一個列表，而非每次生成新列表。此行為引發(fā)的問題包括：1.函數(shù)調用間數(shù)據(jù)意外共享；2.後續(xù)調用結果受之前調用影響，增加調試難度；3.造成邏輯錯誤且難以察覺；4.對新手和有經驗開發(fā)者均易產生困惑。為避免問題，最佳實踐是將默認值設為None，並在函數(shù)內部創(chuàng)建新對象，例如使用my_list=None代替my_list=[]，並在函數(shù)中初始
將Python應用程序部署到生產環(huán)境中的考慮因素是什麼？
Jun 10, 2025 am 12:14 AM
部署Python應用到生產環(huán)境需關注穩(wěn)定、安全和可維護。首先，使用Gunicorn或uWSGI替代開發(fā)服務器以支持並發(fā)處理；其次，配合Nginx做反向代理以提升性能；第三，按CPU核心數(shù)配置進程數(shù)量以優(yōu)化資源；第四，使用虛擬環(huán)境隔離依賴並凍結版本確保一致性；第五，啟用詳細日誌、集成監(jiān)控系統(tǒng)並設置報警機制便於運維；第六，避免root權限運行應用、關閉調試信息並配置HTTPS保障安全；最後，通過CI/CD工具實現(xiàn)自動化部署減少人為錯誤。
如何將Python用於數(shù)據(jù)分析和與Numpy和Pandas等文庫進行操作？
Jun 19, 2025 am 01:04 AM
pythonisidealfordataanalysisionduetonumpyandpandas.1）numpyExccelSatnumericalComputationswithFast，多dimensionalArraysAndRaysAndOrsAndOrsAndOffectorizedOperationsLikenp.sqrt（）
如何將Python與微服務體系結構中的其他語言或系統(tǒng)集成？
Jun 14, 2025 am 12:25 AM
Python可以很好地與其他語言和系統(tǒng)在微服務架構中協(xié)同工作，關鍵在於各服務如何獨立運行並有效通信。 1.使用標準API和通信協(xié)議（如HTTP、REST、gRPC），Python通過Flask、FastAPI等框架構建API，並利用requests或httpx調用其他語言服務；2.借助消息代理（如Kafka、RabbitMQ、Redis）實現(xiàn)異步通信，Python服務可發(fā)布消息供其他語言消費者處理，提升系統(tǒng)解耦、可擴展性和容錯性；3.通過C/C 擴展或嵌入其他語言運行時（如Jython），實現(xiàn)性
列表，字典和集合綜合如何改善Python中的代碼可讀性和簡潔性？
Jun 14, 2025 am 12:31 AM
Python的列表、字典和集合推導式通過簡潔語法提升代碼可讀性和編寫效率。它們適用於簡化迭代與轉換操作，例如用單行代碼替代多行循環(huán)實現(xiàn)元素變換或過濾。 1.列表推導式如[x2forxinrange(10)]能直接生成平方數(shù)列；2.字典推導式如{x:x2forxinrange(5)}清晰表達鍵值映射；3.條件篩選如[xforxinnumbersifx%2==0]使過濾邏輯更直觀；4.複雜條件亦可嵌入，如結合多條件過濾或三元表達式；但需避免過度嵌套或副作用操作，以免降低可維護性。合理使用推導式能在減少
如何使用__ITER__和__NEXT __在Python中實現(xiàn)自定義迭代器？
Jun 19, 2025 am 01:12 AM
要實現(xiàn)自定義迭代器，需在類中定義__iter__和__next__方法。 ①__iter__方法返回迭代器對象自身，通常為self，以兼容for循環(huán)等迭代環(huán)境；②__next__方法控制每次迭代的值，返回序列中的下一個元素，當無更多項時應拋出StopIteration異常；③需正確跟蹤狀態(tài)並設置終止條件，避免無限循環(huán)；④可封裝複雜邏輯如文件行過濾，同時注意資源清理與內存管理；⑤對簡單邏輯可考慮使用生成器函數(shù)yield替代，但需結合具體場景選擇合適方式。
