本系列文章的第三部分带您深入学习如何结合 htmx 和 django 构建动态待办事项列表。如果您错过了前两部分，建议先阅读。
模板和视图的创建
我们将创建一个基础模板和一个指向索引视图的索引模板，该视图列出数据库中的待办事项。我们将使用 DaisyUI（Tailwind CSS 的扩展）来美化界面。
这是添加 htmx 之前的页面截图：
视图和 URL 的添加
首先，更新项目根目录中的 urls.py 文件，以包含我们在“核心”应用程序中定义的 URL：
立即学习“前端免费学习笔记（深入）”；
# todomx/urls.pyfrom django.contrib import adminfrom django.urls import include, path
接下来，为应用程序定义新的 URL，创建一个新的文件 core/urls.py：
# core/urls.pyfrom django.urls import pathfrom . import viewsurlpatterns = [ path("", views.index, name="index"), path("tasks/", views.tasks, name="tasks"), path("tasks//", views.toggle_todo, name="toggle_todo"),]
然后创建相应的视图，位于 core/views.py：
# core/views.pyfrom django.shortcuts import redirect, renderfrom .models import userprofile, todofrom django.contrib.auth.decorators import login_requiredfrom django.views.decorators.http import require_http_methodsfrom django.http import HttpResponsedef 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})
索引路由将重定向到任务视图。任务视图需要登录，并返回用户的全名和待办事项列表。
接下来是模板。我们将为整个应用程序创建一个基础模板，包含 Tailwind CSS 和 DaisyUI，以及任务视图的模板：
{# _base.html #}
{# tasks.html #}{% extends "_base.html" %}{% load partials %}{% block content %} {{ fullname }}'s tasks
{% for todo in todos %} {% partial todo-item-partial inline todo %} {% endfor %}
{% endblock %}
{# partials/todo-item-partial.html #}{% load partials %}我们从 CDN 添加 Tailwind 和 DaisyUI，生产环境应捆绑到应用程序中。我们使用 DaisyUI 5.0 测试版。
添加内联部分模板
我们将安装 django-template-partials 插件：
pip install django-template-partials
更新 settings.py 文件：
INSTALLED_APPS = [ # ... "template_partials", # ...]
在 tasks.html 中，我们将每个待办事项定义为内联部分模板。
使用 htmx 切换待办事项完成状态
我们将使用 PUT 方法为待办事项实现一个新的 URL 和视图。该视图将返回更新的待办事项的部分模板。
在 _base.html 中添加 htmx：
在 core/urls.py 中添加新路由： (已在前面添加)
在 core/views.py 中添加视图： (已在前面添加)
现在，您可以测试切换待办事项的完成状态。网络工具将显示 PUT 请求和部分 HTML 响应。
应用程序已 htmx 化！ 下一部分将添加添加和删除任务的功能。
以上就是使用 Django 和 HTMX 创建待办事项应用程序 – 创建前端并添加 HTMX 部分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1355361.html
微信扫一扫 
支付宝扫一扫 
