Šablóny Jinja ponúkajú výkonný jazyk, ktorý môžete použiť na jednoduché vytváranie dynamických webových stránok.

Integrácia Jinja s FastAPI vám umožňuje vytvárať dynamické webové stránky, ktoré hladko spájajú Python kód s HTML, čo vám umožní oddeliť prezentačnú vrstvu vašej aplikácie od logiky vrstva. Pomocou dynamických webových stránok môžete generovať prispôsobený obsah založený na údajoch, čím sa zlepší používateľská skúsenosť.

Čo je Jinja?

Jinja je robustný, na funkcie bohatý nástroj na vytváranie šablón pre Python, ktorý generuje dynamické webové stránky. Jinja Templating podporuje dedičnosť, podmienené príkazy, cykly a rôzne funkcie, ktoré zjednodušujú vytváranie dynamických webových stránok.

Môžete skombinovať FastAPI a Jinja na vytváranie webových stránok s konzistentným rozložením, ktoré dokáže zobrazovať údaje v reálnom čase a spracovávať vstupy používateľov. Môžete tiež dosiahnuť oddelenie obáv, vďaka čomu je váš kód ľahšie udržiavateľný a zrozumiteľnejší.

Nastavte projekt FastAPI

instagram viewer

Ak chcete začať, budete musieť nastaviť projekt FastAPI.

  1. Vytvorte a aktivujte virtuálne prostredie pomocou týchto príkazov terminálu:
    python -m venv env
    # V systéme Unix/MacOS: 
    zdroj venv/bin/activate
    # V systéme Windows:
    .\venv\Scripts\activate
  2. Nainštalujte FastAPI a požadované závislosti.
    pip install "fastapi[všetky]"
  3. Vytvorte adresár projektu môj blog.
  4. Vytvorte súbor Python main.py vo vašom projektovom adresári.
  5. Pridajte nasledujúci kód do main.py súbor:
    od fastapi importovať FastAPI
    fake_posts_db = [{
    'názov': 'Prvý blogový príspevok',
    'obsah': 'Obsah prvého blogového príspevku.',
    'autor': 'John Doe',
    'dátum publikácie': '2023-06-20',
    'komentáre': [
     {'autor': "Alice", 'obsah': 'Skvelý príspevok!'},
     {'autor': 'Bob', 'obsah': "Zaujímavé čítanie."}
     ],
    'postavenie': 'publikovaný'
    },{
    'názov': 'Druhý blogový príspevok',
    'obsah': 'Obsah druhého blogového príspevku.',
    'autor': "Jane Smith",
    'dátum publikácie': žiadne,
    'komentáre': [],
    'postavenie': 'návrh'
    }]
    

    aplikácia = FastAPI()
    @app.get("/about")
    defo():
    vrátiť„Všetko, čo potrebujete vedieť o Simple Blog“
    Vyššie uvedený kód vytvorí jednoduchú aplikáciu FastAPI s jedným koncovým bodom, ktorý vráti odpoveď JSON pri prístupe cez zodpovedajúcu adresu URL. Môžeš použite pythonovský slovník takto namiesto skutočnej databázy; pomáha znižovať zložitosť a zároveň sa zameriava na primárny cieľ.
  6. Spustite server.
    uvicorn main: app --reload

Navštívte http://localhost: 8000/asi vo svojom prehliadači, aby ste videli odpoveď servera.

Integrácia šablón Jinja

Po úspešnom nastavení projektu doň teraz môžete pridať šablónu Jinja.

  1. V main.py súbor, importujte nasledujúce moduly:
    od fastapi.templating importovať Jinja2Templates
    od fastapi.staticfiles importovať StaticFiles
  2. Pod aplikácie premennej, vytvorte inštanciu súboru Jinja2Templates triedy a odovzdajte adresár, ktorý bude obsahovať vaše šablóny.
    šablóny = Jinja2Templates (adresár ="šablóny")
  3. Po šablóny premennej, pridajte nasledujúci riadok kódu:
    app.mount("/static", StaticFiles (adresár="statický"), meno="statický")
    Vyššie uvedený kód pripája statické a prikáže FastAPI obsluhovať akékoľvek statické súbory umiestnené v adresári, keď URL požiadavky začína /static.
  4. In môj blog adresár vytvoriť dva adresáre, šablóny na uchovávanie HTML súborov a statické ktorý bude obsahovať všetky statické súbory.

Po dokončení týchto krokov ste úspešne integrovali šablónu Jinja do svojho projektu.

Vytvorenie dynamickej webovej stránky s Jinja

Jinja poskytuje bohatú sadu syntaxe a funkcií na vytváranie dynamických šablón.

V tejto časti uvidíte, ako používať syntax šablóny Jinja na vytváranie dynamických webových stránok.

