Lernprogramm: Verwenden der vollständigen Django-Webprojektvorlage in Visual Studio

Artikel
02/07/2025

In diesem Artikel wird Schritt 4 in der Lernprogrammreihe Arbeiten mit dem Django-Webframework in Visual Studiopräsentiert.

Bei den vorherigen Schritten in dieser Tutorialreihe wurden eine Visual Studio-Projektmappe und Django-Projekte für zwei Anwendungen erstellt. BasicProject ist eine minimale App basierend auf der Vorlage "Blank Django Web Project", und "HelloDjangoApp" verwendet die Vorlage "Django 1.9 App", um statische Dateien mit Seitenansichten aus HTML-Vorlagen bereitzustellen.

In Schritt 4 fügen Sie der Lösung eine dritte Django-App basierend auf der vollständigen Django Web Project Vorlage hinzu. Diese Vorlage unterstützt Sie beim Erstellen einer vollständigeren Django-App mit drei Seiten, die von einer Basisseitenvorlage erben. Die App verwendet statische JavaScript-Bibliotheken wie jQuery und Bootstrap. Die Authentifizierungsfunktionen der Vorlage werden im letzten Schritt der Tutorialreihebeschrieben.

In Schritt 4 des Lernprogramms erfahren Sie, wie Sie:

Erstellen einer vollständigeren Django-Web-App mithilfe der Vorlage Django Web Project
Überprüfen der von der Vorlage bereitgestellten Django-Projektstruktur
Erkunden der Ansichten und Seitenvorlagen, die von der Projektvorlage erstellt wurden
Überprüfen des von der Vorlage bereitgestellten URL-Routings

Voraussetzungen

Eine Visual Studio-Projektmappe, die in Schritt 1: Visual Studio-Projekt und -Projektmappe erstellen erstellt wurde, die die Vorlage „Leeres Django-Webprojekt“ verwendet.
Lesen Sie den Abschnitt Voraussetzungen In Schritt 1 dieser Lernprogrammreihe finden Sie Details zu Django-Vorlagenversionen, Visual Studio-Projekten im Vergleich zu Django-Projekten und python-Entwicklung auf dem Mac.
(Optional) Lesen Sie die Anweisungen in den vorherigen Schritten für einen End-to-End Django-Workflow in Visual Studio:
- Schritt 2: Erstellen einer App mit Ansichten und Seitenvorlagen
- Schritt 3: Bereitstellen statischer Dateien und Verwenden von HTML-Vorlagen

Projekt aus Vorlage erstellen

Führen Sie die folgenden Schritte aus, um die Django Web App aus der vollständigen Django Web Project Vorlage zu erstellen:

Wechseln Sie in Visual Studio zum Projektmappen-Explorer, klicken Sie mit der rechten Maustaste auf die LearningDjango Projektmappe, und wählen Sie Hinzufügen>Neues Projektaus.

Anmerkung

Schritt 1 der Lernprogrammreihe erstellt die LearningDjango Visual Studio-Lösung, um alle in dieser Reihe beschriebenen Django-Projekte zu enthalten. Indem Sie alle Ihre Django-Projekte in derselben Lösung beibehalten, können Sie einfach zwischen verschiedenen Dateien zum Vergleich wechseln.

Wenn Sie eine separate Visual Studio-Projektmappe für das Django-Projekt in diesem Schritt des Tutorials bevorzugen, wählen Sie stattdessen Datei>Neu>Projekt aus.
Suchen Sie im Dialogfeld Neues Projekt hinzufügen nach "Django", wählen Sie die Vorlage Django Web Project aus, und wählen Sie Nextaus.
Konfigurieren Sie Ihr neues Projekt:
1. Legen Sie den Namen des Projekts auf DjangoWebfest.
2. Geben Sie den Speicherort für Visual Studio an, um das Projekt zu speichern. (Der Standardwert ist der aktuelle Speicherort für die Lösung und vorhandene Django-Projekte.)
Wählen Sie Erstellen aus.

Erstellen einer virtuellen Umgebung

Nachdem Visual Studio die Projekterstellung initiiert hat, sollten Sie die Meldung Die Python-Paketspezifikationsdatei „requirements.txt“ wurde im Projekt „DjangoWeb“ erkannt. sehen:

Die Meldung gibt an, dass die ausgewählte Vorlage eine requirements.txt Datei enthält, die Sie zum Erstellen einer virtuellen Umgebung für das Projekt verwenden können.

