现在我们已经在第 3 部分添加了打开和关闭待办事项项目的功能,让我们添加一个表单来创建新的待办事项项目,使用 HTMX 和接受 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 中您可以选择更慢的选项)
让我们看看进展如何:
我们现在已经完成了!在第 5 部分中,我们将在视图中添加一些测试,这可能是比测试客户端代码更好的体验:)
以上是使用 Django 和 HTMX 创建待办事项应用程序 - 添加新待办事项的部分的详细内容。更多信息请关注PHP中文网其他相关文章!