Flask Tutorial in Visual Studio Code

Flask ist ein leichtgewichtiges Python-Framework für Webanwendungen, das die Grundlagen für URL-Routing und Seitenrendering bietet.

Flask wird als "Mikro"-Framework bezeichnet, da es keine direkten Funktionen wie Formularvalidierung, Datenbankabstraktion, Authentifizierung usw. bietet. Solche Funktionen werden stattdessen von speziellen Python-Paketen namens Flask-Erweiterungen bereitgestellt. Die Erweiterungen integrieren sich nahtlos in Flask, sodass sie so erscheinen, als wären sie Teil von Flask selbst. Flask bietet beispielsweise keine Seiten-Template-Engine, aber die Installation von Flask beinhaltet standardmäßig die Jinja-Templating-Engine. Der Einfachheit halber sprechen wir normalerweise von diesen Standardeinstellungen als Teil von Flask.

In diesem Flask-Tutorial erstellen Sie eine einfache Flask-App mit drei Seiten, die eine gemeinsame Basisvorlage verwenden. Unterwegs lernen Sie eine Reihe von Funktionen von Visual Studio Code kennen, darunter die Verwendung des Terminals, des Editors, des Debuggers, von Code-Snippets und mehr.

Das abgeschlossene Code-Projekt für dieses Flask-Tutorial finden Sie auf GitHub: python-sample-vscode-flask-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 Flask-Tutorial erfolgreich abzuschließen, müssen Sie Folgendes tun (was dieselben Schritte wie im allgemeinen Python-Tutorial sind):

Installieren Sie die Python-Erweiterung.
Installieren Sie eine Version von Python 3 (für die dieses Tutorial geschrieben wurde). Optionen umfassen:
- (Alle Betriebssysteme) Ein Download von python.org; verwenden Sie normalerweise die Schaltfläche Download, die zuerst auf der Seite erscheint.
- (Linux) Die integrierte Python 3-Installation funktioniert gut, aber um andere Python-Pakete zu installieren, müssen Sie im Terminal sudo apt install python3-pip ausführen.
- (macOS) Eine Installation über Homebrew unter macOS mit brew install python3.
- (Alle Betriebssysteme) Ein Download von Anaconda (für Zwecke der Datenwissenschaft).
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 in 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 Variable Pfad, um diesen Ordner einzuschließen.

Projektumgebung für das Flask-Tutorial erstellen

In diesem Abschnitt erstellen Sie eine virtuelle Umgebung, in der Flask installiert wird. Die Verwendung einer virtuellen Umgebung vermeidet die Installation von Flask in einer globalen Python-Umgebung und gibt Ihnen die genaue Kontrolle über die in einer Anwendung verwendeten Bibliotheken.

Erstellen Sie auf Ihrem Dateisystem einen Ordner für dieses Tutorial, z. B. hello_flask.
Öffnen Sie diesen Ordner in VS Code, indem Sie im Terminal zum Ordner navigieren und code . ausführen, oder indem Sie VS Code ausführen und den Befehl Datei > Ordner öffnen verwenden.
Öffnen Sie in VS Code die Befehlspalette (Anzeigen > Befehlspalette oder (⇧⌘P (Windows, Linux Ctrl+Shift+P))). Wählen Sie dann den Befehl Python: Umgebung erstellen, um eine virtuelle Umgebung in Ihrem Arbeitsbereich zu erstellen. Wählen Sie venv und dann die Python-Umgebung aus, die Sie zur Erstellung verwenden möchten.

Hinweis: Wenn Sie manuell eine Umgebung erstellen möchten oder beim Erstellen der Umgebung auf Fehler stoßen, besuchen Sie die Seite Umgebungen.
Nachdem die Erstellung Ihrer virtuellen Umgebung abgeschlossen ist, führen Sie Terminal: Neues Terminal erstellen (⌃⇧` (Windows, Linux Ctrl+Shift+`)) aus der Befehlspalette aus. Dadurch wird ein Terminal erstellt und die virtuelle Umgebung automatisch aktiviert, indem dessen Aktivierungsskript ausgeführt wird.

Hinweis: Unter Windows wird möglicherweise eine Fehlermeldung angezeigt, dass PowerShell keine Skripts ausführen kann, wenn Ihr Standardterminaltyp PowerShell ist, da die Ausführung von Skripts auf dem System deaktiviert ist. Der Fehler enthält einen Link mit Informationen, wie Sie Skripts zulassen können. Verwenden Sie andernfalls Terminal: Standardprofil auswählen, um stattdessen "Eingabeaufforderung" oder "Git Bash" als Standard festzulegen.
Installieren Sie Flask in der virtuellen Umgebung, indem Sie den folgenden Befehl im VS Code-Terminal ausführen:
```
python -m pip install flask
```

