Lernprogramm: Arbeiten mit dem Flask-Webframework in Visual Studio

Dieser Artikel ist der erste Schritt in einer dreiteiligen Lernprogrammreihe, die veranschaulicht, wie Sie mit Flask in Visual Studio arbeiten. Flask ist ein einfaches Python-Framework für Webanwendungen, das die Grundlagen für das URL-Routing und das Seitenrendering bereitstellt. Flask wird als "Mikroframework" bezeichnet, da es nicht direkt Features wie Formularüberprüfung, Datenbankabstraktion, Authentifizierung usw. bereitstellt. Diese Features werden stattdessen von speziellen Python-Paketen namens Flask-Erweiterungen bereitgestellt. Die Erweiterungen lassen sich nahtlos in Flask integrieren, sodass sie so erscheinen, als wären sie Teil von Flask selbst. Beispielsweise stellt Flask selbst kein Seitenvorlagenmodul bereit. Template-Funktionen werden von Erweiterungen wie Jinja und Jade bereitgestellt, wie in diesem Tutorial gezeigt.

In Schritt 1 des Lernprogramms erfahren Sie, wie Sie:

• Erstellen Sie eine Visual Studio-Projektmappe und ein Flask-Projekt.
• Untersuchen des Projektbausteincodes und Ausführen des Projekts
• Erstellen eines Git-Repositorys zum Verwalten von Änderungen am Flask-Projekt
• Arbeiten mit Git-Quellcode-Verwaltungssystemen
• Erstellen einer virtuellen Umgebung für das Flask-Projekt

Dieses Lernprogramm unterscheidet sich von der Flask-Schnellstartanleitung. Sie erfahren mehr über Flask und die Verwendung von Flask-Projektvorlagen, um einen umfangreicheren Ausgangspunkt für Ihre Projekte bereitzustellen. Die Vorlagen installieren das Flask-Paket automatisch, wenn Sie ein Projekt erstellen, während in der Schnellstartanleitung gezeigt wurde, wie das Paket manuell installiert wird.

Voraussetzungen

• Visual Studio 2022 oder höher unter Windows mit den folgenden Optionen, die im Visual Studio Installer ausgewählt sind:

  • Wählen Sie auf der Registerkarte "Workloads " die Python-Entwicklungsoption aus. Weitere Informationen finden Sie unter Installieren der Python-Unterstützung in Visual Studio.

  • Wählen Sie auf der Registerkarte "Einzelne Komponenten " unter "Codetools" die Option "Git für Windows " aus.

Flask-Projektvorlagen sind in allen früheren Versionen von Python Tools für Visual Studio enthalten. Die Vorlagendetails unterscheiden sich möglicherweise von den Beschreibungen in diesem Lernprogramm.

Visual Studio für Mac wird nicht unterstützt. Weitere Informationen finden Sie unter Was geschieht mit Visual Studio für Mac? Visual Studio Code unter Windows, Mac und Linux funktioniert gut mit Python über verfügbare Erweiterungen.

Visual Studio-Projektmappe und Flask-Projekt erstellen

In Schritt 1 dieser Anleitung erstellen Sie eine einzelne Visual Studio-Lösung, die zwei separate Flask-Projekte enthält. Sie erstellen die Projekte mithilfe verschiedener Flask-Projektvorlagen, die in Visual Studio enthalten sind. Indem Sie die Projekte in derselben Lösung beibehalten, können Sie einfach zwischen verschiedenen Dateien zum Vergleich wechseln.

Führen Sie dieses Verfahren aus, um die Lösung und ein Flask-Webprojekt zu erstellen:

1. In Visual Studio wählen Sie "Datei>Neues>Projekt" aus und suchen Sie nach "Flask". Wählen Sie dann die Vorlage Leeres Flask-Webprojekt und Weiter aus.

   

