Tutorial: Erste Schritte mit dem Django-Webframework in Visual Studio

Django ist ein allgemeines Python-Framework für die schnelle, sichere und skalierbare Webentwicklung. In diesem Tutorial wird das Django-Framework im Kontext von Projektvorlagen untersucht. Visual Studio stellt die Projektvorlagen bereit, um die Erstellung von Django-basierten Web-Apps zu optimieren.

In diesem Tutorial lernen Sie Folgendes:

• Erstellen eines Django-Basisprojekts in einem Git-Repository mithilfe der Vorlage „Blank Django Web Project“ (Leeres Django-Webprojekt) (Schritt 1).
• Erstellen einer einseitigen Django-App und Rendern dieser Seite mithilfe einer Vorlage (Schritt 2).
• Bereitstellen statischer Dateien, Hinzufügen von Seiten und Verwenden von Vorlagenvererbung (Schritt 3).
• Verwenden der Vorlage „Django Web Project“ (Django-Webprojekt) zum Erstellen einer mehrseitigen App mit dynamischem Design (Schritt 4).
• Authentifizieren von Benutzern (Schritt 5).

Voraussetzungen

• Visual Studio 2022 unter Windows mit den folgenden Optionen:
  • Die Workload Python-Entwicklung (Registerkarte Workload im Installationsprogramm). Weitere Anleitungen finden Sie unter Installieren von Python-Unterstützung für Visual Studio.
  • Git für Windows auf der Registerkarte Einzelne Komponenten unter Codetools.

Django-Projektvorlagen enthalten auch frühere Versionen der Python Tools für Visual Studio. Die Vorlagendetails können sich von den in diesem Tutorial erläuterten Details unterscheiden (insbesondere bei früheren Versionen des Django-Frameworks).

Python-Entwicklung wird in Visual Studio für Mac derzeit nicht unterstützt. Verwenden Sie unter Mac und Linux die Python-Erweiterung in Visual Studio Code.

„Visual Studio-Projekte“ und „Django-Projekte“

In der Django-Terminologie besteht ein „Django-Projekt“ aus mehreren Konfigurationsdateien auf Websiteebene und einer oder mehreren „Apps“. Um eine vollständige Webanwendung zu erstellen, können Sie diese Anwendungen auf einem Webhost bereitstellen. Ein Django-Projekt kann mehrere Apps enthalten, und eine App kann gleichzeitig in mehreren Django-Projekten enthalten sein.

Ein Visual Studio-Projekt kann das Django-Projekt sowie mehrere Apps enthalten. Wenn in diesem Tutorial von einem „Projekt“ die Rede ist, ist damit ein Visual Studio-Projekt gemeint. Soll speziell auf die Komponente „Django-Projekt“ der Webanwendung verwiesen werden, wird der Begriff „Django-Projekt“ verwendet.

Im Verlauf dieses Tutorials erstellen Sie eine einzelne Visual Studio-Projektmappe, die drei separate Django-Projekte enthält. Jedes Projekt enthält eine einzelne Django-App. Indem Sie die Projekte in derselben Projektmappe platzieren, können Sie einfach zwischen den verschiedenen Dateien wechseln, um sie zu vergleichen.

Schritt 1.1: Erstellen eines Visual Studio-Projekts und einer -Projektmappe

Beim Arbeiten mit Django über die Befehlszeile wird ein Projekt in der Regel durch Ausführen des Befehls django-admin startproject <project_name> gestartet. In Visual Studio wird mit der Vorlage „Blank Django Web Project“ (Leeres Django-Webprojekt) die gleiche Struktur in einem Visual Studio-Projekt und einer -Projektmappe bereitgestellt.

1. Wählen Sie in Visual Studio Datei>Neu>Projekt aus, suchen Sie nach „Django“, wählen Sie die Vorlage Leeres Django-Webprojekt aus. Klicken Sie dann auf Weiter.

   

2. Geben Sie die folgenden Informationen ein, und wählen Sie dann Erstellen aus:

   • Projektname: Legen Sie den Namen des Visual Studio-Projekts auf BasicProject fest. Dieser Name wird auch für das Django-Projekt verwendet.
   • Speicherort: Geben Sie einen Speicherort an, an dem die Visual Studio-Projektmappe und das -Projekt erstellt werden sollen.
   • Projektmappe: Behalten Sie die Standardoption Neue Projektmappe erstellen bei.
   • Projektmappenname: Legen Sie den Namen auf LearningDjango fest, da er sich für die Projektmappe als Container für mehrere Projekte in diesem Tutorial eignet.