Sie haben nun eine in sich geschlossene Umgebung, die für das Schreiben von Flask-Code bereit ist. VS Code aktiviert die Umgebung automatisch, wenn Sie Terminal: Neues Terminal erstellen verwenden. Wenn Sie eine separate Eingabeaufforderung oder ein Terminal öffnen, aktivieren Sie die Umgebung, indem Sie source .venv/bin/activate (Linux/macOS) oder .venv\Scripts\Activate.ps1 (Windows) ausführen. Sie wissen, dass die Umgebung aktiviert ist, wenn die Eingabeaufforderung am Anfang (.venv) anzeigt.

Eine minimale Flask-App erstellen und ausführen

Erstellen Sie in VS Code eine neue Datei in Ihrem Projektordner namens app.py, indem Sie entweder Datei > Neu aus dem Menü verwenden, Strg+N drücken oder das Symbol für neue Dateien in der Explorer-Ansicht verwenden (siehe unten).
Fügen Sie in app.py Code hinzu, um Flask zu importieren und eine Instanz des Flask-Objekts zu erstellen. Wenn Sie den folgenden Code eingeben (anstatt ihn zu kopieren und einzufügen), können Sie die IntelliSense und automatische Vervollständigungen von VS Code beobachten.
```
from flask import Flask
app = Flask(__name__)
```
Fügen Sie außerdem in app.py eine Funktion hinzu, die Inhalt zurückgibt, in diesem Fall eine einfache Zeichenkette, und verwenden Sie den app.route-Decorator von Flask, um die URL-Route / dieser Funktion zuzuordnen.
```
@app.route("/")
def home():
    return "Hello, Flask!"
```
Tipp: Sie können mehrere Decorators für dieselbe Funktion verwenden, einen pro Zeile, je nachdem, wie viele verschiedene Routen Sie derselben Funktion zuordnen möchten.
Speichern Sie die Datei app.py (⌘S (Windows, Linux Ctrl+S)).
Führen Sie die App im integrierten Terminal aus, indem Sie python -m flask run eingeben, was den Flask-Entwicklungsserver startet. Der Entwicklungsserver sucht standardmäßig nach app.py. Wenn Sie Flask ausführen, sollten Sie eine Ausgabe ähnlich der folgenden sehen:
```
(.venv) D:\py\\hello_flask>python -m flask run
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
```
Wenn Sie eine Fehlermeldung erhalten, dass das Flask-Modul nicht gefunden werden kann, stellen Sie sicher, dass Sie python -m pip install flask in Ihrer virtuellen Umgebung ausgeführt haben, wie am Ende des vorherigen Abschnitts beschrieben.

Wenn Sie den Entwicklungsserver auf einer anderen IP-Adresse oder einem anderen Port ausführen möchten, verwenden Sie die Befehlszeilenargumente --host und --port, z. B. --host=0.0.0.0 --port=80.
Um Ihren Standardbrowser zur gerenderten Seite zu öffnen, Strg+Klick auf die URL http://127.0.0.1:5000/ im Terminal.
Beachten Sie, dass beim Aufrufen einer URL wie / eine Meldung im Debug-Terminal angezeigt wird, die die HTTP-Anfrage anzeigt.
```
127.0.0.1 - - [11/Jul/2018 08:40:15] "GET / HTTP/1.1" 200 -
```
Stoppen Sie die App, indem Sie im Terminal Strg+C verwenden.

Tipp: Wenn Sie einen anderen Dateinamen als app.py verwenden, z. B. webapp.py, müssen Sie eine Umgebungsvariable namens FLASK_APP definieren und ihren Wert auf Ihre gewählte Datei setzen. Der Entwicklungsserver von Flask verwendet dann den Wert von FLASK_APP anstelle der Standarddatei app.py. Weitere Informationen finden Sie in der Flask-Befehlszeilenschnittstelle.

App im Debugger ausführen

Das Debugging gibt Ihnen die Möglichkeit, ein laufendes Programm an einer bestimmten Codezeile anzuhalten. Wenn ein Programm angehalten wird, können Sie Variablen untersuchen, Code im Panel "Debug-Konsole" ausführen und ansonsten die auf Debugging beschriebenen Funktionen nutzen. Das Ausführen des Debuggers speichert außerdem automatisch alle geänderten Dateien, bevor die Debugging-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, behält sie den Port. Wenn Sie die App dann im Debugger mit demselben Port ausführen, verarbeitet die ursprünglich laufende App alle Anfragen, und Sie sehen keine Aktivität in der debuggten App. Das Programm wird nicht an Haltepunkten angehalten. Mit anderen Worten: Wenn der Debugger nicht zu funktionieren scheint, stellen Sie sicher, dass keine andere Instanz der App noch läuft.