Wichtig

Wenn die Meldungsaufforderung nicht angezeigt wird, treten möglicherweise Fehler auf, wenn Sie versuchen, den Django-Superbenutzer im nächsten Abschnitt zu erstellen.

Vergewissern Sie sich, dass Visual Studio die requirements.txt Datei für das Projekt erkennt. Erweitern Sie im Projektmappen-Explorerden DjangoWeb Projektordner, und öffnen Sie die requirements.txt Datei. Visual Studio sollte die Meldungsaufforderung wie erwartet anzeigen.

Führen Sie die folgenden Schritte aus, um die virtuelle Umgebung einzurichten:

Wählen Sie in der Meldung den Link zum Installieren oder erstellen Sie eine virtuelle Umgebung.
Wählen Sie im Dialogfeld Virtuelle Umgebung hinzufügen die Option Erstellen aus, um die Standardwerte zu übernehmen.

Django Super-Benutzer erstellen

Nachdem Visual Studio das DjangoWeb- Projekt erstellt hat, wird das Projekt readme.html Datei geöffnet. Die Datei enthält Anweisungen zum Erstellen eines Django-Superbenutzers (d. h. ein Administrator) für das Projekt.

Führen Sie die folgenden Schritte aus, um einen Django-Superbenutzer zu erstellen:

Klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf das DjangoWeb Projekt, wählen Sie Pythonaus, und wählen Sie dann Django Create Superuseraus:
Geben Sie an der Eingabeaufforderung Kontodetails für das Projekt ein, einschließlich Benutzername, Kennwort und E-Mail-Adresse.

Sie müssen keine Sicherheitsanmeldeinformationen für ein vorhandenes Konto verwenden. Sie können einen neuen Benutzernamen und ein neues Kennwort erstellen, um speziell mit der Django-Web-App zu verwenden.
Notieren Sie die Anmeldeinformationen für die spätere Verwendung. Sie benötigen die Anmeldeinformationen, um die Authentifizierungsfeatures der Web-App auszuüben.

Ausführen eines Django-Webprojekts

Jetzt können Sie die Django-Webanwendung ausführen und die von der Vorlage bereitgestellten Features anzeigen:

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das DjangoWeb-Projekt, und wählen Sie Als Startprojekt festlegen aus.

Mit diesem Befehl wird das ausgewählte Projekt als standardmäßiges Startprojekt für die Visual Studio-Projektmappe festgelegt. Wenn Sie den Debugger-starten, führt Visual Studio den Code für das Startprojekt aus. Im Projektmappen-Explorer wird der Name des Startprojekts für die Lösung fett dargestellt:
Wählen Sie Debuggen>Debuggen starten (F5) aus, oder verwenden Sie die Schaltfläche Webserver auf der Symbolleiste, um den Server auszuführen:

Erkunde Web-App-Seiten

Die von der Vorlage erstellte App enthält drei Seiten: "Start", "Info" und "Kontakt". Es gibt Links für jede Seite auf der Navigationsleiste.

Versuchen Sie, mithilfe der Optionen auf der Navigationsleiste zwischen den Seiten zu wechseln.
Untersuchen Sie die verschiedenen Teile der ausgeführten App, einschließlich des Seiteninhalts. Beachten Sie, wie sich die URL-Adressroute basierend auf der aktuellen Seite ändert.
Authentifizieren Sie sich bei der App, indem Sie auf der Navigationsleiste die Option Anmelden auswählen. Geben Sie die Superbenutzeranmeldeinformationen ein, die Sie im vorherigen Abschnitt angegeben haben.
Die App, die mit der Vorlage des Django Web Project erstellt wurde, verwendet Bootstrap für ein responsives Layout, das speziell auf mobile Formfaktoren abgestimmt ist. Um diese Reaktionsfähigkeit zu sehen, ändern Sie die Größe des Browsers in eine schmale Ansicht, sodass der Inhalt vertikal gerendert wird, und die Navigationsleiste verwandelt sich in ein Menüsymbol:

Sie können die App für die Übungen im nächsten Abschnitt laufen lassen.

Wenn Sie Ihre Arbeit speichern möchten, beenden Sie die App, und folgen Sie den Anweisungen in den vorherigen Schritten in dieser Lernprogrammreihe:

Untersuchen der Web-App-Projektstruktur

Die Vorlage Django Web Project erstellt ein Web-App-Projekt in Visual Studio mit der folgenden Struktur:

Dateien im DjangoWeb Visual Studio-Projektstamm:
- manage.py: Das Verwaltungsprogramm Django.
- db.sqlite3: Eine SQLite-Standarddatenbank.
- requirements.txt: Identifiziert Pakete im Projekt, die von Django 1.x abhängig sind.
- readme.html: Enthält Informationen zur Web-App, einschließlich Anforderungen und kritischen Verwendungsverfahren. Visual Studio zeigt diese Datei nach der Erstellung des Projekts an. Wie weiter oben beschrieben, enthält diese Datei die Anweisungen zum Erstellen eines Superbenutzerkontos (Administrator) für die App.
Der ordner DjangoWeb/app:

Dieser Ordner enthält alle App-Dateien, einschließlich Ansichten, Modelle, Tests, Formulare. Dieser Ordner verfügt auch über Unterordner mit Dateien, einschließlich Vorlagen, Migrationenund statische. In der Regel benennen Sie den App- Ordner um, um einen unverwechselbareren Namen wie den App-Namen selbst zu verwenden.
Der Ordner DjangoWeb/DjangoWeb:

Dieser Ordner ist der Django-Projektordner. Es enthält die typischen Django-Projektdateien: __init__.py, settings.py, urls.pyund wsgi.py. Die settings.py Datei ist bereits für die App und die Datenbankdatei mithilfe der Projektvorlage konfiguriert. Die urls.py Datei ist auch bereits mit den Routen zu allen App-Seiten eingerichtet, einschließlich des Anmelden Formulars.

Sie können eine virtuelle Umgebung zwischen Visual Studio-Projekten freigeben. Beachten Sie jedoch, dass unterschiedliche Projekte im Laufe der Zeit unterschiedliche Pakete verwenden. Eine freigegebene virtuelle Umgebung muss alle Pakete für alle Projekte enthalten, die sie verwenden.

Führen Sie die folgenden Schritte aus, um eine vorhandene virtuelle Umgebung zu verwenden:

Wenn Sie aufgefordert werden, Abhängigkeiten in Visual Studio zu installieren, wählen Sie die Option Ich werde sie selbst installieren.
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.
Navigieren Sie zu dem Ordner, der die virtuelle Umgebung enthält, und wählen Sie dann OKaus.

Untersuchen von Ansichten und Seitenvorlagen

Der Code für die seitenansichten, die vom Django Web Project erstellt wurden, befindet sich in der App/views.py Datei des Projekts. Jede Ansichtsfunktion ruft die django.shortcuts.render Hilfsfunktion mit dem Pfad zu einer Vorlage und einem einfachen Wörterbuchobjekt auf. Die about-Funktion erstellt die Ansicht für die Seite "Info" in der Web-App:

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,
      }
   )

HTML-Seitenvorlagen für die Ansichten befinden sich im ordner "app/templates/app/app" des Projekts (den Sie häufig umbenennen). Die Basisvorlage layout.htmlist die umfangreichste. Die Datei bezieht sich auf alle erforderlichen statischen Dateien (JavaScript und CSS) für die App-Ansichten.

Diese Vorlage definiert auch zwei block Abschnitte: content und scripts. Die anderen Web App-Seiten überschreiben den abschnitt {% block content %} in der layout.html Datei. Sie können die beiden block Abschnitte im <body>-Element in dieser kommentierten Version der layout.html-Datei sehen:

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />

   <!-- Define 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>
   <!-- Navigation bar section omitted in this excerpt -->

   <div class="container body-content">

<!-- Content block - App pages override this block -->
{% block content %}
{% endblock %}

      <!-- App header and footer content -->
      <hr/>
      <footer>
         <p>&copy; {{ year }} - My Django Application</p>
      </footer>

   </div>

   <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>

<!-- Scripts block - List page-specific scripts in this block -->
{% block scripts %}
{% endblock %}

</body>

</html>

Die einzelnen HTML-Seitenvorlagen, about.html, contact.htmlund index.html, erweitern jeweils die Basisvorlage layout.html. Die about.html Vorlagendatei ist am einfachsten und zeigt das {% extends %}-Tag und den {% block content %}-Abschnitt.

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

