Django Tutorial Teil 5: Erstellung unserer Startseite

Nachdem wir unsere Modelle definiert und einige anfängliche Bibliotheksdatensätze erstellt haben, mit denen wir arbeiten können, ist es an der Zeit, den Code zu schreiben, der diese Informationen den Benutzern präsentiert. Das Erste, was wir tun müssen, ist zu bestimmen, welche Informationen wir auf unseren Seiten anzeigen wollen, und die URLs zu definieren, die verwendet werden sollen, um diese Ressourcen zurückzugeben. Dann werden wir einen URL-Mapper, Views und Templates erstellen, um die Seiten anzuzeigen.

Das folgende Diagramm beschreibt den Hauptdatenfluss und die Komponenten, die bei der Verarbeitung von HTTP-Anfragen und -Antworten erforderlich sind. Da wir bereits das Modell implementiert haben, sind die Hauptkomponenten, die wir erstellen werden:

• URL-Mapper, um die unterstützten URLs (und alle Informationen, die in den URLs codiert sind) an die entsprechenden View-Funktionen weiterzuleiten.
• View-Funktionen, um die angeforderten Daten aus den Modellen abzurufen, HTML-Seiten zu erstellen, die die Daten anzeigen, und die Seiten dem Benutzer zur Ansicht im Browser zurückzusenden.
• Templates, die bei der Datenwiedergabe in den Views verwendet werden.

Wie Sie im nächsten Abschnitt sehen werden, haben wir 5 Seiten zu zeigen, was zu viele Informationen sind, um sie in einem einzigen Artikel zu dokumentieren. Daher konzentriert sich dieser Artikel darauf, wie man die Startseite implementiert, und wir werden die anderen Seiten in einem nachfolgenden Artikel behandeln. Dies sollte Ihnen ein gutes Verständnis darüber vermitteln, wie URL-Mappers, Views und Modelle in der Praxis funktionieren.

Da diese Version von LocalLibrary im Wesentlichen für Endbenutzer schreibgeschützt ist, müssen wir nur eine Einstiegsseite für die Website (eine Startseite) und Seiten bereitstellen, die Listen- und Detailansichten für Bücher und Autoren anzeigen.

Die URLs, die wir für unsere Seiten benötigen, sind:

• catalog/ — Die Startseite (Index).
• catalog/books/ — Eine Liste aller Bücher.
• catalog/authors/ — Eine Liste aller Autoren.
• catalog/book/<id> — Die Detailansicht für ein bestimmtes Buch mit einem primären Schlüssel des Feldes <id> (der Standard). Zum Beispiel wird die URL für das dritte Buch auf der Liste /catalog/book/3 sein.
• catalog/author/<id> — Die Detailansicht für den spezifischen Autor mit einem primären Schlüssel des Feldes <id>. Zum Beispiel wird die URL für den 11. hinzugefügten Autor /catalog/author/11 sein.

Die ersten drei URLs geben die Indexseite, die Bücherliste und die Autorenliste zurück. Diese URLs codieren keine zusätzlichen Informationen, und die Abfragen, die Daten aus der Datenbank abrufen, werden immer gleich sein. Die Ergebnisse, die die Abfragen zurückgeben, hängen jedoch vom Inhalt der Datenbank ab.

Im Gegensatz dazu zeigen die letzten beiden URLs detaillierte Informationen über ein bestimmtes Buch oder einen bestimmten Autor an. Diese URLs codieren die Identität des anzuzeigenden Elements (dargestellt durch <id> oben). Der URL-Mapper extrahiert die codierten Informationen und übergibt sie der View, und die View bestimmt dynamisch, welche Informationen aus der Datenbank abgerufen werden. Indem wir die Informationen in der URL codieren, verwenden wir einen einzigen Satz einer URL-Zuordnung, einer View und eines Templates, um alle Bücher (oder Autoren) zu bearbeiten.

Wie bereits in der Übersicht erwähnt, wird im Rest dieses Artikels beschrieben, wie die Startseite erstellt wird.

Die erste Seite, die wir erstellen, ist die Startseite (catalog/). Die Startseite wird einige statische HTML-Inhalte enthalten, zusammen mit generierten "Zahlen" von verschiedenen Datensätzen in der Datenbank. Damit dies funktioniert, erstellen wir eine URL-Zuordnung, eine View und ein Template.

