Jinja2 est un moteur de template écrit en Python pur. Il fournit une syntaxe non-XML inspirée de Django mais prend en charge les expressions en ligne et un environnement en mode sandbox facultatif. Il est petit mais rapide, en plus d’être un moteur de gabarit autonome facile à utiliser. Flask est un framework micro web basé sur Python qui vous permet d’écrire vos applications web rapidement et efficacement..

Dans cette série en trois parties, je commencerai par les bases de la modélisation de Jinja2 du point de vue de Flask. Dans les parties suivantes de cette série, je traiterai de thèmes avancés tout en apprenant à disposer des modèles dans une application basée sur Flask dans une conception modulaire et extensible..

Je suppose que vous avez une compréhension de base des meilleures pratiques de configuration de Flask et de l’environnement en utilisant virtualenv à suivre lors du développement d’une application Python.

Installation de packages

Flask est livré avec Jinja2 et nous devons donc installer Flask. Pour cette série, je recommande d'utiliser la version de développement de Flask, qui inclut une prise en charge de la ligne de commande beaucoup plus stable, parmi de nombreuses autres fonctionnalités et améliorations apportées à Flask en général..

pip installer https://github.com/mitsuhiko/flask/tarball/master

Besoin d'un moteur de template?

Dans Flask, nous pouvons écrire une application Web complète sans avoir recours à un moteur tiers de création de modèles. Regardons un petit Bonjour le monde app ci-dessous:

depuis une importation de flacon Flask app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ hello /') def hello_world (utilisateur = aucun): utilisateur = utilisateur ou' Shalabh 'retourne "     
Bonjour% s!
 
Bienvenue dans le monde de Flask!
  "% utilisateur si __name__ == '__main__': app.run ()

Il est évident que le modèle d’écriture d’une application qui précède n’est pas réalisable dans le cas d’une application Web réelle où les codes HTML, CSS et JS s’étendent sur des milliers de lignes de code. Ici, la modélisation nous sauve car nous pouvons structurer notre code de vue en gardant nos modèles séparés. Le flacon prend en charge Jinja2 par défaut, mais tout autre moteur de gabarit peut également être utilisé de manière appropriée..

Disposer des modèles

Par défaut, Flask s'attend à ce que les modèles soient placés dans un dossier nommé des modèles au niveau racine de l'application. Flask lit alors automatiquement le contenu en rendant ce dossier disponible pour être utilisé avec le render_template () méthode. Je vais démontrer la même chose en restructurant le trivial Bonjour le monde application ci-dessus.

La structure de l'application serait comme indiqué ci-dessous.

flask_app / my_app.py templates / - index.html

L'application elle-même

flask_app / my_app.py

importation de flacon Flacon, render_template, demande app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ hello /') def hello_world (utilisateur = Aucun): utilisateur = utilisateur ou' Shalabh 'renvoie render_template (' index.html ', utilisateur = utilisateur)

flask_app / templates / index.html

     
Bonjour utilisateur!
 
Bienvenue dans le monde de Flask!
  

Pour exécuter l'application, il suffit d'exécuter la commande suivante sur la ligne de commande:

flask --app = my_app run

Ouvrez http://127.0.0.1:5000/ dans un navigateur pour voir l'application en action. Le résultat serait le même dans le cas de http://127.0.0.1:5000/hello.

Essayez d’ouvrir l’URL avec votre nom en dernier lieu. Donc, si vous vous appelez John, l’URL serait http://127.0.0.1:5000/hello/John. Maintenant, la page ressemblerait à ceci:

Il est assez simple que dans la méthode Bonjour le monde la dernière partie de l'URL après Bonjour est récupéré à partir de la demande et transmis au contexte du modèle rendu en utilisant render_template (). Cette valeur est ensuite analysée à partir du contexte de modèle à l'aide de l'espace réservé Jinja2. utilisateur. Cet espace réservé évalue toutes les expressions qui y sont placées, en fonction du contexte du modèle..

Comprendre les blocs et l'héritage dans les modèles

