Flask-Tutorial in Visual Studio Code

Flask ist ein leichtgewichtiges Python-Framework für Webanwendungen, das die Grundlagen für URL-Routing und Seiten-Rendering bereitstellt.

Flask wird als "Mikro"-Framework bezeichnet, da es Funktionen wie Formularvalidierung, Datenbankabstraktion, Authentifizierung usw. nicht direkt bereitstellt. Solche Funktionen werden stattdessen durch spezielle Python-Pakete, sogenannte Flask-Erweiterungen, angeboten. Die Erweiterungen integrieren sich nahtlos in Flask, sodass sie so wirken, als wären sie Teil von Flask selbst. Zum Beispiel bietet Flask keine Seitentemplating-Engine, aber die Installation von Flask beinhaltet standardmäßig die Jinja-Templating-Engine. Der Einfachheit halber sprechen wir üblicherweise von diesen Standards als Teil von Flask.

In diesem Flask-Tutorial erstellen Sie eine einfache Flask-App mit drei Seiten, die ein gemeinsames Basistemplate verwenden. Dabei lernen Sie eine Reihe von Funktionen von Visual Studio Code kennen, einschließlich der Verwendung des Terminals, des Editors, des Debuggers, von Code-Snippets und mehr.

Das vollständige Codeprojekt 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 (dies sind dieselben Schritte wie im allgemeinen Python-Tutorial):

1. Installieren Sie die Python-Erweiterung.