<!-- Content block overrides "content" block in layout template -->
{% 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 dieselbe Struktur und geben weitere Anweisungen im content Block an.

Der ordner app/templates/app enthält zwei weitere HTML-Seitenvorlagen. Die login.html Datei definiert den Seiteninhalt für die Anmelden App-Seite. Die loginpartial.html Datei wird mit der {% include %}-Anweisung in die layout.html Datei eingefügt. Im letzten Schritt (Authentifizieren von Benutzern) in dieser Tutorialreihe werden diese beiden Vorlagendateien detaillierter beschrieben.

Einziehen der Tags {% block %} und {% endblock %} in Vorlagen

Die HTML-Beispiele zeigen Markup, das in der Seitenvorlage in Visual Studio bereitgestellt wird. Beachten Sie, dass die block-Tags im Markup nicht eingerückt werden. Um die Position der block-Tags deutlich anzuzeigen, werden sie in Visual Studio-Seitenvorlagen nicht eingerückt.

Django-Seitenvorlagen funktionieren jedoch einwandfrei, wenn Sie die block Tags einziehen. Einige Entwickler bevorzugen es, die Tags innerhalb der entsprechenden übergeordneten HTML-Elemente auszurichten.

Untersuchen von URL-Routenmustern

Die URL-Datei des Django-Projekts (DjangoWeb/DjangoWeb/urls.py), die von der Vorlage Django Web Project erstellt wurde, enthält den folgenden Code:

"""
Definition of urls for DjangoWeb
"""

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 home, contactund about Ansichtsfunktionen zugeordnet, die in der app/views.py-Datei des Projekts definiert sind. Die login/ und logout/ Muster entsprechen den Authentifizierungsfeatures der App.

Spezielle URL-Routenmuster wie ^login/$ und ^logout$ haben Zugriff auf integrierte Django-Ansichten anstelle von app-definierten Ansichten. Aufrufe der url-Methode enthalten auch zusätzliche Daten zum Anpassen der Ansicht. Der letzte Schritt (Benutzer authentifizieren) in dieser Tutorial-Reihe beschreibt, wie Sie mit URL-Aufrufen arbeiten.

Untersuchen von Unterschieden in URL-Mustern

In Schritt 3 (HTML-Vorlagenvererbung) dieser Tutorialreihe verwendet der Pfad für die Seite „Info“ das '^about$'-Muster. Dieses Muster unterscheidet sich von der URL-Route, die in diesem Lernprogrammschritt dargestellt wird. Je nach Vorlagenversion zeigt der Beispielcode möglicherweise das URL-Muster der Seite "Info" als about/ oder ^about anstelle von ^about$an.

Das fehlende abschließende Dollarzeichen $ im regulären Ausdruck ist ein Übersehen in vielen Versionen der Projektvorlage. Das URL-Muster funktioniert hervorragend für eine Seite, die den Namen "about" oder "About" trägt. Ohne das nachfolgende Zeichen $ entspricht das URL-Muster jedoch auch URLs wie "about=django", "about09876", "about-face" usw. Das nachfolgende $ Zeichen erstellt ein URL-Muster, das nur übereinstimmungen für den Begriff "about" sicherstellt.

Nächster Schritt

Schritt 5: Authentifizieren von Benutzern in Django

Freigeben über

Lernprogramm: Verwenden der vollständigen Django-Webprojektvorlage in Visual Studio

Voraussetzungen

Projekt aus Vorlage erstellen

Erstellen einer virtuellen Umgebung

Django Super-Benutzer erstellen

Ausführen eines Django-Webprojekts

Erkunde Web-App-Seiten

Untersuchen der Web-App-Projektstruktur

Untersuchen von Ansichten und Seitenvorlagen

Einziehen der Tags {% block %} und {% endblock %} in Vorlagen

Untersuchen von URL-Routenmustern

Untersuchen von Unterschieden in URL-Mustern

Nächster Schritt

Feedback

Zusätzliche Ressourcen

Freigeben über

Lernprogramm: Verwenden der vollständigen Django-Webprojektvorlage in Visual Studio

Voraussetzungen

Projekt aus Vorlage erstellen

Erstellen einer virtuellen Umgebung

Django Super-Benutzer erstellen

Ausführen eines Django-Webprojekts

Erkunde Web-App-Seiten

Untersuchen der Web-App-Projektstruktur

Freigeben einer virtuellen Umgebung zwischen Visual Studio-Projekten

Untersuchen von Ansichten und Seitenvorlagen

Einziehen der Tags {% block %} und {% endblock %} in Vorlagen

Untersuchen von URL-Routenmustern

Untersuchen von Unterschieden in URL-Mustern

Nächster Schritt

Feedback

Zusätzliche Ressourcen