Lernprogramm: Erstellen einer Flask-App mit Ansichten und Seitenvorlagen in Visual Studio

In diesem Artikel wird Schritt 2 in der Lernprogrammreihe Arbeiten mit dem Flask-Webframework in Visual Studioerläutert.

Mit Visual Studio können Sie Flask-Anwendungen aus Projektvorlagen erstellen, die einen umfangreicheren Ausgangspunkt für Ihre Projekte bieten. Schritt 1 im Lernprogramm beschreibt, wie Sie eine Flask-App mit einer Seite erstellen, wobei sich der gesamte Code in einer einzelnen Datei befindet. In Schritt 2 gestalten Sie den Code um und erstellen eine Struktur für Seitenvorlagen, um die Weiterentwicklung zu ermöglichen. Insbesondere möchten Sie Code für die Anwendungsansichten von anderen Aspekten wie Startcode trennen.

In Schritt 2 des Lernprogramms erfahren Sie, wie Sie:

• Umgestalten von Anwendungscode, um Ansichten vom Startcode zu trennen
• Rendern einer Ansicht mithilfe einer Seitenvorlage

Voraussetzungen

• Eine Visual Studio-Projektmappe und ein Flask-Anwendungsprojekt, das in Schritt 1 erstellt wurde: Erstellen einer Visual Studio-Projektmappe und eines Flask-Projekts.

Refactor Flask Projekt zur Weiterentwicklung

Mit der Vorlage Leeres Flask-Webprojekt können Sie ein Projekt mit einer einzelnen app.py Datei erstellen, die Startcode zusammen mit einer einzelnen Ansicht enthält. Um die Weiterentwicklung einer App mit mehreren Ansichten und Vorlagen zu ermöglichen, müssen Sie diese Funktionen trennen.

Führen Sie die folgenden Schritte aus, um Ihr Flask-Projekt so anzupassen, dass sie weiter entwickelt werden können:

1. Klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf den Projektordner "Flask" (BasicProject), und wählen Sie >"Neuen Ordner hinzufügen"aus.

   

2. Benennen Sie den neuen Anwendungsordner HelloFlask.

3. Klicken Sie mit der rechten Maustaste auf den Ordner "HelloFlask", und wählen Sie ">Neues Element hinzufügen" aus, um eine neue Datei zu erstellen.

4. Wählen Sie im Dialogfeld Neues Element hinzufügen die Dateivorlage Leere Python-Datei aus:

   1. Benennen Sie die Datei __init__.py. Der Dateiname sollte zwei führende und zwei endende Unterstriche (_) um das Wort initenthalten.

   2. Wählen Sie , fügen Siehinzu.

   

5. Fügen Sie der neuen Datei den folgenden Code hinzu, der die Flask Instanz erstellt und die Anwendungsansichten lädt:

   from flask import Flask
   app = Flask(__name__)
   
   import HelloFlask.views
   

6. Erstellen Sie im Ordner HelloFlask eine weitere neue Python-Datei mit dem Namen views.py.

   Wichtig

   Achten Sie darauf, den Dateinamen als views.pyanzugeben. Der Name views ist aufgrund der import HelloFlask.views-Anweisung in der Datei __init__.py wichtig. Wenn der Name views in beiden Instanzen nicht identisch ist, zeigt Visual Studio zur Laufzeit einen Fehler an.

7. Fügen Sie der datei views.py den folgenden Code hinzu. Dieser Code benennt die Funktion um und definiert die Rückgaberoute zum /home Endpunkt:

   from flask import Flask
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return "Hello Flask!"
   

   Dieser Code enthält auch den Seitenrenderingcode aus der app.py-Datei und importiert das in der __init__.py-Datei deklarierte app-Objekt.

8. Erstellen Sie im Ordner HelloFlask einen Unterordner mit dem Namen Vorlagen. Der Ordner ist vorerst leer.

9. Ersetzen Sie im Ordner "Flask-Projekt" (BasicProject) den Inhalt der datei app.py durch den folgenden Code:

   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)
   

10. Benennen Sie nach dem Aktualisieren des Codes die app.py Datei in runserver.pyum.

11. Vergewissern Sie sich, dass ihre umgestaltete Flask-Projektstruktur wie im folgenden Beispiel aussieht:

    

Umgestaltetes Programm ausführen und Routen überprüfen

Jetzt können Sie Ihr Projekt in Visual Studio ausführen:

1. Wählen Sie in Visual Studio Debug>Debugging starten (F5) aus, oder wählen Sie Webserver auf der Hauptsymbolleiste aus (der angezeigte Browser kann variieren):

2. Wenn die Anwendung im Browser geöffnet wird, probieren Sie sowohl die / (Stamm) als auch /home URL-Routenendpunkte im Browser aus:

   

Ausführen eines aktualisierten Programms im Debugger

Sie können auch Haltepunkte in verschiedenen Teilen des Codes festlegen und der Startsequenz der App im Debuggerfolgen.