2. 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, die als erste auf der Seite erscheint.
   • (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.
   • (Alle Betriebssysteme) Ein Download von Anaconda (für Data-Science-Zwecke).

3. 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 Flask-Tutorial

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 volle Kontrolle über die in einer Anwendung verwendeten Bibliotheken.

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.

1. Erstellen Sie auf Ihrem Dateisystem einen Ordner für dieses Tutorial, wie zum Beispiel hello_flask.

2. Öffnen Sie diesen Ordner in VS Code, indem Sie im Terminal zu dem Ordner navigieren und code . ausführen, oder indem Sie VS Code starten und den Befehl Datei > Ordner öffnen verwenden.

3. Erstellen Sie eine virtuelle Umgebung mithilfe des Befehls 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 "Schnellerstellung", die sinnvolle Standardeinstellungen verwendet.

   

4. Installieren Sie Flask 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 flask 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 flask
   

Sie verfügen nun über eine eigenständige Umgebung, die bereit ist, Flask-Code zu schreiben. 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 erkennen, dass die Umgebung aktiviert ist, wenn am Anfang der Eingabeaufforderung (.venv) steht.

Erstellen und Ausführen einer minimalen Flask-App

1. Erstellen Sie in VS Code eine neue Datei in Ihrem Projektordner namens app.py, indem Sie entweder im Menü Datei > Neu wählen, Strg+N drücken oder das Symbol für neue Dateien in der Explorer-Ansicht verwenden (unten dargestellt).

   

2. Fügen Sie in app.py Code hinzu, um Flask zu importieren und eine Instanz des Flask-Objekts zu erstellen. Wenn Sie den Code unten eingeben (anstatt Copy-Paste zu verwenden), können Sie VS Codes IntelliSense und automatische Vervollständigungen beobachten.

   from flask import Flask
   app = Flask(__name__)
   

3. Fügen Sie ebenfalls in app.py eine Funktion hinzu, die Inhalt zurückgibt – in diesem Fall eine einfache Zeichenfolge – und verwenden Sie den app.route-Dekorator von Flask, um die URL-Route / dieser Funktion zuzuordnen.

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

   Tipp: Sie können mehrere Dekoratoren für dieselbe Funktion verwenden, einen pro Zeile, je nachdem, wie viele verschiedene Routen Sie derselben Funktion zuordnen möchten.

4. Speichern Sie die Datei app.py (⌘S (Windows, Linux Strg+S)).

5. Führen Sie im integrierten Terminal die App aus, indem Sie python -m flask run eingeben; dies startet den Flask-Entwicklungsserver. Der Entwicklungsserver sucht standardmäßig nach app.py. Wenn Sie Flask ausführen, sollten Sie eine Ausgabe sehen, die der folgenden ähnelt.

   (.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 einen Fehler erhalten, dass das Flask-Modul nicht gefunden wurde, 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 für Host und Port, wie z. B. --host=0.0.0.0 --port=80.

6. Um Ihren Standardbrowser mit der gerenderten Seite zu öffnen, drücken Sie Strg+Klick auf die URL http://127.0.0.1:5000/ im Terminal.

   

7. Beachten Sie, dass bei einem Aufruf einer URL wie / eine Meldung im Debug-Terminal erscheint, die die HTTP-Anfrage anzeigt.

   127.0.0.1 - - [11/Jul/2018 08:40:15] "GET / HTTP/1.1" 200 -
   

8. Stoppen Sie die App mit Strg+C im Terminal.

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

Ausführen der App im Debugger

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.

1. 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 für die neue URL-Route verwendete Dekorator /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 unterscheiden zwischen Groß- und Kleinschreibung. Zum Beispiel ist die Route /hello/<name> von /Hello/<name> verschieden. Wenn Sie möchten, dass dieselbe Funktion beide behandelt, verwenden Sie Dekoratoren für jede Variante.

   Wie in den Code-Kommentaren 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 Namensargument so, dass es nur Buchstaben enthält, was die Einschleusung von Steuerzeichen, HTML usw. vermeidet. (Wenn Sie im nächsten Abschnitt Templates verwenden, führt Flask eine automatische Filterung durch, und Sie benötigen diesen Code nicht mehr.)

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

   

3. Wechseln Sie zur Ansicht Ausführen und Debuggen in VS Code (über die Aktivitätsleiste auf der linken Seite oder ⇧⌘D (Windows, Linux Strg+Umschalt+D)). Möglicherweise sehen Sie die Meldung "Zum Anpassen von Ausführen und Debuggen eine launch.json-Datei erstellen". 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.

   

4. Wählen Sie den Link aus, und VS Code fordert Sie zu 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-Ausführungskonfiguration. Die launch.json-Datei enthält eine Reihe von Debugging-Konfigurationen, von denen jede ein separates JSON-Objekt innerhalb des configurations-Arrays ist.

5. Scrollen Sie nach unten und untersuchen Sie die Konfiguration mit dem Namen "Python: Flask". Diese Konfiguration enthält "module": "flask",, was VS Code anweist, Python mit -m flask zu starten, wenn der Debugger beginnt. Sie definiert auch die Umgebungsvariable FLASK_APP in der Eigenschaft env, um die Startdatei zu identifizieren (standardmäßig app.py), ermöglicht es Ihnen aber, einfach eine andere Datei anzugeben. 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 env-Eintrag in Ihrer Konfiguration "FLASK_APP": "${workspaceFolder}/app.py" enthält, ändern Sie ihn in "FLASK_APP": "app.py" wie oben gezeigt. Andernfalls könnten Fehlermeldungen wie "Cannot import module C" auftreten, wobei C der Laufwerksbuchstabe ist, auf dem sich Ihr Projektordner befindet.

   Hinweis: Sobald launch.json erstellt ist, erscheint im Editor eine Schaltfläche Konfiguration hinzufügen. Diese Schaltfläche zeigt eine Liste zusätzlicher Konfigurationen an, die dem Anfang der Konfigurationsliste hinzugefügt werden können. (Der Menübefehl Ausführen > Konfiguration hinzufügen bewirkt dasselbe.)

6. Speichern Sie launch.json (⌘S (Windows, Linux Strg+S)). Wählen Sie in der Dropdown-Liste für die Debug-Konfiguration die Konfiguration Python: Flask aus.

   

7. 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 dargestellt) erscheint ebenfalls in VS Code und enthält Befehle in folgender Reihenfolge: Pause (oder Fortfahren, F5), Einzelschritt (überspringen) (F10), Einzelschritt (hinein) (F11), Einzelschritt (heraus) (⇧F11 (Windows, Linux Umschalt+F11)), Neustart (⇧⌘F5 (Windows, Linux Strg+Umschalt+F5)) und Stopp (⇧F5 (Windows, Linux Umschalt+F5)). Siehe VS Code Debugging für eine Beschreibung jedes Befehls.

   

8. Die Ausgabe erscheint in einem "Python Debug Console"-Terminal. Drücken Sie Strg+Klick auf den Link http://127.0.0.1:5000/ in diesem Terminal, um einen Browser mit 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, pausiert VS Code das Programm an dem von Ihnen gesetzten Haltepunkt. Der kleine gelbe Pfeil am Haltepunkt zeigt an, dass dies die nächste Zeile ist, die ausgeführt wird.

   

9. Verwenden Sie "Überspringen", um die Anweisung now = datetime.now() auszuführen.

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

    

11. Wenn ein Programm pausiert ist, können Sie im Bereich Debugkonsole (der sich vom "Python Debug Console"-Terminal unterscheidet) mit Ausdrücken experimentieren und Code-Teile unter Verwendung des aktuellen Zustands des Programms ausprobieren. Wenn Sie beispielsweise die Zeile now = datetime.now() übersprungen haben, können Sie mit verschiedenen Datums-/Zeitformaten experimentieren. Wählen Sie im Editor den Code aus, der now.strftime("%A, %d %B, %Y at %X") liest, klicken Sie dann mit der rechten Maustaste und wählen Sie In Debugkonsole auswerten, um diesen Code an die Debugkonsole 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 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.

12. 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'
    

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

    

14. Ä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 dann die Datei. Der Flask-Server wird automatisch neu geladen, was bedeutet, dass die Änderungen angewendet werden, ohne dass der Debugger neu gestartet werden muss. Aktualisieren Sie die Seite im Browser, um die Änderung zu sehen.

15. 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 wiederholtes Navigieren zu einer bestimmten URL wie http://127.0.0.1:5000/hello/VSCode zu erleichtern, geben Sie diese URL mit einer print-Anweisung aus. Die URL erscheint im Terminal, wo Sie sie mit Strg+Klick in einem Browser öffnen können.

Befehle „Gehe zu Definition“ und „Definition einsehen“

Während Ihrer Arbeit mit Flask 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 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), wodurch Sie zur Klassendefinition in der Flask-Bibliothek navigieren.

