I modelli Jinja offrono un linguaggio potente che puoi utilizzare per creare facilmente pagine Web dinamiche.

L'integrazione di Jinja con FastAPI ti consente di creare pagine Web dinamiche che integrano perfettamente Python codice con HTML, consentendoti di separare il livello di presentazione della tua applicazione dalla logica strato. Con le pagine Web dinamiche, puoi generare contenuti personalizzati e basati sui dati, migliorando le esperienze degli utenti.

Cos'è Jinja?

Jinja è un motore di modelli robusto e ricco di funzionalità per Python che genera pagine Web dinamiche. Jinja Templating supporta ereditarietà, istruzioni condizionali, cicli e varie funzionalità che semplificano la creazione di pagine Web dinamiche.

Puoi combinare FastAPI e Jinja per creare pagine Web con un layout coerente in grado di visualizzare dati in tempo reale e gestire l'input dell'utente. Puoi anche ottenere separazione degli interessi, rendendo il tuo codice più gestibile e più facile da capire.

Impostare un progetto FastAPI

instagram viewer

Per iniziare, dovrai configurare un progetto FastAPI.

  1. Creare e attivare un ambiente virtuale usando questi comandi da terminale:
    python -m venv env
    # Su Unix/Mac OS: 
    sorgente venv/bin/activate
    # Su Windows:
    .\venv\Scripts\activate
  2. Installa FastAPI e le dipendenze richieste.
    pip install "fastapi[tutto]"
  3. Crea una directory di progetto il mio blog.
  4. Crea un file Python principale.py nella directory del tuo progetto.
  5. Aggiungere il seguente codice al file principale.py file:
    da fastapi importare API veloce
    fake_posts_db = [{
    'titolo': "Primo post sul blog",
    'contenuto': 'Contenuto del primo post del blog.',
    'autore': 'Giovanni Rossi',
    'data di pubblicazione': '2023-06-20',
    'Commenti': [
     {'autore': 'Alice', 'contenuto': 'Ottimo post!'},
     {'autore': "Bob", 'contenuto': 'Lettura interessante.'}
     ],
    'stato': 'pubblicato'
    },{
    'titolo': "Secondo post sul blog",
    'contenuto': 'Contenuto del secondo post del blog.',
    'autore': "Jane Smith",
    'data di pubblicazione': Nessuno,
    'Commenti': [],
    'stato': 'bozza'
    }]
    

    app = FastAPI()
    @app.get("/about")
    defDi():
    ritorno"Tutto quello che devi sapere su Simple Blog"
    Il codice precedente crea una semplice applicazione FastAPI con un singolo endpoint che restituisce una risposta JSON quando si accede tramite l'URL corrispondente. Puoi usa un dizionario Python come questo al posto di un vero e proprio database; aiuta a ridurre la complessità concentrandosi sull'obiettivo primario.
  6. Eseguire il server.
    uvicorn main: app --reload

Visita http://localhost: 8000/circa nel tuo browser per vedere la risposta del server.

Integrazione dei modelli Jinja

Dopo aver impostato correttamente il tuo progetto, ora puoi aggiungervi il template Jinja.

  1. Nel principale.py importare i seguenti moduli:
    da fastapi.templating importare Modelli Jinja2
    da file fastapi.static importare File statici
  2. Sotto il app variabile, creare un'istanza di Modelli Jinja2 class e passa la directory che conterrà i tuoi modelli.
    modelli = Jinja2Templates (directory="modelli")
  3. Dopo il modelli variabile, aggiungere la seguente riga di codice:
    app.mount("/statico", StaticFiles (directory="statico"), nome="statico")
    Il codice sopra monta il file statico directory e indica a FastAPI di servire tutti i file statici che si trovano nella directory quando inizia un URL di richiesta /static.
  4. In il mio blog directory crea due directory, modelli per contenere file HTML e statico che conterrà tutti i file statici.

Con questi passaggi completati, hai integrato con successo Jinja Templating nel tuo progetto.

Creazione di una pagina Web dinamica con Jinja

Jinja fornisce un ricco set di sintassi e funzionalità per creare modelli dinamici.

In questa sezione, vedrai come utilizzare la sintassi dei modelli Jinja per creare pagine web dinamiche.