Habituellement, toute application Web comporte un certain nombre de pages Web différentes. Les blocs de code tels que les en-têtes et les pieds de page seront les mêmes dans presque toutes les pages du site. De même, le menu reste le même. En fait, généralement, seul le bloc de conteneur central change et le reste reste généralement le même. Pour cela, Jinja2 fournit un excellent moyen d'héritage entre les modèles. C'est une bonne pratique d'avoir un modèle de base où nous pouvons structurer la présentation de base du site avec l'en-tête et le pied de page..

Je vais créer une petite application pour présenter une liste de produits dans différentes catégories. Pour le style, je vais utiliser le framework Bootstrap pour donner une conception de base aux modèles. La structure de l'application est maintenant comme indiqué ci-dessous.

flask_app / my_app.py templates / - base.html - home.html - product.html statique / css / - bootstrap.min.css - main.css js / - bootstrap.min.js

Ici static / css / bootstrap.min.css et statique / js / bootstrap.min.js peut être téléchargé à partir du site Web bootstrap mentionné ci-dessus. Le reste du code de l'application est démontré ci-dessous.

flask_app / my_app.py

importation de flacon Flacon, render_template, abort app = Flacon (__ nom__) PRODUITS = 'iphone': 'name': 'iPhone 5S', 'category': 'Téléphones', 'prix': 699,, 'galaxy' : 'name': 'Samsung Galaxy 5', 'category': 'Téléphones', 'price': 649,, 'ipad-air': 'name': 'iPad Air', 'category': 'Tablettes ',' prix ': 649,,' ipad-mini ': ' nom ':' iPad Mini ',' catégorie ':' Tablettes ',' prix ': 549 @ app.route (' / ') @ app.route ('/ home') def home (): return render_template ('home.html', products = PRODUCTS) @ app.route ('/ product /') def produit (clé): produit = PRODUITS.get (clé) si ce n'est pas produit: abort (404) return render_template (' product.html ', produit = produit) 

Dans ce fichier, j'ai codé en dur la liste de produits pour simplifier l'application et se concentrer uniquement sur la partie modèle. J'ai créé deux points de terminaison, maison et produit, où le premier sert à répertorier tous les produits et le dernier ouvre la page individuelle.

flask_app / static / css / main.css

body padding-top: 50px;  .top-pad padding: 40px 15px; text-align: center; 

Ce fichier contient un peu de CSS personnalisé que j'ai ajouté pour rendre les modèles plus lisibles. Regardons les modèles maintenant.

flask_app / templates / base.html

            
 % block container% % endblock% 
     

Notez l'utilisation de url_for () pour créer des URL pour des fichiers statiques et d'autres liens. C'est un outil très pratique fourni par Flask. En savoir plus à ce sujet dans la documentation. Un autre point important à noter ici est l'utilisation de % block container% % endblock%, Ce qui est une composante essentielle de Jinja2 pour rendre les modèles modulaires et héritables. Les deux prochains fichiers rendront ceci plus clair.

flask_app / templates / home.html

% extend 'base.html'% % le conteneur de blocs% 
 % pour id, produit dans products.iteritems ()% 
 
 produit ['nom'] $ produit ['prix'] 
 
 % endfor% 
 % endblock%

Voir comment ce modèle s'étend base.html et fournit le contenu de % bloc conteneur%. % pour % se comporte comme une boucle for normale dans toutes les langues que nous utilisons ici pour créer une liste de produits.

flask_app / templates / product.html

% extended 'home.html'% % le conteneur de blocs% 
 
produit ['nom']  catégorie de produit']  
 
$ produit ['prix']
 
 % endblock%

Le modèle ci-dessus implémente la page de produit individuelle.

Maintenant, lancez l'application en exécutant la commande suivante.

flask --app = my_app run

L'application en cours d'utilisation ressemblerait à celle présentée dans la capture d'écran ci-dessous. Il suffit d'ouvrir http://127.0.0.1:5000/home dans le navigateur.

Cliquez sur l'un des produits pour voir la page de produit individuelle.

Conclusion

Dans ce didacticiel, nous avons vu comment structurer la structure du modèle dans une application basée sur Flask utilisant Jinja2. Nous avons également vu comment utiliser des blocs pour exploiter l'héritage dans les modèles. 

Dans la prochaine partie de cette série, nous verrons comment écrire un filtre personnalisé, un processeur de contexte personnalisé et une macro..