Tutoriel : Créer une application Flask avec des vues et des modèles de page dans Visual Studio

Article
02/03/2025

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

Visual Studio vous permet de créer des applications Flask à partir de modèles de projet qui fournissent un point de départ plus complet pour vos projets. étape 1 du didacticiel explique comment créer une application Flask avec une page, où tout le code se trouve dans un seul fichier. À l’étape 2, vous refactorisez le code et créez une structure pour les modèles de page pour permettre un développement plus approfondi. En particulier, vous souhaitez séparer le code des vues d’application d’autres aspects tels que le code de démarrage.

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

Refactoriser le code d’application pour séparer les vues du code de démarrage
Afficher un affichage à l’aide d’un modèle de page

Conditions préalables

Une solution Visual Studio et un projet d’application Flask créés à l’étape 1 : créer une solution Visual Studio et un projet Flask.

Refactoriser le projet Flask pour un développement plus approfondi

Le modèle projet web vide Flask vous permet de créer un projet avec un seul fichier app.py qui contient du code de démarrage ainsi qu'une vue unique. Pour permettre un développement ultérieur d’une application avec plusieurs vues et modèles, vous devez séparer ces fonctions.

Procédez comme suit pour ajuster votre projet Flask afin de permettre un développement plus approfondi :

Dans explorateur de solutions, cliquez avec le bouton droit sur votre dossier de projet Flask (BasicProject), puis sélectionnez Ajouter>nouveau dossier.
Nommez le nouveau dossier d’application HelloFlask.
Cliquez avec le bouton droit sur le dossier HelloFlask, puis sélectionnez Ajouter>nouvel élément pour créer un fichier.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez le modèle de fichier Fichier Python vide.
1. Nommez le fichier __init__.py. Le nom du fichier doit inclure deux caractères de soulignement de début et de fin (_) autour du mot init.
2. Sélectionnez Ajouter.
Ajoutez le code suivant au nouveau fichier, qui crée l’instance Flask et charge les vues d’application :
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
Dans le dossier HelloFlask, créez un autre fichier Python nommé views.py.

Important

Veillez à spécifier le nom du fichier en tant que views.py. Le nom vues est important en raison de l’instruction import HelloFlask.views dans le fichier __init__.py. Si le nom vues n’est pas identique dans les deux instances, Visual Studio affiche une erreur lors de l’exécution.
Ajoutez le code suivant au fichier views.py. Ce code renomme la fonction et définit l’itinéraire de retour vers le point de terminaison /home :
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
Ce code contient également le code de rendu de page à partir du fichier app.py et importe l’objet app déclaré dans le fichier __init__.py.
Dans le dossier HelloFlask, créez un sous-dossier nommé templates. Le dossier est vide pour l’instant.

Dans le dossier du projet Flask (BasicProject), remplacez le contenu du fichier app.py par le code suivant :

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)

Après avoir mis à jour le code, renommez le fichier app.py en runserver.py.
Vérifiez que votre structure de projet Flask refactorisée ressemble à l’exemple suivant :

Exécuter le programme refactorisé et vérifier les itinéraires

Vous êtes maintenant prêt à exécuter votre projet dans Visual Studio :

Dans Visual Studio, sélectionnez Déboguer>Démarrer le Débogage (F5) ou sélectionnez Serveur Web dans la barre d’outils principale (le navigateur que vous voyez peut varier) :
Lorsque l’application s’ouvre dans le navigateur, essayez à la fois les points de terminaison d’itinéraire / (racine) et URL /home dans le navigateur :

Exécuter le programme mis à jour dans le débogueur

Vous pouvez également définir des points d’arrêt dans différentes parties du code et suivre la séquence de démarrage de l’application dans le débogueur :

Définissez plusieurs points d’arrêt, tels que les points suivants :
- Première ligne du fichier runserver.py
- Première ligne du fichier __init__.py
- Ligne return "Hello Flask!" dans le fichier views.py
Démarrez l'application dans le débogueur en sélectionnant Déboguer>Démarrer le débogage ou F5.
Pendant que le débogueur est en cours d’exécution, parcourez le code avec F10, ou exécutez le code à partir de chaque point d’arrêt avec F5. Vous pouvez également utiliser des contrôles de débogage dans la barre d’outils principale de Visual Studio, tels que Continuer, Arrêter, Redémarreret les options de Étape :
Lorsque vous avez terminé, sélectionnez Ctrl+C suivie d’une touche pour arrêter l’application. Vous pouvez également fermer toutes les fenêtres de navigateur ouvertes pour les itinéraires.

