Schritt 2: Erstellen einer Flask-App mit Ansichten und Seitenvorlagen

Artikel
09/08/2023

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

In Schritt 1 dieses Tutorials haben Sie eine Flask-App erstellt, die eine Seite enthält und deren gesamter Code sich in einer einzigen Datei befindet. Zur Weiterentwicklung empfiehlt es sich, den Code umzugestalten und eine Struktur für Seitenvorlagen zu erstellen. Insbesondere sollte der Code für die App-Ansichten von anderen Aspekten wie dem Startcode getrennt werden.

In diesem Schritt wird Folgendes erläutert:

Umgestalten des App-Codes zur Trennung von Ansichten und Startcode (Schritt 2.1)
Rendern einer Ansicht mit einer Seitenvorlage (Schritt 2.2)

Schritt 2.1: Umgestalten des Projekts zur Erleichterung der weiteren Entwicklung

Durch die Vorlage „Leeres Flask-Webprojekt“ wurde die Datei app.py erstellt, die den Startcode und eine Ansicht enthält. Diese Elemente sollten getrennt werden, damit die App so weiterentwickelt werden kann, dass mehrere Ansichten und Vorlagen unterstützt werden.

Erstellen Sie im Projektordner einen App-Ordner mit dem Namen HelloFlask. Klicken Sie dazu im Projektmappen-Explorer mit der rechten Maustaste zuerst auf das Projekt und anschließend auf Hinzufügen>Neuer Ordner.
Erstellen Sie im Ordner HelloFlask eine Datei namens __init__.py mit folgendem Inhalt, die die Flask Instanz erstellt und die Ansichten der App lädt (die im nächsten Schritt erstellt wurden):
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
Erstellen Sie im Ordner HelloFlask eine Datei mit dem Namen views.py und dem unten gezeigten Inhalt. Der Name views.py ist wichtig, weil Sie ihn import HelloFlask.views innerhalb von __init__.py verwendet haben; wenn die Namen nicht übereinstimmen, wird zur Laufzeit ein Fehler angezeigt.
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
Der Code enthält zusätzlich zur Umbenennung der Funktion und der Route in home den Code zum Rendern der Seite aus app.py und importiert das in __init__.py deklarierte app-Objekt.
Erstellen Sie einen Unterordner mit dem Namen HelloFlask in Templates. Dieser Ordner bleibt zunächst leer.

Benennen Sie im Stammordner des Projekts app.py in runserver.py um, und stellen Sie sicher, dass der Inhalt dem folgenden Code entspricht:

import os
from HelloFlask import app    # Imports the code from HelloFlask/__init__.py

