Lernprogramm: Bereitstellen statischer Dateien und Verwenden der Vorlagenvererbung mit Flask in Visual Studio

Artikel
02/03/2025

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

Die vorherigen Schritte in dieser Lernprogrammreihe erstellen eine minimale Flask-App mit einer einzelnen Seite mit eigenständigem HTML.The previous Steps in this tutorial series create a minimal Flask app with a single page of self-contained HTML. Moderne Web-Apps bestehen in der Regel aus vielen Seiten und verwenden freigegebene Ressourcen wie CSS- und JavaScript-Dateien, um ein einheitliches Format und Verhalten bereitzustellen. In Schritt 3 arbeiten Sie mit Visual Studio-Elementvorlagen zusammen, um Ihrem Flask-Projekt Inhalte hinzuzufügen und die Funktionen der Anwendung zu erweitern.

In Schritt 3 des Lernprogramms erfahren Sie, wie Sie:

Verwenden von Visual Studio-Elementvorlagen zum schnellen Hinzufügen neuer Dateien mit Codebausteinen
Bereitstellen von statischen Dateien aus dem Flask-Code
Hinzufügen weiterer Seiten zur Flask-App
Verwenden Sie die Vorlagenvererbung, um einen Header und eine Navigationsleiste auf mehreren Seiten zu erstellen.

Voraussetzungen

Eine Visual Studio-Projektmappe und ein Flask-Anwendungsprojekt, die in Schritt 1: Erstellen eines Flask-Projekts erstellt und in Schritt 2: Umgestalten eines Flask-Projekts aktualisiert wurden.

Durchsuchen von Elementvorlagen in Visual Studio

Beim Entwickeln einer Flask-Anwendung fügen Sie in der Regel viele weitere Python-, HTML-, CSS- und JavaScript-Dateien hinzu. Für jeden Dateityp (und andere Dateien wie web.config, die Sie möglicherweise für die Bereitstellung benötigen), bietet Visual Studio praktische Elementvorlagen, um Ihnen den Einstieg zu erleichtern. Sie können diese Vorlagen verwenden, um schnell neue Dateien verschiedener Typen mit Codebausteinen hinzuzufügen.

Um die verfügbaren Vorlagen anzuzeigen, wechseln Sie zu Projektmappen-Explorer in Visual Studio, und öffnen Sie die Projektstruktur.
Klicken Sie mit der rechten Maustaste auf den Ordner, in dem Sie eine neue Datei erstellen möchten, und wählen Sie >Neues Element hinzufügenaus. Das Dialogfeld Neues Element hinzufügen wird geöffnet:
Um eine Vorlage zu verwenden, wählen Sie die gewünschte Vorlage aus, geben Sie einen Namen für die Datei ein, und wählen Sie Hinzufügenaus.

Visual Studio fügt die Datei zu Ihrem aktuellen Projekt hinzu und markiert die Änderungen für die Quellcodeverwaltung.

Verstehen, wie Visual Studio Elementvorlagen identifiziert

Die Visual Studio-Projektdatei (.pyproj) enthält einen Projekttypbezeichner, der die Datei als Python-Projekt kennzeichnet. Visual Studio verwendet diesen Typbezeichner, um nur die Elementvorlagen zu erkennen und anzuzeigen, die für den Projekttyp geeignet sind. Visual Studio folgt diesem Ansatz, um eine umfangreiche Gruppe von Elementvorlagen für viele Projekttypen bereitzustellen, ohne sie jedes Mal zu sortieren.

Stellen Sie statische Dateien aus Ihrer App bereit

In einer Web-App, die mit Python (mit einem beliebigen Framework) erstellt wurde, werden Ihre Python-Dateien immer auf dem Server des Webhosts ausgeführt und niemals auf den Computer eines Benutzers übertragen. Andere Dateien wie CSS und JavaScript werden nur vom Browser verwendet, sodass der Hostserver sie einfach as-is übermittelt, wenn sie angefordert werden. Diese Dateitypen werden als "statische" Dateien bezeichnet, und Flask kann sie automatisch bereitstellen, ohne code schreiben zu müssen. In HTML-Dateien können Sie beispielsweise auf statische Dateien verweisen, indem Sie einen relativen Pfad im Projekt verwenden. Das erste Verfahren in diesem Abschnitt zeigt, wie Sie eine statische CSS-Datei mit einer vorhandenen Seitenvorlage verwenden.

