Zelfstudie: Statische bestanden gebruiken en de overname van sjablonen gebruiken met Flask in Visual Studio

Artikel
01/26/2025

Dit artikel bevat stap 3 in de reeks zelfstudies Werken met het Flask-webframework in Visual Studio.

In de vorige stappen in deze reeks zelfstudies maakt u een minimale Flask-app met één pagina met zelfstandige HTML. Moderne web-apps bestaan doorgaans uit veel pagina's en gebruiken gedeelde resources zoals CSS- en JavaScript-bestanden om consistente stijl en gedrag te bieden. In stap 3 werkt u met Visual Studio-itemsjablonen om inhoud toe te voegen aan uw Flask-project en de mogelijkheden van de toepassing uit te breiden.

In stap 3 van de zelfstudie leert u het volgende:

Visual Studio-itemsjablonen gebruiken om snel nieuwe bestanden met standaardcode toe te voegen
Statische bestanden serveren vanuit de Flask-code
Meer pagina's toevoegen aan de Flask-app
Overname van sjablonen gebruiken om een koptekst en navigatie tussen pagina's te maken

Voorwaarden

Een Visual Studio-oplossing en Een Flask-toepassingsproject dat is gemaakt in stap 1: Flask-project maken en bijgewerkt in stap 2: Flask-project herstructureren.

Itemsjablonen verkennen in Visual Studio

Wanneer u een Flask-toepassing ontwikkelt, voegt u doorgaans veel meer Python-, HTML-, CSS- en JavaScript-bestanden toe. Voor elk bestandstype (en andere bestanden zoals web.config die u mogelijk nodig hebt voor implementatie), biedt Visual Studio handige itemsjablonen om u op weg te helpen. U kunt deze sjablonen gebruiken om snel nieuwe bestanden van verschillende typen met standaardcode toe te voegen.

Als u de beschikbare sjablonen wilt weergeven, gaat u naar Solution Explorer- in Visual Studio en opent u de projectstructuur.
Klik met de rechtermuisknop op de map waarin u een nieuw bestand wilt maken en selecteer Toevoegen>Nieuw item. Het dialoogvenster Nieuw item toevoegen wordt geopend:
Als u een sjabloon wilt gebruiken, selecteert u de gewenste sjabloon, voert u een naam voor het bestand in en selecteert u Toevoegen.

Visual Studio voegt het bestand toe aan uw huidige project en markeert de wijzigingen voor broncodebeheer.

Begrijpen hoe Visual Studio itemsjablonen identificeert

Het Visual Studio-projectbestand (.pyproj) bevat een projecttype-id die het bestand markeert als een Python-project. Visual Studio gebruikt deze type-id om alleen de itemsjablonen te herkennen en weer te geven die geschikt zijn voor het projecttype. Visual Studio volgt deze benadering om een uitgebreide set itemsjablonen voor veel projecttypen op te geven zonder dat u er elke keer doorheen hoeft te sorteren.

Statische bestanden uit uw app leveren

In een web-app die is gebouwd met Python (met behulp van een framework), worden uw Python-bestanden altijd uitgevoerd op de server van de webhost en worden ze nooit verzonden naar de computer van een gebruiker. Andere bestanden, zoals CSS en JavaScript, worden alleen door de browser gebruikt, dus de hostserver levert ze gewoon as-is wanneer ze worden aangevraagd. Deze typen bestanden worden 'statische' bestanden genoemd en Flask kan ze automatisch leveren zonder dat u code hoeft te schrijven. In HTML-bestanden kunt u bijvoorbeeld verwijzen naar statische bestanden met behulp van een relatief pad in het project. De eerste procedure in deze sectie laat zien hoe u een statisch CSS-bestand gebruikt met een bestaande paginasjabloon.

Wanneer u een statisch bestand wilt leveren vanuit code, zoals via een API-eindpuntimplementatie, biedt Flask een handige methode. U kunt verwijzen naar bestanden met behulp van relatieve paden in een map met de naam statische in de hoofdmap van het project. De tweede procedure in deze sectie laat zien hoe u kunt werken met een eenvoudig statisch gegevensbestand uit code.

