Menu

Mise en page de l'application Flask et du projet Flask avec Blueprint et Bootstrap

  • Principal
  • Autre
  • Mise en page de l'application Flask et du projet Flask avec Blueprint et Bootstrap

flask app flask project layout with blueprint bootstrap

Essayez Notre Instrument Pour Éliminer Les Problèmes

Ce didacticiel explique comment utiliser Flask App, Flask Blueprint et Flask Bootstrap dans un projet Flask:

Dans cette rubrique, nous nous éloignerons un peu de l'archétype de Flask-Appbuilder pour développer notre compréhension des Blueprints Flask. Lisez notre didacticiel sur Flask, les modèles et vues Flask et Flask avec des bases de données telles que MongoDB, SQLite et MySQL. Nous avons utilisé un exemple de projet appelé flaskTutorialApp.

Cependant, vous pouvez également créer le projet à partir de zéro à l'aide de la commande flask fab create-app. Cette commande crée le scaffolding requis pour un projet Flask avec un répertoire d'application basé sur le nom d'application que vous avez donné.

=> Voir la série de formation Flask pour tous

Disposition du projet Flask avec Blueprint et Bootstrap 1

Dans ce didacticiel, nous expliquons Flask App, Flask Blueprint et Flask Bootstrap. Nous développons initialement notre application Flask avec l'échafaudage préexistant fourni par Flask-Appbuilder. Nous créons ensuite un Blueprint Flask appelé hello2. Enfin, nous décrirons le concept Flask Docker en docker notre application Flask.

Ce que vous apprendrez:

Application Flask

Flask App est un autre nom pour une application Flask. Si vous remarquez le code écrit dans le fichier __init__.py, vous remarquerez qu'une instance de Flask est créée et que la variable est nommée app. L'instance de la classe Flask est l'application Flask, qui est l'instance de l'application WSGI.

from flask import Flask app = Flask(__name__)

Plan de flacon

Flask Blueprint nous permet de conserver les fonctionnalités associées ensemble et contribue à de meilleures pratiques de développement. Certains des avantages de Flask Blueprints sont les suivants:

  1. Organisation facile d'applications à grande échelle.
  2. Augmente la réutilisabilité du code en enregistrant le même Blueprint plusieurs fois.
  3. Un ensemble d'opérations est enregistré et peut être ensuite relu après l'enregistrement d'un plan.

Avec le contexte ci-dessus donné sur Flask Blueprint, nous pouvons aller de l'avant et concevoir notre premier Blueprint. Nous pouvons également considérer Blueprint comme un module. Créons un plan HelloWorld.

Tous les composants, ressources et fonctionnalités d'un plan sont conservés et organisés séparément de l'autre code source de l'application Flask. Cela signifie qu'un Blueprint Flask peut avoir ses vues, formulaires, modèles, fichiers statiques et modèles.

Vous pouvez créer plusieurs Blueprints à partir du même ensemble de ressources. Cependant, cela est susceptible de créer de la confusion et ce n'est pas une bonne pratique.

c ++ ide avec compilateur

Créer des fichiers et des répertoires Flask Blueprint

Commençons par créer un Blueprint Flask avec le nom hello2. Utilisez le script ci-dessous pour créer la structure de répertoires après avoir activé votre environnement virtuel en utilisant la source venv / bin / activate après avoir accédé au répertoire de l'application.

blueprint_name='hello2' mkdir '$blueprint_name' mkdir -p '$blueprint_name/templates/$blueprint_name' touch '$blueprint_name/templates/$blueprint_name/hello.html' mkdir '$blueprint_name/static/' touch '$blueprint_name/__init__.py' touch '$blueprint_name/views.py'

Nous voulons que notre Blueprint hello2 ait ses vues que nous importerons dans son __init__.py. Nous créons un répertoire séparé pour notre Blueprint avec des modèles et des répertoires statiques pour rendre les vues Flask et servir des ressources statiques, respectivement.

Structure du répertoire de Blueprint Flask

La structure de répertoires du Blueprint doit ressembler à celle ci-dessous. Utilisez la commande tree pour créer une sortie similaire.

Structure du répertoire Flask Blueprint

Create Flask Blueprint View

Définissons maintenant une vue simple dans views.py. Ouvrez hello2 / views.py et entrez l'extrait de code ci-dessous.

from flask import Blueprint, render_template hello2 = Blueprint( 'hello2', __name__, template_folder='templates', static_folder='static' ) @hello2.route('/hello2') def hello2_view(): greeting = 'Hello World 2' return render_template('hello2/hello.html', greeting=greeting)

Nous importons la classe Blueprint et la méthode render_template. Ensuite, nous créons un objet Blueprint en donnant les noms du modèle et des répertoires statiques.