Schritt 1.2: Überprüfen der Git-Steuerelemente und Veröffentlichen in einem Remoterepository

In diesem Schritt machen Sie sich mit den Git-Steuerelementen von Visual Studio und Team Explorer vertraut. Im Team Explorer-Fenster arbeiten Sie mit der Quellcodeverwaltung.

1. So committen Sie das Projekt in Ihre lokale Quellcodeverwaltung:

   1. Wählen Sie in der unteren Ecke des Visual Studio-Hauptfensters den Befehl Zur Quellcodeverwaltung hinzufügen aus.
   2. Wählen Sie dann die Option Git aus.
   3. Sie gelangen nun zum Fenster Git-Repository erstellen, in dem Sie ein neues Repository erstellen und pushen können.

   

2. Nach dem Erstellen eines Repositorys wird unten eine Gruppe neuer Git-Steuerelemente angezeigt. Von links nach rechts zeigen die Steuerelemente Folgendes an: nicht gepushte Commits, nicht committete Änderungen, den aktuellen Branch und den Namen des Repositorys.

   

3. Wählen Sie die Schaltfläche Git-Änderungen aus. Visual Studio öffnet dann die Seite Git-Änderungen in Team Explorer. Da für das neu erstellte Projekt bereits automatisch ein Commit für die Quellcodeverwaltung ausgeführt wurde, werden keine ausstehenden Änderungen angezeigt.

   

4. Klicken Sie auf der Visual Studio-Statusleiste auf die Schaltfläche für die nicht per Push übertragenen Commits (der Aufwärtspfeil mit der 2), um die Seite Synchronisierung im Team Explorer zu öffnen. Die Seite Synchronisierung bietet einfache Optionen zum Veröffentlichen des lokalen Repositorys in verschiedenen Remoterepositorys.

   

   Sie können einen beliebigen Dienst für Ihre Projekte auswählen. In diesem Tutorial wird die Verwendung von GitHub beschrieben. Der vollständige Beispielcode für das Tutorial befindet sich im Repository Microsoft/python-sample-vs-learning-django.

5. Bei der Auswahl eines beliebigen Veröffentlichen-Steuerelements werden Sie von Team Explorer zur Eingabe weiterer Informationen aufgefordert. Wenn Sie z. B. das Beispiel für dieses Tutorial veröffentlichen, muss zunächst das Repository selbst erstellt werden. In diesem Fall wurde die Option In Remoterepository pushen mit der URL des Repositorys verwendet.

   

   Wenn Sie über kein vorhandenes Repository verfügen, können Sie über die Optionen In GitHub veröffentlichen und Per Push in Azure DevOps übertragen direkt in Visual Studio ein Repository erstellen.

6. Machen Sie sich während der Arbeit mit diesem Tutorial mit der Verwendung der Steuerelemente zur Übertragung von Änderungen per Push oder per Commit in Visual Studio vertraut. Daran werden Sie in diesem Tutorial auch zu geeigneter Zeit erinnert.

Tipp

Klicken Sie zur schnellen Navigation im Team Explorer auf den Header (der in den obigen Abbildungen Changes oder Push benannt ist), um ein Kontextmenü der verfügbaren Seiten anzuzeigen.

Frage: Welche Vorteile habe ich, wenn ich die Quellcodeverwaltung von Beginn eines Projekts an verwende?

Antwort: Die Quellcodeverwaltung bietet von Anfang an eine regelmäßige Offsitesicherung Ihres Projekts, insbesondere wenn Sie auch ein Remoterepository verwenden. Im Gegensatz zur Verwaltung eines Projekts in einem lokalen Dateisystem bietet die Quellcodeverwaltung einen vollständigen Änderungsverlauf und die einfache Möglichkeit, eine einzelne Datei oder das gesamte Projekt im früheren Zustand wiederherzustellen. Über den Änderungsverlauf kann die Ursache von Regressionen (Testfehlern) ermittelt werden. Wenn mehrere Personen an einem Projekt arbeiten, verwaltet die Quellcodeverwaltung das Überschreiben und stellt Konfliktlösung bereit.