In beide procedures kunt u de bestanden onder de statische map ordenen op basis van uw voorkeur.

Statisch CSS-bestand gebruiken in een sjabloon

Volg deze stappen om een statisch bestand in een sjabloon te gebruiken:

Klik in Solution Explorermet de rechtermuisknop op de map HelloFlask in uw project, selecteer Add>New folderen noem de map statische.
Klik met de rechtermuisknop op de map statische en selecteer >Nieuw item toevoegen.
Selecteer in het dialoogvenster Nieuw item toevoegen de sjabloon opmaakmodel, geef het bestand de naam site.csen selecteer vervolgens Toevoegen.

Visual Studio voegt het site.css-bestand toe aan het project en opent het bestand in de editor. Hier volgt een voorbeeld van de bijgewerkte Flask-projectstructuur:
Vervang de inhoud van het bestand site.css door de volgende stijlen:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Vervang de inhoud van het bestand HelloFlask/templates/index.html door de volgende markeringen:
```
<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>
```
Deze code vervangt het <strong> HTML-element uit stap 2 in de reeks zelfstudies door een <span> element dat verwijst naar de message stijlklasse. Door een stijlklasse op deze manier te gebruiken, hebt u meer flexibiliteit bij het stylen van het HTML-element.
Sla de projectwijzigingen op door Bestand>Alle opslaan te selecteren of gebruik de sneltoets Ctrl+Shift+S. (Deze stap is niet nodig omdat tijdens het ontwikkelen van uw project uw bestanden automatisch worden opgeslagen in Visual Studio.)
Voer het project uit en bekijk de resultaten. Wanneer u klaar bent, stopt u de app.
(Optioneel) U kunt uw wijzigingen doorvoeren in broncodebeheer en uw externe opslagplaats bijwerken. Zie Wijzigingen doorvoeren in broncodebeheer in stap 2 van deze reeks zelfstudies voor meer informatie.

Statisch bestand uit code leveren

Flask biedt een functie met de naam send_static_file die u vanuit code kunt aanroepen om te verwijzen naar elk bestand in de statische map van het project. Met het volgende proces maakt u een eenvoudig API-eindpunt dat een statisch gegevensbestand retourneert:

Maak in de map statische een statisch JSON-gegevensbestand met de naam data.json. U kunt de Text-bestandssjabloon als basis voor het bestand gebruiken.
Vervang de inhoud van het JSON-bestand door de volgende code die enkele voorbeeldgegevens bevat om het mechanisme te demonstreren:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
Voeg in het bestand HelloFlask/views.py een functie toe met het route-/api/data-eindpunt dat het statische gegevensbestand retourneert met behulp van de methode send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Sla uw projectwijzigingen op en voer het project opnieuw uit. Blader naar het /api/data route-eindpunt en controleer of de app het statische bestand retourneert:
Wanneer u klaar bent, stopt u de app.

Statische bestanden en mappen organiseren

U kunt andere CSS-, JavaScript- en HTML-bestanden toevoegen in uw statische map op basis van uw projectbehoeften. Een typische manier om statische bestanden te organiseren, is door submappen met de naam lettertypente maken, scriptsen inhoud (voor opmaakmodellen en andere bestanden).

URL-routes en queryparameters van API's gebruiken

U kunt URL-variabelen en queryparameters verwerken met API's wanneer u met Flask werkt. Voor meer informatie, zie Variabelen-URL-routes en queryparameters gebruiken in stap 1 van deze tutorialreeks.

Pagina toevoegen aan de Flask-toepassing

Het toevoegen van een andere pagina aan de Flask-toepassing omvat de volgende taken:

Een Python-functie toevoegen waarmee de weergave wordt gedefinieerd
Een sjabloon toevoegen voor de HTML-opmaak van de pagina
De URL-routes bijwerken in het views.py-bestand van het Flask-project

