Jinja-mallar erbjuder ett kraftfullt språk som du kan använda för att enkelt skapa dynamiska webbsidor.

Genom att integrera Jinja med FastAPI kan du skapa dynamiska webbsidor som sömlöst blandar Python kod med HTML, så att du kan separera presentationslagret i din applikation från logiken lager. Med dynamiska webbsidor kan du skapa personligt och datadrivet innehåll, vilket förbättrar användarupplevelsen.

Vad är Jinja?

Jinja är en robust, funktionsrik mallmotor för Python som genererar dynamiska webbsidor. Jinja Templating stöder arv, villkorliga uttalanden, loopar och olika funktioner som förenklar skapandet av dynamiska webbsidor.

Du kan kombinera FastAPI och Jinja för att skapa webbsidor med en konsekvent layout som kan visa realtidsdata och hantera användarinmatning. Du kan också uppnå dela upp problemen, vilket gör din kod mer underhållbar och lättare att förstå.

Skapa ett FastAPI-projekt

För att komma igång måste du skapa ett FastAPI-projekt.

  1. Skapa och aktivera en virtuell miljö med dessa terminalkommandon:
    instagram viewer 
    python -m venv env
    # På Unix/MacOS: 
    source venv/bin/activate
    # På Windows:
    .\venv\Scripts\aktivera
  2. Installera FastAPI och nödvändiga beroenden.
    pip installera "fastapi[all]"
  3. Skapa en projektkatalog min blogg.
  4. Skapa en Python-fil main.py i din projektkatalog.
  5. Lägg till följande kod till main.py fil:
    från fastapi importera FastAPI
    fake_posts_db = [{
    'titel': "Första blogginlägget",
    'innehåll': "Innehållet i det första blogginlägget.",
    'författare': "John Doe",
    'publiceringsdatum': '2023-06-20',
    "kommentarer": [
     {'författare': "Alice", 'innehåll': "Bra inlägg!"},
     {'författare': 'Guppa', 'innehåll': "Intressant läsning."}
     ],
    'status': 'publicerad'
    },{
    'titel': "Andra blogginlägget",
    'innehåll': "Innehållet i det andra blogginlägget.",
    'författare': "Jane Smith",
    'publiceringsdatum': Ingen,
    "kommentarer": [],
    'status': 'förslag'
    }]
    

    app = FastAPI()
    @app.get("/about")
    defhandla om():
    lämna tillbaka"Allt du behöver veta om Simple Blog"
    Koden ovan skapar en enkel FastAPI-applikation med en enda slutpunkt som returnerar ett JSON-svar när det nås via motsvarande URL. Du kan använd en Python-ordbok som detta i stället för en faktisk databas; det hjälper till att minska komplexiteten samtidigt som det fokuserar på det primära målet.
  6. Kör servern.
    uvicorn main: app -- ladda om

Besök http://localhost: 8000/ca i din webbläsare för att se serversvaret.

Integrering av Jinja-mall

Efter att ha konfigurerat ditt projekt framgångsrikt kan du nu lägga till Jinja-mall till det.

  1. I den main.py fil, importera följande moduler:
    från fastapi.templating importera Jinja2-mallar
    från fastapi.staticfiles importera StaticFiles
  2. Under app variabel, skapa en instans av Jinja2-mallar klass och skicka katalogen som innehåller dina mallar.
    mallar = Jinja2Templates (katalog="mallar")
  3. Efter mallar variabel, lägg till följande kodrad:
    app.mount("/statisk", StaticFiles (katalog="statisk"), namn="statisk")
    Koden ovan monterar statisk katalogen och instruerar FastAPI att visa alla statiska filer som finns i katalogen när en begäran URL börjar med /static.
  4. I min blogg katalog skapa två kataloger, mallar för att hålla HTML-filer och statisk som kommer att innehålla alla statiska filer.

Med dessa steg slutförda har du framgångsrikt integrerat Jinja Templating med ditt projekt.

Skapa dynamisk webbsida med Jinja

Jinja tillhandahåller en rik uppsättning syntax och funktioner för att skapa dynamiska mallar.

I det här avsnittet kommer du att se hur du använder Jinja-mallsyntax för att skapa dynamiska webbsidor.

