Jinja-sjablonen bieden een krachtige taal waarmee je eenvoudig dynamische webpagina's kunt maken.

Door Jinja te integreren met FastAPI kun je dynamische webpagina's maken die Python naadloos laten overvloeien code met HTML, zodat u de presentatielaag van uw applicatie kunt scheiden van de logica laag. Met dynamische webpagina's kunt u gepersonaliseerde en gegevensgestuurde inhoud genereren, waardoor de gebruikerservaring wordt verbeterd.

Wat is Jinja?

Jinja is een robuuste, feature-rijke template-engine voor Python die dynamische webpagina's genereert. Jinja Templating ondersteunt overerving, voorwaardelijke verklaringen, loops en verschillende functies die het maken van dynamische webpagina's vereenvoudigen.

U kunt FastAPI en Jinja combineren om webpagina's te maken met een consistente lay-out die realtime gegevens kan weergeven en gebruikersinvoer kan verwerken. Je kunt ook bereiken scheiding van zorgen, waardoor uw code beter onderhoudbaar en begrijpelijker wordt.

Zet een FastAPI-project op

instagram viewer

Om aan de slag te gaan, moet u een FastAPI-project opzetten.

  1. Creëer en activeer een virtuele omgeving met behulp van deze terminalopdrachten:
    python -m venv env
    # Op Unix/MacOS: 
    source venv/bin/activeren
    # Op Windows:
    .\venv\Scripts\activeren
  2. Installeer FastAPI en de vereiste afhankelijkheden.
    pip installeer "fastapi[all]"
  3. Maak een projectmap aan mijn blog.
  4. Maak een Python-bestand hoofd.py in uw projectmap.
  5. Voeg de volgende code toe aan het hoofd.py bestand:
    van snel importeren Snelle API
    nep_posts_db = [{
    'titel': 'Eerste blogpost',
    'inhoud': 'Inhoud van de eerste blogpost.',
    'auteur': 'John Doe',
    'publicatie datum': '2023-06-20',
    'opmerkingen': [
     {'auteur': 'Alice', 'inhoud': 'Goede post!'},
     {'auteur': 'Bob', 'inhoud': 'Interessant leesvoer.'}
     ],
    'toestand': 'gepubliceerd'
    },{
    'titel': 'Tweede blogpost',
    'inhoud': 'Inhoud van de tweede blogpost.',
    'auteur': 'Jane Smith',
    'publicatie datum': Geen,
    'opmerkingen': [],
    'toestand': 'voorlopige versie'
    }]
    

    app = SnelleAPI()
    @app.get("/over")
    defover():
    opbrengst"Alles wat je moet weten over Simple Blog"
    De bovenstaande code maakt een eenvoudige FastAPI-toepassing met een enkel eindpunt dat een JSON-antwoord retourneert wanneer het wordt geopend via de bijbehorende URL. Jij kan gebruik een Python-woordenboek zoals dit in plaats van een echte database; het helpt de complexiteit te verminderen en tegelijkertijd te focussen op het primaire doel.
  6. Voer de server uit.
    uvicorn main: app --reload

Bezoek http://localhost: 8000/ongeveer in uw browser om de reactie van de server te zien.

Jinja-templates integreren

Nadat u uw project met succes hebt opgezet, kunt u er nu Jinja-templating aan toevoegen.

  1. In de hoofd.py bestand, importeert u de volgende modules:
    van fastapi.templating importeren Jinja2Templates
    van fastapi.statischebestanden importeren Statische bestanden
  2. Onder de app variabele, maak een instantie van de Jinja2Templates class en geef de map door die uw sjablonen zal bevatten.
    sjablonen = Jinja2Templates (directory="Sjablonen")
  3. Na de Sjablonen variabele, voeg de volgende regel code toe:
    app.mount("/statisch", statische bestanden (directory="statisch"), naam="statisch")
    De bovenstaande code koppelt de statisch directory en instrueert FastAPI om alle statische bestanden in de directory te serveren wanneer een verzoek-URL begint met /static.
  4. In mijn blog map maak twee mappen, Sjablonen om HTML-bestanden te bewaren en statisch die alle statische bestanden zal bevatten.

Als deze stappen zijn voltooid, heb je Jinja Templating met succes geïntegreerd in je project.

Dynamische webpagina maken met Jinja

Jinja biedt een uitgebreide set syntaxis en functies om dynamische sjablonen te maken.

In dit gedeelte ziet u hoe u de Jinja-templatingsyntaxis kunt gebruiken om dynamische webpagina's te maken.