Valider les modifications apportées au contrôle de code source

Après avoir refactorisé le code et testé les mises à jour, vous pouvez passer en revue et valider vos modifications dans le contrôle de code source :

Enregistrez les modifications apportées à vos fichiers de projet, par exemple avec le raccourci clavier Ctrl+S.
Dans la barre de contrôles Git, sélectionnez les modifications non validées (crayon 5) pour ouvrir la fenêtre Modifications Git :
Dans la fenêtre Modifications Git, entrez un message de validation, puis sélectionnez Valider toutes les modifications:

Une fois le commit terminé, Visual Studio affiche le message Commit <hash> créé localement.
(Facultatif) Envoyez les modifications validées à votre référentiel distant :
1. Dans la barre de contrôles Git, sélectionnez les validations sortantes/entrantes (flèches 1/0).
2. Sélectionnez Synchronisation (Pull puis Push) ou Push.
Vous pouvez également accumuler plusieurs validations locales avant de les envoyer vers le référentiel distant.

Enregistrez les modifications apportées à vos fichiers de projet, par exemple avec le raccourci clavier Ctrl+S.
Sélectionnez les modifications non validées (crayon 5) en bas à droite dans Visual Studio, qui s’ouvre Team Explorer:
Dans Team Explorer, entrez un message de validation comme « Refactoriser le code » et sélectionnez Valider tout.

Une fois la validation terminée, Visual Studio affiche le message Valider <hachage> créé localement. Synchronisez pour partager vos modifications avec le serveur.
(Facultatif) Envoyez les modifications validées à votre dépôt distant :
1. Dans Team Explorer, sélectionnez Synchroniser.
2. Développez le des validations sortantes, puis sélectionnez Push.
Vous pouvez également accumuler plusieurs validations locales avant de les envoyer (push) vers le référentiel distant.

Pour connaître les procédures suivantes de cette série de tutoriels, vous pouvez consulter cette section pour connaître les étapes de validation des modifications apportées au contrôle de code source.

Déterminer la fréquence des validations (commits) et des envois (push)

La validation des modifications apportées au contrôle de code source crée un enregistrement dans le journal des modifications et un point vers lequel vous pouvez rétablir le référentiel, si nécessaire. Vous pouvez également examiner chaque validation pour passer en revue les modifications spécifiques.

Les validations dans Git sont peu coûteuses. Il peut être préférable d’envoyer vos modifications en petites quantités avec des validations fréquentes, plutôt que d’accumuler un grand nombre de modifications et de les soumettre en tant que validation unique.

Vous n’avez pas besoin de valider chaque petite modification apportée à des fichiers individuels. Il est courant d’effectuer une validation lorsque vous ajoutez une fonctionnalité, modifiez une structure comme indiqué dans cette étape de la série de didacticiels ou refactorisez du code. Il est également recommandé de vérifier avec vos collaborateurs la précision des validations qui fonctionnent le mieux pour tout le monde.

La fréquence à laquelle vous validez et la fréquence à laquelle vous envoyez des validations vers un référentiel distant sont deux préoccupations différentes. Vous pouvez accumuler plusieurs validations dans votre référentiel local avant de les envoyer (push) vers le référentiel distant. La fréquence de vos validations dépend de la façon dont votre équipe souhaite gérer le référentiel.

Utiliser des modèles pour afficher des pages et des vues

La fonction home dans le fichier views.py génère une réponse HTTP en texte brut pour la page. La plupart des pages web réelles répondent avec des pages HTML riches qui incorporent souvent des données actives. La raison principale pour laquelle les développeurs définissent des vues à l’aide d’une fonction consiste à générer du contenu dynamiquement.

La valeur de retour de la vue n’est qu’une chaîne de caractères. Vous pouvez créer n’importe quel code HTML dans une chaîne à l’aide de contenu dynamique. Étant donné qu’il est préférable de séparer le balisage des données, il est préférable de placer le balisage dans un modèle et de conserver les données dans le code.

Ajuster les vues pour utiliser du HTML en ligne

La première étape consiste à convertir le traitement d’affichage pour utiliser du code HTML inline pour la page avec du contenu dynamique :

Remplacez le contenu du fichier views.py par le code suivant :

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

