Schablonieren mit Jinja2 in Flask Essentials

Jinja2 ist eine in reines Python geschriebene Template-Engine. Es bietet eine von Django inspirierte Nicht-XML-Syntax, unterstützt jedoch Inline-Ausdrücke und eine optionale Sandkastenumgebung. Es ist klein, aber schnell, abgesehen davon, dass es eine benutzerfreundliche, eigenständige Template-Engine ist. Flask ist ein auf Python basierendes Micro-Web-Framework, mit dem Sie Ihre Webanwendungen schnell und effizient schreiben können.

In dieser dreiteiligen Serie beginne ich mit den Grundlagen von Jinja2 aus der Perspektive von Flask. In den folgenden Teilen dieser Serie werde ich mich mit fortgeschrittenen Templating-Themen befassen und lernen, wie man Vorlagen in einer flaschenbasierten Anwendung in einem modularen und erweiterbaren Design auslegt.

Ich gehe davon aus, dass Sie über grundlegende Kenntnisse der bewährten Vorgehensweisen von Flask und der Umgebungseinstellung mit virtualenv verfügen, die bei der Entwicklung einer Python-Anwendung zu beachten sind.

Pakete installieren

Flask wird mit Jinja2 geliefert. Daher müssen wir lediglich Flask installieren. Für diese Serie empfehle ich die Verwendung der Entwicklungsversion von Flask, die neben vielen anderen Funktionen und Verbesserungen an Flask im Allgemeinen eine wesentlich stabilere Befehlszeilenunterstützung beinhaltet.

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

Brauchen Sie eine Templating Engine??

In Flask können wir eine vollständige Webanwendung schreiben, ohne dass eine Templating Engine eines Drittanbieters erforderlich ist. Schauen wir uns ein kleines an Hallo Welt App unten:

Flask app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ hello /') def hello_world (user = Keiner): user = user oder' Shalabh 'return "  Templating in Glaskolben   

Hallo% s!

Willkommen in der Welt von Flask!

"% user if __name__ == '__main__': app.run ()

Es ist offensichtlich, dass das obige Muster zum Schreiben einer Anwendung im Fall einer echten Webanwendung, bei der HTML-, CSS- und JS-Code Tausende von Codezeilen umfasst, nicht möglich ist. Hier erspart uns das Templating, weil wir unseren View-Code strukturieren können, indem wir unsere Templates getrennt halten. Flask bietet standardmäßig Unterstützung für Jinja2, es kann jedoch auch jede andere Templating Engine verwendet werden.

Vorlagen auslegen

Standardmäßig erwartet Flask, dass die Vorlagen in einem Ordner mit dem Namen gespeichert werden Vorlagen auf der Anwendungsstammebene. Flask liest dann automatisch den Inhalt, indem er diesen Ordner für die Verwendung mit dem zur Verfügung stellt render_template () Methode. Dasselbe werde ich zeigen, indem ich das Triviale umstrukturiere Hallo Welt Anwendung oben gezeigt.

Die Anwendungsstruktur würde wie folgt aussehen.

flask_app / meine_app.py templates / - index.html

Die Anwendung selbst

flask_app / my_app.py

Flask, render_template, request app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ hello /') def hello_world (user = None): user = user oder' Shalabh 'geben render_template zurück (' index.html ', user = user)

flask_app / templates / index.html

  Templating in Glaskolben   

Hallo Benutzer!

Willkommen in der Welt von Flask!

Um die Anwendung auszuführen, führen Sie einfach den folgenden Befehl in der Befehlszeile aus:

Flasche --app = Meine_App ausführen

Öffnen Sie http://127.0.0.1:5000/ in einem Browser, um die Anwendung in Aktion zu sehen. Das Ergebnis wäre auch bei http://127.0.0.1:5000/hello das gleiche.

Versuchen Sie, die URL mit Ihrem Namen als letzten Teil zu öffnen. Wenn Sie also John heißen, lautet die URL http://127.0.0.1:5000/hello/John. Nun würde die Seite so aussehen:

Es ist ziemlich einfach das in der Methode Hallo Welt der letzte Teil der URL nach Hallo wird aus der Anforderung abgerufen und an den Kontext der Vorlage übergeben, die mit gerendert wird render_template (). Dieser Wert wird dann mithilfe des Platzhalters Jinja2 aus dem Vorlagenkontext analysiert Nutzer . Dieser Platzhalter wertet je nach Kontext der Vorlage alle darin enthaltenen Ausdrücke aus.

Grundlegendes zu Blöcken und Vererbung in Vorlagen