Sluit sjabloontags in met een accolade En procent symbool aan beide kanten. U kunt dergelijke tags gebruiken om controlestroom en logische bewerkingen in de sjabloon uit te voeren. Enkele veelgebruikte sjabloontags zijn:

  • Voorwaarde: Voert het codeblok uit als de voorwaarde waar is.
    {% als voorwaarde %}...{% endif %}
  • Lus: Itereert over een iterable en voert het codeblok voor elk item uit.
    {% voor item in herhaalbaar %}...{% endfor %}
  • Erbij betrekken: Bevat een andere sjabloon binnen de huidige sjabloon.
    {% erbij betrekken 'sjabloon_naam.html' %}
  • Blok: Definieert een blok dat onderliggende sjablonen kunnen overschrijven door middel van overerving.
    {% blok bloknaam %}...{% eindblok %}
  • Verlengen: Hiermee kan de onderliggende sjabloon de bovenliggende sjabloon overnemen en uitbreiden.
    {% verleng parent_temp.html %}

Deze tags bieden een flexibele en expressieve manier om HTML-inhoud te genereren op basis van dynamische gegevens en om de logica van uw toepassing te controleren.

Sjabloon overerving

Jinja Templating ondersteunt sjabloonovererving. Hiermee kunt u een basis (bovenliggend) sjabloon definiëren met een gemeenschappelijke lay-out en secties die een onderliggend sjabloon kan uitbreiden of overschrijven. Een onderliggende sjabloon kan de Verlengen tag om de bovenliggende sjabloon over te nemen en uit te breiden.

Maak een basis.html bestand in de Sjablonen map met de volgende code.

html>
<html>
<hoofd>
<titel>{% block title %}Eenvoudige blog{% endblock %}titel>
hoofd>
<lichaam>
<h1>{% blokkop %}Eenvoudig blog{% eindblok %}h1>
 {% blokinhoud %}
 {% eindblok %}
 {% include "footer.html" %}
lichaam>
html>

Op deze manier heeft u een bovenliggende sjabloon die de gemeenschappelijke code voor al uw sjablonen bevat, zodat de onderliggende sjabloon deze kan overnemen en naar behoefte kan uitbreiden.

In de Sjablonen map maak een footer.html bestand met de volgende code.

<voettekst>
<P>© 2023 Eenvoudige blog. Alle rechten voorbehouden.P>
<Ahref="{{ url_for('about') }}">OverA>
voettekst>

footer.html is een meegeleverde sjabloon die de HTML-code voor het voettekstgedeelte bevat. U kunt het op meerdere pagina's hergebruiken door het op te nemen in de basissjabloon met behulp van de Erbij betrekken label.

In de Sjablonen map maak een blog.html bestand met de volgende code.

{% breidt "base.html" %} uit
{% block title %}Simple Blog - Blogpagina{% endblock %}


{% block heading %}Simple Blog - Blogpagina{% endblock %}


{% blokinhoud %}
<h2>Totaal aantal berichten: {{ berichten|lengte }}h2>


 {% voor bericht in berichten %}
<divklas="na">


 {% if post.status == 'gepubliceerd' %}
<h3>{{ post.title }}h3>
<P>{{ post.content|afkappen }}P>
<P>Gepubliceerd op: {{ post.publication_date }}P>


<h4>Opmerkingen:h4>
<ul>
 {% voor reactie in post.comments %}
<liklas="opmerking">{{ comment.author }}-: {{ comment.content }}li>
 {% endfor %}
ul>
 {% anders %}
<P>Dit bericht bevindt zich nog in conceptmodus.P>
 {% stop als %}
div>
<uur>
 {% endfor %}
{% eindblok %}

Deze onderliggende sjabloon erft van basis.html de... gebruiken Verlengen label. Het overschrijft specifieke blokken die in de basissjabloon zijn gedefinieerd om aangepaste inhoud voor de blogpagina te bieden. Het bevat ook de nodige logica en iteratie voor het weergeven van een bericht en bijbehorende opmerkingen.

Uitdrukkingen

Jinja ondersteunt een breed scala aan uitdrukkingen, waaronder rekenkundige bewerkingen, vergelijkingen en logische bewerkingen. Bijvoorbeeld:

{{2 + 2}} // uitvoer: 4

Variabele vervanging

Om variabelen in de sjabloon uit te voeren, plaatst u ze tussen dubbele accolades. Bijvoorbeeld:

{{post.title}} // uitvoer: 'Eerste blogbericht'

Filters

Filters wijzigen de uitvoer van een variabele. U kunt er een toevoegen na een variabele met behulp van het pipe-symbool (|). Bijvoorbeeld:

{{post|length}} // uitvoer: 2

U kunt inline-opmerkingen en meerregelige opmerkingen toevoegen aan uw sjablonen. Jinja negeert deze opmerkingen tijdens het renderen van een sjabloon, dus ze zijn handig voor het toevoegen van uitleg binnen een sjabloon.