1. Legen Sie mehrere Haltepunkte fest, z. B. die folgenden Punkte:

   • Die erste Zeile der datei runserver.py
   • Die erste Zeile der datei __init__.py
   • Die return "Hello Flask!" Zeile in der datei views.py

2. Starten Sie die App im Debugger-, indem Sie Debuggen>Debuggen starten oder F5-auswählen.

3. Während der Debugger ausgeführt wird, durchlaufen Sie den Code mit F10, oder führen Sie den Code von jedem Breakpoint aus mit F5 aus. Sie können auch Debugsteuerelemente auf der Hauptsymbolleiste in Visual Studio verwenden, z. B. Continue, Stop, Restart, und Step Options:

   

4. Wenn Sie fertig sind, wählen Sie STRG+C gefolgt von einer beliebigen Taste aus, um die Anwendung zu beenden. Sie können auch alle geöffneten Browserfenster für die Routen schließen.

Committen von Änderungen an die Quellcodeverwaltung

Nachdem Sie den Code umgestalten und die Updates getestet haben, können Sie ihre Änderungen an der Quellcodeverwaltung überprüfen und übernehmen:

1. Speichern Sie die Änderungen an Ihren Projektdateien, z. B. mit der STRG+S Tastenkombination.

2. Wählen Sie auf der Git-Steuerelementleiste die nicht abgeschlossenen Änderungen (Bleistift 5) aus, um das Git Changes Fenster zu öffnen:

   

3. Geben Sie im Fenster Git-Änderungen eine Commitnachricht ein, und wählen Sie Alle committen aus:

   

   Nach Abschluss des Commits zeigt Visual Studio die Meldung Commit <hash> lokal erstellt an.

4. (Optional) Übertragen Sie die zugesicherten Änderungen an Ihr Remote-Repository:

   1. Wählen Sie auf der Git-Steuerelementleiste die ausgehenden bzw. eingehenden Commits aus (Pfeile 1/0).

   2. Klicken Sie auf Synchronisieren (Pullen und dann Pushen) oder Pushen.

   

   Sie können auch mehrere lokale Commits sammeln, bevor Sie sie an das Remote-Repository übertragen.

Für die weiteren Schritte in dieser Tutorial-Serie können Sie in diesem Abschnitt nachlesen, wie Sie Änderungen im Versionskontrollsystem übernehmen.

Ermitteln der Frequenz von Commits und Pushvorgängen

Durch das Committen von Änderungen an die Quellcodeverwaltung wird ein Eintrag im Änderungsprotokoll und ein Punkt erstellt, auf den Sie das Repository bei Bedarf zurücksetzen können. Sie können auch jeden Commit untersuchen, um die spezifischen Änderungen zu überprüfen.

Commits in Git sind günstig. Es kann vorzuziehen sein, Ihre Änderungen in kleinen Mengen mit häufigen Commits zu übermitteln, anstatt eine große Anzahl von Änderungen anzusammeln und sie als einzelnes Commit zu übermitteln.

Sie müssen nicht jede kleine Änderung an einzelnen Dateien übernehmen. Es ist üblich, einen Commit vorzunehmen, wenn Sie ein Feature hinzufügen, eine Struktur ändern, wie in diesem Schritt der Lernprogrammreihe gezeigt, oder umgestalten Sie Code. Außerdem empfiehlt es sich, sich mit den anderen Mitwirkenden hinsichtlich der Granularität der Commits abzustimmen, die jeweils am besten geeignet sind.

Wie oft Sie Commit ausführen und wie oft Sie Commits an ein Remote-Repository übertragen, sind zwei verschiedene Bedenken. Möglicherweise sammeln Sie mehrere Commits in Ihrem lokalen Repository, bevor Sie sie an das Remote-Repository übertragen. Die Häufigkeit Ihrer Commits hängt davon ab, wie Ihr Team das Repository verwalten möchte.

Verwenden von Vorlagen zum Rendern von Seiten und Ansichten

Die home-Funktion in der Datei views.py generiert eine Nur-Text-HTTP-Antwort für die Seite. Die meisten realen Webseiten reagieren mit umfangreichen HTML-Seiten, die häufig Livedaten enthalten. Der Hauptgrund, warum Entwickler Ansichten mithilfe einer Funktion definieren, besteht darin, Inhalte dynamisch zu generieren.

Der Rückgabewert für die Ansicht ist lediglich eine Zeichenfolge. Sie können jeden HTML-Code in einer Zeichenfolge mithilfe dynamischer Inhalte erstellen. Da es am besten ist, Markup von Daten zu trennen, ist es besser, das Markup in einer Vorlage zu platzieren und die Daten im Code beizubehalten.

Anpassen von Ansichten zur Verwendung von Inline-HTML

Der erste Schritt besteht darin, die Ansichtsverarbeitung so zu konvertieren, dass inline-HTML für die Seite mit einigen dynamischen Inhalten verwendet wird:

1. Ersetzen Sie den Inhalt der datei views.py durch den folgenden Code:

   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
   

2. Speichern Sie Ihre Änderungen, und führen Sie die App erneut aus.

