Django-Tutorial in Visual Studio Code

Django ist ein High-Level-Python-Framework, das für schnelle, sichere und skalierbare Webentwicklung konzipiert ist. Django bietet umfassende Unterstützung für URL-Routing, Seitenvorlagen und die Arbeit mit Daten.

In diesem Django-Tutorial erstellen Sie eine einfache Django-App mit drei Seiten, die eine gemeinsame Basisvorlage verwenden. Sie erstellen diese App im Kontext von Visual Studio Code, um zu verstehen, wie Sie mit Django im VS Code-Terminal, -Editor und -Debugger arbeiten. Dieses Tutorial behandelt nicht alle Details von Django selbst, wie z. B. die Arbeit mit Datenmodellen und das Erstellen einer administrativen Schnittstelle. Hinweise zu diesen Aspekten finden Sie in den Links zur Django-Dokumentation am Ende dieses Tutorials.

Das fertige Codeprojekt aus diesem Django-Tutorial finden Sie auf GitHub: python-sample-vscode-django-tutorial.

Wenn Sie Probleme haben, können Sie auf den Diskussionen zur Python-Erweiterung (Fragen & Antworten) nach Antworten suchen oder eine Frage stellen.

Voraussetzungen

Um dieses Django-Tutorial erfolgreich abzuschließen, müssen Sie die folgenden Schritte ausführen (dies sind dieselben Schritte wie im allgemeinen Python-Tutorial)

Installieren Sie die Python-Erweiterung.
Installieren Sie eine Version von Python 3 (für die dieses Tutorial geschrieben wurde). Zu den Optionen gehören
- (Alle Betriebssysteme) Ein Download von python.org; verwenden Sie typischerweise die Schaltfläche Download Python 3.9.1, die zuerst auf der Seite erscheint (oder was auch immer die neueste Version ist).
- (Linux) Die integrierte Python 3-Installation funktioniert gut, aber um andere Python-Pakete zu installieren, müssen Sie sudo apt install python3-pip im Terminal ausführen.
- (macOS) Eine Installation über Homebrew unter macOS mit brew install python3 (die Systeminstallation von Python unter macOS wird nicht unterstützt).
- (Alle Betriebssysteme) Ein Download von Anaconda (für Data-Science-Zwecke).
Stellen Sie unter Windows sicher, dass der Speicherort Ihres Python-Interpreters in Ihrer PATH-Umgebungsvariable enthalten ist. Sie können den Speicherort überprüfen, indem Sie path an der Eingabeaufforderung ausführen. Wenn der Ordner des Python-Interpreters nicht enthalten ist, öffnen Sie die Windows-Einstellungen, suchen Sie nach "Umgebung", wählen Sie Umgebungsvariablen für Ihr Konto bearbeiten und bearbeiten Sie dann die Path-Variable, um diesen Ordner hinzuzufügen.

Erstellen einer Projektumgebung für das Django-Tutorial

In diesem Abschnitt erstellen Sie eine virtuelle Umgebung, in der Django installiert wird. Die Verwendung einer virtuellen Umgebung vermeidet die Installation von Django in einer globalen Python-Umgebung und gibt Ihnen exakte Kontrolle über die in einer Anwendung verwendeten Bibliotheken. Eine virtuelle Umgebung macht es auch einfach, eine requirements.txt-Datei für die Umgebung zu erstellen.

Die Python Environments-Erweiterung unterstützt mehrere Umgebungstypen, darunter venv, conda, poetry und andere. Dieses Tutorial verwendet venv, da es in Python integriert ist und keine zusätzlichen Tools erfordert. Die Schritte für andere Umgebungstypen sind ähnlich – siehe Umgebungen erstellen für Details.

Erstellen Sie auf Ihrem Dateisystem einen Projektordner für dieses Tutorial, wie z. B. hello_django.
Öffnen Sie den Projektordner in VS Code, indem Sie code . ausführen oder VS Code starten und den Befehl Datei > Ordner öffnen verwenden.
Erstellen Sie eine virtuelle Umgebung mit dem Befehl Python: Umgebung erstellen
1. Öffnen Sie die Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P))
2. Suchen Sie nach Python: Umgebung erstellen und wählen Sie es aus
3. Wählen Sie Venv, um eine venv-Umgebung zu erstellen
4. Wählen Sie einen Python-Interpreter für die Umgebung aus
VS Code erstellt einen .venv-Ordner in Ihrem Arbeitsbereich und wählt automatisch die neue Umgebung aus.

Tipp
Sie können Umgebungen auch über die Python-Seitenleiste erstellen. Erweitern Sie Umgebungsmanager und wählen Sie die Schaltfläche + für „Schnell erstellen“, was sinnvolle Standardeinstellungen verwendet.
Die ausgewählte Umgebung erscheint auf der rechten Seite der VS Code-Statusleiste, wobei die Anzeige ('.venv': venv) anzeigt, dass Sie eine virtuelle Umgebung verwenden
Installieren Sie Django in der virtuellen Umgebung mit einer dieser Methoden

Verwendung der Paketverwaltungs-Benutzeroberfläche
1. Erweitern Sie in der Python-Seitenleiste den Bereich Umgebungsmanager
2. Klicken Sie mit der rechten Maustaste auf Ihre .venv-Umgebung und wählen Sie Pakete verwalten
3. Suchen Sie nach django und wählen Sie Installieren
Verwendung des Terminals

Führen Sie Terminal: Neues Terminal erstellen (⌃⇧` (Windows, Linux Ctrl+Shift+`)) über die Befehlspalette aus, wodurch ein Terminal erstellt und die virtuelle Umgebung automatisch aktiviert wird. Führen Sie dann aus
```
python -m pip install django
```

Sie haben nun eine in sich geschlossene Umgebung, die bereit für das Schreiben von Django-Code ist. VS Code aktiviert die Umgebung automatisch, wenn Sie ein neues Terminal öffnen. Wenn Sie eine separate Eingabeaufforderung oder ein Terminal außerhalb von VS Code öffnen, aktivieren Sie die Umgebung durch Ausführen von source .venv/bin/activate (Linux/macOS) oder .venv\Scripts\Activate.ps1 (Windows). Sie wissen, dass die Umgebung aktiviert ist, wenn die Eingabeaufforderung am Anfang (.venv) anzeigt.

Erstellen und Ausführen einer minimalen Django-App

In der Django-Terminologie besteht ein "Django-Projekt" aus mehreren Konfigurationsdateien auf Site-Ebene sowie einer oder mehreren "Apps", die Sie auf einem Webhost bereitstellen, um eine vollständige Webanwendung zu erstellen. Ein Django-Projekt kann mehrere Apps enthalten, von denen jede normalerweise eine unabhängige Funktion im Projekt hat, und dieselbe App kann in mehreren Django-Projekten enthalten sein. Eine App ist für ihren Teil nur ein Python-Paket, das bestimmten Konventionen folgt, die Django erwartet.

Um eine minimale Django-App zu erstellen, ist es daher notwendig, zuerst das Django-Projekt als Container für die App zu erstellen und dann die App selbst zu erstellen. Für beide Zwecke verwenden Sie das Django-Verwaltungsprogramm django-admin, das bei der Installation des Django-Pakets installiert wird.

Erstellen Sie das Django-Projekt

Führen Sie im VS Code-Terminal, in dem Ihre virtuelle Umgebung aktiviert ist, den folgenden Befehl aus
```
django-admin startproject web_project .
```
Dieser startproject-Befehl geht (durch die Verwendung von . am Ende) davon aus, dass der aktuelle Ordner Ihr Projektordner ist, und erstellt darin Folgendes
- manage.py: Das Django-Befehlszeilen-Verwaltungsprogramm für das Projekt. Sie führen Verwaltungsbefehle für das Projekt mit python manage.py <command> [options] aus.
- Ein Unterordner namens web_project, der die folgenden Dateien enthält
  - __init__.py: eine leere Datei, die Python mitteilt, dass dieser Ordner ein Python-Paket ist.
  - asgi.py: ein Einstiegspunkt für ASGI-kompatible Webserver, um Ihr Projekt bereitzustellen. Sie lassen diese Datei normalerweise unverändert, da sie die Hooks für Produktions-Webserver bereitstellt.
  - settings.py: enthält Einstellungen für das Django-Projekt, die Sie im Laufe der Entwicklung einer Web-App ändern.
  - urls.py: enthält ein Inhaltsverzeichnis für das Django-Projekt, das Sie ebenfalls im Laufe der Entwicklung ändern.
  - wsgi.py: ein Einstiegspunkt für WSGI-kompatible Webserver, um Ihr Projekt bereitzustellen. Sie lassen diese Datei normalerweise unverändert, da sie die Hooks für Produktions-Webserver bereitstellt.