Wenn Sie eine statische Datei aus Code bereitstellen müssen, z. B. über eine API-Endpunktimplementierung, bietet Flask eine bequeme Methode. Sie können auf Dateien verweisen, indem Sie relative Pfade in einem Ordner namens static im Projektstamm verwenden. Das zweite Verfahren in diesem Abschnitt veranschaulicht, wie Sie mit einer einfachen statischen Datendatei aus Code arbeiten.

In beiden Verfahren können Sie die Dateien nach Ihren Wünschen unter dem statischen Ordner organisieren.

Verwenden einer statischen CSS-Datei in einer Vorlage

Führen Sie die folgenden Schritte aus, um eine statische Datei in einer Vorlage zu verwenden:

Klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf den Ordner HelloFlask in Ihrem Projekt. Wählen Sie Hinzufügen>Neuer Ordner aus, und geben Sie ihm den Namen static.
Klicken Sie mit der rechten Maustaste auf den statischen Ordner, und wählen Sie >Neues Element hinzufügenaus.
Im Dialogfeld "Neues Element hinzufügen" wählen Sie die Vorlage Stylesheet aus, benennen Sie die Datei site.cs, und wählen Sie dann Hinzufügenaus.

Visual Studio fügt dem Projekt die site.css Datei hinzu und öffnet die Datei im Editor. Hier ist ein Beispiel für die aktualisierte Flask-Projektstruktur:
Ersetzen Sie den Inhalt der Datei site.css durch die folgenden Formatvorlagen:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Ersetzen Sie den Inhalt der datei HelloFlask/templates/index.html durch das folgende Markup:
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
Dieser Code ersetzt das <strong> HTML-Element aus Schritt 2 in der Lernprogrammreihe durch ein <span>-Element, das auf die message Formatklasse verweist. Die Verwendung einer Formatklasse auf diese Weise bietet Ihnen mehr Flexibilität beim Formatieren des HTML-Elements.
Speichern Sie Ihre Projektänderungen, indem Sie Datei>Alle speichern auswählen oder die tastenkombination STRG+UMSCHALTTASTE+S verwenden. (Dieser Schritt ist nicht erforderlich, da Visual Studio beim Entwickeln des Projekts Ihre Dateien automatisch speichert.)
Führen Sie das Projekt aus, und beobachten Sie die Ergebnisse. Wenn Sie fertig sind, beenden Sie die App.
(Optional) 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 in Schritt 2 dieser Tutorialreihe.

Bereitstellen einer statischen Datei über den Code

Flask stellt eine Funktion mit dem Namen send_static_file bereit, die Sie aus Code aufrufen können, um auf eine beliebige Datei im statischen Ordners des Projekts zu verweisen. Der folgende Prozess erstellt einen einfachen API-Endpunkt, der eine statische Datendatei zurückgibt:

Erstellen Sie im Ordner static eine statische JSON-Datendatei mit dem Namen data.json. Sie können die Dateivorlage Text als Grundlage für Ihre Datei verwenden.
Ersetzen Sie den Inhalt der JSON-Datei durch den folgenden Code, der einige Beispieldaten bereitstellt, um den Mechanismus zu veranschaulichen:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
Fügen Sie in der Datei HelloFlask/views.py eine Funktion mit der Route /api/data Endpunkt hinzu, die die statische Datendatei mithilfe der send_static_file-Methode zurückgibt:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Speichern Sie Die Projektänderungen, und führen Sie das Projekt erneut aus. Navigieren Sie zum /api/data Routenendpunkt, und bestätigen Sie, dass die App die statische Datei zurückgibt:
Wenn Sie fertig sind, beenden Sie die App.

Organisieren statischer Dateien und Ordner

Sie können andere CSS-, JavaScript- und HTML-Dateien in Ihrem statischen Ordner entsprechend Ihren Projektanforderungen hinzufügen. Eine typische Möglichkeit zum Organisieren statischer Dateien ist das Erstellen von Unterordnern Schriftarten, Skriptsund inhalts (für Stylesheets und andere Dateien).

Verwenden von URL-Routen und Abfrageparametern aus APIs

Sie können URL-Variablen und Abfrageparameter mit APIs behandeln, wenn Sie mit Flask arbeiten. Weitere Informationen finden Sie unter Verwenden von Variablen-URL-Routen und Abfrageparametern in Schritt 1 dieser Lernprogrammreihe.

Hinzufügen einer Seite zur Flask-Anwendung

Das Hinzufügen einer weiteren Seite zur Flask-Anwendung umfasst die folgenden Aufgaben:

