Étape 2 : Créer une application Flask avec des vues et des modèles de pages

Article
09/08/2023

Étape précédente : créer une solution et un projet Visual Studio

Dans l’étape 1 de ce tutoriel, vous avez créé une application Flask avec une page et tout le code dans un même fichier. Pour permettre le développement futur, il est préférable de refactoriser le code et de créer une structure pour les modèles de page. En particulier, vous voulez séparer le code pour les vues de l’application du code lié à d’autres aspects, comme code du démarrage.

Dans cette étape, vous apprenez comment :

Refactoriser le code de l’application pour séparer le code des vues du code du démarrage (étape 2-1)
Afficher une vue en utilisant un modèle de page (étape 2-2)

Étape 2-1 : refactoriser le projet pour prendre en charge les développements futurs

Dans le code créé par le modèle « Projet web Flask vide », vous avez un seul fichier app.py qui contient le code du démarrage ainsi qu’une seule vue. Pour permettre le développement futur d’une application avec plusieurs vues et modèles, il est préférable de séparer ces aspects.

Dans votre dossier de projet, créez un dossier d’application nommé HelloFlask (cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions et sélectionnez Ajouter>Nouveau dossier.)
Dans le dossier HelloFlask, créez un fichier nommé __init__.py avec le contenu suivant qui crée l’instance Flask et charge les vues de l’application (créées à l’étape suivante) :
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
Dans le dossier HelloFlask, créez un fichier nommé views.py avec le contenu suivant. Le nom views.py est important, car vous avez utilisé import HelloFlask.views dans __init__.py. Vous voyez une erreur au moment de l’exécution si les noms ne correspondent pas.
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
En plus de renommer la fonction et de router vers home, ce code contient le code de rendu des pages d’app.py et importe l’objet app qui est déclaré dans __init__.py.
Créez un sous-dossier dans HelloFlask nommé templates, qui va rester vide pour l’instant.

Dans le dossier racine du projet, renommez app.py en runserver.py, et faites en sorte que son contenu corresponde au 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)

La structure de votre projet doit ressembler à ceci :
Sélectionnez Déboguer>Démarrer le débogage (F5) ou utilisez le bouton Serveur web dans la barre d’outils (le navigateur affiché peut varier) pour démarrer l’application et ouvrir un navigateur. Essayez les deux routes d’URL / et /home.
Vous pouvez également définir des points d’arrêt dans différentes parties du code et redémarrer l’application pour suivre la séquence de démarrage. Par exemple, définissez un point d’arrêt sur les premières lignes de runserver.py et HelloFlask_init_.py, et sur la ligne return "Hello Flask!" de views.py. Ensuite, redémarrez l’application (Déboguer>Redémarrer, Ctrl+Maj+F5 ou le bouton de barre d’outils montré ci-dessous) et exécutez pas à pas (F10) le code, ou lancez l’exécution à partir de chaque point d’arrêt en utilisant F5.
Arrêtez l’application quand vous avez terminé.

Valider pour le contrôle de code source

Après avoir effectué les changements dans le code et l’avoir testé avec succès, vous pouvez passer en revue et commiter vos changements dans le contrôle de code source. Dans les étapes suivantes, quand ce tutoriel vous rappelle de recommiter dans le contrôle de code source, vous pouvez vous référer à cette section.

Sélectionnez le bouton des changements en bas de Visual Studio (entouré ci-dessous), pour accéder à Team Explorer.
Dans Team Explorer, entrez un message de validation comme « Refactoriser le code » et sélectionnez Valider tout. Une fois le commit effectué, vous voyez un message Commit du <hachage> créé localement. Synchronisez pour partager vos changements avec le serveur. Si vous souhaitez pousser les changements dans votre dépôt distant, sélectionnez Synchroniser, puis Pousser sous Commits sortants. Vous pouvez également accumuler plusieurs validations locales avant d’envoyer à distance.

Question : à quelle fréquence faut-il valider auprès du contrôle de code source ?

Réponse : la validation des modifications auprès du contrôle de code source crée un enregistrement dans le journal des modifications et un point auquel vous pouvez rétablir le dépôt si nécessaire. Vous pouvez aussi examiner les modifications spécifiques de chaque validation. Les validations dans Git ne coûtant rien, il est préférable de faire des validations fréquentes que d’accumuler un grand nombre de modifications dans une même validation. Vous n’avez pas besoin de commiter chaque petit changement effectué dans les fichiers individuels. En général, vous faites un commit quand vous ajoutez une fonctionnalité, quand vous changez la structure comme dans cette étape, ou quand vous refactorisez du code. Vérifiez également avec les autres membres de votre équipe quelle granularité des validations convient le mieux à tous.