Erstellen Sie eine leere Entwicklungsdatenbank, indem Sie den folgenden Befehl ausführen
```
python manage.py migrate
```
Wenn Sie den Server zum ersten Mal ausführen, erstellt er eine Standard-SQLite-Datenbank in der Datei db.sqlite3, die für Entwicklungszwecke gedacht ist, aber bei Web-Apps mit geringem Datenaufkommen auch in der Produktion verwendet werden kann. Weitere Informationen zu Datenbanken finden Sie im Abschnitt Datenbanktypen.
Um das Django-Projekt zu überprüfen, stellen Sie sicher, dass Ihre virtuelle Umgebung aktiviert ist, und starten Sie dann den Entwicklungsserver von Django mit dem Befehl python manage.py runserver. Der Server läuft auf dem Standard-Port 8000, und Sie sehen eine Ausgabe wie die folgende im Terminalfenster
```
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 13, 2023 - 18:38:07
Django version 4.2.2, using settings 'web_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
```
Der integrierte Webserver von Django ist nur für lokale Entwicklungszwecke gedacht. Wenn Sie jedoch auf einem Webhost bereitstellen, verwendet Django stattdessen den Webserver des Hosts. Die Module wsgi.py und asgi.py im Django-Projekt kümmern sich um die Anbindung an die Produktionsserver.

Wenn Sie einen anderen Port als den Standard-Port 8000 verwenden möchten, geben Sie die Portnummer in der Befehlszeile an, z. B. python manage.py runserver 5000.
Strg+Klick auf die URL http://127.0.0.1:8000/ im Terminal-Ausgabefenster, um Ihren Standardbrowser unter dieser Adresse zu öffnen. Wenn Django korrekt installiert ist und das Projekt gültig ist, sehen Sie die unten gezeigte Standardseite. Das VS Code-Terminal-Ausgabefenster zeigt auch das Serverprotokoll an.
Wenn Sie fertig sind, schließen Sie das Browserfenster und stoppen Sie den Server in VS Code mit Strg+C, wie im Terminal-Ausgabefenster angegeben.

Erstellen Sie eine Django-App

Führen Sie im VS Code-Terminal bei aktivierter virtueller Umgebung den startapp-Befehl des Verwaltungsprogramms in Ihrem Projektordner aus (dort, wo sich manage.py befindet)
```
python manage.py startapp hello
```
Der Befehl erstellt einen Ordner namens hello, der eine Reihe von Codedateien und einen Unterordner enthält. Von diesen arbeiten Sie häufig mit views.py (das die Funktionen enthält, die Seiten in Ihrer Web-App definieren) und models.py (das Klassen enthält, die Ihre Datenobjekte definieren). Der migrations-Ordner wird vom Django-Verwaltungsprogramm verwendet, um Datenbankversionen zu verwalten, wie später in diesem Tutorial besprochen. Es gibt auch die Dateien apps.py (App-Konfiguration), admin.py (zum Erstellen einer administrativen Schnittstelle) und tests.py (zum Erstellen von Tests), die hier nicht behandelt werden.
Ändern Sie hello/views.py so, dass es dem folgenden Code entspricht, der eine einzelne Ansicht für die Startseite der App erstellt
```
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")
```
Erstellen Sie eine Datei hello/urls.py mit dem unten stehenden Inhalt. Die urls.py-Datei ist der Ort, an dem Sie Muster angeben, um verschiedene URLs an ihre entsprechenden Ansichten weiterzuleiten. Der Code unten enthält eine Route, um die Root-URL der App ("") der views.home-Funktion zuzuordnen, die Sie gerade zu hello/views.py hinzugefügt haben
```
from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]
```
Der Ordner web_project enthält ebenfalls eine urls.py-Datei, in der das URL-Routing tatsächlich gehandhabt wird. Öffnen Sie web_project/urls.py und ändern Sie es so, dass es dem folgenden Code entspricht (Sie können die erklärenden Kommentare behalten, wenn Sie möchten). Dieser Code bindet die hello/urls.py der App über django.urls.include ein, wodurch die Routen der App innerhalb der App gekapselt bleiben. Diese Trennung ist hilfreich, wenn ein Projekt mehrere Apps enthält.
```
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("hello.urls")),
    path('admin/', admin.site.urls)
]
```
Speichern Sie alle geänderten Dateien.
Führen Sie im VS Code-Terminal, erneut mit aktivierter virtueller Umgebung, den Entwicklungsserver mit python manage.py runserver aus und öffnen Sie einen Browser unter http://127.0.0.1:8000/, um eine Seite zu sehen, die "Hello, Django" rendert.

Erstellen eines Debugger-Startprofils

Sie fragen sich wahrscheinlich bereits, ob es einen einfacheren Weg gibt, den Server auszuführen und die App zu testen, ohne jedes Mal python manage.py runserver einzugeben. Glücklicherweise gibt es einen! Sie können ein angepasstes Startprofil in VS Code erstellen, das auch für die unvermeidliche Übung des Debuggens verwendet wird.

Wechseln Sie zur Ausführen-Ansicht in VS Code (über die Aktivitätsleiste auf der linken Seite oder F5). Möglicherweise sehen Sie die Meldung "Um Ausführen und Debuggen anzupassen, erstellen Sie eine launch.json-Datei". Dies bedeutet, dass Sie noch keine launch.json-Datei mit Debug-Konfigurationen haben. VS Code kann diese für Sie erstellen, wenn Sie auf den Link launch.json-Datei erstellen klicken
Wählen Sie den Link aus und VS Code fragt nach einer Debug-Konfiguration. Wählen Sie Django aus dem Dropdown-Menü und VS Code füllt eine neue launch.json-Datei mit einer Django-Startkonfiguration. Die launch.json-Datei enthält eine Reihe von Debug-Konfigurationen, von denen jede ein separates JSON-Objekt innerhalb des configuration-Arrays ist.
Scrollen Sie nach unten und untersuchen Sie die Konfiguration mit dem Namen "Python: Django"
```
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python Debugger: Django",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}\\manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    }
  ]
}
```
Diese Konfiguration weist VS Code an, "${workspaceFolder}/manage.py" unter Verwendung des ausgewählten Python-Interpreters und der Argumente in der args-Liste auszuführen. Das Starten des VS Code-Debuggers mit dieser Konfiguration ist also dasselbe wie das Ausführen von python manage.py runserver im VS Code-Terminal mit Ihrer aktivierten virtuellen Umgebung. (Sie können bei Bedarf eine Portnummer wie "5000" zu args hinzufügen.) Der Eintrag "django": true weist VS Code außerdem an, das Debuggen von Django-Seitenvorlagen zu aktivieren, was Sie später in diesem Tutorial sehen werden.
Testen Sie die Konfiguration, indem Sie den Menübefehl Ausführen > Debugging starten auswählen oder auf den grünen Debugging starten-Pfeil neben der Liste klicken (F5)
Strg+Klick auf die URL http://127.0.0.1:8000/ im Terminal-Ausgabefenster, um den Browser zu öffnen und zu sehen, dass die App ordnungsgemäß läuft.
Schließen Sie den Browser und stoppen Sie den Debugger, wenn Sie fertig sind. Um den Debugger zu stoppen, verwenden Sie die Stopp-Schaltfläche in der Symbolleiste (das rote Quadrat) oder den Befehl Ausführen > Debugging stoppen (⇧F5 (Windows, Linux Shift+F5)).
Sie können nun jederzeit Ausführen > Debugging starten verwenden, um die App zu testen, was auch den Vorteil hat, dass alle geänderten Dateien automatisch gespeichert werden.

Den Debugger erkunden

Das Debuggen gibt Ihnen die Möglichkeit, ein laufendes Programm an einer bestimmten Codezeile anzuhalten. Wenn ein Programm angehalten ist, können Sie Variablen untersuchen, Code im Debug-Konsolenbereich ausführen und anderweitig die unter Debuggen beschriebenen Funktionen nutzen. Das Ausführen des Debuggers speichert auch automatisch alle geänderten Dateien, bevor die Debug-Sitzung beginnt.