Enregistrez vos modifications et réexécutez votre application.
Actualisez la page quelques fois pour confirmer que la date et l’heure sont mises à jour. Lorsque vous avez terminé, arrêtez l’application.

Créer un modèle HTML

Ensuite, convertissez le processus de rendu de page pour utiliser un modèle HTML :

Cliquez avec le bouton droit sur les modèles dossier, puis sélectionnez Ajouter>nouvel élément pour créer un fichier.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez le modèle de fichier page HTML. Nommez le fichier index.html et sélectionnez Ajouter.
Remplacez le contenu fourni du fichier HTML par le balisage suivant :
```
<html>
<head>
   <title>Hello Flask</title>
</head>

<body>
   {{ content }}
</body>
</html>
```
Dans ce code, l’instruction {{ content }} est un espace réservé ou un jeton de remplacement (également appelé variable de modèle) pour lequel vous fournissez une valeur dans le code.

Ajuster la fonction d’accueil pour charger le modèle

Vous devez modifier la fonction home pour utiliser la méthode render_template. Cette méthode charge le modèle HTML et fournit une valeur pour {{ content }} à l’aide d’un argument nommé qui correspond au nom de l’espace réservé.

Dans le fichier views.py, remplacez la définition de fonction home par le code suivant :
```
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 recherche automatiquement des modèles dans les modèles dossier. Par conséquent, le chemin d’accès au modèle est relatif à ce dossier.
Enregistrez les modifications de votre projet et réexécutez l’application.

Notez que la syntaxe HTML inline (\<strong> ...) dans la valeur de content n’affiche pas comme du code HTML, car le moteur de création de modèles (Jinja) échappe automatiquement le contenu HTML. L’échappement automatique empêche les vulnérabilités accidentelles susceptibles d'être exploitées par des attaques par injection.

Les développeurs recueillent souvent des entrées à partir d’une page et l’utilisent comme valeur dans une autre en utilisant un emplacement réservé du modèle. L’échappement sert également de rappel pour indiquer qu’il vaut mieux garder le code HTML en dehors du code.

Lorsque vous avez terminé, arrêtez l’application.

Utiliser des espaces réservés distincts

Vous pouvez utiliser des espaces réservés distincts pour chaque élément de données dans le balisage HTML. Ensuite, ajustez à nouveau votre fonction home pour fournir les valeurs spécifiques des espaces réservés :

Remplacez le contenu du fichier index.html par le balisage suivant :

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

Dans le fichier views.py, remplacez la définition de fonction home par le code suivant pour fournir des valeurs pour tous les espaces réservés :

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)

Enregistrez vos modifications et réexécutez votre application. Cette fois, vous devez voir la sortie correctement rendue :
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.

Modèles de page distincts

Les modèles sont généralement conservés dans des fichiers HTML distincts, mais vous pouvez également utiliser un modèle inline. Les fichiers distincts sont recommandés pour maintenir une séparation propre entre le balisage et le code.

Utiliser l’extension .html pour les modèles

L’extension .html pour les fichiers de modèle de page est entièrement facultative. Vous pouvez toujours identifier le chemin d’accès relatif exact au fichier dans le premier argument de la fonction render_template. Cependant, Visual Studio (et d'autres éditeurs) offrent généralement des fonctionnalités telles que l'autocomplétion et la coloration syntaxique pour les fichiers .html, ce qui compense le fait que les modèles de page ne soient pas en HTML.

Lorsque vous travaillez avec un projet Flask, Visual Studio détecte automatiquement si le fichier HTML que vous modifiez est en fait un modèle Flask et fournit certaines fonctionnalités de saisie semi-automatique. Si vous commencez à saisir un commentaire sur le modèle de page Flask ({#), Visual Studio vous donne automatiquement les caractères de fermeture #}. Les commandes Sélectionner les commentaires et Décommenter la sélection (dans le menu Modifier>Avancé) utilisent des commentaires modèles plutôt que des commentaires HTML.

Organiser des modèles en sous-dossiers

Vous pouvez utiliser des sous-dossiers, puis référencer le chemin relatif sous le dossier modèles pour les appels à la fonction render_template. Cette approche est un excellent moyen de créer efficacement des espaces de noms pour vos modèles.

Étape suivante

Étape 3 : Servez des fichiers statiques, ajoutez des pages et utilisez l'héritage de modèle

Partage via