Schließlich ermöglicht die Quellcodeverwaltung, die im Grunde eine Form der Automatisierung darstellt, die Automatisierung von Builds, Tests sowie der Releaseverwaltung. Dies ist der erste Schritt bei der Verwendung von DevOps für ein Projekt. Da die Einstiegsbarrieren so niedrig sind, gibt es keinen Grund, die Quellcodeverwaltung nicht von Anfang an zu verwenden.

Weitere Erläuterungen zur Automatisierung durch die Quellcodeverwaltung finden Sie unter The Source of Truth: The Role of Repositories in DevOps (Quelle der Wahrheit: Die Rolle von Repositorys in DevOps), einem MSDN Magazine-Artikel für mobile Apps, der auch für Web-Apps gilt.

Frage: Kann ich verhindern, dass Visual Studio für ein neues Projekt automatisch einen Commit ausführt?

Antwort: Ja. Um automatische Commits zu deaktivieren, navigieren Sie in Team Explorer zur Seite Einstellungen. Wählen Sie Git>Globale Einstellungen aus, deaktivieren Sie die Option Änderungen nach Mergen standardmäßig committen, und wählen Sie dann Aktualisieren aus.

Schritt 1.3: Erstellen der virtuellen Umgebung und Ausschließen aus der Quellcodeverwaltung

Nachdem Sie die Quellcodeverwaltung für das Projekt konfiguriert haben, können Sie die virtuelle Umgebung erstellen, die die für das Projekt erforderlichen Django-Pakete enthält. Anschließend können Sie im Team Explorer den Umgebungsordner aus der Quellcodeverwaltung ausschließen.

1. Klicken Sie mit der rechten Maustaste im Projektmappen-Explorer auf den Knoten Python-Umgebungen, und wählen Sie Umgebung hinzufügen aus.

   

2. Wählen Sie Erstellen aus, um die Standardwerte im Dialogfeld „Virtuelle Umgebung hinzufügen“ zu übernehmen. (Sie können den Namen der virtuellen Umgebung ändern. Dadurch wird jedoch nur der Name des Unterordners geändert, env ist dagegen eine Standardkonvention.)

   

3. Stimmen Sie Administratorrechten zu, wenn Sie dazu aufgefordert werden, und warten Sie dann einige Minuten, während Visual Studio Pakete herunterlädt und installiert. Während dieser Zeit werden Tausende von Dateien in zahlreiche Unterordner übertragen. Der Fortschritt wird im Ausgabe-Fenster in Visual Studio angezeigt. Während des Vorgangs können Sie die Fragen und Antworten in den folgenden Abschnitten lesen.

4. Klicken Sie bei den Git-Steuerelementen in Visual Studio (auf der Statusleiste) auf den Änderungsindikator (der 99* anzeigt), um die Seite Änderungen im Team Explorer zu öffnen.

   Durch das Erstellen der virtuellen Umgebung wurden Tausende von Änderungen vorgenommen, die Sie jedoch nicht in die Quellcodeverwaltung einbeziehen müssen, da die Umgebung von jeder Person, die das Projekt klont, immer aus requirements.txt neu erstellt werden kann.

5. Klicken Sie zum Ausschließen der virtuellen Umgebung mit der rechten Maustaste auf den env-Ordner, und wählen Sie die Option Diese lokalen Elemente ignorieren aus.

   

6. Nachdem die virtuelle Umgebung ausgeschlossen wurde, bleiben nur die Änderungen an der Projektdatei und der GITIGNORE-Datei übrig. Die .gitignore-Datei enthält einen hinzugefügten Eintrag für den Ordner der virtuellen Umgebung. Wenn Sie die Änderungen anzeigen möchten, doppelklicken Sie auf die Datei.

7. Geben Sie eine Commit-Nachricht ein, und klicken Sie auf die Schaltfläche Alle committen. Anschließend können Sie die Commits per Push in das Remoterepository übertragen.

Frage: Warum sollte ich eine virtuelle Umgebung erstellen?

