Création d'une application To-Do avec Django et HTMX - Partie ajoutant de nouveaux Todos

Maintenant que nous avons ajouté la possibilité d'activer et de désactiver les éléments de tâche dans la partie 3, ajoutons un formulaire pour créer de nouveaux éléments de tâche, en utilisant HTMX et une route qui accepte les requêtes POST.

Ça va ressembler à ça :

Extension de la vue pour accepter les requêtes POST

Pour créer de nouvelles publications, nous avons deux options courantes pour la route POST : l'une consiste à avoir une route distincte, telle que /tasks/create, et l'autre consiste à utiliser la même route que celle dont nous disposons déjà pour lister les tâches, /tâches. Nous opterons pour cette dernière solution, si elle adhère mieux aux pratiques REST et hypermédia, mais les deux vont bien.

Comme l'URL est déjà définie, il nous suffit de changer la vue des tâches dans core/views.py. Pour garder le code plus propre, nous conserverons le code qui gère les requêtes POST sur une fonction distincte.

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)

Sur templates/tasks.html nous ajouterons un nouveau formulaire

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

{% étend "_base.html" %}
{% charger les partiels %}

{% bloquer le contenu %}
<div>



<p>Tout le code intéressant est dans la balise form :</p>

<ul>
<li>
hx-post="{% url 'tasks' %}" indique que le formulaire fera une requête POST à ​​l'url des tâches ;</li>
<li>
hx-swap="beforeend" et hx-target="#todo-items" fonctionnent ensemble ; il définit la cible de la réponse comme étant la balise #todo-items (l'ul) et qu'il doit ajouter le nouveau fragment avant la fin de la liste. Si nous voulions ajouter de nouveaux éléments en haut, nous pourrions utiliser afterbegin à la place.</li>
<li>
hx-on::after-request="this.reset()" réinitialisera le formulaire (nettoiera le texte saisi) après l'envoi de la demande ; cela nous permettra d'ajouter plusieurs tâches à la fois, en tapant et en appuyant sur "Entrée" pour soumettre le formulaire.</li>
</ul>

<p>Voyons-le en action !</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173595748091013.jpg"  class="lazy" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos" /></p>

<h2>
  
  
  Gérer les demandes lentes
</h2>

<p>Maintenant que nous pouvons ajouter de nouveaux éléments, abordons un problème UX courant : la latence. Bien que nos tests sur localhost soient assez rapides, dans le monde réel, les demandes de création et de basculement d'éléments à faire peuvent prendre une seconde ou deux, et l'utilisateur peut ne pas être sûr de ce qui se passe.</p>

<p>Pour le bouton de soumission, nous utiliserons l'attribut hx-disable-elt et le définirons sur le bouton de soumission, dans Tasks.html`</p>

<p>jinja<br>
      <form hx-post="{% url 'tâches' %}" <br>
        hx-swap="avant-fin" <br>
        hx-target="#todo-items" <br>
        hx-on::after-request="this.reset();"<br>
        hx-disabled-elt="#submit" <!-- NOUVEAU --><br>
       >
        <input type="text" requis name="title" placeholder="Ajouter une nouvelle tâche" class="input input-bordered flex-1 text-lg" /><br>
        <bouton>
      </formulaire><br>
<p>Pour la fonction bascule, on peut désactiver la case à cocher lors de la requête en utilisant hx-on:click</p>

<p>`jinja</p>

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

<p>`</p>

<p>Nous pouvons forcer la lenteur des requêtes en ouvrant les outils de développement/réseau et en réglant l'option Throttling sur 3G (dans Firefox, vous pouvez choisir des options encore plus lentes)</p>

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

<p>Vérifions comment ça se passe :</p>

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

<p>Nous avons terminé maintenant ! Dans la partie 5, nous ajouterons quelques tests à nos vues, ce qui est probablement une expérience bien plus agréable que de tester du code côté client :)</p>


          

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!