Bevor Sie beginnen: Stellen Sie sicher, dass Sie die laufende App am Ende des letzten Abschnitts mit Strg+C im Terminal gestoppt haben. Wenn Sie die App in einem Terminal laufen lassen, beansprucht sie weiterhin den Port. Infolgedessen verarbeitet die ursprünglich laufende App alle Anfragen, wenn Sie die App im Debugger unter Verwendung desselben Ports ausführen, und Sie sehen keine Aktivität in der App, die gerade debuggt wird, und das Programm hält nicht an den Haltepunkten an. Mit anderen Worten: Wenn der Debugger nicht zu funktionieren scheint, stellen Sie sicher, dass keine andere Instanz der App mehr läuft.

Fügen Sie in hello/urls.py eine Route zur urlpatterns-Liste hinzu
```
path("hello/<name>", views.hello_there, name="hello_there"),
```
Das erste Argument für path definiert eine Route "hello/", die einen variablen String namens name akzeptiert. Der String wird an die views.hello_there-Funktion übergeben, die im zweiten Argument für path angegeben ist.

URL-Routen unterscheiden zwischen Groß- und Kleinschreibung. Zum Beispiel ist die Route /hello/<name> verschieden von /Hello/<name>. Wenn Sie möchten, dass dieselbe Ansichtsfunktion beide verarbeitet, definieren Sie Pfade für jede Variante.

Ersetzen Sie den Inhalt von views.py durch den folgenden Code, um die hello_there-Funktion zu definieren, die Sie im Debugger durchlaufen können

import re
from django.utils.timezone import datetime
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

def hello_there(request, name):
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    # Filter the name argument to letters only using regular expressions. URL arguments
    # can contain arbitrary text, so we restrict to safe characters only.
    match_object = re.match("[a-zA-Z]+", name)

    if match_object:
        clean_name = match_object.group(0)
    else:
        clean_name = "Friend"

    content = "Hello there, " + clean_name + "! It's " + formatted_now
    return HttpResponse(content)

Die Variable name, die in der URL-Route definiert ist, wird als Argument an die hello_there-Funktion übergeben. Wie in den Codekommentaren beschrieben, sollten Sie beliebige, vom Benutzer bereitgestellte Informationen immer filtern, um verschiedene Angriffe auf Ihre App zu vermeiden. In diesem Fall filtert der Code das name-Argument so, dass es nur Buchstaben enthält, was die Injektion von Steuerzeichen, HTML usw. vermeidet. (Wenn Sie im nächsten Abschnitt Vorlagen verwenden, führt Django eine automatische Filterung durch und Sie benötigen diesen Code nicht.)

Setzen Sie einen Haltepunkt in der ersten Codezeile der hello_there-Funktion (now = datetime.now()), indem Sie einen der folgenden Schritte ausführen
- Drücken Sie mit dem Cursor in dieser Zeile F9, oder,
- Wählen Sie mit dem Cursor in dieser Zeile den Menübefehl Ausführen > Haltepunkt umschalten, oder,
- Klicken Sie direkt in den Rand links neben der Zeilennummer (ein verblasster roter Punkt erscheint beim Bewegen des Mauszeigers dorthin).
Der Haltepunkt erscheint als roter Punkt am linken Rand
Starten Sie den Debugger, indem Sie den Menübefehl Ausführen > Debugging starten auswählen oder auf den grünen Debugging starten-Pfeil neben der Liste klicken (F5)

Beachten Sie, dass sich die Statusleiste farblich ändert, um das Debuggen anzuzeigen

Eine Debugging-Symbolleiste (unten abgebildet) erscheint ebenfalls in VS Code und enthält Befehle in der folgenden Reihenfolge: Anhalten (oder Fortfahren, F5), Überspringen (F10), Einzelschritt (F11), Schritt zurück (⇧F11 (Windows, Linux Shift+F11)), Neustart (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5)) und Stopp (⇧F5 (Windows, Linux Shift+F5)). Siehe VS Code-Debugging für eine Beschreibung jedes Befehls.
Die Ausgabe erscheint in einem "Python Debug Console"-Terminal. Öffnen Sie einen Browser und navigieren Sie zu http://127.0.0.1:8000/hello/VSCode. Bevor die Seite gerendert wird, hält VS Code das Programm an dem Haltepunkt an, den Sie gesetzt haben. Der kleine gelbe Pfeil am Haltepunkt zeigt an, dass dies die nächste auszuführende Codezeile ist.
Verwenden Sie "Überspringen", um die Anweisung now = datetime.now() auszuführen.
Auf der linken Seite des VS Code-Fensters sehen Sie einen Bereich Variablen, der lokale Variablen wie now sowie Argumente wie name anzeigt. Darunter befinden sich Bereiche für Überwachung, Aufrufliste und Haltepunkte (siehe VS Code-Debugging für Details). Versuchen Sie im Abschnitt Lokale Variablen, verschiedene Werte zu erweitern. Sie können auch auf Werte doppelklicken (oder Enter (Windows, Linux F2) verwenden), um sie zu ändern. Das Ändern von Variablen wie now kann jedoch das Programm beschädigen. Entwickler nehmen normalerweise nur Änderungen vor, um Werte zu korrigieren, wenn der Code von Anfang an nicht den richtigen Wert erzeugt hat.
Wenn ein Programm angehalten ist, ermöglicht es Ihnen der Bereich Debug-Konsole (der sich vom "Python Debug Console"-Terminalbereich unterscheidet), mit Ausdrücken zu experimentieren und Codeteile unter Verwendung des aktuellen Zustands des Programms auszuprobieren. Nachdem Sie beispielsweise die Zeile now = datetime.now() übersprungen haben, könnten Sie mit verschiedenen Datums-/Zeitformaten experimentieren. Wählen Sie im Editor den Code now.strftime("%A, %d %B, %Y at %X") aus, klicken Sie mit der rechten Maustaste und wählen Sie Debug: Auswerten, um diesen Code an die Debug-Konsole zu senden, wo er ausgeführt wird
```
now.strftime("%A, %d %B, %Y at %X")
'Friday, 07 September, 2018 at 07:46:32'
```
Tipp: Die Debug-Konsole zeigt auch Ausnahmen aus der App an, die möglicherweise nicht im Terminal erscheinen. Wenn Sie beispielsweise eine "Paused on exception"-Meldung im Bereich Aufrufliste der Ansicht Ausführen und Debuggen sehen, wechseln Sie zur Debug-Konsole, um die Ausnahmemeldung zu sehen.

Kopieren Sie diese Zeile in die >-Eingabeaufforderung am unteren Rand der Debug-Konsole und versuchen Sie, die Formatierung zu ändern

now.strftime("%A, %d %B, %Y at %X")
'Tuesday, 13 June, 2023 at 18:03:19'
now.strftime("%a, %d %b, %Y at %X")
'Tue, 13 Jun, 2023 at 18:03:19'
now.strftime("%a, %d %b, %y at %X")
'Tue, 13 Jun, 23 at 18:03:19'

Gehen Sie bei Bedarf einige weitere Codezeilen durch und wählen Sie dann Fortfahren (F5), damit das Programm weiterläuft. Das Browserfenster zeigt das Ergebnis
Ändern Sie die Zeile im Code, um ein anderes Datumsformat zu verwenden, zum Beispiel now.strftime("%a, %d %b, %y at %X"), und speichern Sie die Datei. Der Django-Server wird automatisch neu geladen, was bedeutet, dass die Änderungen übernommen werden, ohne den Debugger neu starten zu müssen. Aktualisieren Sie die Seite im Browser, um die Aktualisierung zu sehen.
Schließen Sie den Browser und stoppen Sie den Debugger, wenn Sie fertig sind. Um den Debugger zu stoppen, verwenden Sie die Stopp-Schaltfläche in der Symbolleiste (das rote Quadrat) oder den Befehl Ausführen > Debugging stoppen (⇧F5 (Windows, Linux Shift+F5)).

Tipp: Um wiederholt zu einer bestimmten URL wie http://127.0.0.1:8000/hello/VSCode zu navigieren, geben Sie diese URL mit einer print-Anweisung irgendwo in einer Datei wie views.py aus. Die URL erscheint im VS Code-Terminal, wo Sie mit Strg+Klick darauf klicken können, um sie in einem Browser zu öffnen.

Befehle „Gehe zu Definition“ und „Definition einsehen“