Značky šablóny uzavrite s a kučeravá ortéza a symbol percenta na oboch stranách. Takéto značky môžete použiť na vykonávanie riadiacich tokov a logických operácií v šablóne. Niektoré bežne používané značky šablón zahŕňajú:

  • Podmienka: Spustí blok kódu, ak je podmienka pravdivá.
    {% ak podmienka %}...{% endif %}
  • Slučka: Iteruje cez iterovateľný a spúšťa blok kódu pre každú položku.
    {% pre položka v iterovateľné %}...{% endfor %}
  • Zahrnúť: Zahŕňa ďalšiu šablónu v rámci aktuálnej šablóny.
    {% zahŕňajú 'názov_šablóny.html' %}
  • Blokovať: Definuje blok, ktorý môžu podradené šablóny prepísať pomocou dedenia.
    {% block block_name %}...{% endblock %}
  • Predĺžiť: Umožňuje podradenej šablóne zdediť a rozšíriť nadradenú šablónu.
    {% extend parent_temp.html %}

Tieto značky poskytujú flexibilný a expresívny spôsob generovania obsahu HTML na základe dynamických údajov a riadenia logiky vašej aplikácie.

Dedičnosť šablóny

Jinja Templating podporuje dedenie šablón. To vám umožní definovať základnú (nadradenú) šablónu so spoločným rozložením a sekciami, ktoré môže podriadená šablóna rozšíriť alebo prepísať. Podradená šablóna môže použiť Predĺžiť tag na dedenie a rozšírenie nadradenej šablóny.

Vytvor base.html súbor v šablóny adresár s nasledujúcim kódom.

html>
<html>
<hlavu>
<titul>{% block title %}Jednoduchý blog{% endblock %}titul>
hlavu>
<telo>
<h1>{% block header %}Jednoduchý blog{% endblock %}h1>
 {% block content %}
 {% koncový blok %}
 {% include "footer.html" %}
telo>
html>

Týmto spôsobom máte nadradenú šablónu, ktorá obsahuje spoločný kód pre všetky vaše šablóny, čo umožňuje podradenej šablóne dediť a rozširovať ju podľa potreby.

V šablóny vytvorenie adresára a footer.html súbor s nasledujúcim kódom.

<päta>
<p>© Jednoduchý blog 2023. Všetky práva vyhradené.p>
<ahref="{{ url_for('about') }}">Oa>
päta>

footer.html je zahrnutá šablóna, ktorá obsahuje kód HTML pre sekciu päty. Môžete ho znova použiť na viacerých stránkach tak, že ho zahrniete do základnej šablóny pomocou Zahrnúť tag.

V šablóny vytvorenie adresára a blog.html súbor s nasledujúcim kódom.

{% extends "base.html" %}
{% block title %}Jednoduchý blog – stránka blogu{% endblock %}


{% block header %}Jednoduchý blog – stránka blogu{% endblock %}


{% block content %}
<h2>Celkový počet príspevkov: {{ príspevky|dĺžka }}h2>


 {% za príspevok v príspevkoch %}
<divtrieda="post">


 {% if post.status == 'publikované' %}
<h3>{{ post.title }}h3>
<p>{{ post.content|skrátiť }}p>
<p>Zverejnené dňa: {{ post.publication_date }}p>


<h4>Komentáre:h4>
<ul>
 {% pre komentár v post.comments %}
<litrieda="komentár">{{ comment.author }}-: {{ comment.content }}li>
 {% endfor %}
ul>
 {% else %}
<p>Tento príspevok je stále v režime konceptu.p>
 {% koniec Ak %}
div>
<hr>
 {% endfor %}
{% koncový blok %}

Táto podradená šablóna zdedí z base.html pomocou Predĺžiť tag. Prepíše špecifické bloky definované v základnej šablóne, aby poskytol prispôsobený obsah pre stránku blogu. Zahŕňa tiež potrebnú logiku a iteráciu na zobrazenie príspevku a súvisiacich komentárov.

Výrazy

Jinja podporuje širokú škálu výrazov vrátane aritmetických operácií, porovnaní a logických operácií. Napríklad:

{{2 + 2}} // výstup: 4

Variabilná substitúcia

Na výstup premenných v šablóne ich uzavrite do dvojitých zložených zátvoriek. Napríklad:

{{post.title}} // výstup: 'Prvý blogový príspevok'

Filtre

Filtre upravujú výstup premennej. Jednu môžete pridať za premennú pomocou znaku zvislej čiary (|). Napríklad:

{{post|length}} // výstup: 2

Do svojich šablón môžete pridať vložené komentáre a viacriadkové komentáre. Jinja bude tieto komentáre počas vykresľovania šablóny ignorovať, takže sú užitočné na pridávanie vysvetlení do šablóny.

