Schritt 4: Verwenden der vollständigen Vorlage „Django-Webprojekt“

  • Artikel

Vorheriger Schritt: Serve static files, add pages, and use template inheritance (Bereitstellen statischer Dateien, Hinzufügen von Seiten und Verwenden von Vorlagenvererbung)

Nachdem Sie nun die Grundlagen von Django in Visual Studio kennengelernt haben, können Sie die vollständigere App, die durch die Vorlage „Django Web Project“ (Django-Webprojekt) bereitgestellt wird, leicht nachvollziehen.

Dieser Schritt befasst sich mit den folgenden Inhalten:

  • Erstellen einer umfangreicheren Django-Web-App mithilfe der Vorlage „Django-Webprojekt“ und Informationen zur Projektstruktur (Schritt 4-1).
  • Informationen zu Ansichten und Seitenvorlagen, die mit der dreiseitigen Projektvorlage erstellt wurden. Diese Seiten erben von einer Vorlage für die Basisseite und verwenden statische JavaScript-Bibliotheken wie etwa jQuery und Bootstrap (Schritt 4-2).
  • Informationen zum URL-Routing, das von der Vorlage bereitgestellt wird (Schritt 4-3).

Durch die Vorlage wird auch Standardauthentifizierung bereitgestellt, die in Schritt 5 beschrieben wird.

Schritt 4-1: Erstellen eines Projekts aus der Vorlage

  1. Navigieren Sie in Visual Studio zum Projektmappen-Explorer. Klicken Sie mit der rechten Maustaste auf die Projektmappe LearningDjango, die Sie in diesem Tutorial bereits erstellt haben. Wählen Sie dann Hinzufügen>Neues Projekt aus. (Wenn Sie stattdessen eine neue Projektmappe verwenden möchten, klicken Sie stattdessen auf Datei>Neu>Projekt.)

  2. Suchen Sie im Dialogfeld Neues Projekt nach der Vorlage Django Web Project (Django-Webprojekt), und wählen Sie sie aus. Nennen Sie das Projekt „DjangoWeb“, und wählen Sie dann Erstellen aus.

  3. Da die Vorlage eine Datei requirements.txt enthält, werden Sie von Visual Studio zum Angeben des Speicherorts zum Installieren der Abhängigkeiten aufgefordert. Wenn Sie dazu aufgefordert werden, wählen Sie die Option In einer virtuellen Umgebung installieren aus. Klicken Sie im Dialogfeld Virtuelle Umgebung hinzufügen auf Erstellen, um die Standardwerte zu übernehmen.

  4. Sobald das Einrichten der virtuellen Umgebung durch Visual Studio beendet wurde, befolgen Sie die Anweisungen, die in der Datei readme.html angezeigt werden, um einen Django-Superuser (also einen Administrator) zu erstellen. Klicken Sie mit der rechten Maustaste auf das Visual Studio-Projekt, wählen Sie den Befehl Python>Django-Administrator erstellen aus, und befolgen Sie dann die Anweisungen. Stellen Sie sicher, dass Sie Ihren Benutzernamen und das Kennwort für die Nutzung der Authentifizierungsfeatures der App sicher aufbewahren.

  5. Legen Sie das Projekt DjangoWeb als Standardprojekt für die Visual Studio-Projektmappe fest. Klicken Sie hierzu mit der rechten Maustaste im Projektmappen-Explorer auf das Projekt, und wählen Sie die Option Als Startprojekt festlegen aus. Das Startprojekt, das fett formatiert angezeigt wird, wird ausgeführt, wenn Sie den Debugger starten.

    Solution Explorer showing the DjangoWeb project as the startup project.

  6. Wählen Sie zum Ausführen des Servers Debuggen>Debuggen starten (F5) aus, oder verwenden Sie hierzu die Schaltfläche Webserver auf der Symbolleiste.

    Run web server toolbar button in Visual Studio.

  7. Die von der Vorlage erstellte App verfügt über drei Seiten: „Home“ (Startseite), „About“ (Info) und „Contact“ (Kontakt). Sie können über die Navigationsleiste zwischen den einzelnen Seiten navigieren. Nehmen Sie sich etwas Zeit, um sich mit den verschiedenen Teilen der App vertraut zu machen. Verwenden Sie für die Authentifizierung bei der App über den Anmelden-Befehl die Administratoranmeldeinformationen, die Sie zuvor erstellt haben.

    Full browser view of the Django Web Project app.

  8. Die von der Vorlage „Django-Webprojekt“ erstellte App verwendet Bootstrap für ein dynamisches Layout, das sich den Formfaktoren tragbarer Geräte anpasst. Ändern Sie die Größe des Browserfensters in eine schmale Ansicht, wenn Sie das dynamische Layout testen möchten. Dadurch wird der Inhalt vertikal gerendert, und die Navigationsleiste wird zu einem Menüsymbol.

    Mobile (narrow) view of the Django Web Project app.

  9. Für die folgenden Abschnitte kann die App weiterhin ausgeführt werden.

    Wenn Sie die App beenden und ein Commit der Änderungen für die Quellcodeverwaltung ausführen möchten, öffnen Sie in Team Explorer die Seite Änderungen. Klicken Sie mit der rechten Maustaste auf den Ordner für die virtuelle Umgebung (vermutlich env), und wählen Sie die Option Diese lokalen Elemente ignorieren aus.