Ersetzen Sie den Inhalt von app.py durch den folgenden Code, der eine zweite Route und Funktion hinzufügt, die Sie im Debugger durchlaufen können:
```
import re
from datetime import datetime

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return "Hello, Flask!"


@app.route("/hello/<name>")
def hello_there(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 content
```
Der Decorator für die neue URL-Route /hello/<name> definiert einen Endpunkt /hello/, der jeden zusätzlichen Wert akzeptieren kann. Der Bezeichner innerhalb von < und > in der Route definiert eine Variable, die an die Funktion übergeben wird und in Ihrem Code verwendet werden kann.

URL-Routen sind Groß- und Kleinschreibungsempfindlich. Zum Beispiel unterscheidet sich die Route /hello/<name> von /Hello/<name>. Wenn dieselbe Funktion beide verarbeiten soll, verwenden Sie Decorators für jede Variante.

Wie in den Code-Kommentaren beschrieben, filtern Sie immer beliebige benutzergenerierte Informationen, um verschiedene Angriffe auf Ihre App zu vermeiden. In diesem Fall filtert der Code das Namensargument, sodass es nur Buchstaben enthält, was die Injektion von Steuerzeichen, HTML usw. verhindert. (Wenn Sie im nächsten Abschnitt Vorlagen verwenden, führt Flask automatisch eine Filterung durch, und Sie benötigen diesen Code nicht.)
Setzen Sie einen Haltepunkt in der ersten Codezeile der Funktion hello_there (now = datetime.now()), indem Sie eine der folgenden Aktionen ausführen:
- Platzieren Sie den Cursor auf dieser Zeile und drücken Sie F9, oder
- Platzieren Sie den Cursor auf dieser Zeile und wählen Sie den Menübefehl Ausführen > Haltepunkt umschalten, oder
- Klicken Sie direkt in den Rand links neben der Zeilennummer (ein verblasster roter Punkt erscheint beim Darüberfahren).
Der Haltepunkt erscheint als roter Punkt im linken Rand.
Wechseln Sie zur Ansicht Ausführen und Debuggen in VS Code (über die Aktivitätsleiste auf der linken Seite oder mit ⇧⌘D (Windows, Linux Ctrl+Shift+D)). Möglicherweise sehen Sie die Meldung "Zum Anpassen von Ausführen und Debuggen eine launch.json-Datei erstellen". Das 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 eine launch.json-Datei erstellen klicken.
Wählen Sie den Link aus, und VS Code fordert Sie zur Erstellung einer Debug-Konfiguration auf. Wählen Sie Flask aus der Dropdown-Liste, und VS Code füllt eine neue launch.json-Datei mit einer Flask-Laufkonfiguration. Die Datei launch.json enthält eine Reihe von Debugging-Konfigurationen, die jeweils ein separates JSON-Objekt innerhalb des configuration-Arrays darstellen.
Scrollen Sie nach unten zur Konfiguration mit dem Namen "Python: Flask" und untersuchen Sie diese. Diese Konfiguration enthält "module": "flask",, was VS Code anweist, Python mit -m flask auszuführen, wenn der Debugger gestartet wird. Sie definiert außerdem die Umgebungsvariable FLASK_APP im env-Eigenschaft, um die Startdatei zu identifizieren, die standardmäßig app.py ist, ermöglicht Ihnen aber die einfache Angabe einer anderen Datei. Wenn Sie den Host und/oder Port ändern möchten, können Sie das args-Array verwenden.
```
{
    "name": "Python Debugger: Flask",
    "type": "debugpy",
    "request": "launch",
    "module": "flask",
    "env": {
        "FLASK_APP": "app.py",
        "FLASK_DEBUG": "1"
    },
    "args": [
        "run",
        "--no-debugger",
        "--no-reload"
    ],
    "jinja": true,
    "justMyCode": true
},
```
Hinweis: Wenn der Eintrag env in Ihrer Konfiguration "FLASK_APP": "${workspaceFolder}/app.py" enthält, ändern Sie ihn in "FLASK_APP": "app.py", wie oben gezeigt. Andernfalls können Fehlermeldungen wie "Cannot import module C" auftreten, wobei C der Laufwerksbuchstabe ist, auf dem sich Ihr Projektordner befindet.

Hinweis: Sobald launch.json erstellt wurde, erscheint im Editor eine Schaltfläche Konfiguration hinzufügen. Diese Schaltfläche zeigt eine Liste weiterer Konfigurationen an, die am Anfang der Konfigurationsliste hinzugefügt werden können. (Der Menübefehl Ausführen > Konfiguration hinzufügen bewirkt dasselbe.).
Speichern Sie launch.json (⌘S (Windows, Linux Ctrl+S)). Wählen Sie in der Dropdown-Liste der Debug-Konfigurationen die Konfiguration Python: Flask aus.
Starten Sie den Debugger, indem Sie den Menübefehl Ausführen > Debugging starten auswählen oder auf den grünen Pfeil Debugging starten neben der Liste klicken (F5).