• 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 einfachen Text auf 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 zum Beispiel denken, die Ausgabe im Code mit etwas wie content = "<h1>Hallo, " + clean_name + "!</h1>" zu formatieren, wobei das Ergebnis in content direkt an einen Browser gegeben wird. Diese Offenheit ermöglicht es einem Angreifer, bösartiges HTML, einschließlich JavaScript-Code, in die 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.

• Ein Template 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 Ersetzungen. Der Code befasst sich daher nur mit Datenwerten, und das Template befasst sich nur mit dem Markup.
• Die Standard-Templating-Engine für Flask ist Jinja, die bei der Installation von Flask automatisch installiert wird. Diese Engine bietet flexible Optionen, einschließlich automatischer Maskierung (zur Vermeidung von XSS-Angriffen) und Template-Vererbung. Mit Vererbung können Sie eine Basisseite mit gemeinsamem Markup definieren und dann auf dieser Basis mit seitenspezifischen Ergänzungen aufbauen.

In diesem Abschnitt erstellen Sie eine einzelne Seite mithilfe eines Templates. In den folgenden Abschnitten konfigurieren Sie die App, um statische Dateien bereitzustellen, und erstellen dann mehrere Seiten für die App, die jeweils eine Navigationsleiste von einem Basistemplate enthalten.

