Tutoriel : Servir des fichiers statiques et utiliser l’héritage de modèle avec Flask dans Visual Studio

Article
02/03/2025

Cet article présente l’étape 3 de la série de didacticiels Utiliser l’infrastructure web Flask dans Visual Studio.

Les étapes précédentes de cette série de tutoriels créent une application Flask minimale avec une seule page de code HTML autonome. Les applications web modernes sont généralement composées de nombreuses pages et utilisent des ressources partagées telles que des fichiers CSS et JavaScript pour fournir un style et un comportement cohérents. À l’étape 3, vous utilisez des modèles d’éléments Visual Studio pour ajouter du contenu à votre projet Flask et développer les fonctionnalités de l’application.

À l’étape 3 du didacticiel, vous allez apprendre à :

Utiliser des modèles d’élément Visual Studio pour ajouter rapidement de nouveaux fichiers avec du code réutilisable
Servir des fichiers statiques à partir du code Flask
Ajouter d’autres pages à l’application Flask
Utiliser l’héritage de modèle pour créer un en-tête et une navigation entre les pages

Conditions préalables

Une solution Visual Studio et un projet d’application Flask créés à l’étape 1 : créer un projet Flask et mis à jour à l’étape 2 : Refactoriser le projet Flask.

Explorer les modèles d’élément dans Visual Studio

Lorsque vous développez une application Flask, vous ajoutez généralement de nombreux fichiers Python, HTML, CSS et JavaScript. Pour chaque type de fichier (et d’autres fichiers comme web.config que vous devrez peut-être déployer), Visual Studio fournit des modèles d’éléments pratiques pour vous aider à démarrer. Vous pouvez utiliser ces modèles pour ajouter rapidement de nouveaux fichiers de différents types avec du code réutilisable.

Pour afficher les modèles disponibles, accédez à Explorateur de solutions dans Visual Studio et ouvrez votre structure de projet.
Cliquez avec le bouton droit sur le dossier dans lequel vous souhaitez créer un fichier, puis sélectionnez Ajouter>nouvel élément. La boîte de dialogue Ajouter un nouvel élément s’ouvre :
Pour utiliser un modèle, sélectionnez le modèle souhaité, entrez un nom pour le fichier, puis sélectionnez Ajouter.

Visual Studio ajoute le fichier à votre projet actuel et marque les modifications pour le contrôle de code source.

Comprendre comment Visual Studio identifie les modèles d’élément

Le fichier projet Visual Studio (.pyproj) contient un identificateur de type de projet qui marque le fichier en tant que projet Python. Visual Studio utilise cet identificateur de type pour reconnaître et afficher uniquement les modèles d’élément qui conviennent au type de projet. Visual Studio suit cette approche pour fournir un ensemble complet de modèles d’éléments pour de nombreux types de projet sans vous demander de les trier à chaque fois.

Servir des fichiers statiques à partir de votre application

Dans une application web créée avec Python (à l’aide de n’importe quelle infrastructure), vos fichiers Python s’exécutent toujours sur le serveur de l’hôte web et ne sont jamais transmis à l’ordinateur d’un utilisateur. D’autres fichiers tels que CSS et JavaScript sont utilisés uniquement par le navigateur. Par conséquent, le serveur hôte les remet simplement as-is lorsqu’ils sont demandés. Ces types de fichiers sont appelés fichiers « statiques », et Flask peut les remettre automatiquement sans que vous ayez besoin d’écrire du code. Dans les fichiers HTML, par exemple, vous pouvez faire référence à des fichiers statiques à l’aide d’un chemin relatif dans le projet. La première procédure de cette section montre comment utiliser un fichier CSS statique avec un modèle de page existant.

Lorsque vous devez fournir un fichier statique à partir du code, par exemple via une implémentation de point de terminaison d’API, Flask fournit une méthode pratique. Vous pouvez faire référence à des fichiers à l’aide de chemins d’accès relatifs dans un dossier nommé statique dans la racine du projet. La deuxième procédure de cette section montre comment utiliser un fichier de données statique simple à partir du code.

Dans les deux procédures, vous pouvez organiser les fichiers sous le dossier statique en fonction de vos préférences.

Utiliser un fichier CSS statique dans un modèle

Procédez comme suit pour utiliser un fichier statique dans un modèle :

Dans explorateur de solutions, cliquez avec le bouton droit sur le dossier HelloFlask dans votre projet, sélectionnez Ajouter>nouveau dossier, puis nommez le dossier statique.
Cliquez avec le bouton droit sur le dossier statique, puis sélectionnez Ajouter>nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez le modèle de feuille de style , nommez le fichier site.cs, puis sélectionnez Ajouter.