Volg deze stappen om een infopagina (/about) toe te voegen aan het BasicProject Flask-project en koppelingen naar die pagina vanaf de startpagina:

Klik in Solution Explorermet de rechtermuisknop op de map HelloFlask/templates in uw project en selecteer Add>New Item.

Tip

Als u de opdracht Nieuw item niet ziet in het menu Toevoegen, moet u ervoor zorgen dat u de Flask-app stopt, zodat Visual Studio de foutopsporingsmodus indien nodig afsluit.
Selecteer in het dialoogvenster Nieuw item toevoegen de sjabloon HTML-pagina, geef het bestand de naam about.htmlen selecteer vervolgens Toevoegen.

Vervang de inhoud van het about.html bestand door de volgende HTML-opmaak:

<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 een volgende stap vervangt u de expliciete koppeling naar de startpagina door een navigatiebalk.

Voeg in het bestand HelloFlask/views.py een functie toe met de naam about die gebruikmaakt van de sjabloon:

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

Voeg in het bestand HelloFlask/templates/index.html de volgende code toe als de eerste verklaring in het element <body>.
```
<div><a href="about">About</a></div>
```
Met deze markering wordt een koppeling toegevoegd aan de /about-pagina voor de Flask-app. In een latere stap vervangt u deze koppeling door een navigatiebalk.
Sla uw projectwijzigingen op en voer het project opnieuw uit. Blader naar de /about pagina en controleer de navigatie tussen de verschillende app-pagina's.
Wanneer u klaar bent, stopt u de app.

Geef een naam aan uw paginafunctie

Flask legt geen beperkingen of vereisten op voor de naam van uw paginafunctie. De @app.route decorator bepaalt de URL's waarvoor Flask de functie aanroept om een antwoord te genereren. Ontwikkelaars stemmen doorgaans de naam van de paginafunctie af op de route, maar deze manier van afstemmen is niet vereist.

Sjabloonovername gebruiken voor koptekst en navigatie

In plaats van expliciete navigatiekoppelingen op elke pagina hebben veel web-apps een huisstijlkoptekst en navigatiebalk die de belangrijkste paginakoppelingen, pop-upmenu's enzovoort biedt. Om consistentie in de app te garanderen, moeten de koptekst en navigatiebalk op alle pagina's hetzelfde zijn, maar u hoeft niet dezelfde code in elke paginasjabloon te herhalen. U kunt de algemene onderdelen van al uw pagina's in één bestand definiëren.

Het sjabloonsysteem van Flask (Jinja standaard) biedt twee manieren om specifieke elementen in meerdere sjablonen opnieuw te gebruiken:

Bevat zijn andere paginasjablonen die u op een specifieke plaats in de verwijzende sjabloon invoegt met de syntaxis {% include <template_path> %}. U kunt ook een variabele gebruiken als u het pad dynamisch in code wilt wijzigen. Insluitingen worden meestal gebruikt in de hoofdtekst van een pagina om de gedeelde sjabloon op een specifieke locatie op de pagina op te halen.
overname maakt gebruik van de {% extends <template_path> %} syntaxis aan het begin van een paginasjabloon om een gedeelde basissjabloon op te geven waarop de verwijzende sjabloon is gebaseerd. Overerving wordt vaak gebruikt voor het definiëren van een gedeelde indeling, navigatiebalk en andere structuren voor de pagina's van een app. Deze aanpak vereist dat sjablonen worden verwezen om alleen specifieke gebieden van de basissjabloon, de zogenaamde blokken, toe te voegen of te wijzigen.

Voor beide benaderingen is de waarde van <template_path> relatief ten opzichte van de sjablonenmap van de app (ook toegestaan zijn../ of ./).

Een basissjabloon delineeert blokken met behulp van de tags {% block <block_name> %} en {% endblock %}. Als een verwijzende sjabloon tags met dezelfde bloknaam gebruikt, overschrijft de blokinhoud in de verwijzende sjabloon het overeenkomende blok in de basissjabloon.