Überprüfen des von der Vorlage erstellten Ergebnisses

Die Vorlage „Django-Webprojekt“ erstellt weitestgehend die folgende Struktur:

  • Dateien im Projektstamm:
    • manage.py: Das Django-Verwaltungsprogramm.
    • db.sqlite3: Eine SQLite-Standarddatenbank.
    • requirements.txt: Enthält eine Abhängigkeit von Django 1.x.
    • readme.html: Eine Datei, die nach dem Erstellen des Projekts in Visual Studio angezeigt wird. Befolgen Sie wie im vorherigen Abschnitt erwähnt die Anweisungen zum Erstellen eines Administratorkontos für die App.
  • Der App-Ordner enthält alle App-Dateien, einschließlich Ansichten, Modellen, Tests, Formularen, Vorlagen und statischen Dateien (siehe Schritt 4-2). In der Regel sollte dieser Ordner umbenannt werden, damit er einen aussagekräftigeren App-Namen erhält.
  • Der Ordner DjangoWeb (Django-Projekt) enthält die typischen Projektdateien eines Django-Projekts: __init__.py, settings.py, urls.py und wsgi.py. Die Datei settings.py ist bereits mithilfe der Projektvorlage für die App und die Datenbankdatei konfiguriert. Die Datei urls.py ist auch bereits mit den Routen zu allen App-Seiten eingerichtet, einschließlich des Anmeldeformulars.

Frage: Ist es möglich, eine virtuelle Umgebung für andere Visual Studio-Projekte freizugeben?

Antwort: Ja, aber denken Sie daran, dass verschiedene Projekte im Laufe der Zeit wahrscheinlich unterschiedliche Pakete verwenden. Daher muss eine freigegebene virtuelle Umgebung alle Pakete für alle Projekte enthalten, die sie verwenden.

Wenn Sie dennoch eine vorhandene virtuelle Umgebung verwenden möchten, führen Sie die folgenden Schritte aus:

  1. Wenn Sie aufgefordert werden, Abhängigkeiten in Visual Studio zu installieren, wählen Sie die Option Ich führe die Installation selbst durch aus.
  2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten Python-Umgebungen, und wählen Sie die Option Vorhandene virtuelle Umgebung hinzufügen aus.
  3. Navigieren Sie zum Ordner mit der virtuellen Umgebung, wählen Sie ihn aus, und klicken Sie anschließend auf OK.

Schritt 4-2: Informationen zu den Ansichten und Seitenvorlagen, die von der Projektvorlage erstellt wurden

Wie Sie beim Ausführen des Projekts festgestellt haben, verfügt die App über drei Ansichten: „Startseite“, „Info“ und „Kontakt“. Der Code für diese Ansichten befindet sich in der Datei views.py. Jede Ansichtsfunktion ruft django.shortcuts.render mit dem Pfad zu einer Vorlage und einem einfachen Wörterbuchobjekt auf. Die Seite „Info“ wird beispielsweise von der about-Funktion behandelt:

def about(request):
    """Renders the about page."""
    assert isinstance(request, HttpRequest)
    return render(
        request,
        'app/about.html',
        {
            'title':'About',
            'message':'Your application description page.',
            'year':datetime.now().year,
        }
    )

Vorlagen befinden sich im Ordner templates/app der App (app sollte dabei in der Regel in den Namen der tatsächlichen App umbenannt werden). Die Basisvorlage layout.html ist am umfangreichsten. Die Datei layout.html bezieht sich auf alle erforderlichen statischen Dateien (JavaScript und CSS). Die layout.html-Datei definiert auch einen Block namens „Content“, der andere Seiten außer Kraft setzen und einen anderen Block namens „Skripts“ bereitstellt. Die folgenden annotierten Auszüge aus layout.html Datei zeigen diese spezifischen Bereiche an:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!-- Define a viewport for Bootstrap's responsive rendering -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - My Django Application</title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
    <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>
<body>
    <!-- Navbar omitted -->

    <div class="container body-content">

<!-- "content" block that pages are expected to override -->
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; {{ year }} - My Django Application</p>
        </footer>
    </div>

<!-- Additional scripts; use the "scripts" block to add page-specific scripts.  -->
    <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
    <script src="{% static 'app/scripts/respond.js' %}"></script>
{% block scripts %}{% endblock %}

</body>
</html>

Die einzelnen Seitenvorlagen about.html, contact.html und index.html erweitern alle die Basisvorlage layout.html. Die Vorlagendatei about.html ist die einfachste Datei und weist die Tags {% extends %} und {% block content %} auf:

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

Die Vorlagendateien index.html und contact.html verwenden die gleiche Struktur und stellen umfangreicheren Inhalt im Block „content“ bereit.

Im Ordner templates/app befindet sich ebenso eine vierte Seite, login.html zusammen mit loginpartial.html, die über {% include %} in layout.html verschoben wird. Diese Vorlagendateien werden bei der Authentifizierung in Schritt 5 näher erläutert.

Frage: Können {% block %} und {% endblock %} in der Django-Seitenvorlage eingerückt werden?

Antwort: Ja. Django-Seitenvorlagen funktionieren problemlos mit eingezogenen Blocktags, etwa zur Ausrichtung in den entsprechenden übergeordneten Elementen. Um eindeutig anzuzeigen, wo die Blocktags platziert werden, ziehen Visual Studio-Seitenvorlagen die Blocktags nicht ein.

Schritt 4-3: Informationen zum URL-Routing, das von der Vorlage erstellt wurde

Die Datei urls.py des Django-Projekts, die von der Vorlage „Django-Webprojekt“ erstellt wurde, enthält den folgenden Code:

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

Die ersten drei URL-Muster werden direkt den Ansichten home, contact und about in der Datei views.py der App zugeordnet. Die Muster ^login/$ und ^logout$ verwenden hingegen integrierte Django-Ansichten anstelle der von der App definierten Ansichten. Auch die Aufrufe der url-Methode enthalten zusätzliche Daten, um die Ansicht anzupassen. Diese Aufrufe werden in Schritt 5 näher beschrieben.

Frage: Warum verwendet das URL-Muster „about“ in dem Projekt, das ich erstellt habe, den Ausdruck „^about“ anstatt „^about$“, wie hier dargestellt?

Antwort: Das nachgestellte „$“ im regulären Ausdruck wurde in vielen Versionen der Projektvorlage versehentlich weggelassen. Das URL-Muster funktioniert perfekt für eine Seite namens „about“. Ohne das nachgestellte '$' entspricht das URL-Muster jedoch auch URLs wie „about=django“, „about09876“, „aboutoflaughter“ und so weiter. Das nachstehende Zeichen „$“ wird hier verwendet, um ein URL-Muster zu erstellen, das nur mit „about“ übereinstimmt.

Nächste Schritte

Authentifizieren von Benutzern bei Django

Ausführlichere Informationen