使用 Django 和 HTMX 创建待办事项应用程序 - 创建前端并添加 HTMX 部分
2026-10-22 07:00:48
使用 Django 和 HTMX 创建待办事项应用程序的前端及 HTMX 集成步骤如下：
一、项目结构与依赖配置安装必要依赖
安装 django-template-partials 以支持内联部分模板：pip install django-template-partials
在 settings.py 的 INSTALLED_APPS 中添加：INSTALLED_APPS = [ # ... "template_partials", # ...]
配置 URL 路由
项目根路由 (todomx/urls.py)：from django.contrib import adminfrom django.urls import include, pathurlpatterns = [ path("admin/", admin.site.urls), path("", include("core.urls")), # 包含核心应用路由]
核心应用路由 (core/urls.py)：from django.urls import pathfrom . import viewsurlpatterns = [ path("", views.index, name="index"), path("tasks/", views.tasks, name="tasks"), path("tasks/<int:task_id>/", views.toggle_todo, name="toggle_todo"),]
在 core/views.py 中定义以下视图：
from django.shortcuts import redirect, renderfrom django.contrib.auth.decorators import login_requiredfrom django.views.decorators.http import require_http_methodsfrom .models import UserProfile, Todo # 假设模型已定义def index(request): return redirect("tasks/") # 重定向到任务列表页def get_user_todos(user: UserProfile) -> list[Todo]: return user.todos.all().order_by("created_at")@login_requireddef 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)@require_http_methods(["PUT"])@login_requireddef toggle_todo(request, task_id): todo_item = Todo.objects.get(pk=task_id) todo_item.completed = not todo_item.completed todo_item.save() return render(request, "partials/todo-item-partial.html", {"todo": todo_item})三、前端模板开发基础模板 (_base.html)引入 Tailwind CSS、DaisyUI 和 HTMX：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <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"> <script src="https://unpkg.com/htmx.org@1.9.4"></script><title>Todo App</title></head><body> {% block content %}{% endblock %}</body></html>任务列表页 (tasks.html)继承基础模板并渲染待办事项列表：
{% extends "_base.html" %}{% load partials %}{% block content %}<div class="flex flex-col items-center mx-10 md:mx-20"> <h1 class="text-2xl font-bold m-4">{{ fullname }}'s Tasks</h1> <div class="w-full max-w-2xl"> <ul class="list bg-base-100 rounded-box shadow-md" id="tasks"> {% for todo in todos %} {% partial todo-item-partial inline todo %} {% endfor %} </ul> </div></div>{% endblock %}待办事项部分模板 (partials/todo-item-partial.html)使用 HTMX 实现无刷新状态切换：
{% load partials %}<li class="list-row p-4 border-b" hx-put="{% url 'toggle_todo' todo.id %}" hx-target="#tasks" hx-swap="innerHTML"> <input type="checkbox" class="checkbox checkbox-primary" {% if todo.completed %}checked{% endif %}> <span class="ml-2">{{ todo.title }}</span></li>
状态切换机制
当用户点击复选框时，HTMX 发送 PUT 请求到 toggle_todo 视图。
视图更新数据库后返回部分模板，HTMX 替换 #tasks 区域内容，实现无刷新更新。
关键属性说明
hx-put: 指定 HTTP 方法及目标 URL。
hx-target: 定义响应替换的 DOM 元素。
hx-swap: 控制替换方式（此处为完全替换 innerHTML）。
功能测试
访问任务列表页，点击复选框观察状态切换是否生效。
使用浏览器开发者工具检查 PUT 请求及部分响应。
生产环境优化
替换 CDN 资源为本地静态文件：python manage.py collectstatic
配置 STATICFILES_DIRS 和 STATIC_ROOT 在 settings.py 中。
添加任务
创建新视图处理 POST 请求，返回新增任务的部分模板。
在前端添加表单并通过 HTMX 提交。
删除任务
实现 DELETE 方法路由，返回更新后的列表。
为每个任务添加删除按钮并绑定 HTMX 事件。
通过以上步骤，您已成功集成 Django 与 HTMX，构建了一个动态交互的待办事项应用前端。后续可基于此架构扩展更多功能。
热门标签
