Erstellen einer To-Do-App mit Django und HTMX – Teil: Erstellen des Frontends und Hinzufügen von HTMX

Willkommen zu Teil 3 unserer Serie! In dieser Artikelserie dokumentiere ich mein eigenes Erlernen von HTMX, wobei ich Django für das Backend verwende.
Wenn Sie gerade erst in der Serie angekommen sind, möchten Sie vielleicht zuerst Teil eins und zwei lesen.

Erstellen der Vorlagen und Ansichten

Wir beginnen mit der Erstellung einer Basisvorlage und einer Indexvorlage, die auf eine Indexansicht verweist, die die Todos auflistet, die wir in der Datenbank haben. Wir werden DaisyUI verwenden, eine Erweiterung von Tailwind CSS, um Todos anständig aussehen zu lassen.

So sieht die Seite aus, sobald die Ansichten festgelegt sind und bevor wir HTMX hinzufügen:

Hinzufügen der Ansichten und URLs

Zuerst müssen wir die Datei urls.py im Stammverzeichnis des Projekts aktualisieren, um die URLs einzuschließen, die wir in unserer „Kern“-App definieren werden:

# todomx/urls.py

from django.contrib import admin
from django.urls import include, path # 



<p>Dann definieren wir die neuen URLs für die App und fügen die neue Datei core/urls.py hinzu:<br>
</p>

<pre class="brush:php;toolbar:false"># core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
]

Jetzt können wir die entsprechenden Ansichten in core/views.py erstellen

# core/views.py

from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required


def index(request):
    return redirect("tasks/")


def get_user_todos(user: UserProfile) -> list[Todo]:
    return user.todos.all().order_by("created_at")


@login_required
def tasks(request):
    context = {
        "todos": get_user_todos(request.user),
        "fullname": request.user.get_full_name() or request.user.username,
    }

    return render(request, "tasks.html", context)

Ein paar interessante Dinge hier: Unsere Indexroute (Startseite) leitet einfach zur Aufgaben-URL weiter und zeigt sie an. Dies gibt uns die Freiheit, in Zukunft eine Art Landingpage für die App zu implementieren.

Die Aufgabenansicht erfordert eine Anmeldung und gibt zwei Attribute im Kontext zurück: den vollständigen Namen des Benutzers, der bei Bedarf zu seinem Benutzernamen zusammengeführt wird, und die Aufgabenelemente, sortiert nach Erstellungsdatum (wir können einige Sortieroptionen für den Benutzer hinzufügen). Zukunft).

Jetzt fügen wir die Vorlagen hinzu. Wir werden eine Basisvorlage für die gesamte App haben, die Tailwind CSS und DaisyUI enthält, sowie die Vorlage für die Aufgabenansicht.

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



  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    {% block header %}
    {% endblock %}
  
  



<p>Note that we're adding Tailwind and DaisyUI from a CDN, to keep these articles simpler. For production-quality code, they should be  bundled in your app.</p>

<p>We're using the beta version of DaisyUI 5.0, which includes a new list component which suits our todo items fine.<br>
</p>

<pre class="brush:php;toolbar:false"><!-- core/templates/tasks.html -->

{% extends "_base.html" %}

{% block content %}
<div>



<p>We can now add some Todo items with the admin interface, and run the server, to see the Todos similarly to the previous screenshot. </p>

<p>We're now ready to add some HTMX to the app, to toggle the completion of the item</p>

<h2>
  
  
  Add inline partial templates
</h2>

<p>In case you're new to HTMX, it's a JavaScript library that makes it easy to create dynamic web pages by replacing and updating parts of the page with fresh content from the server. Unlike client-side libraries like React, HTMX focuses on <strong>server-driven</strong> updates, leveraging <strong>hypermedia</strong> (HTML) to fetch and manipulate page content on the server, which is responsible for rendering the updated content, rather than relying on complex client-side rendering and rehydration, and saving us from the toil of serializing to and from JSON just to provide data to client-side libraries.</p>

<p>In short: when we toggle one of our todo items, we will get a new fragment of HTML from the server (the todo item) with its new state.</p>

<p>To help us achieve this we will first install a Django plugin called django-template-partials, which adds support to inline partials in our template, the same partials that we will later return for specific todo items.<br>
</p>

<pre class="brush:php;toolbar:false">❯ uv add django-template-partials
Resolved 24 packages in 435ms
Installed 1 package in 10ms
 + django-template-partials==24.4

Befolgen Sie die Installationsanweisungen und aktualisieren Sie unsere Datei „settings.py“ als solche

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "core",
    "template_partials",  # 



<p>In unserer Aufgabenvorlage definieren wir jedes Aufgabenelement als Inline-Teilvorlage. Wenn wir die Seite neu laden, sollte sie keine visuellen Unterschiede aufweisen.<br>
</p>

<pre class="brush:php;toolbar:false"><!-- core/templates/tasks.html -->

{% extends "_base.html" %}
{% load partials %} <!-- NEW -->

{% block content %}
<div>



<p>The two attributes added are important: the name of the partial, todo-item-partial, will be used to refer to it in our view and other templates, and the inline attribute indicates that we want to keep rendering the partial within the context of its parent template.</p>

<p>With inline partials, you can see the template within the context it lives in, making it easier to understand and maintain your codebase by preserving locality of behavior, when compared to including separate template files.</p>

<h2>
  
  
  Toggling todo items on and off with HTMX
</h2>

<p>To mark items as complete and incomplete, we will implement a new URL and View for todo items, using the PUT method. The view will return the updated todo item rendered within a partial template.</p>

<p>First of all we need to add HTMX to our base template. Again, we're adding straight from a CDN for the sake of simplicity, but for real production apps you should serve them from the application itself, or as part of a bundle. Let's add it in the HEAD section of _base.html, right after Tailwind:<br>
</p>

<pre class="brush:php;toolbar:false">    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- NEW -->
    {% block header %}
    {% endblock %}

Auf core/urls.py werden wir unsere neue Route hinzufügen:

# core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
    path("tasks/<task_id>/", views.toggle_todo, name="toggle_todo"), # 



<p>Dann fügen wir auf core/views.py die entsprechende Ansicht hinzu:<br>
</p>

<pre class="brush:php;toolbar:false"># core/views.py

from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_http_methods # 



<p>In der Return-Anweisung können wir sehen, wie wir Template-Partials nutzen können: Wir geben nur den Partial zurück, indem wir auf seinen Namen todo-item-partial und den Kontext verweisen, der mit dem Namen des Elements übereinstimmt, um das es sich handelt Iteration in der Schleife in task.html.</p>

<p>Wir können jetzt das Ein- und Ausschalten des Elements testen:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284449958.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Es sieht so aus, als würden wir nur clientseitige Arbeit erledigen, aber wenn wir uns das Netzwerk-Tool im Browser ansehen, sehen wir, wie wir PUT-Anfragen versenden und den teilweisen HTML-Code zurückgeben:</p><p>PUT-Anfrage </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284544580.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Antwort</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284614077.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Unsere App ist jetzt HTMX-fähig! Sie können den endgültigen Code hier überprüfen. In Teil 4 werden wir die Möglichkeit hinzufügen, Aufgaben hinzuzufügen und zu löschen.</p>