1. Erstellen Sie innerhalb des hello_flask-Ordners einen Ordner namens templates; dies ist der Ort, an dem Flask standardmäßig nach Templates sucht.

2. Erstellen Sie im templates-Ordner eine Datei namens hello_there.html mit dem unten stehenden Inhalt. Dieses Template enthält zwei Platzhalter namens "name" und "date", die durch Paare von geschweiften Klammern, {{ und }}, begrenzt sind. Wie Sie sehen, können Sie auch Formatierungscode direkt in das Template 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 flask-babel-Erweiterung für die Datumsformatierung anstelle von strftime, da flask-babel Gebietsschemata und Zeitzonen berücksichtigt.

3. Importieren Sie in app.py die Funktion render_template von Flask nahe dem Anfang der Datei.

   from flask import render_template
   

4. Ändern Sie ebenfalls in app.py die Funktion hello_there so, dass render_template verwendet wird, um ein Template zu laden und die benannten Werte anzuwenden (und fügen Sie eine Route hinzu, um den Fall ohne Namen zu erkennen). render_template geht davon aus, dass das erste Argument relativ zum templates-Ordner ist. Normalerweise benennen Entwickler die Templates wie die Funktionen, die sie verwenden, aber übereinstimmende Namen sind nicht erforderlich, da Sie in Ihrem 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 mit Datenwerten befasst, da das Markup und die Formatierung vollständig in der Vorlage enthalten sind.

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

6. Versuchen Sie auch, zu einer /hello/name-URL zu navigieren, die einen Namen wie <a%20value%20that%20could%20be%20HTML> verwendet, um die automatische Maskierung von Flask in Aktion zu sehen. Der "name"-Wert erscheint als Klartext im Browser, anstatt ein tatsächliches Element zu rendern.

Bereitstellen statischer Dateien

Statische Dateien gibt es in zwei Arten. Erstens solche Dateien wie Stylesheets, auf die ein Seitentemplate einfach direkt verweisen kann. Solche Dateien können in jedem Ordner der App liegen, werden aber üblicherweise in einem static-Ordner platziert.

Die zweite Art sind Dateien, die Sie im Code adressieren möchten, etwa wenn Sie einen API-Endpunkt implementieren wollen, 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 generiert, die im static-Ordner der App enthalten ist.

Die folgenden Abschnitte demonstrieren beide Arten von statischen Dateien.

Verweisen Sie in einer Vorlage auf statische Dateien

1. Erstellen Sie im hello_flask-Ordner einen Ordner namens static.

2. Erstellen Sie innerhalb des static-Ordners eine Datei namens site.css mit folgendem Inhalt. Beobachten Sie nach der Eingabe dieses Codes auch das Syntax-Highlighting, das VS Code für CSS-Dateien bietet, einschließlich einer Farbvorschau.

   .message {
       font-weight: 600;
       color: blue;
   }
   

3. Fügen Sie in templates/hello_there.html die folgende Zeile vor dem </head>-Tag hinzu, die einen Verweis auf das Stylesheet erstellt.

   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
   

   Das hier verwendete url_for-Tag von Flask erstellt den passenden Pfad zur Datei. Da es Variablen als Argumente akzeptieren kann, ermöglicht url_for Ihnen bei Bedarf die programmgesteuerte Kontrolle über den generierten Pfad.

4. Ersetzen Sie ebenfalls in templates/hello_there.html den Inhalt des <body>-Elements durch das folgende Markup, das den message-Stil 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 %}
   

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

Bereitstellen einer statischen Datei aus dem Code

1. Erstellen Sie im static-Ordner eine JSON-Datendatei namens data.json mit folgendem Inhalt (das sind bedeutungslose Beispieldaten).

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