Bifoga malltaggar med en lockigt hängslen och procentsymbol på båda sidor. Du kan använda sådana taggar för att utföra kontrollflödes- och logikoperationer i mallen. Några vanliga malltaggar inkluderar:

  • Skick: Kör kodblocket om villkoret är sant.
    {% om skick %}...{% endif %}
  • Slinga: Itererar över en iterabel och kör kodblocket för varje objekt.
    {% för Artikel i iterable %}...{% endfor %}
  • Omfatta: Inkluderar en annan mall i den aktuella mallen.
    {% inkluderar "mallnamn.html" %}
  • Blockera: Definierar ett block som underordnade mallar kan åsidosätta med hjälp av arv.
    {% block block_name %}...{% endblock %}
  • Förlänga: Tillåter den underordnade mallen att ärva och utöka den överordnade mallen.
    {% extend parent_temp.html %}

Dessa taggar ger ett flexibelt och uttrycksfullt sätt att generera HTML-innehåll baserat på dynamiska data och kontrollera logiken i din applikation.

Mall Arv

Jinja Templating stöder mallarv. Detta låter dig definiera en basmall (förälder) med en gemensam layout och sektioner som en underordnad mall kan utöka eller åsidosätta. En barnmall kan använda Förlänga taggen för att ärva och utöka den överordnade mallen.

Skapa en base.html fil i mallar katalog med följande kod.

html>
<html>
<huvud>
<titel>{% block title %}Enkel blogg{% endblock %}titel>
huvud>
<kropp>
<h1>{% block heading %}Enkel blogg{% endblock %}h1>
 {% block content %}
 {% slutblock %}
 {% include "footer.html" %}
kropp>
html>

På så sätt har du en överordnad mall som innehåller den gemensamma koden för alla dina mallar, vilket gör att den underordnade mallen kan ärva och utöka den efter behov.

I den mallar katalog skapa en sidfot.html fil med följande kod.

<sidfot>
<sid>© 2023 enkel blogg. Alla rättigheter förbehållna.sid>
<ahref="{{ url_for('about') }}">Handla oma>
sidfot>

sidfot.html är en inkluderad mall som innehåller HTML-koden för sidfotssektionen. Du kan återanvända den på flera sidor genom att inkludera den i basmallen med hjälp av Omfatta märka.

I den mallar katalog skapa en blog.html fil med följande kod.

{% utökar "base.html" %}
{% block title %}Enkel blogg - Bloggsida{% endblock %}


{% block heading %}Enkel blogg - Bloggsida{% endblock %}


{% block content %}
<h2>Totalt antal inlägg: {{ posts|length }}h2>


 {% för inlägg i inlägg %}
<divklass="posta">


 {% if post.status == 'publicerad' %}
<h3>{{ Post titel }}h3>
<sid>{{ post.content|trunkera }}sid>
<sid>Publicerad den: {{ post.publication_date }}sid>


<h4>Kommentarer:h4>
<ul>
 {% för kommentar i post.comments %}
<liklass="kommentar">{{ comment.author }}-: {{ comment.content }}li>
 {% slutför %}
ul>
 {% annat %}
<sid>Det här inlägget är fortfarande i utkastläge.sid>
 {% endif %}
div>
<hr>
 {% slutför %}
{% slutblock %}

Denna underordnade mall ärver från base.html använda Förlänga märka. Den åsidosätter specifika block definierade i basmallen för att tillhandahålla anpassat innehåll för bloggsidan. Den innehåller också nödvändig logik och iteration för att visa ett inlägg och tillhörande kommentarer.

Uttryck

Jinja stöder ett brett utbud av uttryck, inklusive aritmetiska operationer, jämförelser och logiska operationer. Till exempel:

{{2 + 2}} // utdata: 4

Variabel substitution

Om du vill mata ut variabler i mallen, omsluter du dem inom dubbla krulliga klammerparenteser. Till exempel:

{{post.title}} // output: 'Första blogginlägg'

Filter

Filter modifierar utdata från en variabel. Du kan lägga till en efter en variabel med hjälp av rörsymbolen (|). Till exempel:

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

Du kan lägga till infogade kommentarer och flerradskommentarer i dina mallar. Jinja kommer att ignorera dessa kommentarer under mallrendering, så de är användbara för att lägga till förklaringar i en mall.