Während Ihrer Arbeit mit Django oder einer anderen Bibliothek möchten Sie möglicherweise den Code in diesen Bibliotheken selbst untersuchen. VS Code bietet zwei praktische Befehle, die direkt zu den Definitionen von Klassen und anderen Objekten in beliebigem Code navigieren

Gehe zu Definition springt von Ihrem Code in den Code, der ein Objekt definiert. Klicken Sie beispielsweise in views.py mit der rechten Maustaste auf HttpResponse in der home-Funktion und wählen Sie Gehe zu Definition (oder verwenden Sie F12), wodurch Sie zur Klassendefinition in der Django-Bibliothek gelangen.
Definition einsehen (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10), ebenfalls im Rechtsklick-Kontextmenü) ist ähnlich, zeigt aber die Klassendefinition direkt im Editor an (wodurch Platz im Editorfenster geschaffen wird, um das Verdecken von Code zu vermeiden). Drücken Sie Escape, um das Vorschaufenster zu schließen, oder verwenden Sie das x in der oberen rechten Ecke.

Verwenden einer Vorlage zum Rendern einer Seite

Die App, die Sie bisher in diesem Tutorial erstellt haben, generiert nur reine Text-Webseiten aus Python-Code. Obwohl es möglich ist, HTML direkt im Code zu generieren, vermeiden Entwickler eine solche Praxis, da sie die App anfällig für Cross-Site Scripting (XSS)-Angriffe macht. In der hello_there-Funktion dieses Tutorials könnte man beispielsweise daran denken, die Ausgabe im Code mit etwas wie content = "<h1>Hello there, " + clean_name + "!</h1>" zu formatieren, wobei das Ergebnis in content direkt an einen Browser ausgegeben wird. Diese Öffnung ermöglicht es einem Angreifer, schädliches HTML, einschließlich JavaScript-Code, in der URL zu platzieren, das in clean_name landet und somit im Browser ausgeführt wird.

Eine weitaus bessere Praxis ist es, HTML vollständig aus Ihrem Code herauszuhalten, indem Sie Vorlagen verwenden, sodass sich Ihr Code nur mit Datenwerten und nicht mit dem Rendering befasst.

In Django ist eine Vorlage eine HTML-Datei, die Platzhalter für Werte enthält, die der Code zur Laufzeit bereitstellt. Die Django-Vorlagen-Engine kümmert sich dann um die Ersetzungen beim Rendern der Seite und bietet automatische Maskierung, um XSS-Angriffe zu verhindern (d. h. wenn Sie versuchen würden, HTML in einem Datenwert zu verwenden, würden Sie sehen, dass das HTML nur als reiner Text gerendert wird). Der Code befasst sich also nur mit Datenwerten und die Vorlage nur mit Markup. Django-Vorlagen bieten flexible Optionen wie Vorlagenvererbung, die es Ihnen ermöglicht, eine Basisseite mit gemeinsamem Markup zu definieren und dann mit seitenspezifischen Ergänzungen darauf aufzubauen.

In diesem Abschnitt beginnen Sie damit, eine einzelne Seite mithilfe einer Vorlage zu erstellen. In späteren Abschnitten konfigurieren Sie die App für die Bereitstellung statischer Dateien und erstellen dann mehrere Seiten für die App, die jeweils eine Navigationsleiste aus einer Basisvorlage enthalten. Django-Vorlagen unterstützen auch Kontrollfluss und Iteration, wie Sie später in diesem Tutorial im Kontext des Vorlagen-Debuggens sehen werden.

Suchen Sie in der Datei web_project/settings.py die Liste INSTALLED_APPS und fügen Sie den folgenden Eintrag hinzu, der sicherstellt, dass das Projekt die App kennt, damit es Vorlagen verarbeiten kann
```
'hello',
```
Erstellen Sie innerhalb des hello-Ordners einen Ordner namens templates und dann einen weiteren Unterordner namens hello, um dem App-Namen zu entsprechen (diese zweistufige Ordnerstruktur ist typische Django-Konvention).
Erstellen Sie im Ordner templates/hello eine Datei namens hello_there.html mit dem folgenden Inhalt. Diese Vorlage enthält zwei Platzhalter für Datenwerte namens "name" und "date", die durch Paare von geschweiften Klammern, {{ und }}, abgegrenzt sind. Alles andere unveränderliche Text ist Teil der Vorlage, zusammen mit Formatierungs-Markup (wie <strong>). Wie Sie sehen können, können Vorlagenplatzhalter auch Formatierungen enthalten, die Ausdrücke nach den Pipe-Symbolen |, in diesem Fall unter Verwendung von Djangos integriertem Datumsfilter und Zeitfilter. Der Code muss also nur den datetime-Wert übergeben, anstatt einen vorformatierten String
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Django</title>
    </head>
    <body>
        <strong>Hello there, {{ name }}!</strong> It's {{ date | date:"l, d F, Y" }} at {{ date | time:"H:i:s" }}
    </body>
</html>
```
Fügen Sie am Anfang von views.py die folgende Importanweisung hinzu
```
from django.shortcuts import render
```
Ändern Sie ebenfalls in views.py die hello_there-Funktion, um die django.shortcuts.render-Methode zu verwenden, um eine Vorlage zu laden und den Vorlagenkontext bereitzustellen. Der Kontext ist die Menge der Variablen zur Verwendung innerhalb der Vorlage. Die render-Funktion nimmt das Anforderungsobjekt, gefolgt vom Pfad zur Vorlage relativ zum templates-Ordner, dann das Kontextobjekt. (Entwickler benennen die Vorlagen normalerweise gleich wie die Funktionen, die sie verwenden, aber übereinstimmende Namen sind nicht erforderlich, da Sie im Code immer auf den genauen Dateinamen verweisen.)
```
def hello_there(request, name):
    print(request.build_absolute_uri()) #optional
    return render(
        request,
        'hello/hello_there.html',
        {
            'name': name,
            'date': datetime.now()
        }
    )