Racchiudi i tag del modello con a parentesi graffa E simbolo di percentuale su entrambi i lati. È possibile utilizzare tali tag per eseguire il flusso di controllo e le operazioni logiche nel modello. Alcuni tag modello comunemente usati includono:

  • Condizione: Esegue il blocco di codice se la condizione è vera.
    {% Se condizione %}...{% endif %}
  • Ciclo continuo: Itera su un iterabile ed esegue il blocco di codice per ogni elemento.
    {% per articolo In iterabile %}...{% endfor %}
  • Includere: Include un altro modello all'interno del modello corrente.
    {% includere 'nome_modello.html' %}
  • Bloccare: definisce un blocco che i modelli figlio possono sovrascrivere utilizzando l'ereditarietà.
    {% block block_name %}...{% endblock %}
  • Estendere: consente al modello figlio di ereditare ed estendere il modello padre.
    {% extend parent_temp.html %}

Questi tag forniscono un modo flessibile ed espressivo per generare contenuto HTML basato su dati dinamici e controllare la logica della tua applicazione.

Ereditarietà del modello

Jinja Templateting supporta l'ereditarietà dei modelli. Ciò consente di definire un modello di base (padre) con un layout e sezioni comuni che un modello figlio può estendere o sovrascrivere. Un modello figlio può utilizzare il Estendere tag per ereditare ed estendere il modello principale.

Creare un base.html file nel modelli directory con il seguente codice.

html>
<html>
<Testa>
<titolo>{% block title %}Blog semplice{% endblock %}titolo>
Testa>
<corpo>
<h1>{% block header %}Blog semplice{% endblock %}h1>
 {% blocca contenuto %}
 {% blocco finale %}
 {% include "footer.html" %}
corpo>
html>

In questo modo, hai un modello padre che contiene il codice comune per tutti i tuoi modelli, consentendo al modello figlio di ereditarlo ed estenderlo come richiesto.

Nel modelli cartella crea un piè di pagina.html file con il seguente codice.

<piè di pagina>
<P>© 2023 Blog semplice. Tutti i diritti riservati.P>
<UNhref="{{ url_for('about') }}">DiUN>
piè di pagina>

piè di pagina.html è un modello incluso che contiene il codice HTML per la sezione del piè di pagina. Puoi riutilizzarlo su più pagine includendolo nel modello di base utilizzando il file Includere etichetta.

Nel modelli cartella crea un blog.html file con il seguente codice.

{% estende "base.html" %}
{% block title %}Blog semplice - Pagina del blog{% endblock %}


{% block header %}Blog semplice - Pagina del blog{% endblock %}


{% blocca contenuto %}
<h2>Numero totale di post: {{ posts|lunghezza }}h2>


 {% per post nei post %}
<divclasse="inviare">


 {% if post.status == 'pubblicato' %}
<h3>{{ titolo del post }}h3>
<P>{{ post.content|tronca }}P>
<P>Pubblicato il: {{ post.publication_date }}P>


<h4>Commenti:h4>
<Ul>
 {% per commento in post.comments %}
<liclasse="commento">{{ comment.author }}-: {{ comment.content }}li>
 {% fine per %}
Ul>
 {% altro %}
<P>Questo post è ancora in modalità bozza.P>
 {% finisci se %}
div>
<ora>
 {% fine per %}
{% blocco finale %}

Questo modello figlio eredita da base.html usando il Estendere etichetta. Sostituisce i blocchi specifici definiti nel modello di base per fornire contenuto personalizzato per la pagina del blog. Include anche la logica e l'iterazione necessarie per visualizzare un post e i commenti associati.

Espressioni

Jinja supporta un'ampia gamma di espressioni, incluse operazioni aritmetiche, confronti e operazioni logiche. Per esempio:

{{2 + 2}} // output: 4

Sostituzione variabile

Per visualizzare le variabili nel modello, racchiuderle tra doppie parentesi graffe. Per esempio:

{{post.title}} // output: 'Primo post sul blog'

Filtri

I filtri modificano l'output di una variabile. Puoi aggiungerne uno dopo una variabile usando il simbolo pipe (|). Per esempio:

{{post|lunghezza}} // output: 2

Puoi aggiungere commenti in linea e commenti multilinea nei tuoi modelli. Jinja ignorerà questi commenti durante il rendering del modello, quindi sono utili per aggiungere spiegazioni all'interno di un modello.

