使用 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 部分中，我們將在視圖中添加一些測試，這可能是比測試客戶端程式碼更好的體驗:)