Ensuite, nous définissons une route, en utilisant le décorateur @ hello2.route, et un contrôleur avec le nom hello2_view. Ce contrôleur est une fonction Python. Dans cette fonction, nous attribuons une valeur à une variable appelée salutation, puis la passons à la méthode render_template.

Créer un modèle de plan de flacon

Créons maintenant le modèle hello.html. Si vous avez lu nos didacticiels précédents, vous devez avoir remarqué que le modèle porte le même nom que celui que nous avons créé pour le rendu de la vue HelloWorld. Pour ce Blueprint hello2, nous créons un nouveau modèle en étendant le précédent.

De plus, notez que nous avons utilisé un chemin sémantique hello2 / hello.html en appelant render_template pour rendre le message d'accueil dans le modèle. Ce modèle évite les conflits entre les modèles de mêmes noms.

Utilisez l'extrait de code ci-dessous pour créer hello.html et enregistrez-le sous hello2 / templates / hello2 / path.

{% extends 'hello.html' %} {% block hello %}

{{ greeting }} , from Software Testing Help.

{% endblock %}

Ce modèle est presque similaire au hello.html. Cependant, il hérite la plupart de ses parties HTML de hello.html. Notez l'utilisation de {% block hello%} et {% endblock%}. Block hello dans hello2 / hello.html remplace le bloc hello du modèle de base hello.html.

Maintenant, ouvrons le fichier __init__.py du Blueprint hello2 et mentionnons le code ci-dessous.

from app.hello2.views import * # expose all views at the blueprint level

Dans cette déclaration, nous importons toutes les méthodes décorées que nous avons créées dans views.py du Blueprint hello2. Si nécessaire, nous ne pouvons importer que les méthodes / contrôleurs prêts à être utilisés ou testés.

Enregistrer un plan Flask avec l'application Flask

Maintenant, ouvrons __init__.py sous le répertoire de l'application Flask et enregistrons notre plan hello2 comme indiqué dans le code ci-dessous.

from app.hello2 import hello2 app.register_blueprint(hello2, url_prefix='/hello2')

Ici aussi, veuillez noter que nous pouvons importer de manière sélective des vues et enregistrer uniquement celles qui sont prêtes à être utilisées ou testées.

Exécutons notre application Flask en mode débogage avec la commande python run.py à partir du répertoire racine du projet et accédez à http: // localhost: 8080 / hello2 pour voir si la vue de hello2 fonctionne correctement.

Le résultat dans le navigateur doit être similaire à l'exemple ci-dessous.

Exemple HelloWorld2_View
Vue du plan Hello2

Travaillons sur une meilleure présentation de hello2 blueprint en utilisant le framework bootstrap de Twitter. De plus, dans la section suivante, vous en apprendrez plus sur les paramètres facultatifs pour modifier le comportement d'un Flask Blueprint. Voyons cela à l’aide d’un exemple de plan Flask appelé Flask Bootstrap.

Exemple d'application de flacon modulaire avec modèle de flacon

Sur la base de notre apprentissage de hello2 Flask Blueprint, ajoutons quelques plans supplémentaires pour comprendre comment nous pouvons créer des applications modulaires dans Flask.

Supposons que nous ayons une application Web qui sert du contenu aux visiteurs sous la forme d'ebooks, de tutoriels et de cours. Il contient également du contenu supplémentaire concernant des informations sur l'équipe et une page d'accueil.

Si nous essayons d'intégrer ces nouvelles fonctionnalités dans l'application existante, nous devrons créer des vues dans views.py et les modèles correspondants dans le répertoire des modèles d'application. De même, nous devons créer des modèles et des formulaires dans models.py et forms.py.

Cependant, la gestion de tout le code d'application deviendra fastidieuse et la collaboration avec les autres membres de l'équipe sera trop compliquée et pourrait entraîner des conflits de validation ou un flux de travail de développement complexe.

Actuellement, dans cette approche conventionnelle, la structure de l'application est la suivante.

Approche conventionnelle

Pour éviter un tel scénario, nous pouvons utiliser Flask Blueprints pour créer des modules spécifiques aux fonctionnalités et au contenu respectif. Créons quelques Blueprints Flask, avec leurs ressources séparées.

Chacune des mises en page Flask Blueprint ressemblera à celle illustrée ci-dessous.

Dispositions de plan de flacon

Utilisez le script ci-dessous pour créer les fichiers et répertoires requis pour les Blueprints Flask planifiés. Exécutez ce script à partir du répertoire racine du projet.

