Menu

Modèle de flacon, formulaire, vue et redirection avec des exemples

  • Principal
  • Autre
  • Modèle de flacon, formulaire, vue et redirection avec des exemples

flask template form

Essayez Notre Instrument Pour Éliminer Les Problèmes

Ce didacticiel explique ce que sont le modèle de flacon, le formulaire, la vue, la réponse et la redirection avec des exemples pratiques:

En général, la création de modèles est utilisée dans la programmation, pour réutiliser une partie de texte avec des données différentes. En ce qui concerne le développement Web, les concepteurs utilisent des modèles pour afficher les données sous une forme lisible et attrayante pour les lecteurs humains.

Une conception de modèle implique généralement l'utilisation d'un langage en raison des complexités posées par l'interaction humaine.

=> Jetez un œil au guide du débutant Flask ici

Modèles, vues et formulaires Flask

Ce que vous apprendrez:

introduction

Flask utilise un moteur de création de modèles appelé Jinja2, qui affiche le comportement d'une application en fonction du niveau d'interaction de l'utilisateur. Un modèle Jinja utilise des variables, des expressions et des balises.

Les variables et expressions sont remplacées par des valeurs lors de l'exécution avant le rendu de la page dans le navigateur. Les balises Jinja aident à écrire la logique et les instructions de contrôle dans le modèle Flask.

Vue du flacon

La notion de vue Flask est dérivée d'un modèle de conception d'application Web répandu appelé Model-View-Controller. Une vue est l'un des trois éléments interconnectés de ce paradigme, où il traite de la logique d'application. La vue se charge de la présentation des informations à l'utilisateur.

Dans notre didacticiel précédent, nous avons conçu une vue en sous-classant la classe BaseView de Flask-Appbuilder. Dans la partie suivante de ce didacticiel, nous étendrons notre dernier exemple et présenterons les façons dont les vues peuvent être personnalisées.

Modèle de flacon

Commençons et écrivons notre premier modèle. Créez un fichier appelé hello.html dans le répertoire des modèles.

Écrivez le code suivant dans ce fichier et enregistrez-le.

Hello World!, from Software Testing Help.

{% for item in greetings %} {% if 'Morning' in item %}

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

Modèle pour boucle

Dans le modèle Flask ci-dessus, nous avons utilisé une boucle for pour itérer sur les éléments de la liste. Dans notre contrôleur ou gestionnaire, nous avons transmis une liste avec des valeurs de salutations au modèle. À l'intérieur du modèle, nous accédons à chaque élément en utilisant la syntaxe {{item}}.

Modèle si bloc

En outre, notez l'utilisation d'une instruction if. Ici, nous testons l'élément pour Morning et le mettons en gras et en italique.

Avançons maintenant pour en savoir plus sur les concepts de Flask Forms.

Formes de flacon

L'un des aspects les plus cruciaux de la création de modèles est de prendre les entrées des utilisateurs et d'écrire une logique backend basée sur cette entrée. Créons un formulaire.

Nous utilisons Flask-Appbuilder SimpleFormView pour rendre notre formulaire. Cependant, créons d'abord un formulaire. En plus de la création d'un formulaire, nous devons utiliser la commande flask fab create-admin pour créer un utilisateur administrateur.

Par conséquent, utilisez la commande avant de démarrer le serveur de développement afin que les vues et les formulaires créés ultérieurement puissent être validés avec un utilisateur connecté. Nous nous connectons avec l'utilisateur administrateur et continuons à valider que les vues créées sont visibles sous le menu, comme indiqué dans les captures d'écran.

Créer un administrateur

Utilisez la commande ci-dessous pour créer un utilisateur administrateur.

flask fab create-admin

Connectez-vous avec les informations d'identification d'administrateur

  • Cliquez sur Connexion après avoir accédé à http: // localhost: 8080.
Connectez-vous en tant qu
Connectez-vous en tant qu'administrateur
  • Connectez-vous avec les informations d'identification d'administrateur, créées dans la section précédente.