Antwort: Eine virtuelle Umgebung ist eine hervorragende Möglichkeit, die genauen Abhängigkeiten Ihrer App zu isolieren. Mit einer solchen Isolation können Konflikte innerhalb einer globalen Python-Umgebung vermieden werden, und Tests und die Zusammenarbeit werden unterstützt. Bei der Entwicklung einer App werden im Laufe der Zeit unweigerlich viele nützliche Python-Pakete importiert. Sie können die Datei requirements.txt des Projekts problemlos aktualisieren, indem Sie Pakete in einer projektspezifischen virtuellen Umgebung platzieren. Die Datei requirements.txt beschreibt die Umgebung, die in der Quellcodeverwaltung enthalten ist. Beim Kopieren des Projekts auf andere Computer, einschließlich Buildserver, Bereitstellungsserver und andere Entwicklungscomputer, kann die Umgebung auf einfache Weise über requirements.txt neu erstellt werden (weshalb die Umgebung auch nicht in der Quellcodeverwaltung vorhanden sein muss). Weitere Informationen finden Sie unter Verwenden von virtuellen Umgebungen.

Frage: Wie entferne ich eine virtuelle Umgebung, für die bereits ein Commit für die Quellcodeverwaltung ausgeführt wurde?

Antwort: Bearbeiten Sie zunächst Ihre GITIGNORE-Datei, um den Ordner auszuschließen. Suchen Sie den Abschnitt am Ende mit dem Kommentar # Python Tools for Visual Studio (PTVS), und fügen Sie eine neue Zeile für den Ordner der virtuellen Umgebung hinzu, z. B. /BasicProject/env. (Visual Studio zeigt die Datei nicht in Projektmappen-Explorer an. Um die Datei direkt zu öffnen, navigieren Sie zu Datei>Öffnen>Datei. Sie können die Datei auch über Team Explorer öffnen. Navigieren Sie zur Seite Einstellungen, und wählen Sie Repositoryeinstellungen aus. Navigieren Sie nun zum Abschnitt Ignore- und Attributdateien, und wählen Sie neben .gitignore den Link Bearbeiten aus.)

Öffnen Sie dann ein Befehlsfenster, und navigieren Sie zu einem Ordner wie BasicProject. Der Ordner BasicProject enthält den Ordner für die virtuelle Umgebung (z. B. env). Führen Sie git rm -r env aus. Führen Sie dann für diese Änderungen einen Commit von der Befehlszeile (git commit -m 'Remove venv') oder von der Seite Änderungen im Team Explorer aus.

Schritt 1.4: Überprüfen der Codebausteine

Überprüfen Sie nach Abschluss der Projekterstellung die Codebausteine des Django-Projekts (die auch hier wieder über den CLI-Befehl django-admin startproject <project_name> generiert werden können).

1. Der Stamm Ihres Projekts enthält manage.py, das Django-Befehlszeilen-Verwaltungsprogramm. Dieses Programm wird von Visual Studio automatisch als Startdatei des Projekts festlegt. Führen Sie das Hilfsprogramm in der Befehlszeile mithilfe von python manage.py <command> [options] aus. Gängige Django-Aufgaben können in Visual Studio ganz komfortabel über Menübefehle ausgeführt werden. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Python aus, um die Liste anzuzeigen. Einige dieser Befehle werden im weiteren Verlauf des Tutorials näher beschrieben.

   

2. In Ihrem Projekt befindet sich ein Ordner mit dem gleichen Namen wie das Projekt. Er enthält die Basisdateien des Django-Projekts:

   • __init.py: Eine leere Datei, die Python informiert, dass der Ordner ein Python-Paket ist.
   • settings.py: Enthält Einstellungen für das Django-Projekt, die bei der Entwicklung einer Web-App geändert werden.
   • urls.py: Enthält eine Tabelle mit den Inhalten des Django-Projekts, die ebenfalls bei der Entwicklung geändert wird.
   • wsgi.py: Ein Einstiegspunkt für WSGI-kompatible Webserver zur Bereitstellung des Projekts. Diese Datei bleibt in der Regel unverändert, da sie die Hooks für Produktionswebserver bereitstellt.

   

3. Wie bereits erwähnt wird dem Projekt durch die Visual Studio-Vorlage auch eine requirements.txt-Datei hinzugefügt, in der die Paketabhängigkeit für Django angegeben wird. Wegen dieser Datei werden Sie bei der erstmaligen Erstellung des Projekts zum Erstellen einer virtuellen Umgebung aufgefordert.

Frage: Kann Visual Studio eine „requirements.txt“-Datei aus einer virtuellen Umgebung generieren, nachdem ich andere Pakete installiert habe?