```
Sie können sehen, dass der Code jetzt viel einfacher ist und sich nur mit Datenwerten befasst, da das Markup und die Formatierung vollständig in der Vorlage enthalten sind.
Starten Sie das Programm (innerhalb oder außerhalb des Debuggers mit ⌃F5 (Windows, Linux Ctrl+F5)), navigieren Sie zu einer /hello/name-URL und beobachten Sie die Ergebnisse.
Versuchen Sie auch, zu einer /hello/name-URL zu navigieren, die einen Namen wie <a%20value%20that%20could%20be%20HTML> verwendet, um Djangos automatische Maskierung in Aktion zu sehen. Der "name"-Wert erscheint im Browser als reiner Text, anstatt ein tatsächliches Element zu rendern.

Bereitstellen statischer Dateien

Statische Dateien sind Inhaltsteile, die Ihre Web-App für bestimmte Anforderungen unverändert zurückgibt, wie z. B. CSS-Dateien. Die Bereitstellung statischer Dateien erfordert, dass die INSTALLED_APPS-Liste in settings.py django.contrib.staticfiles enthält, was standardmäßig enthalten ist.

Die Bereitstellung statischer Dateien in Django ist eine Kunst für sich, insbesondere bei der Bereitstellung in der Produktion. Was hier gezeigt wird, ist ein einfacher Ansatz, der sowohl mit dem Django-Entwicklungsserver als auch mit einem Produktionsserver wie Gunicorn funktioniert. Eine vollständige Behandlung statischer Dateien würde jedoch den Rahmen dieses Tutorials sprengen, daher finden Sie weitere Informationen unter Statische Dateien verwalten in der Django-Dokumentation.

Beim Wechsel zur Produktion navigieren Sie zu settings.py, setzen DEBUG=False und ändern ALLOWED_HOSTS = ['*'], um bestimmte Hosts zuzulassen. Dies kann bei der Verwendung von Containern zu zusätzlichem Arbeitsaufwand führen. Einzelheiten finden Sie in Issue 13.

Bereiten Sie die App auf statische Dateien vor

Fügen Sie in der web_project/urls.py des Projekts die folgende import-Anweisung hinzu
```
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
```
Fügen Sie in derselben Datei am Ende die folgende Zeile hinzu, die Standard-URLs für statische Dateien zu der Liste hinzufügt, die das Projekt erkennt
```
urlpatterns += staticfiles_urlpatterns()
```

Verweisen Sie in einer Vorlage auf statische Dateien

Erstellen Sie im hello-Ordner einen Ordner namens static.
Erstellen Sie innerhalb des static-Ordners einen Unterordner namens hello, der dem App-Namen entspricht.

Der Grund für diesen zusätzlichen Unterordner ist, dass Sie beim Bereitstellen des Django-Projekts auf einem Produktionsserver alle statischen Dateien in einem einzigen Ordner sammeln, der dann von einem dedizierten Server für statische Dateien bereitgestellt wird. Der Unterordner static/hello stellt sicher, dass die statischen Dateien der App beim Sammeln in einem App-spezifischen Unterordner liegen und nicht mit Dateien aus anderen Apps im selben Projekt kollidieren.
Erstellen Sie im Ordner static/hello eine Datei namens site.css mit dem folgenden Inhalt. Beobachten Sie nach der Eingabe dieses Codes auch die Syntaxhervorhebung, die VS Code für CSS-Dateien bietet, einschließlich einer Farbvorschau.
```
.message {
    font-weight: 600;
    color: blue;
}
```
Fügen Sie in templates/hello/hello_there.html die folgenden Zeilen nach dem <title>-Element hinzu. Das {% load static %}-Tag ist ein benutzerdefinierter Django-Vorlagen-Tag-Satz, der es Ihnen ermöglicht, {% static %} zu verwenden, um auf eine Datei wie das Stylesheet zu verweisen.
```
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />
```
Ersetzen Sie außerdem in templates/hello/hello_there.html den Inhalt des <body>-Elements durch das folgende Markup, das den message-Stil anstelle eines <strong>-Tags verwendet
```
<span class="message">Hello, there {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.
```
Führen Sie die App aus, navigieren Sie zu einer /hello/name-URL und beobachten Sie, dass die Meldung in Blau gerendert wird. Stoppen Sie die App, wenn Sie fertig sind.

Verwenden Sie den collectstatic-Befehl

Für Produktionsbereitstellungen sammeln Sie normalerweise alle statischen Dateien Ihrer Apps mit dem Befehl python manage.py collectstatic in einem einzigen Ordner. Sie können dann einen dedizierten Server für statische Dateien verwenden, um diese Dateien bereitzustellen, was normalerweise zu einer besseren Gesamtleistung führt. Die folgenden Schritte zeigen, wie diese Sammlung erfolgt, obwohl Sie die Sammlung beim Ausführen mit dem Django-Entwicklungsserver nicht verwenden.

Fügen Sie in web_project/settings.py die folgende Zeile hinzu, die einen Speicherort definiert, an dem statische Dateien gesammelt werden, wenn Sie den Befehl collectstatic verwenden
```
STATIC_ROOT = BASE_DIR / 'static_collected'
```
Führen Sie im Terminal den Befehl python manage.py collectstatic aus und beobachten Sie, dass hello/site.css in den static_collected-Ordner auf der obersten Ebene neben manage.py kopiert wird.
Führen Sie in der Praxis collectstatic jedes Mal aus, wenn Sie statische Dateien ändern und bevor Sie sie in der Produktion bereitstellen.

Erstellen mehrerer Vorlagen, die eine Basisvorlage erweitern

Da die meisten Web-Apps mehr als eine Seite haben und diese Seiten normalerweise viele gemeinsame Elemente teilen, trennen Entwickler diese gemeinsamen Elemente in eine Basis-Seitenvorlage, die andere Seitenvorlagen dann erweitern. (Dies wird auch als Vorlagenvererbung bezeichnet, was bedeutet, dass die erweiterten Seiten Elemente von der Basisseite erben.)

Da Sie wahrscheinlich viele Seiten erstellen werden, die dieselbe Vorlage erweitern, ist es zudem hilfreich, ein Code-Snippet in VS Code zu erstellen, mit dem Sie neue Seitenvorlagen schnell initialisieren können. Ein Snippet hilft Ihnen, mühsame und fehleranfällige Kopier-und-Einfüge-Operationen zu vermeiden.

Die folgenden Abschnitte führen durch verschiedene Teile dieses Prozesses.

Erstellen einer Basis-Seitenvorlage und Stilen

Eine Basis-Seitenvorlage in Django enthält alle gemeinsam genutzten Teile einer Reihe von Seiten, einschließlich Verweisen auf CSS-Dateien, Skriptdateien usw. Basisvorlagen definieren auch einen oder mehrere Block-Tags mit Inhalten, von denen erwartet wird, dass erweiterte Vorlagen sie überschreiben. Ein Block-Tag wird sowohl in der Basisvorlage als auch in erweiterten Vorlagen durch {% block <name> %} und {% endblock %} abgegrenzt.

Die folgenden Schritte zeigen das Erstellen einer Basisvorlage.

Erstellen Sie im Ordner templates/hello eine Datei namens layout.html mit dem folgenden Inhalt, der Blöcke namens "title" und "content" enthält. Wie Sie sehen können, definiert das Markup eine einfache Navigationsleistenstruktur mit Links zu Home-, About- und Contact-Seiten, die Sie in einem späteren Abschnitt erstellen. Beachten Sie die Verwendung von Djangos {% url %}-Tag, um über die Namen der entsprechenden URL-Muster auf andere Seiten zu verweisen, anstatt über einen relativen Pfad.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>{% block title %}{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}"/>
</head>

<body>
<div class="navbar">
    <a href="{% url 'home' %}" class="navbar-brand">Home</a>
    <a href="{% url 'about' %}" class="navbar-item">About</a>
    <a href="{% url 'contact' %}" class="navbar-item">Contact</a>
</div>

<div class="body-content">
    {% block content %}
    {% endblock %}
    <hr/>
    <footer>
        <p>&copy; 2018</p>
    </footer>
</div>
</body>
</html>

Fügen Sie die folgenden Stile zu static/hello/site.css unterhalb des bestehenden "message"-Stils hinzu und speichern Sie die Datei. (Diese Anleitung versucht nicht, responsives Design zu demonstrieren; diese Stile erzeugen einfach ein einigermaßen interessantes Ergebnis.)

.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Sie können die App an diesem Punkt ausführen, aber da Sie die Basisvorlage nirgendwo verwendet und keine Codedateien geändert haben, ist das Ergebnis dasselbe wie im vorherigen Schritt. Schließen Sie die verbleibenden Abschnitte ab, um den endgültigen Effekt zu sehen.

Erstellen eines Code-Snippets

Da die drei Seiten, die Sie im nächsten Abschnitt erstellen, layout.html erweitern, spart es Zeit, ein Code-Snippet zu erstellen, um eine neue Vorlagendatei mit dem entsprechenden Verweis auf die Basisvorlage zu initialisieren. Ein Code-Snippet bietet ein konsistentes Stück Code aus einer einzigen Quelle, was Fehler vermeidet, die beim Kopieren und Einfügen aus vorhandenem Code auftreten können.

Wählen Sie in VS Code das Menü Datei (Windows/Linux) oder Code (macOS) und dann Einstellungen > Benutzer-Snippets.
Wählen Sie in der Liste, die erscheint, html. (Die Option erscheint möglicherweise als "html.json" im Abschnitt Existierende Snippets der Liste, falls Sie zuvor Snippets erstellt haben.)

Nachdem VS Code html.json geöffnet hat, fügen Sie den Code unten innerhalb der existierenden geschweiften Klammern hinzu. (Die erklärenden Kommentare, die hier nicht gezeigt werden, beschreiben Details wie die $0-Zeile, die angibt, wo VS Code den Cursor nach dem Einfügen eines Snippets platziert)

"Django Tutorial: template extending layout.html": {
    "prefix": "djextlayout",
    "body": [
        "{% extends \"hello/layout.html\" %}",
        "{% block title %}",
        "$0",
        "{% endblock %}",
        "{% block content %}",
        "{% endblock %}"
    ],

    "description": "Boilerplate template that extends layout.html"
},

Speichern Sie die html.json-Datei (⌘S (Windows, Linux Ctrl+S)).
Wenn Sie jetzt anfangen, das Präfix des Snippets zu tippen, wie z. B. djext, bietet VS Code das Snippet als Vervollständigungsoption an, wie im nächsten Abschnitt gezeigt. Sie können auch den Befehl Snippet einfügen verwenden, um ein Snippet aus einem Menü auszuwählen.

Weitere Informationen zu Code-Snippets im Allgemeinen finden Sie unter Snippets erstellen.

Verwenden Sie das Code-Snippet, um Seiten hinzuzufügen

Mit dem Code-Snippet an Ort und Stelle können Sie schnell Vorlagen für die Home-, About- und Contact-Seiten erstellen.

Erstellen Sie im Ordner templates/hello eine neue Datei namens home.html. Fangen Sie dann an, djext zu tippen, um zu sehen, wie das Snippet als Vervollständigung erscheint

Wenn Sie die Vervollständigung auswählen, erscheint der Code des Snippets mit dem Cursor am Einfügepunkt des Snippets
Schreiben Sie am Einfügepunkt im "title"-Block Home und im "content"-Block <p>Home page for the Visual Studio Code Django tutorial.</p>, dann speichern Sie die Datei. Diese Zeilen sind die einzigen einzigartigen Teile der erweiterten Seitenvorlage
Erstellen Sie im Ordner templates/hello die Datei about.html, verwenden Sie das Snippet, um das Boilerplate-Markup einzufügen, fügen Sie About us und <p>About page for the Visual Studio Code Django tutorial.</p> in die "title"- bzw. "content"-Blöcke ein und speichern Sie dann die Datei.
Wiederholen Sie den vorherigen Schritt, um templates/hello/contact.html mit Contact us und <p>Contact page for the Visual Studio Code Django tutorial.</p> zu erstellen.
Fügen Sie in der urls.py der App Routen für die /about- und /contact-Seiten hinzu. Beachten Sie, dass das name-Argument für die path-Funktion den Namen definiert, mit dem Sie in den {% url %}-Tags in den Vorlagen auf die Seite verweisen.
```
path("about/", views.about, name="about"),
path("contact/", views.contact, name="contact"),
```

Fügen Sie in views.py Funktionen für die /about- und /contact-Routen hinzu, die auf ihre jeweiligen Seitenvorlagen verweisen. Ändern Sie außerdem die home-Funktion, um die home.html-Vorlage zu verwenden.

# Replace the existing home function with the one below
def home(request):
    return render(request, "hello/home.html")

def about(request):
    return render(request, "hello/about.html")

def contact(request):
    return render(request, "hello/contact.html")

Führen Sie die App aus

Speichern Sie bei vorhandenen Seitenvorlagen views.py, führen Sie die App aus und öffnen Sie einen Browser auf der Startseite, um die Ergebnisse zu sehen. Navigieren Sie zwischen den Seiten, um zu überprüfen, ob die Seitenvorlagen die Basisvorlage ordnungsgemäß erweitern.

Django tutorial: app rendering a common nav bar from the base template

Arbeiten mit Daten, Datenmodellen und Migrationen

Viele Web-Apps arbeiten mit Informationen, die in einer Datenbank gespeichert sind, und Django erleichtert es, die Objekte in dieser Datenbank mithilfe von Modellen darzustellen. In Django ist ein Modell eine Python-Klasse, abgeleitet von django.db.models.Model, die ein spezifisches Datenbankobjekt darstellt, typischerweise eine Tabelle. Sie platzieren diese Klassen in der models.py-Datei einer App.

Bei Django arbeiten Sie fast ausschließlich über die Modelle, die Sie im Code definieren, mit Ihrer Datenbank. Djangos "Migrationen" erledigen dann automatisch alle Details der zugrunde liegenden Datenbank, während Sie die Modelle im Laufe der Zeit weiterentwickeln. Der allgemeine Arbeitsablauf sieht wie folgt aus

Nehmen Sie Änderungen an den Modellen in Ihrer models.py-Datei vor.
Führen Sie python manage.py makemigrations aus, um Skripte im migrations-Ordner zu generieren, die die Datenbank von ihrem aktuellen Zustand in den neuen Zustand migrieren.
Führen Sie python manage.py migrate aus, um die Skripte auf die eigentliche Datenbank anzuwenden.

Die Migrationsskripte zeichnen effektiv alle inkrementellen Änderungen auf, die Sie im Laufe der Zeit an Ihren Datenmodellen vornehmen. Durch das Anwenden der Migrationen aktualisiert Django die Datenbank, sodass sie mit Ihren Modellen übereinstimmt. Da jede inkrementelle Änderung ihr eigenes Skript hat, kann Django automatisch jede vorherige Version einer Datenbank (einschließlich einer neuen Datenbank) auf die aktuelle Version migrieren. Infolgedessen müssen Sie sich nur um Ihre Modelle in models.py kümmern, niemals um das zugrunde liegende Datenbankschema oder die Migrationsskripte. Sie lassen Django diesen Teil erledigen!

Auch im Code arbeiten Sie ausschließlich mit Ihren Modellklassen, um Daten zu speichern und abzurufen; Django kümmert sich um die zugrunde liegenden Details. Die einzige Ausnahme ist, dass Sie Daten mithilfe des Django-Verwaltungsprogramms loaddata-Befehl in Ihre Datenbank schreiben können. Dieses Dienstprogramm wird häufig verwendet, um einen Datensatz zu initialisieren, nachdem der migrate-Befehl das Schema initialisiert hat.

Wenn Sie die db.sqlite3-Datei verwenden, können Sie auch direkt mit der Datenbank arbeiten, indem Sie ein Tool wie den SQLite-Browser verwenden. Es ist in Ordnung, Datensätze in Tabellen mit einem solchen Tool hinzuzufügen oder zu löschen, aber vermeiden Sie Änderungen am Datenbankschema, da die Datenbank dann nicht mehr mit den Modellen Ihrer App synchron ist. Ändern Sie stattdessen die Modelle, führen Sie makemigrations aus und dann migrate.

Datenbanktypen

Standardmäßig enthält Django eine db.sqlite3-Datei für die Datenbank einer App, die für Entwicklungsarbeiten geeignet ist. Wie unter Wann man SQLite verwendet (sqlite.org) beschrieben, funktioniert SQLite gut für Sites mit geringem bis mittlerem Datenverkehr mit weniger als 100.000 Zugriffen/Tag, wird aber für höhere Volumina nicht empfohlen. Es ist auch auf einen einzigen Computer beschränkt, daher kann es in keinem Multi-Server-Szenario wie Lastenausgleich und Geo-Replikation verwendet werden.

Erwägen Sie aus diesen Gründen die Verwendung eines Datenspeichers auf Produktionsebene wie PostgreSQL, MySQL und SQL Server. Informationen zur Unterstützung von Django für andere Datenbanken finden Sie unter Datenbankeinrichtung. Sie können auch das Azure SDK for Python verwenden, um mit Azure-Speicherdiensten wie Tabellen und Blobs zu arbeiten.

Modelle definieren

Ein Django-Modell ist wiederum eine Python-Klasse, die von django.db.model.Models abgeleitet ist und die Sie in der models.py-Datei der App platzieren. In der Datenbank erhält jedes Modell automatisch ein eindeutiges ID-Feld namens id. Alle anderen Felder werden als Eigenschaften der Klasse unter Verwendung von Typen aus django.db.models wie CharField (begrenzter Text), TextField (unbegrenzter Text), EmailField, URLField, IntegerField, DecimalField, BooleanField, DateTimeField, ForeignKey und ManyToMany definiert. (Siehe die Modellfeld-Referenz in der Django-Dokumentation für Details.)

Jedes Feld nimmt einige Attribute entgegen, wie max_length. Das Attribut blank=True bedeutet, dass das Feld optional ist; null=true bedeutet, dass ein Wert optional ist. Es gibt auch ein choices-Attribut, das Werte auf Werte in einem Array von Datenwert/Anzeigewert-Tupeln beschränkt.

Fügen Sie beispielsweise die folgende Klasse in models.py hinzu, um ein Datenmodell zu definieren, das datierte Einträge in einem einfachen Nachrichtenprotokoll darstellt

from django.db import models
from django.utils import timezone

class LogMessage(models.Model):
    message = models.CharField(max_length=300)
    log_date = models.DateTimeField("date logged")

    def __str__(self):
        """Returns a string representation of a message."""
        date = timezone.localtime(self.log_date)
        return f"'{self.message}' logged on {date.strftime('%A, %d %B, %Y at %X')}"

Eine Modellklasse kann Methoden enthalten, die Werte zurückgeben, die aus anderen Klasseneigenschaften berechnet wurden. Modelle enthalten normalerweise eine __str__-Methode, die eine String-Repräsentation der Instanz zurückgibt.

Die Datenbank migrieren

Da Sie Ihre Datenmodelle durch Bearbeitung von models.py geändert haben, müssen Sie die Datenbank selbst aktualisieren. Öffnen Sie in VS Code ein Terminal mit aktivierter virtueller Umgebung (verwenden Sie den Befehl Terminal: Neues Terminal erstellen, ⌃⇧` (Windows, Linux Ctrl+Shift+`))), navigieren Sie zum Projektordner und führen Sie die folgenden Befehle aus

python manage.py makemigrations
python manage.py migrate

Werfen Sie einen Blick in den migrations-Ordner, um die Skripte zu sehen, die makemigrations generiert. Sie können auch die Datenbank selbst betrachten, um zu sehen, dass das Schema aktualisiert wurde.

Wenn Sie beim Ausführen der Befehle Fehler sehen, stellen Sie sicher, dass Sie kein Debugging-Terminal verwenden, das aus früheren Schritten übrig geblieben ist, da dort möglicherweise nicht die virtuelle Umgebung aktiviert ist.

Die Datenbank durch die Modelle verwenden

Mit Ihren Modellen und der migrierten Datenbank können Sie Daten nur unter Verwendung Ihrer Modelle speichern und abrufen. In diesem Abschnitt fügen Sie der App eine Formularseite hinzu, über die Sie eine Nachricht protokollieren können. Sie ändern dann die Startseite, um diese Nachrichten anzuzeigen. Da Sie hier viele Codedateien ändern, achten Sie auf die Details.

Erstellen Sie im hello-Ordner (dort, wo sich views.py befindet) eine neue Datei namens forms.py mit dem folgenden Code, der ein Django-Formular definiert, das ein Feld enthält, das aus dem Datenmodell LogMessage stammt

from django import forms
from hello.models import LogMessage

class LogMessageForm(forms.ModelForm):
    class Meta:
        model = LogMessage
        fields = ("message",)   # NOTE: the trailing comma is required

Erstellen Sie im Ordner templates/hello eine neue Vorlage namens log_message.html mit dem folgenden Inhalt, der davon ausgeht, dass der Vorlage eine Variable namens form übergeben wird, um den Körper des Formulars zu definieren. Es fügt dann eine Absenden-Schaltfläche mit der Beschriftung "Log" hinzu.
```
{% extends "hello/layout.html" %}
{% block title %}
    Log a message
{% endblock %}
{% block content %}
    <form method="POST" class="log-form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default">Log</button>
    </form>
{% endblock %}
```
Hinweis: Das {% csrf_token %}-Tag von Django bietet Schutz vor Cross-Site Request Forgeries. Siehe Cross Site Request Forgery-Schutz in der Django-Dokumentation für Details.
Fügen Sie in der Datei static/hello/site.css der App eine Regel hinzu, um das Eingabeformular breiter zu machen
```
input[name=message] {
    width: 80%;
}
```
Fügen Sie in der urls.py-Datei der App eine Route für die neue Seite hinzu
```
path("log/", views.log_message, name="log"),
```

Definieren Sie in views.py die Ansicht namens log_message (auf die die URL-Route verweist). Diese Ansicht verarbeitet sowohl HTTP GET- als auch POST-Fälle. Im GET-Fall (der else:-Abschnitt) wird lediglich das Formular angezeigt, das Sie in den vorherigen Schritten definiert haben. Im POST-Fall ruft es die Daten aus dem Formular in ein Datenobjekt (message) ab, setzt den Zeitstempel und speichert dieses Objekt, woraufhin es in die Datenbank geschrieben wird

# Add these to existing imports at the top of the file:
from django.shortcuts import redirect
from hello.forms import LogMessageForm
from hello.models import LogMessage

# Add this code elsewhere in the file:
def log_message(request):
    form = LogMessageForm(request.POST or None)

    if request.method == "POST":
        if form.is_valid():
            message = form.save(commit=False)
            message.log_date = datetime.now()
            message.save()
            return redirect("home")
    else:
        return render(request, "hello/log_message.html", {"form": form})

Noch ein Schritt, bevor Sie alles ausprobieren können! Fügen Sie in templates/hello/layout.html einen Link im "navbar"-div für die Nachrichtenzugangsseite hinzu
```

<a href="{% url 'log' %}" class="navbar-item">Log Message</a>
```
Führen Sie die App aus und öffnen Sie einen Browser auf der Startseite. Wählen Sie den Link Log Message in der Navigationsleiste, was die Nachrichtenzugangsseite anzeigen sollte
Geben Sie eine Nachricht ein, wählen Sie Log, und Sie sollten zur Startseite zurückgeleitet werden. Die Startseite zeigt noch keine der protokollierten Nachrichten an (was Sie in einem Moment beheben werden). Fühlen Sie sich frei, auch ein paar weitere Nachrichten zu protokollieren. Wenn Sie möchten, werfen Sie einen Blick in die Datenbank mit einem Tool wie SQLite Browser, um zu sehen, dass Datensätze erstellt wurden. Öffnen Sie die Datenbank schreibgeschützt, oder denken Sie daran, die Datenbank vor der Verwendung der App zu schließen, sonst schlägt die App fehl, weil die Datenbank gesperrt ist.
Stoppen Sie die App, wenn Sie fertig sind.

Ändern Sie nun die Startseite, um die protokollierten Nachrichten anzuzeigen. Beginnen Sie damit, den Inhalt der Datei templates/hello/home.html der App durch das unten stehende Markup zu ersetzen. Diese Vorlage erwartet eine Kontextvariable namens message_list. Wenn sie eine erhält (geprüft mit dem {% if message_list %}-Tag), iteriert sie dann über diese Liste (das {% for message in message_list %}-Tag), um Tabellenzeilen für jede Nachricht zu generieren. Andernfalls zeigt die Seite an, dass noch keine Nachrichten protokolliert wurden.

{% extends "hello/layout.html" %}
{% block title %}
    Home
{% endblock %}
{% block content %}
    <h2>Logged messages</h2>

    {% if message_list %}
        <table class="message_list">
            <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Message</th>
            </tr>
            </thead>
            <tbody>
            {% for message in message_list %}
                <tr>
                    <td>{{ message.log_date | date:'d M Y' }}</td>
                    <td>{{ message.log_date | time:'H:i:s' }}</td>
                    <td>
                        {{ message.message }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No messages have been logged. Use the <a href="{% url 'log' %}">Log Message form</a>.</p>
    {% endif %}
{% endblock %}

Fügen Sie in static/hello/site.css eine Regel hinzu, um die Tabelle ein wenig zu formatieren
```
.message_list th,td {
    text-align: left;
    padding-right: 15px;
}
```
Importieren Sie in views.py die generische ListView-Klasse von Django, die wir verwenden werden, um die Startseite zu implementieren
```
from django.views.generic import ListView
```

Ersetzen Sie ebenfalls in views.py die home-Funktion durch eine Klasse namens HomeListView, abgeleitet von ListView, die sich selbst an das LogMessage-Modell bindet und eine Funktion get_context_data implementiert, um den Kontext für die Vorlage zu generieren.

# Remove the old home function if you want; it's no longer used

class HomeListView(ListView):
    """Renders the home page, with a list of all messages."""
    model = LogMessage

    def get_context_data(self, **kwargs):
        context = super(HomeListView, self).get_context_data(**kwargs)
        return context

Importieren Sie in der urls.py der App das Datenmodell
```
from hello.models import LogMessage
```
Erstellen Sie ebenfalls in urls.py eine Variable für die neue Ansicht, die die fünf neuesten LogMessage-Objekte in absteigender Reihenfolge abruft (was bedeutet, dass sie die Datenbank abfragt), dann einen Namen für die Daten im Vorlagenkontext (message_list) bereitstellt und die zu verwendende Vorlage identifiziert
```
home_list_view = views.HomeListView.as_view(
    queryset=LogMessage.objects.order_by("-log_date")[:5],  # :5 limits the results to the five most recent
    context_object_name="message_list",
    template_name="hello/home.html",
)
```

Ändern Sie in urls.py den Pfad zur Startseite, um die home_list_view-Variable zu verwenden

    # Replace the existing path for ""
    path("", home_list_view, name="home"),

Starten Sie die App und öffnen Sie einen Browser auf der Startseite, die nun Nachrichten anzeigen sollte
Stoppen Sie die App, wenn Sie fertig sind.

Verwenden des Debuggers mit Seitenvorlagen

Wie im vorherigen Abschnitt gezeigt, können Seitenvorlagen prozedurale Anweisungen wie {% for message in message_list %} und {% if message_list %} enthalten, anstatt nur passive, deklarative Elemente wie {% url %} und {% block %}. Infolgedessen können Sie wie bei jedem anderen prozeduralen Code Programmierfehler innerhalb von Vorlagen haben.

Glücklicherweise bietet die Python-Erweiterung für VS Code Vorlagen-Debugging, wenn Sie "django": true in der Debugging-Konfiguration haben (was Sie bereits getan haben). Die folgenden Schritte demonstrieren diese Fähigkeit

Setzen Sie in templates/hello/home.html Haltepunkte sowohl auf die {% if message_list %}- als auch auf die {% for message in message_list %}-Zeilen, wie durch die gelben Pfeile im Bild unten angezeigt
Führen Sie die App im Debugger aus und öffnen Sie einen Browser auf der Startseite. (Wenn Sie den Debugger bereits ausführen, müssen Sie die App nach dem Setzen von Haltepunkten nicht neu starten; aktualisieren Sie einfach die Seite.) Beobachten Sie, dass VS Code im Debugger in der Vorlage an der {% if %}-Anweisung anhält und alle Kontextvariablen im Bereich Variablen anzeigt
Verwenden Sie den Befehl "Überspringen" (F10), um den Vorlagencode zu durchlaufen. Beobachten Sie, dass der Debugger alle deklarativen Anweisungen überspringt und bei jedem prozeduralen Code anhält. Zum Beispiel ermöglicht Ihnen das Durchlaufen der {% for message in message_list %}-Schleifen, jeden Wert in message zu untersuchen und zu Zeilen wie <td>{{ message.log_date | date:'d M Y' }}</td> zu springen.
Sie können auch mit Variablen im Bereich Debug-Konsole arbeiten. (Django-Filter wie date sind jedoch derzeit in der Konsole nicht verfügbar.)
Wenn Sie bereit sind, wählen Sie Fortfahren (F5), um das Ausführen der App abzuschließen und die gerenderte Seite im Browser anzuzeigen. Stoppen Sie den Debugger, wenn Sie fertig sind.

Optionale Aktivitäten

Die folgenden Abschnitte beschreiben zusätzliche Schritte, die Sie möglicherweise bei Ihrer Arbeit mit Python und Visual Studio Code hilfreich finden.

Erstellen Sie eine requirements.txt-Datei für die Umgebung

Wenn Sie Ihren App-Code über die Versionsverwaltung oder auf andere Weise teilen, ist es nicht sinnvoll, alle Dateien in einer virtuellen Umgebung zu kopieren, da Empfänger diese Umgebung jederzeit selbst neu erstellen können.

Dementsprechend lassen Entwickler den Ordner der virtuellen Umgebung normalerweise aus der Versionsverwaltung aus und beschreiben stattdessen die Abhängigkeiten der App mithilfe einer requirements.txt-Datei.

Obwohl Sie die Datei von Hand erstellen können, können Sie auch den Befehl pip freeze verwenden, um die Datei basierend auf den exakten Bibliotheken zu generieren, die in der aktivierten Umgebung installiert sind

Wählen Sie Ihre Umgebung mit dem Befehl Python: Interpreter auswählen aus und führen Sie den Befehl Terminal: Neues Terminal erstellen aus (⌃⇧` (Windows, Linux Ctrl+Shift+`))), um ein Terminal mit dieser aktivierten Umgebung zu öffnen.
Führen Sie im Terminal pip freeze > requirements.txt aus, um die requirements.txt-Datei in Ihrem Projektordner zu erstellen.

Jeder (oder jeder Build-Server), der eine Kopie des Projekts erhält, muss nur den Befehl pip install -r requirements.txt ausführen, um die Pakete, von denen die App abhängt, innerhalb der aktiven Umgebung neu zu installieren.

Hinweis: pip freeze listet alle Python-Pakete auf, die Sie in der aktuellen Umgebung installiert haben, einschließlich Paketen, die Sie derzeit nicht verwenden. Der Befehl listet auch Pakete mit exakten Versionsnummern auf, die Sie möglicherweise in Zukunft für mehr Flexibilität in Bereiche umwandeln möchten. Weitere Informationen finden Sie unter Anforderungsdateien in der pip-Befehlsdokumentation.

Erstellen eines Superusers und Aktivieren der administrativen Schnittstelle

Standardmäßig bietet Django eine administrative Schnittstelle für eine Web-App, die durch Authentifizierung geschützt ist. Die Schnittstelle wird durch die integrierte App django.contrib.admin implementiert, die standardmäßig in der Liste INSTALLED_APPS des Projekts (settings.py) enthalten ist, und die Authentifizierung wird mit der integrierten App django.contrib.auth abgewickelt, die ebenfalls standardmäßig in INSTALLED_APPS enthalten ist.

Führen Sie die folgenden Schritte aus, um die administrative Schnittstelle zu aktivieren

Erstellen Sie ein Superuser-Konto in der App, indem Sie ein Terminal in VS Code für Ihre virtuelle Umgebung öffnen und dann den Befehl python manage.py createsuperuser --username=<username> --email=<email> ausführen, wobei Sie <username> und <email> natürlich durch Ihre persönlichen Informationen ersetzen. Wenn Sie den Befehl ausführen, fordert Sie Django auf, Ihr Passwort einzugeben und zu bestätigen.
Denken Sie daran, sich Ihre Kombination aus Benutzername und Passwort zu merken. Dies sind die Anmeldedaten, die Sie zum Authentifizieren bei der App verwenden.
Fügen Sie die folgende URL-Route in der projektweiten urls.py (in diesem Tutorial web_project/urls.py) hinzu, um auf die integrierte administrative Schnittstelle zu verweisen
```
# This path is included by default when creating the app
 path("admin/", admin.site.urls),
```
Starten Sie den Server und öffnen Sie dann einen Browser auf der /admin-Seite der App (z. B. http://127.0.0.1:8000/admin bei Verwendung des Entwicklungsservers).
Eine Anmeldeseite erscheint, dank django.contrib.auth. Geben Sie Ihre Superuser-Anmeldedaten ein.
Sobald Sie authentifiziert sind, sehen Sie die Standard-Administrationsseite, über die Sie Benutzer und Gruppen verwalten können

Sie können die administrative Schnittstelle beliebig anpassen. Sie könnten beispielsweise Funktionen bereitstellen, um Einträge in der Datenbank zu bearbeiten und zu löschen. Weitere Informationen zum Vornehmen von Anpassungen finden Sie in der Django-Admin-Site-Dokumentation.

Erstellen eines Containers für eine Django-App mit der Container Tools-Erweiterung
Die Container Tools-Erweiterung macht es einfach, containerisierte Anwendungen von Visual Studio Code aus zu erstellen, zu verwalten und bereitzustellen. Wenn Sie daran interessiert sind, zu lernen, wie man einen Python-Container für die in diesem Tutorial entwickelte Django-App erstellt, sehen Sie sich das Tutorial Python in einem Container an, das Sie durch die Schritte führt, wie man

Erstellen einer `Dockerfile`-Datei, die einen einfachen Python-Container beschreibt.

Die Funktionalität einer Django-App erstellt, ausführt und überprüft.
Debuggen der App, die in einem Container ausgeführt wird.

Nächste Schritte

Herzlichen Glückwunsch zum Abschluss dieser Anleitung zur Arbeit mit Django in Visual Studio Code!

Das fertige Codeprojekt aus diesem Tutorial finden Sie auf GitHub: python-sample-vscode-django-tutorial.

In diesem Tutorial haben wir nur an der Oberfläche dessen gekratzt, was Django alles kann. Besuchen Sie unbedingt die Django-Dokumentation und das offizielle Django-Tutorial für viele weitere Details zu Ansichten, Vorlagen, Datenmodellen, URL-Routing, der administrativen Schnittstelle, der Verwendung anderer Datenbanktypen, der Bereitstellung in der Produktion und mehr.

Um Ihre App auf einer Produktions-Website auszuprobieren, sehen Sie sich das Tutorial Python-Apps mit Docker-Containern in Azure App Service bereitstellen an. Azure bietet auch einen Standardcontainer, App Service on Linux, auf dem Sie Web-Apps direkt aus VS Code heraus bereitstellen können.

Vielleicht möchten Sie auch die folgenden Artikel in den VS Code-Dokumenten überprüfen, die für Python relevant sind

02/04/2026