Als wir die Skeleton-Website erstellt haben, haben wir die Datei locallibrary/urls.py so aktualisiert, dass jedes Mal, wenn eine URL, die mit catalog/ beginnt, empfangen wird, das URLConf-Modul catalog.urls die verbleibende Teilzeichenkette verarbeitet.

Der folgende Codeausschnitt aus locallibrary/urls.py enthält das catalog.urls-Modul:

urlpatterns += [
    path('catalog/', include('catalog.urls')),
]

Wir haben auch eine Platzhalterdatei für das URLConf-Modul mit dem Namen /catalog/urls.py erstellt. Fügen Sie die folgenden Zeilen in diese Datei ein:

urlpatterns = [
    path('', views.index, name='index'),
]

Die Funktion path() definiert Folgendes:

• Ein URL-Muster, das ein leerer String ist: ''. Wir werden URL-Muster im Detail besprechen, wenn wir an den anderen Views arbeiten.
• Eine View-Funktion, die aufgerufen wird, wenn das URL-Muster erkannt wird: views.index, welche die Funktion namens index() in der Datei views.py ist.

Die Funktion path() gibt auch einen name-Parameter an, der ein eindeutiger Bezeichner für diese spezielle URL-Zuordnung ist. Sie können den Namen verwenden, um den Mapper umzukehren, d.h. um dynamisch eine URL zu erstellen, die auf die Ressource verweist, die der Mapper bearbeiten soll. Zum Beispiel können wir den Namen verwenden, um von jeder anderen Seite aus auf unsere Startseite zu verlinken, indem wir den folgenden Link in einem Template hinzufügen:

<a href="{% url 'index' %}">Home</a>.

Eine View ist eine Funktion, die eine HTTP-Anfrage verarbeitet, die erforderlichen Daten aus der Datenbank abruft, die Daten in einer HTML-Seite mit einem HTML-Template rendert und dann das generierte HTML in einer HTTP-Antwort zurückgibt, um die Seite dem Benutzer anzuzeigen. Die Index-View folgt diesem Modell – sie ruft Informationen über die Anzahl der Book, BookInstance, verfügbaren BookInstance und Author-Datensätze ab, die wir in der Datenbank haben, und übergibt diese Informationen einem Template zur Anzeige.

Öffnen Sie catalog/views.py und beachten Sie, dass die Datei bereits die render() Shortcut-Funktion importiert, um eine HTML-Datei mit einem Template und Daten zu generieren:

from django.shortcuts import render

# Create your views here.

Fügen Sie die folgenden Zeilen am Ende der Datei ein:

from .models import Book, Author, BookInstance, Genre

def index(request):
    """View function for home page of site."""

    # Generate counts of some of the main objects
    num_books = Book.objects.all().count()
    num_instances = BookInstance.objects.all().count()

    # Available books (status = 'a')
    num_instances_available = BookInstance.objects.filter(status__exact='a').count()

    # The 'all()' is implied by default.
    num_authors = Author.objects.count()

    context = {
        'num_books': num_books,
        'num_instances': num_instances,
        'num_instances_available': num_instances_available,
        'num_authors': num_authors,
    }

    # Render the HTML template index.html with the data in the context variable
    return render(request, 'index.html', context=context)

Die erste Zeile importiert die Modellklassen, die wir verwenden werden, um auf Daten in allen unseren Views zuzugreifen.

Der erste Teil der View-Funktion ruft die Anzahl der Datensätze unter Verwendung des objects.all()-Attributs auf den Modellklassen ab. Es erhält auch eine Liste von BookInstance-Objekten, die einen Wert von 'a' (verfügbar) im Statusfeld haben. Weitere Informationen darüber, wie auf Modelldaten zugegriffen wird, finden Sie in unserem vorherigen Tutorial Django Tutorial Teil 3: Verwendung von Modellen > Suche nach Datensätzen.

Am Ende der View-Funktion rufen wir die render()-Funktion auf, um eine HTML-Seite zu erstellen und die Seite als Antwort zurückzugeben. Diese Shortcut-Funktion kapselt eine Reihe anderer Funktionen, um einen sehr häufigen Anwendungsfall zu vereinfachen. Die Funktion render() akzeptiert die folgenden Parameter:

• das ursprüngliche request-Objekt, welches ein HttpRequest ist.
• ein HTML-Template mit Platzhaltern für die Daten.
• eine context-Variable, die ein Python-Wörterbuch ist, das die Daten zur Platzierung in die Platzhalter enthält.

Wir werden mehr über Templates und die context-Variable im nächsten Abschnitt sprechen. Beginnen wir mit der Erstellung unseres Templates, damit wir dem Benutzer tatsächlich etwas anzeigen können!

Ein Template ist eine Textdatei, die die Struktur oder das Layout einer Datei (wie z.B. einer HTML-Seite) definiert und Platzhalter verwendet, um den tatsächlichen Inhalt darzustellen.

Eine mit startapp erstellte Django-Anwendung (wie das Skeleton dieses Beispiels) sucht nach Templates in einem Unterverzeichnis namens 'templates' Ihrer Anwendungen. Zum Beispiel wird die render()-Funktion in der gerade hinzugefügten Index-View erwarten, dass die Datei index.html in /django-locallibrary-tutorial/catalog/templates/ liegt und wird einen Fehler auslösen, wenn die Datei nicht vorhanden ist.

Sie können dies überprüfen, indem Sie die vorherigen Änderungen speichern und in Ihrem Browser auf 127.0.0.1:8000 zugreifen - es wird eine ziemlich intuitive Fehlermeldung angezeigt: "TemplateDoesNotExist at /catalog/", und weitere Details.

Templates erweitern

Das Index-Template benötigt standardmäßiges HTML-Markup für Kopf und Körper, zusammen mit Navigationsabschnitten, um zu den anderen Seiten der Website zu verlinken (die wir noch nicht erstellt haben), und zu Abschnitten, die einführende Texte und Buchdaten anzeigen.

Ein großer Teil des HTML- und Navigationsaufbaus wird auf jeder Seite unserer Website gleich sein. Anstatt Boilerplate-Code auf jeder Seite zu duplizieren, können Sie die Django-Templating-Sprache verwenden, um ein Basistemplate zu deklarieren und es dann zu erweitern, indem Sie nur die Teile ersetzen, die für jede einzelne Seite unterschiedlich sind.

Der folgende Codeausschnitt ist ein Beispiel eines Basistemplates aus einer base_generic.html-Datei. Wir werden das Template für LocalLibrary in Kürze erstellen. Das Beispiel unten enthält Standard-HTML mit Abschnitten für einen Titel, eine Seitenleiste und Hauptinhalte, die mit benannten block- und endblock-Template-Tags markiert sind. Sie können die Blöcke leer lassen oder Standardinhalt enthalten, der bei der Wiedergabe von Seiten, die sich von diesem Template ableiten, verwendet wird.

<!doctype html>
<html lang="en">
  <head>
    {% block title %}
      <title>Local Library</title>
    {% endblock %}
  </head>
  <body>
    {% block sidebar %}
      <!-- insert default navigation text for every page -->
    {% endblock %}
    {% block content %}
      <!-- default content text (typically empty) -->
    {% endblock %}
  </body>
</html>

Beim Definieren eines Templates für eine bestimmte Ansicht geben wir zunächst das Basistemplate mithilfe des extends-Template-Tags an — siehe das untenstehende Codebeispiel. Dann deklarieren wir, welche Abschnitte aus dem Template wir ersetzen möchten (falls vorhanden), indem wir block/endblock-Abschnitte wie im Basistemplate verwenden.

Zum Beispiel zeigt der untenstehende Codeausschnitt, wie man das extends-Template-Tag verwendet und den content-Block überschreibt. Das generierte HTML wird den im Basistemplate definierten Code und Aufbau einschließlich des Standardinhalts, den Sie im title-Block definiert haben, enthalten, jedoch den neuen content-Block anstelle des standardmäßigen.

{% extends "base_generic.html" %}

{% block content %}
  <h1>Local Library Home</h1>
  <p>
    Welcome to LocalLibrary, a website developed by
    <em>Mozilla Developer Network</em>!
  </p>
{% endblock %}