cd app for dir in home courses tutorials ebooks do echo 'generating files for $dir ..' mkdir -p $dir/templates/$dir touch $dir/templates/$dir/$dir.html mkdir $dir/static touch $dir/static/style.css touch $dir/__init__.py touch $dir/views.py touch $dir/models.py touch $dir/forms.py done

Commençons par créer des fonctionnalités pour le module d'accueil.

Ouvrez views.py dans le répertoire personnel et mettez-le à jour avec le code ci-dessous.

from flask import render_template, Blueprint home = Blueprint('home', __name__, template_folder='templates', static_folder='static') @home.route('/') def index(): return render_template('home/home.html')

Dans ce fichier, nous avons importé la classe Blueprint de Flask et l'avons instanciée avec les paramètres requis avec des modèles séparés et un dossier statique. Ensuite, nous utilisons la décoration @home pour déclarer l'itinéraire associé de la méthode de vue appelée index.

Créez maintenant un modèle base.html Jinja2 sous le répertoire de modèles de l'application. Utilisez le code ci-dessous pour mettre à jour le fichier.

from Software Testing Help.

Learn More >> {% endblock %}

Nous avons étendu le fichier base.html de Bootstrap. Notez l'utilisation de div de la classe container et hero-unit. De plus, nous avons créé un bouton permettant aux utilisateurs d'en savoir plus. Nous avons modifié ce code HTML et utilisé des classes du framework Bootstrap de Twitter.

Actualisez maintenant la page dans le navigateur à l'adresse http: // localhost: 8080 / hello2.html pour voir l'apparence modifiée de hello2.html.

La vue de Changed Hello2 ressemblera à celle illustrée ci-dessous.

HelloWorld2_View_Bootstrap
Vue Hello2 avec Bootstrap

L'utilisation de Flask-Bootstrap dépend entièrement des blocs disponibles pour le remplacement ou la modification. Nous pouvons utiliser les blocs mentionnés ci-dessous pour personnaliser l'expérience. Une liste détaillée de tous les blocs possibles peut être consultée sur https://pythonhosted.org/Flask-Bootstrap/basic-usage.html.

Parfois, lorsque nous voulons simplement modifier un bloc plutôt que de le remplacer complètement, nous pouvons utiliser la fonction super () de Jinja2 pour obtenir les résultats.

Créez un fichier appelé hello2.css sous hello2 / static et placez l'extrait de code ci-dessous pour styliser la couleur du paragraphe dans hello2 / hello.html.

programme d'arbre binaire simple en c ++
p { color: orange; }

Prenez l'extrait de code ci-dessous et placez-le dans hello2 / hello.html.

{% block styles } {{ super() }} {% endblock %}

Ouvrez maintenant views.py du Flask Blueprint hello2 et modifiez l'instruction blueprint comme indiqué ci-dessous.

hello2 = Blueprint('hello2', __name__, template_folder='templates', static_folder='static')

Accédez à nouveau à l'URL enregistrée de Flask Blueprint, c'est-à-dire http: // localhost: 8080 / hello2. Le résultat en raison des modifications effectuées jusqu'à présent devrait ressembler à celui ci-dessous.

Hello2 Vue modifiée
Hello2 Vue modifiée

Flask Docker

Docker aide à conteneuriser une application. Il isole l'environnement dont l'application Flask a besoin de manière à ce qu'il n'y ait aucune exigence d'environnements virtualisés complets tels que des machines virtuelles.

En outre, les conteneurs docker ont une empreinte minimale et sont plus confortables à gérer et à évoluer à l'aide d'une plate-forme d'orchestration. De nos jours, alors que toutes les autres applications ont également un déploiement en conteneur, nous devons également apprendre à déployer notre exemple d'application en tant que conteneur Docker.

Un conteneur basé sur Linux peut fonctionner sur Windows et un MAC. Une application Flask dockérisée est donc déployable sur n'importe quel système d'exploitation, quel que soit le système d'exploitation dans lequel elle a été construite.

Dans cette section, nous expliquerons les étapes de l'ancrage d'une application Flask. Nous allons dockeriser ce projet afin qu'il puisse être déployé dans un conteneur avec toutes les dépendances à l'intérieur.

Première, installer Docker sur votre machine.

sudo apt-get installer docker.io

Une fois l'installation terminée, accédez au répertoire racine de notre exemple de projet et créez un Dockerfile.

Écrivez le code ci-dessous dans ce Dockerfile.

FROM python:3 ADD . /flaskTutorialApp WORKDIR /flaskTutorialApp RUN pip install -r requirements.txt ENTRYPOINT ('python') CMD ('run.py')

Mettez à jour le fichier config.py et remplacez la base de données par SQLite, comme indiqué ci-dessous.

java interview question et réponse pour plus frais
# The SQLAlchemy connection string. SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'app.db') # SQLALCHEMY_DATABASE_URI = 'mysql://myapp@localhost/myapp'