if __name__ == '__main__':
    HOST = os.environ.get('SERVER_HOST', 'localhost')

    try:
        PORT = int(os.environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555

    app.run(HOST, PORT)

Die Projektstruktur sollte nun so wie auf dem folgenden Bild aussehen:
Klicken Sie auf Debuggen>Debuggen starten (F5), oder klicken Sie auf die Schaltfläche Webserver in der Symbolleiste, um die App zu starten und einen Browser zu öffnen. Der bei Ihnen aufgerufene Browser kann unterschiedlich sein. Verwenden Sie probeweise sowohl die URL-Route „/“ als auch „/home“.
Sie können in verschiedenen Teilen des Codes auch Breakpoints festlegen und die App neu starten, wenn Sie die Startsequenz nachvollziehen möchten. Legen Sie beispielsweise einen Breakpoint für die ersten Zeilen von runserver.py und HelloFlask_init_.py und für die return "Hello Flask!"Zeile in views.py fest. Starten Sie dann die App neu (Debuggen>Neu starten, STRG+UMSCHALT+F5 oder über die unten gezeigte Symbolleistenschaltfläche), und gehen Sie schrittweise durch den Code (F10), oder führen Sie ihn von jedem Haltepunkt aus mit F5 aus.
Beenden Sie die App, wenn Sie fertig sind.

Ausführen eines Commits für die Quellcodeverwaltung

Nachdem Sie die Änderungen am Code vorgenommen und Tests erfolgreich durchgeführt haben, können Sie Ihre Arbeit überprüfen und an die Quellcodeverwaltung committen. Wenn Sie in späteren Schritten in diesem Tutorial daran erinnert werden, erneut ein Commit in die Quellcodeverwaltung auszuführen, können Sie diesen Abschnitt erneut zu Rate ziehen.

Klicken Sie im unteren Bereich von Visual Studio auf die Schaltfläche „Änderungen“ (unten eingekreist), um zu Team Explorer zu navigieren.
Geben Sie im Team Explorer beispielsweise die Commitnachricht „Codeumgestaltung“ ein, und klicken Sie anschließend auf Commit All (Alle committen). Wenn der Commit abgeschlossen ist, wird ein Nachrichten-Commit-Hash <> angezeigt, der lokal erstellt wurde. Synchronisieren Sie Ihre Änderungen mit dem Server. Wenn Sie Änderungen an Ihr Remote-Repository pushen möchten, wählen Sie Synchronisieren und dann Push unter Ausgehende Commits aus. Sie können auch mehrere lokale Commits vor dem Pushvorgang auf Remotecomputer sammeln.

Frage: Wie häufig sollte ein Commit in der Quellcodeverwaltung erfolgen?

Antwort: Durch das Committen von Änderungen in der Quellcodeverwaltung wird eine Zeile im Änderungsprotokoll und ein Punkt erstellt, auf den Sie das Repository bei Bedarf zurücksetzen können. Jeder Commit kann außerdem auf bestimmte Änderungen überprüft werden. Da Commits in Git effizient ausgeführt werden, empfiehlt es sich, anstelle eines einzigen Commits mit vielen Änderungen häufige Commits auszuführen. Sie müssen nicht jede einzelne kleine Änderung an einer Datei committen. Üblicherweise führen Sie einen Commit durch, wenn Sie ein Feature hinzufügen, eine Struktur verändern (wie in diesem Schritt) oder den Code umgestalten. Sie sollten den Umfang der Commits außerdem mit Ihren Teammitgliedern abklären.

Wie oft Sie Commits ausführen ist getrennt von der Frage zu betrachten, wie häufig Sie Commits in ein Remote-Repository pushen sollten. Sie können z. B. mehrere Commits in Ihrem lokalen Repository verwalten, bevor Sie diese in ein Remoterepository pushen. Die Häufigkeit Ihrer Commits hängt davon ab, wie Ihr Team das Repository verwalten möchte.

Schritt 2.2: Verwenden einer Vorlage zum Rendern einer Seite

Die Funktion home, die bisher in views.py enthalten ist, generiert lediglich eine Nur-Text-HTTP-Antwort für die Seite. In der Praxis erstellen die meisten Webseiten eine Antwort mit Rich-HTML-Seiten, die häufig Livedaten enthalten. Der Hauptgrund für die Definition einer Ansicht mithilfe einer Funktion besteht darin, dass auf diese Weise der Inhalt dynamisch generiert werden kann.

Da der Rückgabewert für die Ansicht nur eine Zeichenfolge ist, können Sie beliebigen HTML-Code innerhalb einer Zeichenfolge und damit dynamischen Inhalt erstellen. Es empfiehlt sich jedoch, das Markup von den Daten zu trennen und dieses in einer Vorlage zu verwalten. Die Daten sollten hingegen im Code verbleiben.

Fügen Sie in views.py den folgenden Code ein. In diesem wird für die Seite Inline-HTML zusammen mit einigen dynamischen Inhalten verwendet:

from datetime import datetime
from flask import render_template
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    html_content = "<html><head><title>Hello Flask</title></head><body>"
    html_content += "<strong>Hello Flask!</strong> on " + formatted_now
    html_content += "</body></html>"

    return html_content

Führen Sie die App aus, und aktualisieren Sie die Seite mehrmals, um sich Aktualisierungen bei Datum und Uhrzeit anzeigen zu lassen. Beenden Sie die App, wenn Sie fertig sind.
Wenn Sie zum Rendern der Seite eine Vorlage verwenden möchten, müssen Sie im Ordner Templates eine Datei mit dem Namen index.html erstellen, wobei {{ content }} ein Platzhalter oder ein Ersatztoken (auch als Vorlagenvariable bezeichnet) ist, für das Sie im Code einen Wert angeben:
```
<html>
  <head>
    <title>Hello Flask</title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
Passen Sie die Funktion home so an, dass zum Laden der Vorlage render_template verwendet wird. Geben Sie anschließend für „content“ einen Wert an, indem Sie ein benanntes Argument verwenden, das dem Namen des Platzhalters entspricht. Flask sucht im Ordner templates automatisch nach Vorlagen. Der Pfad zur Vorlage ist daher relativ zum Ordner:
```
def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    return render_template(
        "index.html",
        content = "<strong>Hello, Flask!</strong> on " + formatted_now)
```
Führen Sie die App aus, und sehen Sie sich die Ergebnisse an. Beachten Sie, dass das Inline-HTML im content-Wert nicht als HTML gerendert wird, da die Vorlagen-Engine (Jinja) HTML-Inhalte automatisch mit Escapezeichen versieht. Automatische Escapevorgänge verhindern versehentliche Sicherheitsrisiken durch Einschleusungsangriffe. Entwickler sammeln häufig Eingaben von einer Seite und verwenden diese über einen Vorlagenplatzhalter als Wert auf einer anderen Seite. Escapezeichen erinnern auch daran, dass HTML nicht im Code verwendet werden sollte.

Sie sollten daher templates\index.html so anpassen, dass für die jeweiligen Datenelemente im Markup unterschiedliche Platzhalter verwendet werden:
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Anschließend aktualisieren Sie die home-Funktion so, dass für alle Platzhalter Werte angeben werden:
```
def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    return render_template(
        "index.html",
        title = "Hello Flask",
        message = "Hello, Flask!",
        content = " on " + formatted_now)
```
Führen Sie die App erneut aus, und sehen Sie sich die ordnungsgemäß gerenderte Ausgabe an.
Sie können Ihre Änderungen an der Quellcodeverwaltung committen und Ihr Remoterepository aktualisieren. Weitere Informationen finden Sie unter Schritt 2-1.

Frage: Müssen Seitenvorlagen in einer separaten Datei vorliegen?

Antwort: Obwohl Vorlagen in der Regel in separaten HTML-Dateien gespeichert sind, können Sie auch eine Inlinevorlage verwenden. Um eine saubere Trennung zwischen Markup und Code zu gewährleisten, wird die Verwendung von separaten Dateien empfohlen.

Frage: Müssen Vorlagen die Dateierweiterung „.html“ verwenden?

Antwort: Die .html-Erweiterung für Seitenvorlagendateien ist komplett optional, da Sie immer den genauen relativen Pfad zur Datei im ersten Argument der Funktion render_template angeben können. Visual Studio (und andere Editoren) verfügt jedoch in der Regel über Features wie Codevervollständigung und Syntaxfarbcodierung für .html-Dateien, die schwerer wiegen als die Tatsache, dass es sich bei den Seitenvorlagen nicht um HTML handelt.

Wenn Sie mit einem Flask-Projekt arbeiten, erkennt Visual Studio automatisch, ob die HTML-Datei, die Sie aktuell bearbeiten, tatsächlich eine Flask-Vorlage ist, und stellt bestimmte Features zur automatischen Vervollständigung bereit. Wenn Sie beispielsweise einen Kommentar zu der Flask-Seitenvorlage, {#, eingeben, bietet Visual Studio Ihnen automatisch die schließenden #}-Zeichen. Die Befehle Auswahl kommentieren und Kommentar der Auswahl entfernen (im Menü Bearbeiten>Erweitert und in der Symbolleiste) verwenden ebenfalls anstelle von HTML-Kommentaren Vorlagenkommentare.

Frage: Können Vorlagen in weiteren Unterordnern verwaltet werden?

Antwort: Ja, Sie können Unterordner verwenden und dann auf den relativen Pfad unter Templates bei Aufrufen von render_template verweisen. Dadurch erstellen Sie gleichzeitig auf einfache Weise Namespaces für Ihre Vorlagen.

Nächste Schritte

Bereitstellen statischer Dateien, Hinzufügen von Seiten und Verwenden von Vorlagenvererbung

Ausführlichere Informationen

Flask Quickstart - Rendering Templates (Flask-Schnellstart: Rendern von Vorlagen) (flask.pocoo.org)
Quellcode für das Tutorial auf GitHub: Microsoft/python-sample-vs-learning-flask