Antwort: Ja. Erweitern Sie den Knoten Python-Umgebungen, klicken Sie mit der rechten Maustaste auf die virtuelle Umgebung, und klicken Sie auf den Befehl „requirements.txt“ generieren. Verwenden Sie diesen Befehl am besten in regelmäßigen Abständen, wenn Sie die Umgebung ändern und einen Commit der Änderungen für requirements.txt in der Quellcodeverwaltung ausführen sowie andere Codeänderungen committen, die von dieser Umgebung abhängen. Wenn Sie Continuous Integration auf einem Buildserver eingerichtet haben, sollten Sie bei jeder Änderung der Umgebung die Datei generieren und einen Commit der Änderungen ausführen.

Schritt 1-5: Ausführen des leeren Django-Projekts

1. Wählen Sie in Visual Studio die Option Debuggen>Debuggen starten (F5) aus, oder verwenden Sie hierzu die Schaltfläche Webserver auf der Symbolleiste (der bei Ihnen angezeigte Browser kann ein anderer sein):

   

2. Das Ausführen des Servers entspricht dem Ausführen des Befehls manage.py runserver <port>, mit dem der integrierte Entwicklungsserver von Django gestartet wird. Wenn Visual Studio die Meldung Fehler beim Starten des Debuggers anzeigt, da keine Startdatei vorhanden ist, klicken Sie mit der rechten Maustaste im Projektmappen-Explorer auf manage.py, und klicken Sie auf Als Startdatei festlegen.

3. Beim Starten des Servers wird ein Konsolenfenster geöffnet, das ebenfalls das Serverprotokoll anzeigt. In Visual Studio wird automatisch ein Browser mit http://localhost:<port> geöffnet. Da das Django-Projekt jedoch über keine Apps verfügt, zeigt Django nur eine Standardseite mit der Bestätigung an, dass bisher alles einwandfrei funktioniert.

   

4. Wenn Sie fertig sind, stoppen Sie den Server, indem Sie das Konsolenfenster schließen. Sie können hierzu auch den Befehl Debuggen>Debuggen beenden in Visual Studio verwenden.

Frage: Ist Django ein Webserver und ein Framework?

Antwort: Ja und nein. Django besitzt zwar einen integrierten Webserver, der für die Entwicklung verwendet wird. Dieser Webserver wird verwendet, wenn Sie die Web-App lokal ausführen, wie z. B. beim Debuggen in Visual Studio. Bei der Bereitstellung auf einem Webhost wird in Django jedoch stattdessen der Webserver des Hosts verwendet. Mit dem wsgi.py-Modul im Django-Projekt werden Einbindungen in die Produktionsserver vorgenommen.

Frage: Was ist der Unterschied zwischen den Befehlen im Menü „Debuggen“ und den Serverbefehlen im Python-Untermenü des Projekts?

Antwort: Sie können den Server über die Befehle und Schaltflächen des Debuggen-Menüs in der Symbolleiste oder über die Befehle Python>Server ausführen oder Python>Debugserver ausführen im Kontextmenü des Projekts starten. Mit beiden Befehlen wird ein Konsolenfenster geöffnet, in dem die lokale URL (localhost:port) für den ausgeführten Server angezeigt wird. Allerdings müssen Sie einen Browser mit dieser URL manuell öffnen. Das Ausführen des Debugservers startet auch nicht automatisch den Visual Studio-Debugger. Später können Sie ggf. mit dem Befehl Debuggen>An Prozess anfügen einen Debugger an den ausgeführten Prozess anfügen.

Nächste Schritte

Noch enthält das Django-Basisprojekt keine Apps. Im nächsten Schritt erstellen Sie eine App. Da Sie in der Regel häufiger mit Django-Apps als mit dem Django-Projekt arbeiten, müssen Sie sich derzeit nicht genauer mit den Dateibausteinen auskennen.

Erstellen einer Django-App mit Ansichten und Seitenvorlagen

Ausführlichere Informationen

• Django-Projektcode: Writing your first Django app, part 1 (Erstellen Ihrer ersten Django-App – Teil 1) (docs.djangoproject.com)
• Verwaltungsprogramm: django-admin and manage.py („django-admin“ und „manage.py“) (docs.djangoproject.com)
• Quellcode für das Tutorial auf GitHub: Microsoft/python-sample-vs-learning-django