In de volgende stappen wordt de overname van sjablonen gedemonstreert:

Klik in Solution Explorermet de rechtermuisknop op de map HelloFlask/templates en maak een nieuw bestand op basis van de HTML-pagina sjabloon met de naam layout.html.

Vervang de inhoud van het layout.html bestand door de volgende HTML-opmaak:

<!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>

Deze sjabloon bevat een blok met de naam content, waarmee alle inhoud wordt geïdentificeerd die de verwijzende pagina's moeten vervangen.

Voeg in het bestand HelloFlask/static/site.css de volgende stijlen toe aan het einde van het bestand:

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

Deze stijldefinities genereren een interessant resultaat voor deze oefening. Deze doorloop demonstreert geen responsief ontwerp.

Vervang de inhoud van het bestand HelloFlask/templates/index.html door de volgende markeringen:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
De index-sjabloon verwijst nu naar de basissjabloon en overschrijft het content blok. U kunt zien dat deze sjabloon is vereenvoudigd door overname te gebruiken.
Vervang de inhoud van het bestand HelloFlask/templates/about.html door de volgende markeringen. De about sjabloon verwijst dus ook naar de basissjabloon en overschrijft het content blok:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Voer de app opnieuw uit en bekijk de resultaten. Gebruik de navigatiebalkkoppelingen om te schakelen tussen app-pagina's.
Wanneer u klaar bent, stopt u de app en slaat u de wijzigingen in uw project op.
Omdat u aanzienlijke wijzigingen in de app hebt aangebracht, is het een goed moment om uw wijzigingen op te slaan in een Git-opslagplaats. Zie Wijzigingen doorvoeren in broncodebeheer in stap 2 van deze reeks zelfstudies voor meer informatie.

Zelfstudiebeoordeling

Gefeliciteerd met het voltooien van deze zelfstudie over Flask in Visual Studio.

In deze zelfstudie hebt u het volgende geleerd:

Een Flask-project maken met meerdere pagina's
Sjablonen gebruiken om verschillende paginaweergaven te maken
Statische bestanden gebruiken, pagina's toevoegen en sjabloonovername gebruiken

documentatie voor Jinja Template Designer (jinja.pocoo.org)
url_for in de documentatie van het Flask-toepassingsobject (flask.pocoo.org)
De broncode van de tutorial op GitHub (Microsoft/python-sample-vs-learning-flask)

Delen via

Zelfstudie: Statische bestanden gebruiken en de overname van sjablonen gebruiken met Flask in Visual Studio

Voorwaarden

Itemsjablonen verkennen in Visual Studio

Begrijpen hoe Visual Studio itemsjablonen identificeert

Statische bestanden uit uw app leveren

Statisch CSS-bestand gebruiken in een sjabloon

Statisch bestand uit code leveren

Statische bestanden en mappen organiseren

URL-routes en queryparameters van API's gebruiken

Pagina toevoegen aan de Flask-toepassing

Geef een naam aan uw paginafunctie

Sjabloonovername gebruiken voor koptekst en navigatie

Zelfstudiebeoordeling

Feedback

Aanvullende resources

Delen via

Zelfstudie: Statische bestanden gebruiken en de overname van sjablonen gebruiken met Flask in Visual Studio

Voorwaarden

Itemsjablonen verkennen in Visual Studio

Begrijpen hoe Visual Studio itemsjablonen identificeert

Statische bestanden uit uw app leveren

Statisch CSS-bestand gebruiken in een sjabloon

Statisch bestand uit code leveren

Statische bestanden en mappen organiseren

URL-routes en queryparameters van API's gebruiken

Pagina toevoegen aan de Flask-toepassing

Geef een naam aan uw paginafunctie

Sjabloonovername gebruiken voor koptekst en navigatie

Zelfstudiebeoordeling

Verwante inhoud

Feedback

Aanvullende resources