Beachten Sie, dass sich die Statusleiste zur Anzeige des Debuggens farblich ändert.

Eine Debugging-Symbolleiste (siehe unten) erscheint ebenfalls in VS Code und enthält Befehle in der folgenden Reihenfolge: Pause (oder Fortfahren, F5), Schritt über (F10), Schritt hinein (F11), Schritt hinaus (⇧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 Terminal "Python Debug Console". Strg+Klick auf den Link http://127.0.0.1:5000/ in diesem Terminal, um einen Browser zu dieser URL zu öffnen. Navigieren Sie in der Adressleiste des Browsers zu http://127.0.0.1:5000/hello/VSCode. Bevor die Seite gerendert wird, stoppt VS Code das Programm am gesetzten Haltepunkt. Der kleine gelbe Pfeil am Haltepunkt zeigt an, dass dies die nächste auszuführende Codezeile ist.
Verwenden Sie "Schritt über", um die Anweisung now = datetime.now() auszuführen.
Auf der linken Seite des VS Code-Fensters sehen Sie eine **Variablen**-Ansicht, die lokale Variablen wie now sowie Argumente wie name anzeigt. Darunter befinden sich Panels für **Überwachung**, **Aufrufstapel** und **Haltepunkte** (siehe VS Code Debugging für Details). Erweitern Sie im Abschnitt **Locals** verschiedene Werte. Sie können auch Werte doppelt anklicken (oder Enter (Windows, Linux F2) verwenden), um sie zu ändern. Das Ändern von Variablen wie now kann jedoch das Programm zum Absturz bringen. Entwickler nehmen Änderungen normalerweise nur vor, um Werte zu korrigieren, wenn der Code ursprünglich nicht den richtigen Wert erzeugte.
Wenn ein Programm angehalten ist, können Sie im Panel **Debug-Konsole** (das sich vom "Python Debug Console" im Terminal-Panel unterscheidet) Ausdrücke untersuchen und Code-Schnipsel mit dem aktuellen Programmzustand ausprobieren. Wenn Sie beispielsweise die Zeile now = datetime.now() übersprungen haben, können Sie mit verschiedenen Datums-/Uhrzeitformaten experimentieren. Wählen Sie im Editor den Code now.strftime("%A, %d %B, %Y at %X") aus, klicken Sie dann mit der rechten Maustaste und wählen Sie In Debug-Konsole auswerten, um diesen Code an die Debug-Konsole zu senden, wo er ausgeführt wird.
```
now.strftime("%A, %d %B, %Y at %X")
'Wednesday, 31 October, 2018 at 18:13:39'
```
Tipp: Die **Debug-Konsole** zeigt auch Ausnahmen innerhalb der App an, die im Terminal möglicherweise nicht erscheinen. Wenn Sie beispielsweise in der Ansicht "Ausführen und Debuggen" im Bereich "Aufrufstapel" die Meldung "An Ausnahme angehalten" sehen, wechseln Sie zur **Debug-Konsole**, um die Fehlermeldung anzuzeigen.

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")
'Wed, 31 October, 2018 at 18:13:39'
now.strftime("%a, %d %b, %Y at %X")
'Wed, 31 Oct, 2018 at 18:13:39'
now.strftime("%a, %d %b, %y at %X")
'Wed, 31 Oct, 18 at 18:13:39'

Schreiten Sie durch ein paar weitere Codezeilen, wenn Sie möchten, und wählen Sie dann Fortfahren (F5), damit das Programm weiterläuft. Das Browserfenster zeigt das Ergebnis an.
Ändern Sie die Zeile im Code, um ein anderes Datums-/Zeitformat zu verwenden, z. B. now.strftime("%a, %d %b, %y at %X"), und speichern Sie dann die Datei. Der Flask-Server wird automatisch neu geladen, was bedeutet, dass die Änderungen angewendet 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 Schaltfläche Stopp in der Symbolleiste (das rote Quadrat) oder den Befehl Ausführen > Debugging stoppen (⇧F5 (Windows, Linux Shift+F5)).

Tipp: Um es einfacher zu machen, wiederholt auf eine bestimmte URL wie http://127.0.0.1:5000/hello/VSCode zuzugreifen, geben Sie diese URL mit einer print-Anweisung aus. Die URL erscheint im Terminal, wo Sie sie mit Strg+Klick zum Öffnen im Browser verwenden können.

Befehle "Gehe zu Definition" und "Definition anzeigen"

Während Ihrer Arbeit mit Flask oder anderen Bibliotheken möchten Sie möglicherweise den Code in diesen Bibliotheken selbst untersuchen. VS Code bietet zwei nützliche Befehle, die direkt zu den Definitionen von Klassen und anderen Objekten in jedem Code navigieren.

Gehe zu Definition springt von Ihrem Code in den Code, der ein Objekt definiert. Klicken Sie beispielsweise in app.py mit der rechten Maustaste auf die Klasse Flask (in der Zeile app = Flask(__name__)) und wählen Sie Gehe zu Definition (oder verwenden Sie F12), was zur Klassendefinition in der Flask-Bibliothek navigiert.
Definition anzeigen (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10), ebenfalls im Kontextmenü per Rechtsklick verfügbar) ist ähnlich, zeigt aber die Klassendefinition direkt im Editor an (schafft Platz im Editorfenster, um keinen Code zu verdecken). Drücken Sie die Escape-Taste, um das Peek-Fenster zu schließen, oder verwenden Sie das x in der oberen rechten Ecke.