{# #} // in lijn
{% opmerking %}... {% eindcommentaar %} // multiline

URL's

Om u in staat te stellen correcte hyperlinks naar andere pagina's binnen de applicatie te genereren, bevat de Jinja-sjablooncontext een url_voor functie. Bijvoorbeeld:

<Ahref="{{ url_for('about') }}">OverA>

De bovenstaande code wordt http://localhost: 8000/ongeveer. Je ziet ook hoe je de url_voor functie om later statische bestandspaden te krijgen.

Dit zijn slechts enkele van de fundamentele aspecten van de Jinja Templating-syntaxis. Jinja Templating biedt veel meer functies en functionaliteiten, zoals macro's, sjablooncontext en meer, om het maken en aanpassen van sjablonen efficiënt en flexibel te maken.

Gegevens doorgeven aan sjablonen

Nu u uw sjablonen klaar heeft, moet u gegevens van uw FastAPI-eindpunten doorgeven aan de sjablonen voor weergave.

Voeg de volgende code toe aan het hoofd.py bestand:

van snel importeren FastAPI, aanvraag
van fastapi.antwoorden importeren HTMLReactie
@app.get("/", response_class=HTMLResponse)
asynchroondeflees_posts(verzoek: verzoek):
opbrengst Sjablonen. SjabloonReactie("blog.html", {"verzoek": verzoek, 
"berichten": fake_posts_db})

De code definieert een FastAPI-eindpunt dat een GET-verzoek naar de root-URL ("/") afhandelt en een HTMLReactie gegenereerd uit de blog.html sjabloon. Het geeft een contextwoordenboek door met de huidige voorwerp aanvragen En nep_berichten_db, in de sjabloon. Op deze manier kan Jinja nauwkeurige en dynamische gegevens weergeven.

Bezoek http://localhost: 8000/ in uw browser en u zou zoiets als dit moeten zien:

U hebt met succes gegevens doorgegeven aan de sjablonen voor weergave.

Statische bestanden aanbieden

Naast het weergeven van dynamische sjablonen, biedt FastAPI ook functionaliteit voor het bedienen van statische bestanden zoals CSS-bestanden, JavaScript-bestanden en afbeeldingen.

U gebruikt CSS om het uiterlijk van de pagina te verbeteren.

In de statisch map, maak een stijlen.css bestand met de volgende code.

lichaam {
font-familie: Ariaal, schreefloos;
marge: 0;
opvulling: 20px;
Achtergrond kleur: #f5f5f5;
}
h1, h2, h3, h4 {
kleur: #333;
}


.na {
Achtergrond kleur: #fff;
opvulling: 20px;
marge-bodem: 20px;
grensradius: 5px;
doos-schaduw: 0 2px 4pxRGBA(0, 0, 0, 0.1);
}


.nah3 {
marge-top: 0;
}


.naP {
marge-bodem: 10px;
}


.naul {
lijst-stijl-type: geen;
padding-links: 0;
}


.opmerking {
marge-bodem: 10px;
opvulling: 10px;
Achtergrond kleur: #f9f9f9;
grensradius: 5px;
}
voettekst {
Achtergrond kleur: #f2f2f2;
opvulling: 10px;
tekst uitlijnen: centrum;
}

Wijzig de hoofd onderdeel van de basis.html sjabloon als volgt:

<hoofd>
<titel>{% block title %}Eenvoudige blog{% endblock %}titel>
<koppelinghref="{{ url_for('static', path='/styles.css') }}"rel="stijlblad">
hoofd>

De functie url_for() genereert een URL (pad) voor het stijlen.css (/static/styles.css) bestand in de statisch directory die vervolgens automatisch wordt bediend door FastAPI.

Bezoek http://localhost: 8000/ op uw browser.

Dezelfde procedures zijn van toepassing op het aanbieden van afbeeldings- en JavaScript-bestanden.

Vergeet niet de beste praktijken te volgen

Bij het werken met Jinja Templating in FastAPI is het belangrijk om bepaalde best practices te volgen om een ​​goed georganiseerde en efficiënte codebasis te garanderen.

  • Organiseer sjablonen in een speciale map en overweeg om submappen te gebruiken voor gerelateerde sjablonen.
  • Gebruik sjabloonovererving om herbruikbare basissjablonen te maken en deze uit te breiden voor specifieke inhoud.
  • Selecteer zorgvuldig de gegevens om door te geven aan sjablonen, houd de payload licht en gebruik contextprocessors of middleware voor veelgebruikte gegevens.
  • Maak gebruik van Jinja Templating-functies zoals macro's, filters en besturingsstructuren voor verbeterde herbruikbaarheid en leesbaarheid van code.
  • Optimaliseer de prestaties door cachingstrategieën voor statische sjablonen te implementeren, HTTP-cachingheaders te gebruiken en profilering voor prestatieknelpunten.

Door deze best practices te volgen, kunt u een gestructureerd project onderhouden, de weergaveprestaties optimaliseren en efficiënt gebruikmaken van de functies van Jinja Templating in uw FastAPI-applicaties.

FastAPI gebruiken voor het bouwen van RestAPI's

Afgezien van het bouwen van applicaties waarvoor renderingsjablonen nodig zijn. FastAPI blinkt uit in het bouwen van RestAPI's vanwege de hoge prestaties, gebruiksvriendelijke syntaxis, het automatisch genereren van documentatie en schaalbaarheid. Deze functies maken FastAPI ideaal voor de efficiënte ontwikkeling van robuuste web-API's.