Hinzufügen einer Python-Funktion, die die Ansicht definiert
Hinzufügen einer Vorlage für das HTML-Markup der Seite
Aktualisieren der URL-Routen in der views.py Datei des Flask-Projekts

Führen Sie die folgenden Schritte aus, um dem Projekt BasicProject Flask eine Infoseite (/about) hinzuzufügen, und Links zu dieser Seite von der Startseite aus:

Klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf den Ordner "HelloFlask/templates" in Ihrem Projekt, und wählen Sie >Neues Element hinzufügenaus.

Tipp

Wenn der Befehl Neues Element im Menü Hinzufügen nicht angezeigt wird, stellen Sie sicher, dass Sie den Flask-App beenden, damit Visual Studio den Debugmodus nach Bedarf verlässt.
Wählen Sie im Dialogfeld "Neues Element hinzufügen" die Vorlage HTML-Seite aus, benennen Sie die Datei about.html, und wählen Sie dann Hinzufügenaus.

Ersetzen Sie den Inhalt der about.html-Datei durch das folgende HTML-Markup:

<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

In einem nachfolgenden Schritt ersetzen Sie den expliziten Link zur Startseite durch eine Navigationsleiste.

Fügen Sie in der Datei HelloFlask/views.py eine Funktion mit dem Namen about hinzu, die die Vorlage verwendet:

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

Fügen Sie in der Datei HelloFlask/templates/index.html das folgende Markup als erste Anweisung im <body>-Element hinzu:
```
<div><a href="about">About</a></div>
```
Mit diesem Markup wird der /about-Seite für die Flask-App ein Link hinzugefügt. In einem späteren Schritt ersetzen Sie diesen Link durch eine Navigationsleiste.
Speichern Sie Die Projektänderungen, und führen Sie das Projekt erneut aus. Navigieren Sie zur /about Seite, und überprüfen Sie die Navigation zwischen den verschiedenen App-Seiten.
Wenn Sie fertig sind, beenden Sie die App.

Benennen der Seitenfunktion

Flask erzwingt keine Einschränkungen oder Anforderungen für den Namen Ihrer Seitenfunktion. Der @app.route Dekorateur bestimmt die URLs, für die Flask die Funktion aufruft, um eine Antwort zu generieren. Entwickler passen typischerweise den Seitenfunktionsnamen an die Route an, aber dieser Abgleich ist nicht erforderlich.

Verwenden der Vorlagenvererbung für Header und Navigationsleiste

Anstelle expliziter Navigationslinks auf jeder Seite verfügen viele Web-Apps über eine Brandingheader- und Navigationsleiste, die die wichtigsten Seitenlinks, Popupmenüs usw. bereitstellt. Um die Konsistenz innerhalb der App sicherzustellen, sollte die Kopf- und Navigationsleiste auf allen Seiten gleich sein, sie müssen jedoch nicht in jeder Seitenvorlage denselben Code wiederholen. Sie können die gemeinsamen Teile aller Seiten in einer einzelnen Datei definieren.

Das Vorlagensystem von Flask (Jinja standardmäßig) bietet zwei Möglichkeiten, bestimmte Elemente in mehreren Vorlagen wiederzuverwenden:

Includes sind andere Seitenvorlagen, die Sie an einer bestimmten Stelle in der verweisenden Vorlage mit der Syntax {% include <template_path> %} einfügen. Sie können auch eine Variable verwenden, wenn Sie den Pfad dynamisch im Code ändern möchten. Includes werden in der Regel im Textkörper einer Seite verwendet, um die freigegebene Vorlage an einer bestimmten Stelle auf der Seite zu importieren.
Vererbung verwendet die Syntax {% extends <template_path> %} am Anfang einer Seitenvorlage, um eine freigegebene Basisvorlage anzugeben, auf der die verweisende Vorlage aufbaut. Die Vererbung wird häufig verwendet, um ein geteiltes Layout, eine Navigationsleiste und andere Strukturen für die Seiten einer App zu definieren. Bei diesem Ansatz müssen die verweisenden Vorlagen nur bestimmte Bereiche der Basisvorlage, die sogenannten Blöcke, hinzufügen oder ändern.

Bei beiden Ansätzen ist der <template_path> Wert relativ zu den Vorlagen im Ordner der App (../ oder ./ sind ebenfalls zulässig).

Eine Basisvorlage ordnet Blöcke mithilfe der tags {% block <block_name> %} und {% endblock %} ab. Wenn eine verweisende Vorlage Tags mit demselben Blocknamen verwendet, überschreibt der Blockinhalt in der referenzierenden Vorlage den übereinstimmenden Block in der Basisvorlage.