{# #} // v rade
{% komentár %}... {% end comment %} // viacriadkový

URL

Aby ste mohli generovať správne hypertextové odkazy na iné stránky v rámci aplikácie, kontext šablóny Jinja obsahuje a url_for funkciu. Napríklad:

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

Vyššie uvedený kód sa stáva http://localhost: 8000/asi. Uvidíte tiež, ako používať url_for na získanie statických ciest k súborom neskôr.

Toto sú len niektoré zo základných aspektov syntaxe Jinja Templating. Jinja Templating poskytuje mnoho ďalších funkcií a funkcií, ako sú makrá, kontext šablóny a ďalšie, vďaka čomu je vytváranie a prispôsobenie šablón efektívne a flexibilné.

Odovzdávanie údajov do šablón

Teraz, keď máte pripravené šablóny, musíte odovzdať údaje z koncových bodov FastAPI do šablón na vykreslenie.

Pridajte nasledujúci kód do main.py súbor:

od fastapi importovať FastAPI, Žiadosť
od fastapi.responses importovať HTMLResponse
@app.get("/", response_class=HTMLResponse)
asyncdefčítať_príspevky(požiadavka: žiadosť):
vrátiť šablóny. TemplateResponse("blog.html", {"žiadosť": žiadosť, 
"príspevky": fake_posts_db})

Kód definuje koncový bod FastAPI, ktorý spracováva požiadavku GET na koreňovú adresu URL ("/") a vracia HTMLResponse generované z blog.html šablóna. Prechádza kontextovým slovníkom obsahujúcim prúd objekt žiadosti a fake_posts_db, do šablóny. Týmto spôsobom môže Jinja vykresliť presné a dynamické údaje.

Navštívte http://localhost: 8000/ vo vašom prehliadači a mali by ste vidieť niečo takéto:

Úspešne ste odovzdali údaje do šablón na vykreslenie.

Poskytovanie statických súborov

Okrem vykresľovania dynamických šablón poskytuje FastAPI aj funkcie na poskytovanie statických súborov, ako sú súbory CSS, súbory JavaScript a obrázky.

CSS použijete na zlepšenie vzhľadu stránky.

V statické adresár, vytvorte a styles.css súbor s nasledujúcim kódom.

telo {
font-family: Arial, sans-serif;
marža: 0;
vypchávka: 20px;
farba pozadia: #f5f5f5;
}
h1, h2, h3, h4 {
farba: #333;
}


.príspevok {
farba pozadia: #fff;
vypchávka: 20px;
okraj-dole: 20px;
hraničný polomer: 5px;
box-shadow: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.príspevokh3 {
margin-top: 0;
}


.príspevokp {
okraj-dole: 10px;
}


.príspevokul {
list-style-type: žiadny;
polstrovanie-vľavo: 0;
}


.komentár {
okraj-dole: 10px;
vypchávka: 10px;
farba pozadia: #f9f9f9;
hraničný polomer: 5px;
}
päta {
farba pozadia: #f2f2f2;
vypchávka: 10px;
zarovnanie textu: stred;
}

Upravte hlavu prvok z base.html šablóna takto:

<hlavu>
<titul>{% block title %}Jednoduchý blog{% endblock %}titul>
<odkazhref="{{ url_for('static', path='/styles.css') }}"rel="štýlov">
hlavu>

Funkcia url_for() generuje URL (cestu) pre styles.css (/static/styles.css) v súbore statické adresár, ktorý potom automaticky obsluhuje FastAPI.

Navštívte http://localhost: 8000/ vo vašom prehliadači.

Rovnaké postupy platia pre zobrazovanie obrázkov a súborov JavaScript.

Nezabudnite dodržiavať osvedčené postupy

Pri práci s Jinja Templating vo FastAPI je dôležité dodržiavať určité osvedčené postupy, aby ste zabezpečili dobre organizovanú a efektívnu kódovú základňu.

  • Usporiadajte šablóny vo vyhradenom adresári a zvážte použitie podadresárov pre súvisiace šablóny.
  • Využite dedičnosť šablón na vytvorenie opakovane použiteľných základných šablón a ich rozšírenie pre konkrétny obsah.
  • Starostlivo vyberte údaje, ktoré sa majú odovzdať šablónam, pričom nosné zaťaženie bude ľahké a na bežne používané údaje použite kontextové procesory alebo middleware.
  • Využite funkcie Jinja Templating, ako sú makrá, filtre a riadiace štruktúry na zlepšenie opätovnej použiteľnosti a čitateľnosti kódu.
  • Optimalizujte výkon implementáciou stratégií ukladania do vyrovnávacej pamäte pre statické šablóny, používaním hlavičiek ukladania do vyrovnávacej pamäte HTTP a profilovaním úzkych miest výkonu.

Dodržiavaním týchto osvedčených postupov môžete udržiavať štruktúrovaný projekt, optimalizovať výkon vykresľovania a efektívne využívať funkcie Jinja Templating vo vašich aplikáciách FastAPI.

Používanie FastAPI na vytváranie RestAPI

Okrem vytvárania aplikácií, ktoré vyžadujú vykresľovacie šablóny. FastAPI vyniká pri vytváraní RestAPI vďaka svojmu vysokému výkonu, ľahko použiteľnej syntaxi, automatickému generovaniu dokumentácie a škálovateľnosti. Vďaka týmto vlastnostiam je FastAPI ideálne pre efektívny vývoj robustných webových API.