Visual Studio ajoute le fichier site.css au projet et ouvre le fichier dans l’éditeur. Voici un exemple de la structure de projet Flask mise à jour :
Remplacez le contenu du fichier site.css par les styles suivants :
```
.message {
    font-weight: 600;
    color: blue;
}
```
Remplacez le contenu du fichier HelloFlask/templates/index.html par le balisage suivant :
```
<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>
```
Ce code remplace l’élément HTML <strong> de l’étape 2 de la série de tutoriels par un élément <span> qui fait référence à la classe de style message. L’utilisation d’une classe de style de cette façon vous offre davantage de flexibilité dans le style de l’élément HTML.
Enregistrez les modifications de votre projet en sélectionnant Fichier>Enregistrer tout ou en utilisant le raccourci clavier Ctrl+Shift+S. (Cette étape n’est pas nécessaire, car lorsque vous développez votre projet, Visual Studio enregistre automatiquement vos fichiers.)
Exécutez le projet et observez les résultats. Lorsque vous avez terminé, arrêtez l’application.
(Facultatif) Vous pouvez valider vos modifications dans le contrôle de code source et mettre à jour votre référentiel distant. Pour plus d’informations, consultez Valider les modifications apportées au contrôle de code source à l’étape 2 de cette série de tutoriels.

Servir un fichier statique à partir du code

Flask fournit une fonction nommée send_static_file que vous pouvez appeler à partir du code pour faire référence à n’importe quel fichier dans le dossier statique du projet. Le processus suivant crée un point de terminaison d’API simple qui retourne un fichier de données statique :

Dans le dossier statique, créez un fichier de données JSON statique nommé data.json. Vous pouvez utiliser le modèle de fichier texte comme base pour le fichier.
Remplacez le contenu du fichier JSON par le code suivant qui fournit des exemples de données pour illustrer le mécanisme :
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
Dans le fichier HelloFlask/views.py, ajoutez une fonction avec l'endpoint de route /api/data qui retourne le fichier de données statique en utilisant la méthode send_static_file :
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Enregistrez les modifications de votre projet et réexécutez le projet. Accédez au point de terminaison de routage /api/data et vérifiez que l’application retourne le fichier statique :
Lorsque vous avez terminé, arrêtez l’application.

Organiser les fichiers et dossiers statiques

Vous pouvez ajouter d’autres fichiers CSS, JavaScript et HTML dans votre dossier de statique en fonction des besoins de votre projet. Un moyen classique d’organiser les fichiers statiques consiste à créer des sous-dossiers nommés polices, scriptset contenu (pour les feuilles de style et tous les autres fichiers).

Utiliser des itinéraires d’URL et des paramètres de requête à partir d’API

Vous pouvez gérer les variables d’URL et les paramètres de requête avec des API lorsque vous travaillez avec Flask. Pour plus d’informations, consultez Utiliser des itinéraires d’URL variables et des paramètres de requête à l’étape 1 de cette série de tutoriels.

Ajouter une page à l’application Flask

L’ajout d’une autre page à l’application Flask implique les tâches suivantes :

Ajouter une fonction Python qui définit la vue
Ajouter un modèle pour le balisage HTML de la page
Mettre à jour les itinéraires d’URL dans le fichier views.py du projet Flask

Procédez comme suit pour ajouter une page About (/about) au projet BasicProject Flask et des liens vers cette page à partir de la page d’accueil :

Dans explorateur de solutions, cliquez avec le bouton droit sur le dossier HelloFlask/templates dans votre projet, puis sélectionnez Ajouter>nouvel élément.

Conseil

Si vous ne voyez pas la commande Nouvel élément dans le menu Ajouter , veillez à arrêter votre application Flask afin que Visual Studio quitte le mode débogage, si nécessaire.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez le modèle page HTML, nommez le fichier about.html, puis sélectionnez Ajouter.

Remplacez le contenu du fichier about.html par le balisage HTML suivant :

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

Dans une étape suivante, vous remplacez le lien explicite vers la page d’accueil par une barre de navigation.

Dans le fichier HelloFlask/views.py, ajoutez une fonction nommée about qui utilise le modèle :

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

Dans le fichier HelloFlask/templates/index.html, ajoutez le balisage suivant comme première instruction dans l’élément <body> :
```
<div><a href="about">About</a></div>
```
Ce balisage ajoute un lien à la page /about de l’application Flask. Dans une étape ultérieure, vous remplacez ce lien par une barre de navigation.
Enregistrez les modifications de votre projet et réexécutez le projet. Accédez à la page /about et vérifiez la navigation entre les différentes pages d’application.
Lorsque vous avez terminé, arrêtez l’application.

Nommer votre fonction de page

Flask n’impose aucune restriction ni aucune exigence sur le nom de votre fonction de page. Le décorateur @app.route détermine les URL pour lesquelles Flask appelle la fonction pour générer une réponse. Les développeurs font généralement correspondre le nom de la fonction de la page à l’itinéraire, mais ce type de correspondance n’est pas obligatoire.

Utiliser l’héritage du modèle pour l’en-tête et la navigation

Au lieu de liens de navigation explicites sur chaque page, de nombreuses applications web ont un en-tête de personnalisation et une barre de navigation qui fournit les liens de page les plus importants, les menus contextuels, et ainsi de suite. Pour garantir la cohérence au sein de l’application, la barre d’en-tête et de navigation doit être la même sur toutes les pages, mais vous n’avez pas besoin de répéter le même code dans chaque modèle de page. Vous pouvez définir les parties communes de toutes vos pages dans un seul fichier.