Die folgenden Schritte veranschaulichen die Vorlagenvererbung:

Klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf den HelloFlask/templates Ordner, und erstellen Sie eine neue Datei aus der HTML-Seite Vorlage mit dem Namen layout.html.

Ersetzen Sie den Inhalt der layout.html-Datei durch das folgende HTML-Markup:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

Diese Vorlage enthält einen Block namens content, der alle Inhalte identifiziert, die die verweisenden Seiten ersetzen müssen.

Fügen Sie in der Datei HelloFlask/static/site.css die folgenden Stile am Ende der Datei hinzu:

.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;
}

Diese Stildefinitionen generieren ein interessantes Ergebnis für diese Übung. In dieser exemplarischen Vorgehensweise wird kein responsives Design veranschaulicht.

Ersetzen Sie den Inhalt der datei HelloFlask/templates/index.html durch das folgende Markup:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Die index-Vorlage verweist jetzt auf die Basisvorlage und überschreibt den content-Block. Sie können sehen, dass diese Vorlage mithilfe der Vererbung vereinfacht wird.
Ersetzen Sie den Inhalt der HelloFlask/templates/about.html-Datei durch das folgende Markup, sodass die about Vorlage auch auf die Basisvorlage verweist und den content-Block außer Kraft setzt:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Führen Sie die App erneut aus, und beobachten Sie die Ergebnisse. Verwenden Sie die Navigationsleistenlinks, um zwischen App-Seiten zu wechseln.
Wenn Sie fertig sind, beenden Sie die App, und speichern Sie die Projektänderungen.
Da Sie wesentliche Änderungen an der App vorgenommen haben, ist es ein guter Zeitpunkt, Ihre Änderungen in einem Git-Repository zu speichern. Weitere Informationen finden Sie unter Committen von Änderungen an die Quellcodeverwaltung in Schritt 2 dieser Tutorialreihe.

Lernprogrammüberprüfung

Herzlichen Glückwunsch zum Abschluss dieses Lernprogramms zu Flask in Visual Studio.

In diesem Lernprogramm haben Sie folgendes gelernt:

Erstellen eines Flask-Projekts mit mehreren Seiten
Verwenden von Vorlagen zum Erstellen verschiedener Seitenansichten
Bereitstellen statischer Dateien, Hinzufügen von Seiten und Verwenden der Vorlagenvererbung

Jinja Template Designer Documentation (jinja.pocoo.org)
url_for in der Dokumentation zu Flask-Anwendungsobjekten (flask.pocoo.org)
Lernprogramm-Quellcode auf GitHub (Microsoft/python-sample-vs-learning-flask)

Freigeben über

Lernprogramm: Bereitstellen statischer Dateien und Verwenden der Vorlagenvererbung mit Flask in Visual Studio

Voraussetzungen

Durchsuchen von Elementvorlagen in Visual Studio

Verstehen, wie Visual Studio Elementvorlagen identifiziert

Stellen Sie statische Dateien aus Ihrer App bereit

Verwenden einer statischen CSS-Datei in einer Vorlage

Bereitstellen einer statischen Datei über den Code

Organisieren statischer Dateien und Ordner

Verwenden von URL-Routen und Abfrageparametern aus APIs

Hinzufügen einer Seite zur Flask-Anwendung

Benennen der Seitenfunktion

Verwenden der Vorlagenvererbung für Header und Navigationsleiste

Lernprogrammüberprüfung

Feedback

Zusätzliche Ressourcen

Freigeben über

Lernprogramm: Bereitstellen statischer Dateien und Verwenden der Vorlagenvererbung mit Flask in Visual Studio

Voraussetzungen

Durchsuchen von Elementvorlagen in Visual Studio

Verstehen, wie Visual Studio Elementvorlagen identifiziert

Stellen Sie statische Dateien aus Ihrer App bereit

Verwenden einer statischen CSS-Datei in einer Vorlage

Bereitstellen einer statischen Datei über den Code

Organisieren statischer Dateien und Ordner

Verwenden von URL-Routen und Abfrageparametern aus APIs

Hinzufügen einer Seite zur Flask-Anwendung

Benennen der Seitenfunktion

Verwenden der Vorlagenvererbung für Header und Navigationsleiste

Lernprogrammüberprüfung

Verwandte Inhalte

Feedback

Zusätzliche Ressourcen