Templating With Jinja2 in Flask Essentials

Jinja2 è un motore di template scritto in puro Python. Fornisce una sintassi non XML ispirata a Django ma supporta espressioni inline e un ambiente sandboxed opzionale. È piccolo ma veloce, a parte essere un motore di template standalone facile da usare. Flask è un framework micro-web basato su Python che consente di scrivere le applicazioni Web in modo rapido ed efficiente.

In questa serie in tre parti, inizierò con le basi del templating di Jinja2 dal punto di vista di Flask. Nelle parti successive di questa serie, tratterò argomenti di templating avanzati mentre imparerò come disporre i modelli in un'applicazione basata su Flask in un design modulare ed estensibile.

Presumo che tu abbia una conoscenza di base delle migliori pratiche di installazione di Flask e dell'ambiente usando virtualenv da seguire durante lo sviluppo di un'applicazione Python.

Installazione dei pacchetti

Flask è confezionato con Jinja2, quindi abbiamo solo bisogno di installare Flask. Per questa serie, consiglio di utilizzare la versione di sviluppo di Flask, che include un supporto della riga di comando molto più stabile tra molte altre funzionalità e miglioramenti a Flask in generale.

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

Necessità di un motore di templatura?

In Flask, possiamo scrivere un'applicazione web completa senza la necessità di alcun motore di template di terze parti. Diamo un'occhiata a un piccolo Ciao mondo app di seguito:

da flask import Flask app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ ciao /') def hello_world (utente = Nessuno): utente = utente o' Shalabh 'ritorno "  Templatura in fiaschetta   

Ciao% s!

Benvenuti nel mondo di Flask!

"% utente se __name__ == '__main__': app.run ()

È ovvio che il modello sopra descritto di scrivere un'applicazione non è fattibile nel caso di una vera applicazione web in cui il codice HTML, CSS e JS varia in migliaia di righe di codice. Qui, il template ci salva perché possiamo strutturare il nostro codice di visualizzazione mantenendo separati i nostri modelli. Flask fornisce il supporto per Jinja2 di default, ma qualsiasi altro motore di template può anche essere usato come adatto.

Laying Out Templates

Per impostazione predefinita, Flask prevede che i modelli vengano posizionati in una cartella denominata modelli a livello di root dell'applicazione. Flask quindi legge automaticamente i contenuti rendendo questa cartella disponibile per l'uso con render_template () metodo. Dimostrerò lo stesso ristrutturando il banale Ciao mondo applicazione mostrata sopra.

La struttura dell'applicazione sarà come mostrato di seguito.

flask_app / my_app.py templates / - index.html

L'applicazione stessa

flask_app / my_app.py

da flask import Flask, render_template, request app = Flask (__ name__) @ app.route ('/') @ app.route ('/ hello') @ app.route ('/ ciao /') def hello_world (utente = Nessuno): utente = utente o' Shalabh 'restituisce render_template (' index.html ', utente = utente)

flask_app / templates / index.html

  Templatura in fiaschetta   

Ciao utente!

Benvenuti nel mondo di Flask!

Per eseguire l'applicazione, basta eseguire il seguente comando sulla riga di comando:

flask --app = my_app run

Apri http://127.0.0.1:5000/ in un browser per vedere l'applicazione in azione. Il risultato sarebbe lo stesso nel caso di http://127.0.0.1:5000/hello.

Prova ad aprire l'URL con il tuo nome come l'ultima parte di esso. Quindi, se il tuo nome è John, l'URL sarà http://127.0.0.1:5000/hello/John. Ora la pagina sarebbe simile a questa:

È piuttosto semplice nel metodo Ciao mondo l'ultima parte dell'URL dopo Ciao viene recuperato dalla richiesta e passato al contesto del modello che viene reso utilizzando render_template (). Questo valore viene quindi analizzato dal contesto del modello utilizzando il segnaposto Jinja2 utente . Questo segnaposto valuta tutte le espressioni che sono posizionate al suo interno, a seconda del contesto del modello.