Eine Vorlage zum Rendern einer Seite verwenden

Die bisher in diesem Tutorial erstellte App generiert nur einfache 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 Cross-Site-Scripting (XSS)-Angriffen aussetzt. In der Funktion hello_there dieses Tutorials könnte man beispielsweise versuchen, die Ausgabe im Code mit etwas wie content = "<h1>Hallo, " + clean_name + "!</h1>" zu formatieren, wobei das Ergebnis in content direkt an einen Browser übergeben wird. Dies ermöglicht es einem Angreifer, bösartiges HTML, einschließlich JavaScript-Code, in die URL einzufügen, die in clean_name landet und somit im Browser ausgeführt wird.

Eine viel bessere Vorgehensweise ist es, HTML vollständig aus Ihrem Code herauszuhalten, indem Sie **Vorlagen** verwenden, sodass Ihr Code nur für Werte zuständig ist und nicht für das Rendering.

Eine Vorlage ist eine HTML-Datei, die Platzhalter für Werte enthält, die der Code zur Laufzeit bereitstellt. Die Templating-Engine kümmert sich beim Rendern der Seite um die Ersetzung. Der Code beschäftigt sich daher nur mit Datenwerten, und die Vorlage beschäftigt sich nur mit Markup.
Die Standard-Templating-Engine für Flask ist Jinja, die automatisch installiert wird, wenn Sie Flask installieren. Diese Engine bietet flexible Optionen, einschließlich automatischer Escaping (zur Verhinderung von XSS-Angriffen) und Vorlagenerbfolge. Mit Vererbung können Sie eine Basisvorlage mit gemeinsamem Markup definieren und diese Basis dann mit seitenspezifischen Ergänzungen erweitern.

In diesem Abschnitt erstellen Sie eine einzelne Seite mit einer Vorlage. In den folgenden Abschnitten konfigurieren Sie die App so, dass sie statische Dateien bereitstellt, und erstellen dann mehrere Seiten für die App, die jeweils eine Navigationsleiste aus einer Basisvorlage enthalten.

Erstellen Sie im Ordner hello_flask einen Ordner namens templates, in dem Flask standardmäßig nach Vorlagen sucht.

Erstellen Sie im Ordner templates eine Datei namens hello_there.html mit dem folgenden Inhalt. Diese Vorlage enthält zwei Platzhalter namens "name" und "date", die durch Klammerpaare {{ und }} abgegrenzt sind. Wie Sie sehen können, können Sie auch hier direkt Formatierungscode in der Vorlage einfügen.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Flask</title>
    </head>
    <body>
        {%if name %}
            <strong>Hello there, {{ name }}!</strong> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
        {% else %}
            What's your name? Provide it after /hello/ in the URL.
        {% endif %}
    </body>
</html>

Tipp: Flask-Entwickler verwenden häufig die Erweiterung flask-babel für die Datumsformatierung anstelle von strftime, da flask-babel Locale und Zeitzonen berücksichtigt.

Importieren Sie in app.py die Funktion render_template von Flask oben in der Datei.
```
from flask import render_template
```
Ändern Sie außerdem in app.py die Funktion hello_there, um render_template zu verwenden, eine Vorlage zu laden und die benannten Werte anzuwenden (und eine Route hinzuzufügen, um den Fall ohne Namen zu erkennen). render_template geht davon aus, dass das erste Argument relativ zum Ordner templates ist. Typischerweise benennen Entwickler die Vorlagen genauso wie die Funktionen, die sie verwenden, aber übereinstimmende Namen sind nicht erforderlich, da Sie im Code immer auf den genauen Dateinamen verweisen.
```
@app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )
```
Sie können sehen, dass der Code jetzt viel einfacher ist und sich nur noch um Datenwerte kümmert, 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, mit einem Namen wie <a%20value%20that%20could%20be%20HTML> zu einer /hello/name-URL zu navigieren, um das automatische Escaping von Flask in Aktion zu sehen. Der Wert "name" wird im Browser als einfacher Text angezeigt, anstatt ein tatsächliches Element zu rendern.