Cliquez sur Login
Cliquez sur Connexion
  • Cliquez sur la catégorie Mes formulaires pour accéder à vos vues.
Cliquez sur le menu
Cliquez sur le menu

Noter: Vous ne pourrez effectuer la dernière étape qu'après avoir ajouté les vues au menu par défaut affiché dans la barre de navigation.

Allons-y et créons des vues basées sur des formulaires.

Créez un fichier appelé forms.py sous le répertoire de l'application et écrivez-y le code suivant.

from wtforms import Form, StringField from wtforms.validators import DataRequired from flask_appbuilder.fieldwidgets import BS3TextFieldWidget from flask_appbuilder.forms import DynamicForm class GreetingsForm(DynamicForm): greeting1 = StringField(('Morning'), description = ('Your morning Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting2 = StringField(('Afternoon'), description = ('Your Afternoon Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting3 = StringField(('Evening'), description = ('Your Evening Greeting'), widget = BS3TextFieldWidget()) greeting4 = StringField(('Night'), description = ('Your Night Greeting'), widget = BS3TextFieldWidget())

Nous avons créé un formulaire basé sur le DynamicForm de Flask-Appbuilder. Il y a quatre champs de texte. Nous étendons notre exemple de salutations. Sur les quatre champs, deux sont obligatoires et deux sont facultatifs car, pour les deux premiers messages d'accueil, nous avons mentionné les valeurs pour les validateurs.

Créons maintenant une vue pour ce formulaire. Écrivez ces lignes de code suivantes dans le fichier views.py.

from flask import render_template, flash from flask_appbuilder import SimpleFormView from app.forms import GreetingsForm class GreetingsView(SimpleFormView): form = GreetingsForm form_title = 'This is a Greetings form' message = 'Your Greetings are submitted' def form_get(self, form): form.greeting1.data = 'Your Morning Greeting' form.greeting2.data = 'Your Afternoon Greeting' form.greeting3.data = 'Your Evening Greeting' form.greeting4.data = 'Your Night Greeting' def form_post(self, form): flash(self.message, 'info') greetings = ( form.greeting1.data, form.greeting2.data, form.greeting3.data, form.greeting4.data, ) session('greetings')=greetings return redirect(url_for('HelloWorld.hello_greetings2'))

Dans notre vue ci-dessus, nous avons deux méthodes appelées form_get et form_post pour renseigner les valeurs par défaut dans les champs des formulaires et lire les valeurs saisies une fois que le formulaire est soumis à partir du navigateur, respectivement.

Le GreetingsView affiche le formulaire, comme indiqué dans l'image ci-dessous.

Formulaire de salutations

Nous utilisons également un objet de session Flask pour stocker les valeurs de champ dans form_post afin de pouvoir y accéder dans la nouvelle vue correspondante que nous allons écrire.

Modifions maintenant la classe HelloWorld et ajoutons une autre méthode pour afficher les salutations. Nous l'appellerons hello_greetings2.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.html', greetings=greetings)

Dans cette vue, nous lisons les valeurs de l'objet de session et utilisons le modèle de rendu Flask pour afficher ces valeurs dans le code HTML destiné à l'utilisateur. Notez que hello_greetings2 est une autre façon d'obtenir la même fonctionnalité similaire à hello_greetings.

La seule différence est qu'en utilisant hello_greetings2, nous affichons les valeurs entrées par l'utilisateur, et dans hello_greetings, nous n'avons pris aucune entrée de l'utilisateur et les avons codées en dur lors de l'écriture de la vue mappée sur l'itinéraire respectif.

Réponse du flacon

Il est assez rare que vous trouviez l'utilisation explicite de la réponse Flask dans le code. La classe Response dans Flask est juste une sous-classe de la classe Response de la classe Response de Werkzueg, qui à son tour sous-classe sa classe ResponseBase.

L'objet Réponse Flask est formé en interne par Flask chaque fois que nous appelons une instruction return ou une méthode telle que render_template.

En outre, nous pouvons personnaliser le code de réponse et le type de contenu si nécessaire dans le cadre de l'instruction de retour dans nos vues, comme indiqué dans la vue HelloWorld modifiée ci-dessous.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.json', greetings=greetings), 201, {'Content-Type' : 'application/json'

L'utilisation directe de la classe Flask's Response peut être couverte dans un cas d'utilisation lorsque nous diffusons le contenu au lieu de renvoyer le contenu complet à la fois en raison des contraintes de taille de fichier et de bande passante réseau.

Nous avons montré ci-dessous un exemple de diffusion du contenu à partir d'un grand CSV.

from flask import Response @app.route('https://cdn.softwaretestinghelp.com/largefile.csv') def send_large_csv(): '''A controller to stream the content of a large csv file''' def gen(): for row in iter_all_rows(): yield ','.join(row) + ' ' return Response(gen(), mimetype='text/csv')

Redirection de flacon

Il n'est pas toujours possible pour une application de prédéfinir la réponse en fonction des différentes demandes du client.

Nous utilisons Flask Redirect, dans des scénarios, où il est possible de servir le contenu qui peut être rempli par les autres vues ou emplacements en réponse à une demande. Nous utilisons Flask Redirect avec abandon avec les codes de retour HTTP standard.

Par exemple, dans le code ci-dessous, nous avons utilisé la redirection avec le code HTTP 301 et l'abandon avec 401.

from flask import Flask, redirect, url_for, request, abort app = Flask(__name__) @app.route('/') def index(): return render_template('log_in.html') # Log In template @app.route('/login',methods = ('POST', 'GET')) def login(): if request.method == 'POST': if request.form('username') == 'admin' : # if user is admin return redirect(url_for('success')), 301 else: abort(401) # stop processing else: return redirect(url_for('index')) # redirect to another view

De plus, vérifiez dans GreetingsView où nous avons utilisé Flask redirect et url_for pour rediriger une requête en interne vers une vue différente en stockant les valeurs des salutations dans l'objet de session. La redirection Flask renvoie toujours un objet de réponse, avec la valeur par défaut ou le code d'état donné à un autre emplacement de l'application.

Flask Debugtoolbar

Nous avons déjà présenté le débogueur interactif de Flask dans notre dernier didacticiel. Dans ce didacticiel, nous franchissons une étape de plus pour faciliter le débogage de l'application Flask. Une fois installée, la barre d'outils Flask Debug s'affiche en superposition sur l'application Flask.

Installez la barre d'outils Flask Debug.

pip install flask-debugtoolbar

Pour activer la debugtoolbar, ouvrez le fichier __init__.py dans notre projet et modifiez le code en ajoutant les lignes de code suivantes.

from flask_debugtoolbar import DebugToolbarExtension app.debug = True toolbar = DebugToolbarExtension(app)

Veuillez noter que la barre d'outils de débogage Flask n'est activée qu'en mode débogage. Une fois activé, lorsque vous rechargez votre application, vous observerez deux choses.

#1) La barre d'outils de débogage apparaît sur le côté droit du navigateur. Cliquez et développez-le pour voir les différentes fonctionnalités fournies par la barre d'outils.

Activation de la barre d
Activation de la barre d'outils de débogage

#deux) A chaque fois qu'une nouvelle requête POST est envoyée à l'application, elle est interceptée par la barre d'outils afin que nous puissions inspecter les variables et les autres paramètres relatifs au débogage de l'application.

Interception de la barre d
Interception de la barre d'outils de débogage

Cette interception par défaut peut être désactivée avec la configuration ci-dessous.

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False Résultats Pytest
Variables de la barre d'outils de débogage

Écrivons maintenant quelques tests pour tester nos vues pour les fonctionnalités supplémentaires que nous avons introduites dans l'exemple d'application.

téléchargements gratuits mp3 pour téléphones Android

Avant de poursuivre les tests, veuillez désactiver le débogage comme indiqué ci-dessous dans __init__.py. Vous pouvez également commenter la ligne ci-dessous.

app.debug = False

Test des vues d'application Flask

Nous devons organiser le code de test pour le rendre plus gérable. Créez un fichier appelé conftest.py dans le répertoire racine et déplacez les lignes mentionnées ci-dessous de test_hello.py vers ce fichier.

from app import appbuilder import pytest @pytest.fixture def client(): ''' A pytest fixture for test client ''' appbuilder.app.config('TESTING') = True with appbuilder.app.test_client() as client: yield client

Les fixtures pytest sont chargées par pytest au moment de l'exécution. Ces appareils sont disponibles et partagés avec tous les tests. La définition d'un conftest.py dans le chemin racine de n'importe quel projet est considérée comme une meilleure pratique car pytest peut reconnaître tous les modules du projet sans spécifier de PYTHONPATH explicite.

Ajoutez un autre test pour le fichier test_hello. Un exemple de test est donné ci-dessous. Nous appelons la méthode get de l'objet client et affirmons la valeur attendue dans les données de réponse stockées dans resp.data.

De même, vous pouvez écrire plus de tests pointant vers différentes vues. Nous écrirons plus de tests dans les tutoriels suivants.

def test_greetings(client): ''' A test method to test view hello_greetings''' resp = client.get('/hello/greetings', follow_redirects=True) assert b'Good Morning' in resp.data

Exécutez les tests à l'aide de la commande ci-dessous à partir du répertoire racine du projet.

pytest -v

L'exécution du test produit les résultats du test dans la console, comme indiqué ci-dessous:

Échec au pytest
Résultats Pytest

Il n'y a pas encore d'échecs. Concevons un autre test, comme indiqué ci-dessous.

def test_greetings2(client): ''' A test method to test view hello_greetings2 ''' resp = client.get('/hello/greetings2', follow_redirects=True) assert b'Good Morning' in resp.data

Ce test échouera car nous n'avons défini aucun attribut de message dans la classe HelloWorld dans le fichier views.py.

Une fois que vous avez exécuté les tests en utilisant pytest -v, les résultats similaires à l'image ci-dessous seront affichés sur la console.

Échec au pytest

La section ci-dessous explique les étapes que nous devons effectuer lors de l'exécution des tests sur une plate-forme CI / CD. Nous utilisons Git Actions pour le même projet.

CI / CD avec actions Git

Nous enregistrons maintenant toutes les modifications dans les fichiers et créons un commit en donnant le message pour ce tutoriel. Après la validation sur le référentiel local, nous extrayons les modifications de l'origine distante avec l'indicateur –rebase pour voir s'il y a des conflits avec les nouvelles modifications sur la télécommande. Nous rebasons pour garder l'histoire cohérente.

Utilisez la commande ci-dessous pour extraire et fusionner les modifications depuis l'origine distante. Cependant, validez vos modifications avant d'extraire les modifications de la télécommande.

git pull origin master --rebase

Maintenant, vérifiez la branche principale locale et fusionnez avec la branche tutorial-2. Une fois la fusion réussie, publiez ces modifications dans le masque d'origine. Cette action appellera les builds sur les plates-formes cibles. Nous testons ce code sur Python3.7 et Python 3.8 sur la dernière version d'Ubuntu.

Conclusion

Dans ce didacticiel, nous avons vu comment les modèles fonctionnent dans le framework Flask. Nous avons décrit les étapes de création et de rendu des modèles de flacon avec des valeurs définies par l'utilisateur à l'aide de variables et d'expressions.

Nous avons également vu des exemples d'une vue BaseView prédéfinie du plugin Flask Appbuilder. Cette vue peut être facilement sous-classée par les développeurs Flask pour créer des vues personnalisées.

Les concepts abordés jusqu'à présent aident les lecteurs à créer rapidement des sites Web statiques et dynamiques à l'aide du Flask sans backend de base de données. Nous expliquerons comment lire et écrire des données depuis et vers les bases de données avec ModelView dans le prochain tutoriel lorsque nous aborderons le concept d'utilisation de bases de données avec Flask.

=> Lisez la série de formations Easy Flask

lecture recommandée

^