{# #} // i kö
{% kommentar %}... {% end comment %} // multiline

webbadresser

För att du ska kunna generera korrekta hyperlänkar till andra sidor i programmet innehåller Jinja-mallkontexten en url_for fungera. Till exempel:

<ahref="{{ url_for('about') }}">Handla oma>

Koden ovan blir http://localhost: 8000/ca. Du kommer också att se hur du använder url_for funktion för att få statiska filsökvägar senare.

Detta är bara några av de grundläggande aspekterna av Jinja Templating-syntax. Jinja Templating tillhandahåller många fler funktioner och funktioner, såsom makron, mallsammanhang och mer, för att skapa och anpassa mallar effektivt och flexibelt.

Skickar data till mallar

Nu när du har dina mallar redo måste du skicka data från dina FastAPI-slutpunkter till mallarna för rendering.

Lägg till följande kod till main.py fil:

från fastapi importera FastAPI, begäran
från fastapi.responses importera HTML-svar
@app.get("/", response_class=HTMLResponse)
asynkrondefläs_inlägg(begäran: Begäran):
lämna tillbaka mallar. TemplateResponse("blog.html", {"begäran": begära, 
"inlägg": fake_posts_db})

Koden definierar en FastAPI-slutpunkt som hanterar en GET-begäran till rot-URL-adressen ("/") och returnerar en HTML-svar genereras från blog.html mall. Den passerar en kontextordbok som innehåller strömmen begära objekt och falska_inlägg_db, i mallen. På så sätt kan Jinja återge korrekt och dynamisk data.

Besök http://localhost: 8000/ i din webbläsare och du bör se något i stil med detta:

Du har skickat data till mallarna för rendering.

Visar statiska filer

Förutom att rendera dynamiska mallar, tillhandahåller FastAPI även funktionalitet för att servera statiska filer som CSS-filer, JavaScript-filer och bilder.

Du kommer att använda CSS för att förbättra utseendet och känslan på sidan.

I den statisk katalog, skapa en styles.css fil med följande kod.

kropp {
typsnittsfamilj: Arial, sans serif;
marginal: 0;
stoppning: 20px;
bakgrundsfärg: #f5f5f5;
}
h1, h2, h3, h4 {
Färg: #333;
}


.posta {
bakgrundsfärg: #fff;
stoppning: 20px;
marginal-botten: 20px;
gräns-radie: 5px;
box-skugga: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.postah3 {
marginal-top: 0;
}


.postasid {
marginal-botten: 10px;
}


.postaul {
list-stil-typ: ingen;
stoppning-vänster: 0;
}


.kommentar {
marginal-botten: 10px;
stoppning: 10px;
bakgrundsfärg: #f9f9f9;
gräns-radie: 5px;
}
sidfot {
bakgrundsfärg: #f2f2f2;
stoppning: 10px;
textjustera: Centrum;
}

Ändra huvud element av base.html mall enligt följande:

<huvud>
<titel>{% block title %}Enkel blogg{% endblock %}titel>
<länkhref="{{ url_for('static', path='/styles.css') }}"rel="stilmall">
huvud>

Funktionen url_for() genererar en URL (sökväg) för styles.css (/static/styles.css) filen i statisk katalog som sedan betjänas automatiskt av FastAPI.

Besök http://localhost: 8000/ i din webbläsare.

Samma procedurer gäller för visning av bild- och JavaScript-filer.

Kom ihåg att följa bästa praxis

När du arbetar med Jinja Templating i FastAPI är det viktigt att följa vissa bästa praxis för att säkerställa en välorganiserad och effektiv kodbas.

  • Ordna mallar i en dedikerad katalog och överväg att använda underkataloger för relaterade mallar.
  • Använd mallarv för att skapa återanvändbara basmallar och utöka dem för specifikt innehåll.
  • Välj noggrant de data som ska skickas till mallar, håll nyttolasten lätt och använd kontextprocessorer eller mellanprogram för vanliga data.
  • Använd Jinja Templating-funktioner som makron, filter och kontrollstrukturer för förbättrad kodåteranvändbarhet och läsbarhet.
  • Optimera prestanda genom att implementera cachningsstrategier för statiska mallar, använda HTTP-cachehuvuden och profilering för prestandaflaskhalsar.

Genom att följa dessa bästa metoder kan du upprätthålla ett strukturerat projekt, optimera renderingsprestanda och effektivt utnyttja funktionerna i Jinja Templating i dina FastAPI-applikationer.

Använda FastAPI för att bygga RestAPIs

Förutom att bygga applikationer som kräver rendering av mallar. FastAPI utmärker sig på att bygga RestAPIs tack vare sin höga prestanda, lättanvända syntax, automatiska dokumentationsgenerering och skalbarhet. Dessa funktioner gör FastAPI idealisk för effektiv utveckling av robusta webb-API: er.