在现代 web 开发中，用户体验的优化至关重要，特别是对于待办事项应用这类需要频繁交互的工具。在本教程中，我们将深入探讨如何使用 Django 和 HTMX 创建一个高效的待办事项应用，专注于待办事项的添加和删除功能。无论你是前端开发的新手，还是后端技术的老手，这个过程都将为你提供宝贵的实践经验。

1. 添加新待办事项的表单设计

首先，我们需要设计一个简洁明了的表单来添加新的待办事项。我们将在 templates/tasks.html 中添加如下代码：

<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="添加新任务..." required>
        <button type="submit" hx-disable-elt>添加</button>
    </div>
</form>

在这个表单中，hx-post 属性会将表单数据发送到 /tasks 路由，而 hx-swap 和 hx-target 属性则确保新的待办事项能够实时更新到页面上，而无需刷新整个页面。值得注意的是，hx-on:after-request="this.reset()" 将在添加任务后自动清空输入框，使得用户可以方便地继续添加其他任务。

2. 处理 POST 请求

接下来，我们需要在 core/views.py 中处理 POST 请求。我们将创建一个 _create_todo 的函数，专门用于处理新待办事项的创建。这是确保代码清晰且易于维护的好方法。

def _create_todo(request):
    if request.method == 'POST':
        title = request.POST.get('title')
        new_todo = Todo.objects.create(title=title)
        return JsonResponse({'title': new_todo.title, 'id': new_todo.id})

在这个函数中，我们从 POST 请求中获取待办事项的标题，并通过 Django 的 ORM 创建新的待办事项。我们返回一个 JSON 响应，其中包含新任务的标题和 ID，以便在前端更新页面内容。

3. 优化用户体验

为了提升用户体验，我们需要处理可能的网络延迟。在表单提交时，用户可能会因为网络较慢而感到焦虑，因此，我们在按钮上添加了 hx-disable-elt 属性，使得在请求进行时，按钮会被禁用，避免重复提交。

<button type="submit" hx-disable-elt>添加</button>

此外，对于每个待办事项的复选框，我们也可以在请求期间禁用它，以防止用户在提交任务时点击复选框，导致状态的不一致。

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

4. 实现待办事项的删除功能

除了添加新任务，我们还需要实现待办事项的删除功能。我们可以为每个待办事项添加一个删除按钮，用户在点击时会发送 DELETE 请求。

在 templates/tasks.html 中，我们可以这样添加删除按钮：

<button hx-delete="{% url 'delete_task' todo.id %}" hx-target="#todo-items" hx-swap="outerHTML">删除</button>

这里的 hx-delete 属性会发送 DELETE 请求到服务器，删除指定的待办事项。通过 hx-target 和 hx-swap，我们可以确保待办事项列表在删除后即时更新。

5. 小结与展望

至此，我们已经成功实现了一个基本的待办事项应用，用户可以方便地添加和删除任务。通过 Django 和 HTMX 的结合，我们可以轻松处理用户的交互，使得应用变得更加流畅和高效。

在接下来的部分中，我们将进一步探讨如何为这个应用添加视图层测试，确保我们的代码在不断迭代中保持高质量。通过这种方式，我们不仅能提高应用的可维护性，还能在用户体验上持续优化。

希望这个教程能为你提供灵感，帮助你在 Django 和 HTMX 的使用上更进一步！如需获取更多相关内容，欢迎关注我们的后续文章！