Statische Dateien bereitstellen

Statische Dateien sind von zwei Arten. Erstens sind dies Dateien wie Stylesheets, auf die eine Seitenvorlage einfach direkt verweisen kann. Solche Dateien können sich in jedem Ordner in der App befinden, werden aber üblicherweise in einem static-Ordner abgelegt.

Die zweite Art sind diejenigen, auf die Sie im Code zugreifen möchten, z. B. wenn Sie einen API-Endpunkt implementieren möchten, der eine statische Datei zurückgibt. Zu diesem Zweck enthält das Flask-Objekt eine integrierte Methode, send_static_file, die eine Antwort mit einer statischen Datei innerhalb des static-Ordners der App generiert.

Die folgenden Abschnitte demonstrieren beide Arten von statischen Dateien.

Verweis auf statische Dateien in einer Vorlage

Erstellen Sie im Ordner hello_flask einen Ordner namens static.
Erstellen Sie im Ordner static eine Datei namens site.css mit dem folgenden Inhalt. Beachten 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_there.html die folgende Zeile vor dem Tag </head> hinzu, die einen Verweis auf die Stylesheet-Datei erstellt.
```
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
```
Das hier verwendete url_for-Tag von Flask erstellt den entsprechenden Pfad zur Datei. Da es Variablen als Argumente akzeptieren kann, ermöglicht Ihnen url_for bei Bedarf die programmatische Steuerung des generierten Pfads.

Ersetzen Sie in templates/hello_there.html auch den Inhalt des <body>-Elements durch das folgende Markup, das den Stil message anstelle eines <strong>-Tags verwendet (und auch eine Nachricht anzeigt, wenn Sie nur eine hello/-URL ohne Namen verwenden).

{%if name %}
    <span class="message">Hello there, {{ name }}!</span> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
{% else %}
    <span class="message">What's your name? Provide it after /hello/ in the URL.</span>
{% endif %}

Führen Sie die App aus, navigieren Sie zu einer /hello/name-URL und beobachten Sie, dass die Nachricht in blauer Farbe gerendert wird. Stoppen Sie die App, wenn Sie fertig sind.

Eine statische Datei aus Code bereitstellen

Erstellen Sie im Ordner static eine JSON-Datendatei namens data.json mit dem folgenden Inhalt (beliebige Beispieldaten):

{
  "01": {
    "note": "This data is very simple because we're demonstrating only the mechanism."
  }
}

Fügen Sie in app.py eine Funktion mit der Route /api/data hinzu, die die statische Datendatei mit der Methode send_static_file zurückgibt.
```
@app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")
```
Führen Sie die App aus und navigieren Sie zum Endpunkt /api/data, um zu sehen, dass die statische Datei zurückgegeben wird. Stoppen Sie die App, wenn Sie fertig sind.

Mehrere Vorlagen erstellen, die eine Basisvorlage erweitern

Da die meisten Web-Apps mehr als eine Seite haben und diese Seiten typischerweise viele gemeinsame Elemente teilen, trennen Entwickler diese gemeinsamen Elemente in einer Basis-Seitenvorlage, die andere Seiten-Vorlagen dann erweitern können (dies wird auch als Vorlagenerbfolge bezeichnet).

Da Sie wahrscheinlich viele Seiten erstellen werden, die dieselbe Vorlage erweitern, ist es auch hilfreich, ein Code-Snippet in VS Code zu erstellen, mit dem Sie neue Vorlagen-Dateien schnell initialisieren können. Ein Snippet hilft Ihnen, mühsame und fehleranfällige Copy-Paste-Vorgänge zu vermeiden.

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

Basis-Seitenvorlage und Stile erstellen

Eine Basis-Seitenvorlage in Flask enthält alle gemeinsamen Teile einer Reihe von Seiten, einschließlich Verweisen auf CSS-Dateien, Skriptdateien usw. Basisvorlagen definieren auch ein oder mehrere Block-Tags, die andere Vorlagen, die die Basis erweitern, überschreiben sollen. Ein Block-Tag wird sowohl in der Basisvorlage als auch in den erweiterten Vorlagen durch {% block <name> %} und {% endblock %} abgegrenzt.

Die folgenden Schritte demonstrieren die Erstellung einer Basisvorlage.

