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

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

它看起来像这样：

扩展视图以接受 POST 请求

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

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

def _create_todo(request):  # 



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

<pre class="brush:php;toolbar:false"><!-- 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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173595748091013.jpg?x-oss-process=image/resize,p_40" class="lazy" 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>
      </p>
<form hx-post="{% url 'tasks' %}">
        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 中您可以选择更慢的选项）

让我们看看进展如何：

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