使用 Django 和 HTMX 创建待办事项应用程序 - 添加新待办事项的部分-Python教程-PHP中文网

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

碧海醫心

发布： 2025-01-05 20:08:39

原创

913人浏览过

在本教程的第三部分，我们实现了待办事项的添加和删除功能。接下来，我们将添加一个表单，用于创建新的待办事项，并利用 htmx 和后端路由处理 post 请求。

表单效果如下：

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

处理 POST 请求

创建新待办事项，通常有两种 POST 路由方法：使用单独的路由（例如 /tasks/create）或复用已有的任务列表路由 /tasks。我们选择后者，因为它更符合 RESTful 和超媒体原则，但两种方法都可行。

由于 URL 已定义，我们只需修改 core/views.py 中的任务视图。为了代码简洁，我们将 POST 请求处理代码放在单独的函数中。

<code class="python">def _create_todo(request):  # ...</code>

登录后复制

在 templates/tasks.html 中，我们添加一个新的表单：

<code class="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">
    <form hx-post="{% url 'tasks' %}" hx-swap="beforeend" hx-target="#todo-items" hx-on:after-request="this.reset()">
      <div class="mb-4">
        <input type="text" name="title" placeholder="Add a new task...">
        <button type="submit">Add</button>
      </div>
    </form>

    <ul class="list bg-base-100 rounded-box shadow-md" id="todo-items">
      {% for todo in todos %}
      {% partialdef todo-item-partial inline %}
      <li class="list-row">
        <input type="checkbox" {% if todo.is_completed %}checked{% endif %} class="checkbox checkbox-lg checkbox-info mr-4">
        {{ todo.title }}
      </li>
      {% endpartialdef %}
      {% endfor %}
    </ul>
  </div>
</div>
{% endblock %}</code>

登录后复制

表单的关键代码在于：

hx-post="{% url 'tasks' %}"：表单将发送 POST 请求到 /tasks URL。
hx-swap="beforeend" 和 hx-target="#todo-items"：将响应插入到 #todo-items 元素（ul 列表）的末尾。如果要添加到顶部，可以使用 afterbegin。
hx-on:after-request="this.reset()"：请求完成后重置表单，方便连续添加任务。

效果演示：

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

轻舟办公

基于AI的智能办公平台

194

查看详情

处理缓慢的请求

为了提升用户体验，我们需要处理网络延迟问题。在 tasks.html 中，我们为提交按钮添加 hx-disable-elt 属性：

<code class="html"><button type="submit" hx-disable-elt>Add</button></code>

登录后复制

对于切换待办事项完成状态的复选框，我们在请求期间使用 hx-on:click 禁用它：

<code class="html"><input type="checkbox" hx-on:click="this.disabled = true" {% if todo.is_completed %}checked{% endif %} class="checkbox checkbox-lg checkbox-info mr-4"></code>

登录后复制

模拟缓慢网络请求后效果：

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