2. Fügen Sie in app.py eine Funktion mit der Route /api/data hinzu, die die statische Datendatei mithilfe der Methode send_static_file zurückgibt.

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

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

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 ein Basisseitentemplate, das andere Seitentemplates dann erweitern können (dies wird auch Template-Vererbung genannt).

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

Ein Basisseitentemplate in Flask enthält alle gemeinsamen Teile einer Reihe von Seiten, einschließlich Verweisen auf CSS-Dateien, Skriptdateien usw. Basistemplates definieren auch ein oder mehrere block-Tags, von denen erwartet wird, dass andere Templates, die die Basis erweitern, diese überschreiben. Ein block-Tag wird sowohl im Basistemplate als auch in den erweiterten Templates durch {% block <name> %} und {% endblock %} begrenzt.

Die folgenden Schritte zeigen das Erstellen einer Basisvorlage.

1. Erstellen Sie im templates-Ordner eine Datei namens layout.html mit dem unten stehenden Inhalt, die Blöcke namens "title" und "content" enthält. Wie Sie sehen, definiert das Markup eine einfache Navigationsleistenstruktur mit Links zu Home-, About- und Contact-Seiten, die Sie in einem späteren Abschnitt erstellen werden. Jeder Link verwendet wiederum das url_for-Tag von Flask, um zur Laufzeit einen Link für die passende 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>
   

2. Fügen Sie die folgenden Stile zu static/site.css unterhalb des bestehenden "message"-Stils hinzu und speichern Sie die Datei. Beachten Sie, dass diese Anleitung 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 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.

1. Wählen Sie in VS Code Datei > Einstellungen > Benutzerschnipsel konfigurieren.

2. Wählen Sie in der erscheinenden Liste html aus. Die Option erscheint möglicherweise als "html.json" im Bereich Bestehende Schnipsel der Liste, wenn Sie bereits zuvor Schnipsel erstellt haben.

3. Nachdem VS Code html.json geöffnet hat, fügen Sie den folgenden Eintrag innerhalb der geschweiften Klammern hinzu (die erläuternden Kommentare, die hier nicht gezeigt werden, beschreiben Details wie die $0-Zeile, die anzeigt, wo VS Code den Cursor nach dem Einfügen eines Schnipsels 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"
   },
   

4. Speichern Sie die html.json-Datei (⌘S (Windows, Linux Ctrl+S)).

5. Wann immer Sie nun anfangen, das Präfix des Schnipsels zu tippen, wie z. B. flext, bietet VS Code den Schnipsel als Option zur automatischen Vervollständigung an, wie im nächsten Abschnitt gezeigt. Sie können auch den Befehl Schnipsel einfügen verwenden, um einen Schnipsel 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.

1. Erstellen Sie im templates-Ordner eine neue Datei namens home.html. Tippen Sie dann flext, um den Schnipsel als Vervollständigung erscheinen zu sehen.

   

   Wenn Sie die Vervollständigung auswählen, erscheint der Code des Snippets mit dem Cursor am Einfügepunkt des Snippets

   

2. Schreiben Sie an der Einfügestelle im "title"-Block Home und im "content"-Block <p>Startseite für das Visual Studio Code Flask-Tutorial.</p>, und speichern Sie dann die Datei. Diese Zeilen sind die einzigen einzigartigen Teile des erweiterten Seitentemplates.

3. Erstellen Sie im templates-Ordner about.html, verwenden Sie den Schnipsel zum Einfügen des Boilerplate-Markups, fügen Sie Über uns und <p>Über-Seite für das Visual Studio Code Flask-Tutorial.</p> in die Blöcke "title" bzw. "content" ein und speichern Sie die Datei.

4. Wiederholen Sie den vorherigen Schritt, um templates/contact.html zu erstellen, indem Sie Kontakt und <p>Kontaktseite für das Visual Studio Code Flask-Tutorial.</p> in die beiden Inhaltsblöcke einfügen.