2. Konfigurieren Sie Ihr neues Projekt und Ihre neue Lösung:

   1. Legen Sie den Namen des Visual Studio-Projekts auf BasicProject fest. Dieser Name wird auch für das Flask-Projekt verwendet.

   2. Geben Sie den Speicherort an, an dem Visual Studio die Projektmappe und das Projekt speichern soll.

   3. Deaktivieren Sie die Option Lösungsdatei und Projekt im selben Verzeichnis ablegen.

   4. Legen Sie den Namen der Lösung auf LearningFlask fest. Die Lösung dient als Container für mehrere Projekte in dieser Lernprogrammreihe.

3. Wählen Sie "Erstellen" aus.

4. Nach einem Moment zeigt Visual Studio die Meldung dass die Python-Paketspezifikationsdatei "requirements.txt" im Projekt "BasicProject" erkannt wurde.

   

   Das Dialogfeld gibt an, dass die ausgewählte Vorlage eine requirements.txt Datei enthält, die Sie zum Erstellen einer virtuellen Umgebung für das Projekt verwenden können.

5. Wählen Sie das X rechts aus, um die Eingabeaufforderung zu schließen. Später in diesem Lernprogramm erstellen Sie die virtuelle Umgebung und stellen sicher, dass die Quellcodeverwaltung die Umgebung ausschließt. (Die Umgebung kann immer später aus der dateirequirements.txt erstellt werden.)

Git-Steuerelemente überprüfen

Im nächsten Verfahren machen Sie sich mit der Visual Studio-Unterstützung für die Git-Quellcodeverwaltung vertraut.

1. Wählen Sie unten rechts im Hauptfenster von Visual Studio die Option "Zur Quellcodeverwaltung hinzufügen " aus, um das Projekt auf Ihr lokales Quellcodeverwaltungssteuerelement zu übernehmen, und wählen Sie dann Git aus:

   

   Das Fenster " Git-Repository erstellen" wird geöffnet, in dem Sie ein neues Repository erstellen und pushen können.