Das LocalLibrary-Basistemplate

Wir verwenden den folgenden Codeausschnitt als Basistemplate für die LocalLibrary Website. Wie Sie sehen können, enthält es etwas HTML-Code und definiert Blöcke für title, sidebar und content. Wir haben einen Standardtitel und eine Standardsidebar mit Links zu Liste aller Bücher und Autoren, beide in Blöcken eingeschlossen, um sie in Zukunft leicht ändern zu können.

Erstellen Sie eine neue Datei base_generic.html in /django-locallibrary-tutorial/catalog/templates/ und fügen Sie den folgenden Code in die Datei ein:

<!doctype html>
<html lang="en">
  <head>
    {% block title %}
      <title>Local Library</title>
    {% endblock %}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous">
    <!-- Add additional CSS in static file -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-2">
          {% block sidebar %}
            <ul class="sidebar-nav">
              <li><a href="{% url 'index' %}">Home</a></li>
              <li><a href="">All books</a></li>
              <li><a href="">All authors</a></li>
            </ul>
          {% endblock %}
        </div>
        <div class="col-sm-10 ">{% block content %}{% endblock %}</div>
      </div>
    </div>
  </body>
</html>

Das Template enthält CSS von Bootstrap, um das Layout und die Präsentation der HTML-Seite zu verbessern. Die Verwendung von Bootstrap (oder einem anderen Client-seitigen Webframework) ist ein schneller Weg, um eine ansprechende Seite zu erstellen, die gut auf verschiedenen Bildschirmgrößen angezeigt wird.

Das Basistemplate verweist auch auf eine lokale CSS-Datei (styles.css), die zusätzliche Formatierungen bereitstellt. Erstellen Sie eine styles.css-Datei in /django-locallibrary-tutorial/catalog/static/css/ und fügen Sie den folgenden Code in die Datei ein:

.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

Das Index-Template

Erstellen Sie eine neue HTML-Datei index.html in /django-locallibrary-tutorial/catalog/templates/ und fügen Sie den folgenden Code in die Datei ein. Dieser Code erweitert unser Basistemplate in der ersten Zeile und ersetzt dann den Standard-content-Block für das Template.

{% extends "base_generic.html" %}

{% block content %}
  <h1>Local Library Home</h1>
  <p>
    Welcome to LocalLibrary, a website developed by
    <em>Mozilla Developer Network</em>!
  </p>
  <h2>Dynamic content</h2>
  <p>The library has the following record counts:</p>
  <ul>
    <li><strong>Books:</strong> {{ num_books }}</li>
    <li><strong>Copies:</strong> {{ num_instances }}</li>
    <li><strong>Copies available:</strong> {{ num_instances_available }}</li>
    <li><strong>Authors:</strong> {{ num_authors }}</li>
  </ul>
{% endblock %}

Im Abschnitt Dynamischer Inhalt erklären wir Platzhalter (Template-Variablen) für die Informationen aus der View, die wir einfügen möchten. Die Variablen sind mit doppelten Klammern (Handlebars) eingeschlossen.

Das Wichtigste, das hier zu beachten ist, dass Variablen mit den Schlüssel benannt werden, unter denen wir die Daten im context-Wörterbuch der render()-Funktion unserer View übergeben (siehe Beispiel unten). Variablen werden mit ihren zugehörigen Werten ersetzt, wenn das Template gerendert wird.

context = {
    'num_books': num_books,
    'num_instances': num_instances,
    'num_instances_available': num_instances_available,
    'num_authors': num_authors,
}

return render(request, 'index.html', context=context)

Verweis auf statische Dateien in Templates

Ihr Projekt verwendet wahrscheinlich statische Ressourcen, einschließlich JavaScript, CSS und Bilder. Da die Position dieser Dateien möglicherweise nicht bekannt ist (oder sich ändern könnte), ermöglicht Django Ihnen, den Speicherort in Ihren Templates relativ zur globalen STATIC_URL-Einstellung anzugeben. Die Standardeinstellung der STATIC_URL auf der Skeleton-Website ist "/static/", aber Sie könnten diese auch auf einem Content Delivery Network oder anderswo hosten.