Erstellen Sie im Ordner templates eine Datei namens layout.html mit dem folgenden Inhalt. Diese enthält Blöcke namens "title" und "content". Wie Sie sehen können, definiert das Markup eine einfache Navigationsleistenstruktur mit Links zu den Seiten "Home", "About" und "Contact", die Sie in einem späteren Abschnitt erstellen werden. Jeder Link verwendet erneut den url_for-Tag von Flask, um zur Laufzeit einen Link für die entsprechende Route zu generieren.

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

    <body>
        <div class="navbar">
            <a href="{{ url_for('home') }}" class="navbar-brand">Home</a>
            <a href="{{ url_for('about') }}" class="navbar-item">About</a>
            <a href="{{ url_for('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/site.css hinzu, unterhalb des vorhandenen "message"-Stils, und speichern Sie die Datei. Beachten Sie, dass dieser Leitfaden nicht versucht, 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 zu diesem Zeitpunkt ausführen, aber da Sie die Basisvorlage noch nirgends verwendet und keine Code-Dateien geändert haben, ist das Ergebnis dasselbe wie im vorherigen Schritt. Schließen Sie die restlichen Abschnitte ab, um den endgültigen Effekt zu sehen.

Code-Snippet erstellen

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 Vorlagen-Datei mit dem entsprechenden Verweis auf die Basisvorlage zu initialisieren. Ein Snippet liefert einen konsistenten Codebaustein aus einer einzigen Quelle, was Fehler vermeidet, die beim Kopieren und Einfügen aus bestehendem Code auftreten können.

Wählen Sie in VS Code Datei > Einstellungen > Snippets konfigurieren.
Wählen Sie in der angezeigten Liste html aus. Die Option kann als "html.json" im Abschnitt Vorhandene Snippets der Liste erscheinen, wenn Sie bereits zuvor Snippets erstellt haben.

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

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

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

Speichern Sie die Datei html.json (⌘S (Windows, Linux Ctrl+S)).
Wenn Sie nun den Präfix des Snippets, z. B. flext, einzugeben beginnen, bietet VS Code das Snippet als Autovervollstä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 Erstellen von Snippets.

Verwenden Sie den 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 eine neue Datei namens home.html. Geben Sie dann flext ein, um das Snippet als Vervollständigung anzuzeigen.

Wenn Sie die Vervollständigung auswählen, wird der Code des Snippets angezeigt, wobei sich der Cursor an der Einfügeposition des Snippets befindet.
Geben Sie an der Einfügeposition im Block "title" Home ein und im Block "content" <p>Home page for the Visual Studio Code Flask tutorial.</p>. Speichern Sie dann die Datei. Diese Zeilen sind die einzigen eindeutigen Teile der erweiterten Seitenvorlage.
Erstellen Sie im Ordner templates about.html, verwenden Sie das Snippet, um den Boilerplate-Markup einzufügen, fügen Sie About us und <p>About page for the Visual Studio Code Flask tutorial.</p> in die Blöcke "title" und "content" ein, und speichern Sie dann die Datei.
Wiederholen Sie den vorherigen Schritt, um templates/contact.html mit Contact us und <p>Contact page for the Visual Studio Code Flask tutorial.</p> in den beiden Inhaltsblöcken zu erstellen.

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

# Replace the existing home function with the one below
@app.route("/")
def home():
    return render_template("home.html")

# New functions
@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

Führen Sie die App aus

Wenn alle Seitenvorlagen vorhanden sind, speichern Sie app.py, führen Sie die App aus und öffnen Sie einen Browser, um die Ergebnisse anzuzeigen. Navigieren Sie zwischen den Seiten, um zu überprüfen, ob die Seitenvorlagen die Basistvorlage korrekt erweitern.

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

Hinweis: Wenn Sie die neuesten Änderungen nicht sehen, müssen Sie möglicherweise die Seite hart aktualisieren, um eine zwischengespeicherte Datei zu vermeiden.

Optionale Aktivitäten

Die folgenden Abschnitte beschreiben zusätzliche Schritte, die für Ihre Arbeit mit Python und Visual Studio Code hilfreich sein können.

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

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

Daher lassen Entwickler den Ordner der virtuellen Umgebung normalerweise von der Quellcodeverwaltung aus und beschreiben stattdessen die Abhängigkeiten der App mit einer requirements.txt-Datei.

Obwohl Sie die Datei manuell erstellen können, können Sie auch den Befehl pip freeze verwenden, um die Datei basierend auf den genau installierten Bibliotheken in der aktivierten Umgebung zu generieren.

Wählen Sie Ihre gewünschte Umgebung mit dem Befehl Python: Interpreter auswählen aus und führen Sie dann den Befehl Terminal: Neues Terminal erstellen aus (⌃⇧` (Windows, Linux Ctrl+Shift+`))), um ein Terminal mit aktivierter Umgebung zu öffnen.
Führen Sie im Terminal pip freeze > requirements.txt aus, um die Datei requirements.txt 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 in der ursprünglichen Umgebung neu zu installieren. (Der Empfänger muss jedoch weiterhin seine eigene virtuelle Umgebung erstellen.)

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 genauen Versionsnummern auf, die Sie für mehr Flexibilität in Zukunft in Bereiche umwandeln möchten. Weitere Informationen finden Sie unter Requirements Files in der pip-Befehldokumentation.