5. Fügen Sie in app.py Funktionen für die /about/- und /contact/-Routen hinzu, die sich auf ihre jeweiligen Seitentemplates beziehen. Ändern Sie auch die home-Funktion, um das home.html-Template 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

Nachdem alle Seitentemplates vorhanden sind, speichern Sie app.py, führen Sie die App aus und öffnen Sie einen Browser, um die Ergebnisse zu sehen. Navigieren Sie zwischen den Seiten, um zu überprüfen, ob die Seitentemplates die Basistemplates ordnungsgemäß erweitern.

Hinweis: Wenn Sie die neuesten Änderungen nicht sehen, müssen Sie möglicherweise die Seite hart aktualisieren (Hard Refresh), um zu vermeiden, dass eine zwischengespeicherte Datei angezeigt wird.

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 eine Versionsverwaltung oder auf andere Weise teilen, ist es nicht sinnvoll, alle Dateien in einer virtuellen Umgebung zu kopieren, da die Empfänger die Umgebung immer 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

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

2. 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 in der ursprünglichen Umgebung neu zu installieren. (Der Empfänger muss jedoch 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 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.

Refaktorieren des Projekts zur Unterstützung der weiteren Entwicklung

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

1. Erstellen Sie in Ihrem Projektordner einen Ordner für die App, wie z. B. hello_app, um deren Dateien von anderen Dateien auf Projektebene wie requirements.txt und dem .vscode-Ordner zu trennen, in dem VS Code Einstellungen und Debug-Konfigurationsdateien speichert.

2. Verschieben Sie die Ordner static und templates in hello_app, da diese Ordner auf jeden Fall App-Code enthalten.

3. Erstellen Sie im hello_app-Ordner eine Datei namens views.py, die die Routings und die View-Funktionen 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")
   

4. Erstellen Sie im hello_app-Ordner eine Datei __init__.py mit folgendem Inhalt.

   import flask
   app = flask.Flask(__name__)
   

5. Erstellen Sie im hello_app-Ordner 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.
   

6. Öffnen Sie die Debug-Konfigurationsdatei launch.json und aktualisieren Sie die Eigenschaft env wie folgt, um auf das Startobjekt zu zeigen.

   "env": {
       "FLASK_APP": "hello_app.webapp"
   },
   

7. Löschen Sie die ursprüngliche app.py-Datei im Projektstamm, da ihr Inhalt in andere App-Dateien verschoben wurde.

8. Die Struktur Ihres Projekts sollte nun wie folgt aussehen:

   

9. 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 in einem Terminal:

   1. Setzen Sie eine Umgebungsvariable für FLASK_APP. Verwenden Sie unter Linux und macOS export 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 hello_app-Ordner und starten Sie dann das Programm mit python -m flask run.

Erstellen eines Containers für eine Flask-App mithilfe der Container Tools-Erweiterung

Die Container Tools-Erweiterung macht es einfach, containerisierte Anwendungen aus Visual Studio Code zu erstellen, zu verwalten und bereitzustellen. Wenn Sie lernen möchten, wie man einen Python-Container für die in diesem Tutorial entwickelte Flask-App erstellt, sehen Sie sich das Tutorial Python in einem Container an, das Sie durch Folgendes 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 Einführung in die Arbeit mit Flask in Visual Studio Code!

Das vollständige Codeprojekt aus diesem Tutorial finden Sie auf GitHub: python-sample-vscode-flask-tutorial.

Da dieses Tutorial nur an der Oberfläche der Seitentemplates gekratzt hat, finden Sie weitere Informationen zu Templates in der Jinja2-Dokumentation. Die Template Designer-Dokumentation enthält alle Details zur Template-Sprache. Vielleicht möchten Sie auch das offizielle Flask-Tutorial sowie die Dokumentation für Flask-Erweiterungen lesen.

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

• Python-Code bearbeiten
• Linting
• Python-Umgebungen verwalten
• Python debuggen
• Testen