Erstellen einer To-Do-App mit Django und HTMX – Teil des Hinzufügens neuer Todos

Da wir nun in Teil 3 die Möglichkeit hinzugefügt haben, Aufgabenelemente ein- und auszuschalten, fügen wir ein Formular zum Erstellen neuer Aufgabenelemente hinzu, indem wir HTMX und eine Route verwenden, die POST-Anfragen akzeptiert.

Es wird so aussehen:

Erweitern der Ansicht, um POST-Anfragen zu akzeptieren

Um neue Beiträge zu erstellen, haben wir zwei gängige Optionen für die POST-Route: Eine besteht darin, eine separate Route zu haben, z. B. /tasks/create, und die andere darin, dieselbe Route zu verwenden, die wir bereits zum Auflisten der Aufgaben haben. /Aufgaben. Wir entscheiden uns für Letzteres, da es den REST- und Hypermedia-Praktiken am besten entspricht, aber beides ist in Ordnung.

Da die URL bereits definiert ist, müssen wir nur die Aufgabenansicht in core/views.py ändern. Um den Code sauberer zu halten, behalten wir den Code, der POST-Anfragen verarbeitet, in einer separaten Funktion.

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)

Auf templates/tasks.html werden wir ein neues Formular hinzufügen

<!-- core/templates/tasks.html -->

{% erweitert „_base.html“ %}
{% Teilladung %}

{% Inhalt blockieren %}
<div>



<p>Der gesamte interessante Code befindet sich in der Form tag:</p>

<ul>
<li>
hx-post="{% url 'tasks' %}" gibt an, dass das Formular eine POST-Anfrage an die Aufgaben-URL sendet;</li>
<li>
hx-swap="beforeend" und hx-target="#todo-items" arbeiten zusammen; Es legt fest, dass das Ziel der Antwort das Tag #todo-items (die UL) ist und dass das neue Fragment vor dem Ende der Liste hinzugefügt werden soll. Wenn wir oben neue Elemente hinzufügen möchten, können wir stattdessen afterbegin verwenden.</li>
<li>
hx-on::after-request="this.reset()" setzt das Formular zurück (bereinigt den Eingabetext), nachdem die Anfrage gesendet wurde; Dadurch können wir mehrere Aufgaben gleichzeitig hinzufügen, indem wir das Formular eingeben und auf „Enter“ drücken, um es abzusenden.</li>
</ul>

<p>Sehen wir es uns in Aktion an!</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>
  
  
  Umgang mit langsamen Anfragen
</h2>

<p>Da wir nun neue Elemente hinzufügen können, wollen wir uns mit einem häufigen UX-Problem befassen: der Latenz. Während unsere Tests auf localhost ziemlich schnell sind, können in der realen Welt die Anfragen zum Erstellen und Umschalten von Aufgabeneinträgen ein oder zwei Sekunden dauern, und der Benutzer ist sich möglicherweise nicht sicher, was los ist.</p>

<p>Für die Schaltfläche „Senden“ verwenden wir das Attribut „hx-disable-elt“ und legen es in „tasks.html“ auf die Schaltfläche „Senden“ fest.</p>

<p>jinja<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" <!-- NEU --><br>
       >
        <input type="text" erforderlich name="title" placeholder="Neue Aufgabe hinzufügen" class="input input-bordered flex-1 text-lg" /><br>
        <Schaltfläche>
      </form><br>
<p>Für die Toggle-Funktion können wir die Checkbox während der Anfrage mit hx-on:click</p> deaktivieren

<p>`jinja</p>

<pre class="brush:php;toolbar:false"> <li>

<p>`</p>

<p>Wir können erzwingen, dass die Anfragen langsam sind, indem wir Entwicklertools/-netzwerk öffnen und die Drosselungsoption auf 3G setzen (in Firefox können Sie noch langsamere Optionen wählen)</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>Sehen wir uns an, wie es läuft:</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>Wir sind inzwischen fertig! In Teil 5 werden wir unseren Ansichten einige Tests hinzufügen, was wahrscheinlich eine viel schönere Erfahrung ist als das Testen von clientseitigem Code :)</p>


          

            
        

Das obige ist der detaillierte Inhalt vonErstellen einer To-Do-App mit Django und HTMX – Teil des Hinzufügens neuer Todos. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!