Refaktorisieren Sie das Projekt zur Unterstützung der weiteren Entwicklung

Während dieses gesamten Flask-Tutorials ist der gesamte App-Code in einer einzigen Datei app.py enthalten. Um eine weitere Entwicklung zu ermöglichen und Zuständigkeiten zu trennen, ist es hilfreich, die Teile von app.py in separate Dateien zu refaktorisieren.

Erstellen Sie in Ihrem Projektordner einen Ordner für die App, z. B. hello_app, um dessen Dateien von anderen projektweiten Dateien wie requirements.txt und dem Ordner .vscode, in dem VS Code Einstellungen und Debugging-Konfigurationsdateien speichert, zu trennen.
Verschieben Sie die Ordner static und templates in hello_app, da diese Ordner definitiv App-Code enthalten.

Erstellen Sie im Ordner hello_app eine Datei namens views.py, die die Routings und die Ansichtsfunktionen enthält.

from flask import Flask
from flask import render_template
from datetime import datetime
from . import app

@app.route("/")
def home():
    return render_template("home.html")

@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

@app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )

@app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")

Erstellen Sie im Ordner hello_app eine Datei __init__.py mit folgendem Inhalt.
```
import flask
app = flask.Flask(__name__)
```

Erstellen Sie im Ordner hello_app eine Datei webapp.py mit folgendem Inhalt.

# Entry point for the application.
from . import app    # For application discovery by the 'flask' command.
from . import views  # For import side-effects of setting up routes.

Öffnen Sie die Debug-Konfigurationsdatei launch.json und aktualisieren Sie die Eigenschaft env wie folgt, um auf das Startobjekt zu verweisen.
```
"env": {
    "FLASK_APP": "hello_app.webapp"
},
```
Löschen Sie die ursprüngliche Datei app.py im Projektstammverzeichnis, da deren Inhalt in andere App-Dateien verschoben wurde.
Die Struktur Ihres Projekts sollte nun der folgenden ähneln.
Führen Sie die App erneut im Debugger aus, um sicherzustellen, dass alles funktioniert. Um die App außerhalb des VS Code-Debuggers auszuführen, verwenden Sie die folgenden Schritte von einem Terminal aus:
1. Legen Sie eine Umgebungsvariable für FLASK_APP fest. Unter Linux und macOS verwenden Sie export set FLASK_APP=webapp; unter Windows verwenden Sie $env:FLASK_APP=webapp, wenn Sie PowerShell verwenden, oder set FLASK_APP=webapp, wenn Sie die Eingabeaufforderung verwenden.
2. Navigieren Sie in den Ordner hello_app und starten Sie das Programm dann mit python -m flask run.

Erstellen Sie einen Container für eine Flask-App mit der Container Tools-Erweiterung

Die Container Tools-Erweiterung erleichtert das Erstellen, Verwalten und Bereitstellen von containerisierten Anwendungen von Visual Studio Code aus. Wenn Sie daran interessiert sind, wie Sie einen Python-Container für die in diesem Tutorial entwickelte Flask-App erstellen können, lesen Sie das Tutorial Python in einem Container, das Sie durch die folgenden Schritte führt:

Erstellen einer Dockerfile-Datei, die einen einfachen Python-Container beschreibt.
Erstellen, Ausführen und Überprüfen der Funktionalität einer Flask-App.
Debuggen der App, die in einem Container ausgeführt wird.

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

Nächste Schritte

Herzlichen Glückwunsch zum Abschluss dieser Schritt-für-Schritt-Anleitung zur Arbeit mit Flask in Visual Studio Code!

Das abgeschlossene Code-Projekt aus diesem Tutorial finden Sie auf GitHub: python-sample-vscode-flask-tutorial.

Da dieses Tutorial nur an der Oberfläche von Seitenvorlagen kratzt, finden Sie weitere Informationen zu Vorlagen in der Jinja2-Dokumentation. Die Dokumentation für Vorlagendesigner enthält alle Details zur Vorlagensprache. Möglicherweise möchten Sie auch das offizielle Flask-Tutorial sowie die Dokumentation für Flask Erweiterungen überprüfen.

Um Ihre App auf einer Produktionswebsite auszuprobieren, sehen Sie sich das Tutorial Bereitstellen von Python-Apps in Azure App Service mit Docker-Containern an. Azure bietet auch einen Standardcontainer, App Service unter Linux, auf den Sie Web-Apps direkt aus VS Code bereitstellen.

Möglicherweise möchten Sie auch die folgenden Artikel in der VS Code-Dokumentation überprüfen, die für Python relevant sind.

12/10/2025