{# #} // in linea
{% commento %}... {% commento finale %} // multilinea

URL

Per consentire di generare collegamenti ipertestuali corretti ad altre pagine all'interno dell'applicazione, il contesto del modello Jinja include a url_for funzione. Per esempio:

<UNhref="{{ url_for('about') }}">DiUN>

Il codice sopra diventa http://localhost: 8000/circa. Vedrai anche come usare il url_for funzione per ottenere percorsi di file statici in seguito.

Questi sono solo alcuni degli aspetti fondamentali della sintassi del Jinja Templating. Jinja Templating offre molte più caratteristiche e funzionalità, come macro, contesto del modello e altro, per rendere la creazione e la personalizzazione del modello efficiente e flessibile.

Passaggio di dati ai modelli

Ora che hai i modelli pronti, devi passare i dati dagli endpoint FastAPI ai modelli per il rendering.

Aggiungere il seguente codice al file principale.py file:

da fastapi importare FastAPI, richiesta
da fastapi.responses importare Risposta HTML
@app.get("/", response_class=RispostaHTML)
asincronodefread_posts(richiesta: Richiesta):
ritorno modelli. ModelloRisposta("blog.html", {"richiesta": richiesta, 
"post": fake_posts_db})

Il codice definisce un endpoint FastAPI che gestisce una richiesta GET all'URL radice ("/") e restituisce un Risposta HTML generato dal blog.html modello. Passa un dizionario di contesto, contenente la corrente oggetto di richiesta E fake_posts_db, nel modello. In questo modo Jinja può rendere i dati accurati e dinamici.

Visita http://localhost: 8000/ sul tuo browser e dovresti vedere qualcosa di simile a questo:

Hai passato correttamente i dati nei modelli per il rendering.

Servire file statici

Oltre al rendering di modelli dinamici, FastAPI fornisce anche funzionalità per servire file statici come file CSS, file JavaScript e immagini.

Utilizzerai i CSS per migliorare l'aspetto della pagina.

Nel statico directory, creare un file styles.css file con il seguente codice.

corpo {
famiglia di font: Aria, sans-serif;
margine: 0;
imbottitura: 20px;
colore di sfondo: #f5f5f5;
}
h1, h2, h3, h4 {
colore: #333;
}


.inviare {
colore di sfondo: #F F F;
imbottitura: 20px;
margine inferiore: 20px;
bordo-raggio: 5px;
scatola-ombra: 0 2px 4pxrgb(0, 0, 0, 0.1);
}


.inviareh3 {
margine superiore: 0;
}


.inviareP {
margine inferiore: 10px;
}


.inviareUl {
tipo di stile elenco: nessuno;
padding-sinistra: 0;
}


.commento {
margine inferiore: 10px;
imbottitura: 10px;
colore di sfondo: #f9f9f9;
bordo-raggio: 5px;
}
piè di pagina {
colore di sfondo: #f2f2f2;
imbottitura: 10px;
allineamento del testo: centro;
}

Modifica il Testa elemento del base.html modello come segue:

<Testa>
<titolo>{% block title %}Blog semplice{% endblock %}titolo>
<collegamentohref="{{ url_for('static', path='/styles.css') }}"rel="foglio di stile">
Testa>

La funzione url_for() genera un URL (percorso) per il styles.css (/static/styles.css) nel file statico directory che viene poi servita automaticamente da FastAPI.

Visita http://localhost: 8000/ sul tuo browser.

Le stesse procedure si applicano alla pubblicazione di file immagine e JavaScript.

Ricordati di seguire le migliori pratiche

Quando si lavora con Jinja Templating in FastAPI, è importante seguire alcune best practice per garantire una base di codice ben organizzata ed efficiente.

  • Organizza i modelli in una directory dedicata e prendi in considerazione l'utilizzo di sottodirectory per i modelli correlati.
  • Utilizza l'ereditarietà dei modelli per creare modelli di base riutilizzabili ed estenderli per contenuti specifici.
  • Seleziona attentamente i dati da passare ai modelli, mantenendo il payload leggero e utilizza processori di contesto o middleware per i dati di uso comune.
  • Utilizza le funzionalità di Jinja Templating come macro, filtri e strutture di controllo per migliorare la riusabilità e la leggibilità del codice.
  • Ottimizza le prestazioni implementando strategie di memorizzazione nella cache per i modelli statici, utilizzando le intestazioni di memorizzazione nella cache HTTP e profilando i colli di bottiglia delle prestazioni.

Seguendo queste best practice, puoi mantenere un progetto strutturato, ottimizzare le prestazioni di rendering e sfruttare in modo efficiente le funzionalità di Jinja Templating nelle tue applicazioni FastAPI.

Utilizzo di FastAPI per la creazione di RestAPI

Oltre alla creazione di applicazioni che richiedono modelli di rendering. FastAPI eccelle nella creazione di RestAPI grazie alle sue elevate prestazioni, alla sintassi di facile utilizzo, alla generazione automatica della documentazione e alla scalabilità. Queste caratteristiche rendono FastAPI ideale per lo sviluppo efficiente di solide API web.