Django 및 HTMX를 사용하여 To-Do 앱 만들기 - 새 Todo를 추가하는 부분

이제 Part 3에 할 일 항목을 켜고 끄는 기능을 추가했으므로 HTMX와 POST 요청을 허용하는 경로를 사용하여 새 Todo 항목을 생성하는 양식을 추가해 보겠습니다.

다음과 같이 표시됩니다.

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>이제 새 항목을 추가할 수 있으므로 일반적인 UX 문제인 대기 시간을 처리해 보겠습니다. localhost에 대한 테스트는 매우 빠르지만 실제로는 할 일 항목을 생성하고 전환하는 요청에 1~2초 정도 걸릴 수 있으며 사용자는 무슨 일이 일어나고 있는지 확신할 수 없습니다.</p>

<p>제출 버튼의 경우 hx-disable-elt 속성을 활용하고 task.html`</p>에서 제출 버튼으로 설정하겠습니다.

<p>진자<br>
      <form hx-post="{% url 'tasks' %}" <br>
        hx-swap="종료 전" <br>
        hx-target="#todo-items" <br>
        hx-on::after-request="this.reset();"<br>
        hx-disabled-elt="#submit" <!-- 신규 --><br>
       >
        <input type="text" 필수 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"> <li>

<p>`</p>

<p>개발자 도구/네트워크를 열고 제한 옵션을 3G로 설정하여 요청을 강제로 느리게 할 수 있습니다(Firefox에서는 더 느린 옵션을 선택할 수도 있습니다)</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173595748646074.jpg" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos"></p>

<p>어떻게 진행되는지 확인해 보세요:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173595748873709.jpg" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos"></p>

<p>이제 끝났어요! 5부에서는 뷰에 몇 가지 테스트를 추가할 예정인데, 이는 아마도 클라이언트 측 코드를 테스트하는 것보다 훨씬 더 좋은 경험일 것입니다. :)</p>


          

            
        

위 내용은 Django 및 HTMX를 사용하여 To-Do 앱 만들기 - 새 Todo를 추가하는 부분의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!