2. Nachdem Sie ein Repository erstellt haben, wird die Git-Steuerelementleiste unten rechts im Visual Studio-Hauptfenster angezeigt:

   

   Von links nach rechts zeigt die Git-Kontrollleiste die Anzahl der ausgehenden/eingehenden Übertragungen (Pfeile #/#), die Anzahl der nicht übertragenen Änderungen (Bleistift #), den aktuellen Zweignamen und den aktuellen Repository-Namen an. Git-Steuerelemente sind auch im Git-Menü auf der Hauptsymbolleiste verfügbar.

3. Wählen Sie auf der Git-Steuerelementleiste die Änderungen (Bleistift #) aus, um das Fenster "Git-Änderungen " zu öffnen. Sie können auch Ansicht>Git-Änderungen (STRG+O, STRG+G) auswählen:

   

   In diesem Fenster werden Details zu nicht übergebenen Änderungen angezeigt, einschließlich zwischengespeicherter Änderungen. Da das neu erstellte Projekt bereits automatisch zur Quellcodeverwaltung verpflichtet ist, werden keine ausstehenden Änderungen angezeigt.

4. Wählen Sie in der Git-Steuerungsleiste die Übertragungen aus (Pfeile #/#) und wählen Sie dann Alle Übertragungen anzeigen:

   

   Das Git-Repositoryfenster wird geöffnet. Sie können auch wählen Ansicht>Git-Repository (Strg+O, Strg+R):

   

   Dieses Fenster zeigt Einzelheiten für das aktuelle Repository im linken Bereich und den aktuellen Zweig mit ausgehenden/eingehenden Übertragungen im rechten Bereich.

   Um die Ansicht "Unterschiede" für die Datei anzuzeigen, wählen Sie im mittleren Bereich einen Commit aus. Die vorherige Version wird auf der linken Seite angezeigt, und die überarbeitete Version wird auf der rechten Seite angezeigt. Die Details enthalten auch den Änderungsautor, den Committer der Änderung und die Änderungsnachricht.

Gewöhnen Sie sich im Laufe dieses Tutorials an, regelmäßig die Git-Steuerelemente in Visual Studio zu verwenden, um Änderungen zu übertragen und zu veröffentlichen. Dieses Lernprogramm erinnert Sie an die entsprechenden Punkte.

Verwenden der Quellcodeverwaltung von Anfang an

Es gibt mehrere Vorteile für die Verwendung der Quellcodeverwaltung vom Anfang eines Projekts. Wenn Sie die Quellcodeverwaltung von Anfang an eines Projekts verwenden, insbesondere wenn Sie auch ein Remote-Repository verwenden, erhalten Sie regelmäßige offsite-Sicherung Ihres Projekts. Im Gegensatz zur Verwaltung eines Projekts nur auf einem lokalen Dateisystem bietet die Quellcodeverwaltung auch einen vollständigen Änderungsverlauf und die einfache Möglichkeit, eine einzelne Datei oder das gesamte Projekt in einen vorherigen Zustand zurückzustellen. Der Änderungsverlauf hilft dabei, die Ursache von Regressionen (Testfehler) zu ermitteln.

Die Quellcodeverwaltung ist unerlässlich, wenn mehrere Personen an einem Projekt arbeiten, da sie Überschreibungen verwaltet und Konfliktauflösungen bereitstellt. Die Quellcodeverwaltung ist grundsätzlich eine Form der Automatisierung und bereitet Sie gut auf die Automatisierung von Builds, Tests und die Verwaltung von Releases vor. Es ist der erste Schritt bei der Verwendung von Azure DevOps für ein Projekt, und da die Einstiegsbarrieren so niedrig sind, gibt es wirklich keinen Grund, die Quellcodeverwaltung von Anfang an nicht zu verwenden.

Weitere Informationen zur Quellcodeverwaltung als Automatisierung finden Sie unter The Source of Truth: The Role of Repositories in DevOps, einem Artikel in MSDN Magazine, der für mobile Apps geschrieben wurde, die auch für Web-Apps gelten.

Das automatische Committen von Projekten in Visual Studio verhindern

Führen Sie die folgenden Schritte aus, um zu verhindern, dass Visual Studio ein neues Projekt automatisch committ:

1. Öffnen Sie den Bereich "Extras>Optionen", und erweitern Sie den Abschnitt Alle Einstellungen>Quellcodeverwaltung>Git-Einstellungen.

2. Löschen Sie die Commit-Änderungen nach der Standardoption "Zusammenführen" .

Erstellen einer virtuellen Umgebung und Ausschließen der Quellcodeverwaltung

Nachdem Sie die Quellcodeverwaltung für Ihr Projekt konfiguriert haben, können Sie die virtuelle Umgebung mit den erforderlichen Flask-Paketen erstellen, die das Projekt benötigt. Anschließend können Sie das Fenster "Git-Änderungen " verwenden, um den Ordner der Umgebung aus der Quellcodeverwaltung auszuschließen.

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten "Python-Umgebungen ", und wählen Sie "Umgebung hinzufügen" aus.

   

2. Wählen Sie im Dialogfeld "Umgebung hinzufügen " die Option "Erstellen" aus, um die Standardwerte zu akzeptieren. (Sie können den Namen der virtuellen Umgebung bei Bedarf ändern, wodurch der Name des Unterordners geändert wird, env jedoch eine Standardkonvention ist.)

   

3. Wenn Visual Studio zur Eingabe von Administratorrechten aufgefordert wird, geben Sie Ihre Zustimmung an. Warten Sie mehrere Minuten, während Visual Studio Pakete herunterlädt und installiert. Für Flask und seine Abhängigkeiten kann der Prozess eine Erweiterung von nahezu 1.000 Dateien in über 100 Unterordnern erfordern. Sie können den Fortschritt im Visual Studio-Ausgabefenster anzeigen.

4. Wählen Sie auf der Git-Steuerelementleiste die nicht abgeschlossenen Änderungen aus (die jetzt 99+) angezeigt werden, um das Fenster "Git-Änderungen " zu öffnen:

   

   Die Erstellung der virtuellen Umgebung bringt Tausende von Änderungen mit sich, sie müssen jedoch nicht in die Quellcodeverwaltung einbezogen werden. Sie oder jede andere Person, die das Projekt klont, kann die Umgebung jederzeit mithilfe der requirements.txt-Datei neu erstellen.

5. Um die virtuelle Umgebung aus der Quellcodeverwaltung auszuschließen, klicken Sie im Fenster "Git-Änderungen " mit der rechten Maustaste auf den Ordner "env ", und wählen Sie "Diese lokalen Elemente ignorieren" aus:

   

   Nachdem Sie die virtuelle Umgebung ausgeschlossen haben, sind die einzigen verbleibenden Änderungen an der Projektdatei (.py) und der Gitignore-Datei , die einen hinzugefügten Eintrag für den Ordner "virtuelle Umgebung" enthält.

   Um die Ansicht "Unterschiede" für die GITIGNORE-Datei anzuzeigen, doppelklicken Sie im Git-Fenster "Änderungen " auf die Datei.

6. Geben Sie im Fenster "Git-Änderungen " eine Commit-Nachricht ein, z. B. "Ursprüngliche Projektänderungen":

   

7. In der Übertragen Dropdown-Menü, wählen Sie Staged Übertragen und Schieben Sie.

Sie können das Git-Repository und bestätigen Sie die Staged Übertragungen, die im Fenster Lokale Geschichte für den aktuellen Zweig.

Verstehen des Zwecks virtueller Umgebungen

Eine virtuelle Umgebung ist eine hervorragende Möglichkeit, die genauen Abhängigkeiten Ihrer Anwendung zu isolieren. Diese Methode der Isolation vermeidet Konflikte in einer globalen Python-Umgebung und unterstützt sowohl Tests als auch Die Zusammenarbeit. Wenn Sie eine App entwickeln, bringen Sie im Laufe der Zeit viele hilfreiche Python-Pakete mit sich. Indem Sie Pakete in einer projektspezifischen virtuellen Umgebung beibehalten, können Sie die requirements.txt Datei des Projekts ganz einfach aktualisieren, die diese Umgebung beschreibt, die in der Quellcodeverwaltung enthalten ist. Wenn Sie das Projekt auf andere Computer kopieren, einschließlich Buildservern, Bereitstellungsservern und anderen Entwicklungscomputern, ist es einfach, die Umgebung neu zu erstellen. Sie können die Umgebung neu erstellen, indem Sie nur die requirements.txt-Datei verwenden, weshalb sich die Umgebung nicht in der Quellcodeverwaltung befinden muss. Weitere Informationen finden Sie unter Verwenden virtueller Umgebungen.

Virtuelle Umgebung unter der Versionskontrolle entfernen

Sie können eine virtuelle Umgebung entfernen, nachdem sie unter Quellcodekontrolle steht. Folgen Sie diesen Schritten:

1. Bearbeiten Sie Ihre Gitignore-Datei , um den Ordner auszuschließen:

   1. Öffnen Sie die Datei, indem Sie "Datei>öffnen>" auswählen.

      Sie können die Datei auch im Team-Explorer öffnen. Wählen Sie auf der Seite "Einstellungen" die Option "Repositoryeinstellungen" aus. Wechseln Sie zum Abschnitt "Ignore & Attributes Files ", und wählen Sie den Link "Bearbeiten " neben gitignore aus.

   2. Suchen Sie den Abschnitt am Ende mit dem Kommentar # Python Tools for Visual Studio (PTVS).

   3. Fügen Sie nach diesem Abschnitt eine neue Zeile für den Ordner "Virtuelle Umgebung" hinzu, z. B. "/BasicProject/env".

2. Öffnen Sie ein Befehlsfenster, und wechseln Sie zu dem Ordner (z. B. BasicProject), der über den Ordner "Virtuelle Umgebung" verfügt, z. B. "env".

3. Führen Sie den git rm -r env Befehl aus, um die virtuelle Umgebung zu entfernen, die sich derzeit unter der Quellcodeverwaltung befindet.

4. Übernehmen Sie Ihre Änderungen mit dem git commit -m 'Remove venv' oder übertragen Sie sie über den Befehl Änderungen Seite von Team-Explorer.

Überprüfen der Codebausteine

In diesem Abschnitt untersuchen Sie den Codebaustein in der Projektdatei (.py), den Visual Studio basierend auf Ihrer Vorlagenauswahl erstellt.

1. Öffnen Sie den Solution Explorer, um Ihre Projektmappe und Projektdateien anzuzeigen. Das ursprüngliche Projekt enthält nur zwei Dateien, app.py und requirements.txt:

   

   Die dateirequirements.txt gibt die Flask-Paketabhängigkeiten an. Das Vorhandensein dieser Datei lädt Sie ein, beim ersten Erstellen des Projekts eine virtuelle Umgebung zu erstellen.

   Die einzelne app.py Datei enthält Codebausteine für ein leeres Flask-Webprojekt.

2. Öffnen Sie die datei app.py im Editor, und untersuchen Sie den ersten Abschnitt, eine import Anweisung für Flask.

   Diese Anweisung erstellt eine Instanz der Flask Klasse, die der Variablen appzugewiesen ist. In diesem Abschnitt wird auch eine wsgi_app Variable zugewiesen (die nützlich ist, wenn Sie eine Bereitstellung auf einem Webhost ausführen, aber nicht für den aktuellen Zeitpunkt verwendet):

   from flask import Flask
   app = Flask(__name__)
   
   # Make the WSGI interface available at the top level so wfastcgi can get it.
   wsgi_app = app.wsgi_app
   

3. Der zweite zu überprüfende Abschnitt erfolgt am Ende der Datei. Dieser Abschnitt enthält optionalen Code, mit dem Sie den Flask-Entwicklungsserver starten können.

   Sie können den Code definieren, um bestimmte Host- und Portwerte aus Umgebungsvariablen zu verwenden, oder den Standardhost- und Portwert verwenden localhost:55551.

   if __name__ == '__main__':
       import os
       HOST = os.environ.get('SERVER_HOST', 'localhost')
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
       app.run(HOST, PORT)
   

4. Der dritte Codeabschnitt, der untersucht werden soll, weist einer URL-Route eine Funktion zu. Dies bedeutet, dass die Funktion die durch die URL identifizierte Ressource bereitstellt.

   Sie definieren Routen mithilfe des Dekorators @app.route von Flask mit einem Argument, das die relative URL vom Websitestamm ist. Wie Sie im Code sehen können, gibt die Funktion nur eine Textzeichenfolge zurück, die für das Rendern eines Browsers ausreicht. In nachfolgenden Schritten in dieser Lernprogrammreihe aktualisieren Sie den Code so, dass umfangreichere Seiten mit HTML gerendert werden.

   @app.route('/')
   def hello():
       """Renders a sample page."""
       return "Hello World!"
   

Das Argument name in der Flask-Klasse verstehen

Das name Argument in einer Flask-Klasse ist der Name des Moduls oder Pakets der Anwendung. Flask verwendet den Namen, um zu bestimmen, wo nach Vorlagen, statischen Dateien und anderen Ressourcen gesucht werden soll, die zur App gehören. Bei Apps, die in einem einzigen Modul enthalten sind, __name__ ist immer der richtige Wert. Der Name ist auch wichtig für Erweiterungen, die Debugginginformationen benötigen. Weitere Informationen und andere Argumente finden Sie in der Flask-Klassendokumentation (flask.pocoo.org).

Verwenden Sie mehrere der Routendekoratoren

Eine Funktion kann mehrere Routendekoratoren haben. Sie können beliebig viele Dekoratoren verwenden, wenn dieselbe Funktion mehrere Routen bedient. Wenn Sie beispielsweise die Funktion sowohl für die hello/ Route als auch für die /hello Route verwenden möchten, verwenden Sie den folgenden Code:

@app.route('/')
@app.route('/hello')
def hello():
    """Renders a sample page."""
    return "Hello World!"

Verwenden von Variablen-URL-Routen und Abfrageparametern

Flask kann mit variablen URL-Routen und Abfrageparametern arbeiten. In einer Route markieren Sie eine beliebige Variable mit dem <variable_name> Attribut. Flask übergibt die Variable an die Funktion mithilfe eines benannten Arguments im URL-Pfad. Beispielsweise erzeugt eine Route in der Form von /hello/<name> ein Zeichenfolgenargument namens name für die Funktion. Abfrageparameter sind über die request.args Eigenschaft verfügbar, insbesondere über die request.args.get Methode. Der folgende Code gibt ein Beispiel:

# URL: /hello/<name>?message=Have%20a%20nice%20day
@app.route('/hello/<name>')
def hello(name):
    msg = request.args.get('message','')
    return "Hello " + name + "! "+ msg + "."

Um den Typ zu ändern, präfixen Sie die Variable mit int, float, path (die Schrägstriche akzeptiert, um Ordnernamen zu delineieren) und uuid. Weitere Informationen finden Sie in der Flask-Dokumentation unter Variablenregeln .

Generieren von Anforderungen nach der Paketinstallation

Visual Studio kann eine requirements.txt Datei aus einer virtuellen Umgebung generieren, nachdem Sie andere Pakete installiert haben.

• Erweitern Sie im Lösungs-Explorer den Knoten Python-Umgebungen, klicken Sie mit der rechten Maustaste auf Ihre virtuelle Umgebung, und wählen Sie Generieren "requirements.txt" aus.

Es empfiehlt sich, diesen Befehl regelmäßig zu verwenden, während Sie die Umgebung ändern. Übertragen Sie Änderungen an Ihren Anforderungen.txt Datei in der Versionskontrolle zusammen mit allen anderen Codeänderungen, die von dieser Umgebung abhängen. Wenn Sie eine kontinuierliche Integration auf einem Buildserver einrichten, sollten Sie die Datei generieren und Änderungen übernehmen, wenn Sie die Umgebung ändern.

Projekt ausführen

Jetzt können Sie Ihr Projekt in Visual Studio ausführen, indem Sie das folgende Verfahren 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. Jeder Befehl weist der PORT-Umgebungsvariable eine zufällige Portnummer zu und führt die Python-app.py-Datei aus.

   Der Code startet die Anwendung mithilfe dieses Ports innerhalb des Flask-Entwicklungsservers.

   Wenn Visual Studio die Meldung "Debugger nicht starten" veröffentlicht und angibt, dass keine Startdatei gefunden wurde, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die app.py Datei, und wählen Sie "Als Startdatei festlegen" aus.

3. Wenn der Server gestartet wird, wird ein Konsolenfenster geöffnet, um das Serverprotokoll anzuzeigen. Visual Studio öffnet automatisch einen Browser um http://localhost:<port>Dort sollten Sie die Nachricht sehen, die vom hello Funktion:

   

4. Wenn Sie fertig sind, schließen Sie das Konsolenfenster, das den Flask-Entwicklungsserver beendet. Sie können auch wählen Fehlersuche>Debugging beenden.

Vergleichen von Debugbefehlen mit Project Python-Befehlen

Es gibt einen Unterschied zwischen der Verwendung der Menübefehle " Debuggen " und den Serverbefehlen, die im Python-Untermenü des Projekts aufgeführt sind.

Zusätzlich zu den Menübefehlen und Symbolleistenschaltflächen "Debuggen" können Sie den Server auch mithilfe derPython-Startserver>- oder Python>Start-Debugserverbefehle im Kontextmenü des Projekts starten.

Beide Befehle öffnen ein Konsolenfenster, in dem die lokale URL (localhost:port) für den ausgeführten Server angezeigt wird. Sie müssen jedoch manuell einen Browser mit dieser URL öffnen, und das Ausführen des Debugservers startet den Visual Studio-Debugger nicht automatisch. Sie können später einen Debugger an den ausgeführten Prozess anfügen, wenn Sie den Befehl "An Prozess anfügen>" verwenden möchten.

Nächster Schritt

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