首页 > 后端开发 > Python教程 > 使用 Django 和 HTMX 创建待办事项应用程序 - 添加新待办事项的部分

使用 Django 和 HTMX 创建待办事项应用程序 - 添加新待办事项的部分

Barbara Streisand
发布: 2025-01-04 10:24:35
原创
999 人浏览过

现在我们已经在第 3 部分添加了打开和关闭待办事项项目的功能,让我们添加一个表单来创建新的待办事项项目,使用 HTMX 和接受 POST 请求的路由。

它看起来像这样:

Creating a To-Do app with Django and HTMX - Part adding new Todos

扩展视图以接受 POST 请求

要创建新帖子,我们有两种常见的 POST 路由选项:一种是使用单独的路由,例如 /tasks/create,另一种是使用我们已经列出任务的相同路由, /任务。我们会选择后者,因为它最符合 REST 和超媒体实践,但两者都很好。

由于 URL 已经定义,我们只需要更改 core/views.py 中的任务视图。为了保持代码简洁,我们将在单独的函数上保留处理 POST 请求的代码。

def _create_todo(request):  # <-- NEW
    title = request.POST.get("title")
    if not title:
        raise ValueError("Title is required")

    todo = Todo.objects.create(title=title, user=request.user)
    return render(request, "tasks.html#todo-item-partial", {"todo": todo})


@require_http_methods(["GET", "POST"])  # <-- NEW
@login_required
def tasks(request):
    if request.method == "POST":  # <-- NEW
        return _create_todo(request)

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

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

登录后复制

在 templates/tasks.html 上我们将添加一个新表单

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

{% 扩展“_base.html” %}
{% 加载部分 %}

{% 块内容 %}
<div>



<p>所有有趣的代码都在表单标签中:</p>

<ul>
<li>
hx-post="{% url 'tasks' %}" 表示表单将向任务 url 发出 POST 请求;</li>
<li>
hx-swap="beforeend" 和 hx-target="#todo-items" 一起工作;它将响应的目标设置为 #todo-items 标记(ul),并且应该在列表末尾之前添加新片段。如果我们想在顶部添加新项目,我们可以使用 afterbegin 来代替。</li>
<li>
hx-on::after-request="this.reset()" 将在请求发送后重置表单(清理输入文本);这将允许我们通过键入并按“Enter”键提交表单来一次添加多个任务。</li>
</ul>

<p>让我们看看它的实际效果!</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173595748091013.jpg" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos" /></p>

<h2>
  
  
  处理缓慢的请求
</h2>

<p>现在我们可以添加新项目了,让我们处理一个常见的用户体验问题:延迟。虽然我们在本地主机上的测试非常快,但在现实世界中,创建和切换待办事项的请求可能需要一两秒,并且用户可能不确定发生了什么。</p>

<p>对于提交按钮,我们将使用 hx-disable-elt 属性,并将其设置为tasks.html`</p>中的提交按钮

<p>金贾<br>
      <form hx-post="{% url 'tasks' %}" <br>
        hx-swap="beforeend" <br>
        hx-target="#todo-items" <br>
        hx-on::after-request="this.reset();"<br>
        hx-disabled-elt="#submit" <!-- 新 --><br>
       >
        <input type="text" required name="title" placeholder="添加新待办事项" class="input input-bordered flex-1 text-lg" /><br>
        <按钮>
      </表格><br>
<p>对于切换功能,我们可以在请求期间使用 hx-on:click 禁用复选框</p>

<p>`金贾</p>

<pre class="brush:php;toolbar:false"> 
登录后复制
  • `

    我们可以通过打开开发者工具/网络并将 Throttling 选项设置为 3G 来强制请求变慢(在 Firefox 中您可以选择更慢的选项)

    Creating a To-Do app with Django and HTMX - Part adding new Todos

    让我们看看进展如何:

    Creating a To-Do app with Django and HTMX - Part adding new Todos

    我们现在已经完成了!在第 5 部分中,我们将在视图中添加一些测试,这可能是比测试客户端代码更好的体验:)

  • 以上是使用 Django 和 HTMX 创建待办事项应用程序 - 添加新待办事项的部分的详细内容。更多信息请关注PHP中文网其他相关文章!

    来源:dev.to
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板