3. Aktualisieren Sie die Seite ein paar Mal, um zu bestätigen, dass das Datum und die Uhrzeit aktualisiert werden. Wenn Sie fertig sind, beenden Sie die App.

Erstellen einer HTML-Vorlage

Konvertieren Sie als Nächstes den Seitenrenderingprozess, um eine HTML-Vorlage zu verwenden:

1. Klicken Sie mit der rechten Maustaste auf die Vorlagen Ordner, und wählen Sie ">Neues Element hinzufügen" aus, um eine neue Datei zu erstellen.

2. Wählen Sie im Dialogfeld "Neues Element hinzufügen" die Dateivorlage "HTML-Seite" aus. Benennen Sie die Datei index.html, und wählen Sie Hinzufügenaus.

3. Ersetzen Sie den bereitgestellten Inhalt der HTML-Datei durch das folgende Markup:

   <html>
   <head>
      <title>Hello Flask</title>
   </head>
   
   <body>
      {{ content }}
   </body>
   </html>
   

   In diesem Code ist die {{ content }}-Anweisung ein Platzhalter oder ein Ersetzungstoken (auch als Vorlagenvariable bekannt), für die Sie im Code einen Wert angeben.

Anpassen der Startfunktion zum Laden der Vorlage

Sie müssen die home-Funktion ändern, um die render_template-Methode zu verwenden. Diese Methode lädt die HTML-Vorlage und stellt einen Wert für {{ content }} mithilfe eines benannten Arguments bereit, das dem Namen des Platzhalters entspricht.

1. Ersetzen Sie in der datei views.py die home Funktionsdefinition durch den folgenden Code:

   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)
   

   Flask sucht automatisch nach Vorlagen im Vorlagen Ordner, sodass der Pfad zur Vorlage relativ zu diesem Ordner ist.

2. Speichern Sie Die Projektänderungen, und führen Sie die App erneut aus.

   Beachten Sie, dass die HTML-Inlinesyntax (\<strong>...) innerhalb des content-Werts nicht als HTML gerendert wird, da die Vorlagenerstellungs-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 sie als Wert in einer anderen mithilfe eines Vorlagenplatzhalters. Escaping dient auch als Erinnerung, dass es am besten ist, HTML aus dem Code herauszuhalten.

   Wenn Sie fertig sind, beenden Sie die App.

Verwenden Sie eindeutige Platzhalter

Sie können für jede Datenmenge im HTML-Markup unterschiedliche Platzhalter verwenden. Passen Sie dann die home-Funktion erneut an, um die spezifischen Platzhalterwerte zu liefern:

1. Ersetzen Sie den Inhalt der index.html Datei durch das folgende Markup:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

2. Ersetzen Sie in der datei views.py die home Funktionsdefinition durch den folgenden Code, um Werte für alle Platzhalter bereitzustellen:

   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)
   

3. Speichern Sie Ihre Änderungen, und führen Sie die App erneut aus. Dieses Mal sollte die ordnungsgemäß gerenderte Ausgabe angezeigt werden:

   

4. Sie können ihre Änderungen an der Quellcodeverwaltung übernehmen und Ihr Remote-Repository aktualisieren. Weitere Informationen finden Sie unter Committen von Änderungen an die Quellcodeverwaltung.

Separate Seitenvorlagen

Vorlagen werden in der Regel in separaten HTML-Dateien verwaltet, aber Sie können auch eine Inlinevorlage verwenden. Separate Dateien werden empfohlen, um eine klare Trennung zwischen Markup und Code beizubehalten.

Verwenden Sie die .html-Erweiterung für Vorlagen.

Die .html Erweiterung für Seitenvorlagendateien ist vollständig optional. Sie können den genauen relativen Pfad zur Datei im ersten Argument zur funktion render_template immer identifizieren. Visual Studio (und andere Editoren) bieten jedoch in der Regel Features wie Codevervollständigung und Syntaxfarbation mit .html Dateien, was die Tatsache überwiegt, dass Seitenvorlagen nicht HTML sind.

Wenn Sie mit einem Flask-Projekt arbeiten, erkennt Visual Studio automatisch, ob die von Ihnen bearbeitete HTML-Datei tatsächlich eine Flask-Vorlage ist und bestimmte AutoVervollständigen-Features bereitstellt. Wenn Sie mit der Eingabe eines Flask-Seitenvorlagenkommentars ({#) beginnen, stellt Visual Studio automatisch die schließenden #} Zeichen bereit. Die Befehle Auswahl auskommentieren und Auskommentierung aufheben (im Menü Bearbeiten>Erweitert) verwenden auch Vorlagenkommentare anstelle von HTML-Kommentaren.

Organisieren Sie Vorlagen in Unterordner

Sie können Unterordner verwenden und dann in Aufrufen der render_template-Funktion auf den relativen Pfad unter dem -Ordner der-Vorlagen verweisen. Dieser Ansatz ist eine hervorragende Möglichkeit, Namespaces für Ihre Vorlagen effektiv zu erstellen.

Nächster Schritt

Schritt 3: Bereitstellen statischer Dateien, Hinzufügen von Seiten und Verwenden der Vorlagenvererbung