La fréquence à laquelle vous validez et celle à laquelle vous envoyez (push) les validations dans un dépôt distant sont deux problèmes différents. Vous pouvez accumuler plusieurs commits dans votre dépôt local avant de les pousser dans le dépôt distant. La fréquence de vos commits dépend de la façon dont votre équipe souhaite gérer le dépôt.

Étape 2-2 : Utiliser un modèle pour restituer une page

La fonction home que vous avez jusqu’à présent dans views.py ne génère rien de plus qu’une réponse HTTP de texte brut pour la page. Cependant, la plupart des pages web réelles répondent avec des pages HTML riches qui intègrent souvent des données dynamiques. La raison principale pour définir une vue en utilisant une fonction est de générer du contenu dynamiquement.

Étant donné que la valeur de retour de la vue est simplement une chaîne, vous pouvez construire n’importe quel code HTML dans une chaîne en utilisant du contenu dynamique. Toutefois, comme il est recommandé de séparer le balisage des données, placez le balisage dans un modèle et gardez les données dans le code.

Pour commencer, modifiez views.py et ajoutez-y le code suivant, qui utilise du code HTML inline pour la page avec du contenu dynamique :

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

Exécutez l’application et actualisez la page plusieurs fois pour constater que la date/heure est mise à jour. Arrêtez l’application quand vous avez terminé.
Pour convertir le rendu de la page et lui faire utiliser un modèle, créez un fichier nommé index.html dans le dossier templates avec le contenu suivant, où {{ content }} est un espace réservé ou un jeton de remplacement (également appelé une variable de modèle) pour lequel vous fournissez une valeur dans le code :
```
<html>
  <head>
    <title>Hello Flask</title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
Modifiez la fonction home pour qu’elle utilise render_template pour charger le modèle et fournissez une valeur pour « content », ce que vous faites en utilisant un argument nommé correspondant au nom de l’espace réservé. Flask recherche automatiquement des modèles dans le dossier templates ; le chemin du modèle est donc relatif à ce dossier :
```
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)
```
Exécutez l’application et voyez les résultats. Notez que le code HTML inline dans la valeur content ne s’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 des attaques par injection. Les développeurs recueillent souvent des entrées d’une page et les utilisent comme valeurs dans une autre en utilisant un espace réservé de modèle. L’échappement sert également de rappel pour indiquer qu’il vaut mieux garder le code HTML en dehors du code.

En conséquence, modifiez templates\index.html de façon à ce qu’il contienne des espaces réservés distincts pour chaque élément de données dans le balisage :
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Ensuite, mettez à jour la fonction home de façon à ce qu’elle fournisse 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)
```
Réexécutez l’application pour vérifier que la sortie s’affiche correctement.
Vous pouvez commiter vos changements dans le contrôle de code source et mettre à jour votre dépôt distant. Pour plus d'informations, consultez l’étape 2-1.

Question : Les modèles de page doivent-ils être dans un fichier distinct ?

Réponse : bien que les modèles soient généralement conservés dans des fichiers HTML distincts, vous pouvez également utiliser un modèle inclus. Les fichiers distincts sont recommandés pour maintenir une séparation nette entre le balisage et le code.

Question : Les modèles doivent-ils utiliser l’extension de fichier .html ?

Réponse : L’extension .html pour les fichiers de modèle de page est entièrement facultative, car vous pouvez toujours identifier le chemin relatif exact du fichier dans le premier argument de la fonction render_template. Toutefois, Visual Studio (et d’autres éditeurs) en général vous donnent des fonctionnalités comme la complétion de code et la coloration syntaxique avec des fichiers .html, ce qui compense le fait que les modèles de page ne sont pas en code HTML.

Quand vous travaillez avec un projet Flask, Visual Studio détecte automatiquement quand le fichier HTML que vous modifiez est réellement un modèle Flask et fournit certaines fonctionnalités de saisie semi-automatique. Par exemple, quand vous commencez à saisir un commentaire sur le modèle de page Flask, {#, Visual Studio vous donne automatiquement les caractères de fermeture #}. Les commandes Commenter la sélection et Supprimer les marques de commentaire de la sélection (sur le menu Modifier>Avancé et la barre d’outils) utilisent également les commentaires des modèles au lieu des commentaires HTML.

Question : les modèles peuvent-ils être organisés selon d’autres sous-dossiers ?

Réponse : oui, vous pouvez utiliser des sous-dossiers, puis référencer le chemin relatif sous templates dans les appels à render_template. Procéder ainsi est un excellent moyen pour créer efficacement des espaces de noms pour vos modèles.

Étapes suivantes

Prendre en charge les fichiers statiques, ajouter des pages et utiliser l’héritage du modèle

Approfondir la question

Flask - Démarrage rapide : Rendu des modèles (flask.pocoo.org)
Code source du tutoriel sur GitHub : Microsoft/python-sample-vs-learning-flask