De plus, si c'est la première fois que vous travaillez avec SQLite dans cette série de didacticiels, veuillez créer l'utilisateur admin en utilisant la commande flask fab create-admin.

Vérifiez si l'utilisateur Admin peut se connecter à l'application.

Créez maintenant l'image docker de notre exemple d'application à l'aide de la commande ci-dessous.

sudo docker build --tag flask-tutorial

Cette commande prend un certain temps car elle télécharge des ressources à partir du hub docker. Une fois cette commande terminée, vérifiez que les images sont apparues en utilisant la commande ci-dessous.

sudo docker images

Maintenant, exécutez cette image Docker récemment créée.

sudo docker run -p 5001:8080 flask-tutorial:latest

La console affichera les messages du journal du serveur de développement.

L'installation de Docker entraîne la création d'une carte réseau virtuelle avec le nom docker0. Recherchez l'adresse IP à l'aide de la commande sudo ifconfig. Une fois que vous avez obtenu l'adresse IP de Docker, vous pouvez accéder à l'application en accédant à l'URL ci-dessous.

http: //: 5001

Une fois que vous êtes sûr du développement de l'application, vous pouvez déployer votre image Docker sur le Docker Hub pour que les autres puissent la télécharger et l'utiliser.

Tester le plan du flacon

Maintenant, créons quelques tests pour tester le Blueprint hello2. Voyons si notre exemple d'application renvoie le code HTTP correct lorsque le client envoie une requête Get pour les ressources au point de terminaison / hello2 ou non. Si vous vous en souvenez, nous avons enregistré notre Flask Blueprint hello2 avec un url_prefix avec la valeur / hello2.

Créez un fichier appelé test_blueprint.py sous tests et ajoutez-y le test suivant.

def test_hello2(client): resp = client.get('/hello2') assert 308 == resp.status_code

HTTP 308 appartient à la redirection permanente, et il est prévu que notre application Flask ait besoin de rediriger la demande vers les ressources liées au plan appelé hello2.

Ajoutons maintenant un autre test pour vérifier le chemin racine des ressources de notre Blueprint. Ajoutons un test pour voir s'il a une valeur ou non.

from app.hello2 import hello2 def test_rootpath(): assert hello2.root_path is not None

Maintenant, exécutons ces tests avec les autres tests pour nous assurer qu'ils réussissent.

pytest -v

Vous verrez une sortie similaire des résultats du test, comme indiqué ci-dessous.

Plan directeur des résultats Pytest
Plan directeur des résultats Pytest

Maintenant, validez toutes les modifications dans le référentiel et publiez ces modifications dans le référentiel distant sur Github. Comparez les différences avec le code avec celui de la branche principale et créez une pull request s'il n'y a pas de conflit.

La demande d'extraction appelle les tâches de construction qui font partie de notre flux de travail Github. Si toutes les vérifications des pull requests du tutorial-4 n'échouent pas, nous pouvons fusionner en toute sécurité cette branche avec le master.

Tutoriel Git Actions-4
Tutoriel Git Actions-4

Questions fréquemment posées

Q # 1) Qu'est-ce que Flask BluePrint?

Répondre: Flask Blueprint est un moyen de structurer une application Flask en modules plus petits et réutilisables. Un Blueprint Flask a ses ressources séparées telles que des vues, des modèles, des fichiers statiques, des modèles, des formulaires, etc. Nous utilisons l'approche Flask Blueprint pour créer des applications Flask facilement maintenables et évolutives.

Q # 2) Comment utilisez-vous Flask Blueprint?

Répondre: Pour utiliser Flask Blueprint, nous devons l'importer et l'enregistrer avec l'objet Flask Application, à l'aide de la méthode app.register_blueprint. Nous pouvons passer une valeur au paramètre url_prifix pour ajouter un chemin vers les routes du Flask Blueprint.

Conclusion

Dans ce didacticiel, nous avons expliqué les Blueprints Flask ainsi que les concepts de création de ressources statiques pour une application Flask. Nous avons exploré les avantages de l'utilisation de Flask Blueprint ainsi que les réflexions sur les ressources de Blueprint à l'aide d'un plugin Flask appelé Flask-Bootstrap.

Nous avons également couvert les concepts de création de l'image Docker de l'exemple d'application du didacticiel Flask. De plus, nous avons également créé deux tests pour valider les Blueprints Flask.

Dans notre prochain didacticiel, nous couvrirons les modèles couramment suivis lors de la création de fonctionnalités dans les applications Web à l'aide de Flask.

=> Visitez ici pour apprendre Flask From Scratch

lecture recommandée

^