Normalerweise hat jede Webanwendung eine Reihe von Webseiten, die sich voneinander unterscheiden. Codeblöcke wie Kopf- und Fußzeilen sind auf fast allen Seiten der Website gleich. Ebenso bleibt das Menü gleich. Normalerweise ändert sich nur der mittlere Containerblock, und der Rest bleibt normalerweise derselbe. Dafür bietet Jinja2 eine großartige Möglichkeit zur Vererbung von Vorlagen. Es empfiehlt sich, eine Basisvorlage zu haben, in der wir das grundlegende Layout der Site zusammen mit der Kopf- und Fußzeile strukturieren können.

Ich werde eine kleine Anwendung erstellen, um eine Liste von Produkten unter verschiedenen Kategorien zu präsentieren. Für das Styling benutze ich das Bootstrap-Framework, um den Vorlagen ein grundlegendes Design zu geben. Die Anwendungsstruktur sieht jetzt wie folgt aus.

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

Hier statisch / css / bootstrap.min.css und statisch / js / bootstrap.min.js kann von der Bootstrap-Website heruntergeladen werden. Der Rest des Anwendungscodes wird unten gezeigt.

flask_app / my_app.py

aus flask import flask, render_template, abbruch app = Flask (__ name__) PRODUKTE = 'iphone': 'name': 'iPhone 5S', 'category': 'Phones', 'price': 699,, 'galaxy' : 'name': 'Samsung Galaxy 5', 'category': 'Phones', 'price': 649,, 'ipad-air': 'name': 'iPad Air', 'category': 'Tablets ',' price ': 649,,' ipad-mini ': ' name ':' iPad Mini ',' category ':' Tablets ',' price ': 549 @ app.route (' / ') @ app.route ('/ home') def home (): return render_template ('home.html', products = PRODUKTE) @ app.route ('/ product /') def product (key): product = PRODUCTS.get (key) wenn nicht product: abort (404) Rückgabe von render_template (' product.html ', product = product) 

In dieser Datei habe ich die Produktliste hartcodiert, um die Anwendung zu vereinfachen und mich nur auf den Schablonenteil zu konzentrieren. Ich habe zwei Endpunkte erstellt, Zuhause und Produkt, wobei Ersteres der Zweck hat, alle Produkte aufzulisten, und Letzteres öffnet die individuelle Seite.

flask_app / static / css / main.css

Körper Polsteraufsatz: 50px;  .top-pad padding: 40px 15px; Text ausrichten: Mitte; 

Diese Datei enthält ein wenig benutzerdefiniertes CSS, das ich hinzugefügt habe, um die Vorlagen lesbarer zu machen. Schauen wir uns jetzt die Vorlagen an.

flask_app / templates / base.html

      Jinja2 Tutorial - Tutsplus     
Tutsplus - Jinja2 Tutorial
% block container% % endblock%

Beachten Sie die Verwendung von url_for () zum Erstellen von URLs für statische Dateien und andere Links. Es ist ein sehr praktisches Werkzeug, das von Flask bereitgestellt wird. Lesen Sie mehr dazu in der Dokumentation. Ein weiterer wichtiger Punkt, der hier zu beachten ist, ist die Verwendung von % block container% % endblock%, Dies ist eine sehr wichtige Komponente von Jinja2, um die Vorlagen modular und vererbbar zu machen. Die nächsten paar Dateien werden dies klarer machen.

flask_app / templates / home.html

% erweitert 'base.html'% % Blockcontainer% 
% für id, produkt in products.iteritems ()%

Produktname'] $ product ['price']

% endfor%
% endblock%

Sehen Sie, wie sich diese Vorlage erweitert base.html und liefert den Inhalt von % block container%. % zum % verhält sich wie eine normale for-Schleife in einer beliebigen Sprache, mit der wir hier eine Liste von Produkten erstellen.

flask_app / templates / product.html

% erweitert 'home.html'% % Blockcontainer% 

Produktname'] Produktkategorie']

$ product ['price']

% endblock%

Die obige Vorlage implementiert die einzelne Produktseite.

Führen Sie nun die App aus, indem Sie den folgenden Befehl ausführen.

Flasche --app = Meine_App ausführen

Die laufende App würde wie in der Abbildung unten aussehen. Öffnen Sie einfach http://127.0.0.1:5000/home im Browser.

Klicken Sie auf eines der Produkte, um die jeweilige Produktseite anzuzeigen.

Fazit

In diesem Lernprogramm haben wir gesehen, wie Sie die Vorlagenstruktur in einer Flask-basierten Anwendung mit Jinja2 gestalten. Wir haben auch gesehen, wie Blöcke verwendet werden können, um die Vererbung in Vorlagen zu nutzen. 

Im nächsten Teil dieser Serie erfahren Sie, wie Sie einen benutzerdefinierten Filter, einen benutzerdefinierten Kontextprozessor und ein Makro schreiben.