Comprensione dei blocchi e dell'ereditarietà nei modelli

Di solito, qualsiasi applicazione web avrà un numero di pagine web che saranno diverse l'una dall'altra. I blocchi di codice come intestazioni e piè di pagina saranno uguali in quasi tutte le pagine del sito. Allo stesso modo, il menu rimane lo stesso. Di fatto, di solito, solo il blocco centrale del contenitore cambia e il resto di solito rimane lo stesso. Per questo, Jinja2 offre un ottimo modo di ereditare tra i modelli. È una buona pratica avere un modello base in cui possiamo strutturare il layout di base del sito insieme all'intestazione e al piè di pagina.

Creerò una piccola applicazione per mostrare un elenco di prodotti in diverse categorie. Per lo styling, userò il framework Bootstrap per dare un design di base ai template. La struttura dell'applicazione è ora come mostrato di seguito.

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

Qui static / css / bootstrap.min.css e statico / js / bootstrap.min.js può essere scaricato dal sito Web di bootstrap menzionato sopra. Il resto del codice dell'applicazione è illustrato di seguito.

flask_app / my_app.py

da flask import Flask, render_template, abort app = Flask (__ name__) PRODUCTS = '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 (): restituisce render_template ('home.html', products = PRODUCTS) @ app.route ('/ product /') prodotto def (chiave): product = PRODUCTS.get (chiave) se non prodotto: abort (404) return render_template (' product.html ', product = product) 

In questo file, ho hardcoded l'elenco dei prodotti per rendere l'applicazione più semplice e concentrarsi solo sulla parte dei template. Ho creato due endpoint, casaProdotto, dove il primo serve allo scopo di elencare tutti i prodotti e quest'ultimo apre la pagina individuale.

flask_app / static / css / main.css

body padding-top: 50px;  .top-pad padding: 40px 15px; allineamento del testo: centro; 

Questo file contiene un po 'di CSS personalizzato che ho aggiunto per rendere i modelli più leggibili. Diamo un'occhiata ai modelli ora.

flask_app / templates / base.html

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

Notare l'uso di url_for () per creare URL per file statici e altri collegamenti. È uno strumento molto utile fornito da Flask. Maggiori informazioni su questo nella documentazione. Un altro punto importante da notare qui è l'uso di % block container% % endblock%, che è una componente molto importante di Jinja2 che lavora per rendere i template modulari ed ereditabili. Il prossimo paio di file renderà questo più chiaro.

flask_app / templates / home.html

% estende 'base.html'% % block container% 
% per ID, prodotto in products.iteritems ()%

nome del prodotto'] $ product ['price']

% endfor%
% endblock%

Guarda come si estende questo modello base.html e fornisce il contenuto di % block container%. % per% si comporta come un ciclo normale in qualsiasi lingua che stiamo usando qui per creare un elenco di prodotti.

flask_app / templates / product.html

% estende 'home.html'% % block container% 

nome del prodotto'] categoria di prodotto']

$ product ['price']

% endblock%

Il modello sopra implementa la singola pagina del prodotto.

Ora esegui l'app eseguendo il seguente comando.

flask --app = my_app run

L'app in esecuzione sarà simile a quella mostrata nello screenshot qui sotto. Apri semplicemente http://127.0.0.1:5000/home nel browser.

Clicca su uno qualsiasi dei prodotti per vedere la pagina del singolo prodotto.

Conclusione

In questo tutorial, abbiamo visto come disporre la struttura del template in un'applicazione basata su Flask usando Jinja2. Abbiamo anche visto come i blocchi possono essere utilizzati per sfruttare l'ereditarietà nei modelli. 

Nella parte successiva di questa serie, vedremo come scrivere un filtro personalizzato, un processore di contesto personalizzato e una macro.