Le système de création de modèles de Flask (Jinja par défaut) offre deux façons de réutiliser des éléments spécifiques dans plusieurs modèles :

Les fichiers inclus représentent d’autres modèles de pages que vous insérez à un endroit spécifique dans le modèle de référence avec la syntaxe {% include <template_path> %}. Vous pouvez également utiliser une variable si vous souhaitez modifier le chemin dynamiquement dans le code. Les inclusions sont généralement utilisées dans le corps d’une page pour intégrer le modèle partagé à un emplacement spécifique de la page.
L’héritage utilise la syntaxe {% extends <template_path> %} au début d’un modèle de page pour spécifier un modèle de base partagé sur lequel le modèle de référence s’appuie. L’héritage est couramment utilisé pour définir une disposition partagée, une barre de navigation et d’autres structures pour les pages d’une application. Cette approche exige que les modèles de référence ajoutent ou modifient uniquement des zones spécifiques du modèle de base appelé blocs.

Pour les deux approches, la valeur <template_path> est relative aux modèles de l’application dossier (.. / ou ./ sont également autorisés).

Un modèle de base délimite les blocs à l’aide des balises {% block <block_name> %} et {% endblock %}. Si un modèle de référence utilise des balises portant le même nom de bloc, le contenu du bloc dans le modèle de référence remplace le bloc correspondant dans le modèle de base.

Les étapes suivantes illustrent l’héritage du modèle :

Dans Explorateur de solutions, cliquez avec le bouton droit sur le dossier HelloFlask/templates, puis créez un fichier à partir du modèle page HTML avec le nom layout.html.

Remplacez le contenu du fichier layout.html par le balisage HTML suivant :

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

Ce modèle contient un bloc nommé content, qui identifie tout le contenu que les pages de référence doivent remplacer.

Dans le fichier HelloFlask/static/site.css, ajoutez les styles suivants à la fin du fichier :

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

Ces définitions de style génèrent un résultat intéressant pour cet exercice. Cette procédure pas à pas n’illustre pas la conception réactive.

Remplacez le contenu du fichier HelloFlask/templates/index.html par le balisage suivant :
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Le modèle index fait désormais référence au modèle de base et remplace le bloc content. Vous pouvez voir qu’à l’aide de l’héritage, ce modèle est simplifié.
Remplacez le contenu du fichier HelloFlask/templates/about.html par le balisage suivant. Par conséquent, le modèle about fait également référence au modèle de base et remplace le bloc content :
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Réexécutez l’application et observez les résultats. Utilisez les liens de la barre de navigation pour basculer entre les pages d’application.
Lorsque vous avez terminé, arrêtez l’application et enregistrez les modifications apportées à votre projet.
Étant donné que vous avez apporté des modifications substantielles à l’application, il est judicieux d’enregistrer vos modifications dans un dépôt Git. Pour plus d’informations, consultez Valider les modifications apportées au contrôle de code source à l’étape 2 de cette série de tutoriels.

Révision du tutoriel

Félicitations pour suivre ce tutoriel sur Flask dans Visual Studio.

Dans ce tutoriel, vous avez appris à :

Créer un projet Flask avec plusieurs pages
Utiliser des modèles pour créer différentes vues de page
Servir des fichiers statiques, ajouter des pages et utiliser l’héritage du modèle

Documentation Jinja Template Designer (jinja.pocoo.org)
url_for dans la documentation de l'objet d'application Flask (sur flask.pocoo.org)
code source du didacticiel sur GitHub (Microsoft/python-sample-vs-learning-flask)

Partage via

Tutoriel : Servir des fichiers statiques et utiliser l’héritage de modèle avec Flask dans Visual Studio

Conditions préalables

Explorer les modèles d’élément dans Visual Studio

Comprendre comment Visual Studio identifie les modèles d’élément

Servir des fichiers statiques à partir de votre application

Utiliser un fichier CSS statique dans un modèle

Servir un fichier statique à partir du code

Organiser les fichiers et dossiers statiques

Utiliser des itinéraires d’URL et des paramètres de requête à partir d’API

Ajouter une page à l’application Flask

Nommer votre fonction de page

Utiliser l’héritage du modèle pour l’en-tête et la navigation

Révision du tutoriel

Commentaires

Ressources supplémentaires

Partage via

Tutoriel : Servir des fichiers statiques et utiliser l’héritage de modèle avec Flask dans Visual Studio

Conditions préalables

Explorer les modèles d’élément dans Visual Studio

Comprendre comment Visual Studio identifie les modèles d’élément

Servir des fichiers statiques à partir de votre application

Utiliser un fichier CSS statique dans un modèle

Servir un fichier statique à partir du code

Organiser les fichiers et dossiers statiques

Utiliser des itinéraires d’URL et des paramètres de requête à partir d’API

Ajouter une page à l’application Flask

Nommer votre fonction de page

Utiliser l’héritage du modèle pour l’en-tête et la navigation

Révision du tutoriel

Contenu connexe

Commentaires

Ressources supplémentaires