Innerhalb des Templates rufen Sie zuerst das load-Template-Tag auf und geben "static" an, um die Template-Bibliothek hinzuzufügen, wie im Codebeispiel unten gezeigt. Dann können Sie das static-Template-Tag verwenden und die relative URL zur benötigten Datei angeben.

<!-- Add additional CSS in static file -->
{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}" />

Sie können ein Bild auf die gleiche Weise in die Seite einfügen, z.B.:

{% load static %}
<img
  src="{% static 'images/local_library_model_uml.png' %}"
  alt="UML diagram"
  style="width:555px;height:540px;" />

Weitere Informationen zur Arbeit mit statischen Dateien finden Sie unter Verwalten statischer Dateien in der Django-Dokumentation.

Verlinkung zu URLs

Das obige Basistemplate hat das url-Template-Tag eingeführt.

<li><a href="{% url 'index' %}">Home</a></li>

Dieses Tag akzeptiert den Namen einer path()-Funktion, die in Ihrer Datei urls.py aufgerufen wird, und die Werte für alle Argumente, die die zugehörige View von dieser Funktion erhalten soll, und gibt eine URL zurück, die Sie zum Verlinken der Ressource verwenden können.

Konfiguration, wo die Templates zu finden sind

Der Ort, an dem Django nach Templates sucht, ist im TEMPLATES-Objekt in der Datei settings.py angegeben. Die Standard-settings.py (wie für dieses Tutorial erstellt) sieht etwa so aus:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Die Einstellung von 'APP_DIRS': True, ist dabei die wichtigste, da sie Django anweist, nach Templates in einem Unterverzeichnis jeder Applikation im Projekt namens "templates" zu suchen (dies erleichtert das Gruppieren von Templates mit ihrer zugehörigen Applikation zur einfachen Wiederverwendung).

Wir können auch spezifische Orte angeben, an denen Django nach Verzeichnissen suchen soll, indem wir 'DIRS': [] verwenden (aber das ist bisher noch nicht erforderlich).

An diesem Punkt haben wir alle erforderlichen Ressourcen erstellt, um die Startseite anzuzeigen. Starten Sie den Server (python3 manage.py runserver) und öffnen Sie http://127.0.0.1:8000/ in Ihrem Browser. Wenn alles korrekt konfiguriert ist, sollte Ihre Seite wie der folgende Screenshot aussehen.

Hier sind ein paar Aufgaben, um Ihre Vertrautheit mit Modellabfragen, Views und Templates zu testen.

1. Das LocalLibrary Basistemplate enthält einen title-Block. Überschreiben Sie diesen Block im Index-Template und erstellen Sie einen neuen Titel für die Seite.

   Hinweis: Der Abschnitt Templates erweitern erklärt, wie man Blöcke erstellt und einen Block in einem anderen Template erweitert.

2. Ändern Sie die View, um Zählungen für Genres und Bücher zu generieren, die ein bestimmtes Wort enthalten (groß-/kleinschreibungsunabhängig), und übergeben Sie die Ergebnisse an den context. Sie erreichen dies auf ähnliche Weise wie bei der Erstellung und Verwendung von num_books und num_instances_available. Aktualisieren Sie dann das Index-Template, um diese Variablen einzubeziehen.

Wir haben gerade die Startseite unserer Website erstellt - eine HTML-Seite, die eine Anzahl von Datensätzen aus der Datenbank anzeigt und Links zu anderen, noch zu erstellenden Seiten bietet. Unterwegs haben wir grundlegende Informationen zu URL-Maps, Views, Abfragen der Datenbank mit Modellen, Weitergabe von Informationen an ein Template aus einer View und Erstellung und Erweiterung von Templates gelernt.

Im nächsten Artikel werden wir auf diesem Wissen aufbauen, um die verbleibenden vier Seiten unserer Website zu erstellen.

• Ihr erstes Django-App, Teil 3: Views und Templates schreiben (Django-Dokumentation)
• URL-Dispatcher (Django-Dokumentation)
• View-Funktionen (Django-Dokumentation)
• Templates (Django-Dokumentation)
• Verwalten statischer Dateien (Django-Dokumentation)
• Django-Shortcut-Funktionen (Django-Dokumentation)

• Zurück
• Übersicht: Django Webframework (Python)
• Weiter