Predloge Jinja ponujajo zmogljiv jezik, ki ga lahko uporabite za preprosto ustvarjanje dinamičnih spletnih strani.

Integracija Jinje s FastAPI vam omogoča ustvarjanje dinamičnih spletnih strani, ki neopazno združujejo Python kodo s HTML, kar vam omogoča ločitev predstavitvene plasti vaše aplikacije od logike plast. Z dinamičnimi spletnimi stranmi lahko ustvarite prilagojeno vsebino, ki temelji na podatkih, kar izboljša uporabniško izkušnjo.

Kaj je Jinja?

Jinja je robusten in s funkcijami bogat mehanizem predlog za Python, ki ustvarja dinamične spletne strani. Jinja Templating podpira dedovanje, pogojne stavke, zanke in različne funkcije, ki poenostavljajo ustvarjanje dinamičnih spletnih strani.

Lahko kombinirate FastAPI in Jinja, da ustvarite spletne strani z dosledno postavitvijo, ki lahko prikazuje podatke v realnem času in obravnava uporabniški vnos. Lahko tudi dosežete ločitev pomislekov, zaradi česar je vaša koda bolj vzdržljiva in jo je lažje razumeti.

Nastavite projekt FastAPI

Za začetek boste morali nastaviti projekt FastAPI.

instagram viewer
  1. Ustvarite in aktivirajte virtualno okolje z uporabo teh terminalskih ukazov:
    python -m venv env
    # V sistemu Unix/MacOS: 
    vir venv/bin/activate
    # V sistemu Windows:
    .\venv\Skripti\aktivirati
  2. Namestite FastAPI in zahtevane odvisnosti.
    pip namestite "fastapi[vse]"
  3. Ustvarite imenik projekta moj_blog.
  4. Ustvarite datoteko Python main.py v vašem imeniku projektov.
  5. Dodajte naslednjo kodo v main.py mapa:
    od fastapi uvoz FastAPI
    fake_posts_db = [{
    'naslov': 'Prva objava na blogu',
    'vsebina': 'Vsebina prve objave v spletnem dnevniku.',
    'avtor': 'John Doe',
    'datum_objave': '2023-06-20',
    'komentarji': [
     {'avtor': 'Alice', 'vsebina': 'Odlična objava!'},
     {'avtor': 'Bob', 'vsebina': 'Zanimivo branje.'}
     ],
    'stanje': 'objavljeno'
    },{
    'naslov': 'Druga objava v spletnem dnevniku',
    'vsebina': 'Vsebina druge objave v spletnem dnevniku.',
    'avtor': 'Jane Smith',
    'datum_objave': Noben,
    'komentarji': [],
    'stanje': 'osnutek'
    }]
    

    app = FastAPI()
    @app.get("/o")
    defpribližno():
    vrnitev"Vse, kar morate vedeti o Simple Blogu"
    Zgornja koda ustvari preprosto aplikacijo FastAPI z eno samo končno točko, ki vrne odgovor JSON, ko do nje dostopate prek ustreznega URL-ja. Ti lahko uporabite slovar Python kot je to namesto dejanske baze podatkov; pomaga zmanjšati kompleksnost, medtem ko se osredotoča na primarni cilj.
  6. Zaženite strežnik.
    uvicorn main: app --reload

Obisk http://localhost: 8000/približno v brskalniku, da vidite odziv strežnika.

Integracija predlog Jinja

Ko uspešno nastavite svoj projekt, mu lahko zdaj dodate predlogo Jinja.

  1. V main.py datoteko, uvozite naslednje module:
    od fastapi.templateing uvoz Jinja2Templates
    od fastapi.staticfiles uvoz StaticFiles
  2. Spodaj aplikacija spremenljivke, ustvarite primerek Jinja2Templates razreda in posredujte imenik, ki bo vseboval vaše predloge.
    predloge = Jinja2Templates (imenik="predloge")
  3. Po predloge spremenljivke dodajte naslednjo vrstico kode:
    app.mount("/statični", StaticFiles (imenik="statičen"), ime="statičen")
    Zgornja koda namesti statična imenik in naroči FastAPI, naj streže vse statične datoteke, ki se nahajajo v imeniku, ko se URL zahteve začne z /static.
  4. notri moj_blog imenik ustvari dva imenika, predloge za shranjevanje datotek HTML in statična ki bo vseboval vse statične datoteke.

Ko ste zaključili te korake, ste uspešno integrirali Jinja Templating v svoj projekt.

Ustvarjanje dinamične spletne strani z Jinja

Jinja ponuja bogat nabor sintakse in funkcij za ustvarjanje dinamičnih predlog.

V tem razdelku boste videli, kako uporabiti sintakso predlog Jinja za ustvarjanje dinamičnih spletnih strani.

Oznake predlog priložite z a zavit oklepaj in simbol za odstotek na obeh straneh. Takšne oznake lahko uporabite za izvajanje kontrolnih tokov in logičnih operacij v predlogi. Nekatere pogosto uporabljene oznake predlog vključujejo:

  • Pogoj: Zažene blok kode, če je pogoj resničen.
    {% če pogoj %}...{% endif %}
  • Zanka: Ponavlja iterable in zažene blok kode za vsak element.
    {% za postavka v iterable %}...{% endfor %}
  • Vključi: Vključuje drugo predlogo znotraj trenutne predloge.
    {% vključuje 'ime_predloge.html' %}
  • Blokiraj: Definira blok, ki ga lahko podrejene predloge preglasijo z dedovanjem.
    {% block block_name %}...{% endblock %}
  • Podaljšaj: Omogoča, da podrejena predloga podeduje in razširi nadrejeno predlogo.
    {% extend parent_temp.html %}

Te oznake zagotavljajo prilagodljiv in izrazen način za ustvarjanje vsebine HTML na podlagi dinamičnih podatkov in nadzor nad logiko vaše aplikacije.

Dedovanje predloge

Jinja Templating podpira dedovanje predlog. To vam omogoča, da definirate osnovno (nadrejeno) predlogo s skupno postavitvijo in razdelki, ki jih lahko podrejena predloga razširi ali preglasi. Podrejena predloga lahko uporablja Podaljšaj oznako za podedovanje in razširitev nadrejene predloge.

Ustvariti base.html datoteka v predloge imenik z naslednjo kodo.

html>
<html>
<glavo>
<naslov>{% block title %}Preprost spletni dnevnik{% endblock %}naslov>
glavo>
<telo>
<h1>{% block heading %}Preprost spletni dnevnik{% endblock %}h1>
 {% blok vsebine %}
 {% endblock %}
 {% vključujejo "footer.html" %}
telo>
html>

Na ta način imate nadrejeno predlogo, ki vsebuje skupno kodo za vse vaše predloge, kar omogoča, da podrejena predloga podeduje in po potrebi razširi.

V predloge imenik ustvari a footer.html datoteko z naslednjo kodo.

<noga>
<str>© 2023 Preprost blog. Vse pravice pridržane.str>
<ahref="{{ url_for('about') }}">O tema>
noga>

footer.html je vključena predloga, ki vsebuje kodo HTML za razdelek noge. Ponovno ga lahko uporabite na več straneh, tako da ga vključite v osnovno predlogo z uporabo Vključi oznaka.

V predloge imenik ustvari a blog.html datoteko z naslednjo kodo.

{% razširi "base.html" %}
{% block title %}Preprost spletni dnevnik – stran spletnega dnevnika{% endblock %}


{% block heading %}Preprost spletni dnevnik – stran spletnega dnevnika{% endblock %}


{% blok vsebine %}
<h2>Skupno število objav: {{ posts|length }}h2>


 {% za objavo v objavah %}
<divrazred="post">


 {% if post.status == 'objavljeno' %}
<h3>{{ post.title }}h3>
<str>{{ post.content|truncate }}str>
<str>Objavljeno dne: {{ post.publication_date }}str>


<h4>Komentarji:h4>
<ul>
 {% za komentar v post.comments %}
<lirazred="komentar">{{ comment.author }}-: {{ comment.content }}li>
 {% endfor %}
ul>
 {% else %}
<str>Ta objava je še vedno v načinu osnutka.str>
 {% endif %}
div>
<ur>
 {% endfor %}
{% endblock %}

Ta podrejena predloga podeduje od base.html uporabljati Podaljšaj oznaka. Preglasi določene bloke, definirane v osnovni predlogi, da zagotovi prilagojeno vsebino za stran bloga. Vključuje tudi potrebno logiko in ponovitev za prikaz objave in povezanih komentarjev.

Izrazi

Jinja podpira široko paleto izrazov, vključno z aritmetičnimi operacijami, primerjavami in logičnimi operacijami. Na primer:

{{2 + 2}} // izhod: 4

Zamenjava spremenljivke

Če želite izpisati spremenljivke v predlogi, jih zaprite v dvojne zavite oklepaje. Na primer:

{{post.title}} // izhod: 'Prva objava v spletnem dnevniku'

Filtri

Filtri spremenijo izhod spremenljivke. Enega lahko dodate za spremenljivko z uporabo navpične črte (|). Na primer:

{{objava|dolžina}} // rezultat: 2

V svoje predloge lahko dodate komentarje v vrstici in večvrstične komentarje. Jinja bo prezrl te komentarje med upodabljanjem predloge, zato so uporabni za dodajanje razlag znotraj predloge.

{# #} // v vrsti
{% komentar %}... {% končni komentar %} // več vrstic

URL-ji

Da lahko ustvarite pravilne hiperpovezave do drugih strani v aplikaciji, kontekst predloge Jinja vključuje a url_za funkcijo. Na primer:

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

Zgornja koda postane http://localhost: 8000/približno. Videli boste tudi, kako uporabljati url_za funkcijo, da pozneje pridobite poti do statičnih datotek.

To je le nekaj temeljnih vidikov sintakse Jinja Templating. Jinja Templateing ponuja veliko več funkcij in funkcionalnosti, kot so makri, kontekst predloge in več, da je ustvarjanje in prilagajanje predlog učinkovito in prilagodljivo.

Posredovanje podatkov v predloge

Zdaj, ko imate svoje predloge pripravljene, morate posredovati podatke iz končnih točk FastAPI v predloge za upodabljanje.

Dodajte naslednjo kodo v main.py mapa:

od fastapi uvoz FastAPI, Zahteva
od fastapi.odzivi uvoz HTMLResponse
@app.get("/", response_class=HTMLResponse)
asinhdefread_posts(zahteva: Zahteva):
vrnitev predloge. TemplateResponse("blog.html", {"prošnja": prošnja, 
"objave": fake_posts_db})

Koda definira končno točko FastAPI, ki obravnava zahtevo GET do korenskega URL-ja ("/") in vrne HTMLResponse ustvarjen iz blog.html predlogo. Prehaja kontekstni slovar, ki vsebuje trenutni predmet zahteve in fake_posts_db, v predlogo. Tako lahko Jinja upodablja natančne in dinamične podatke.

Obisk http://localhost: 8000/ v brskalniku in videli bi nekaj takega:

Uspešno ste posredovali podatke v predloge za upodabljanje.

Streženje statičnih datotek

Poleg upodabljanja dinamičnih predlog ponuja FastAPI tudi funkcionalnost za streženje statičnih datotek, kot so datoteke CSS, datoteke JavaScript in slike.

CSS boste uporabili za izboljšanje videza in občutka strani.

V statična imenik, ustvarite a styles.css datoteko z naslednjo kodo.

telo {
družina pisav: Arial, sans-serif;
marža: 0;
oblazinjenje: 20px;
Barva ozadja: #f5f5f5;
}
h1, h2, h3, h4 {
barva: #333;
}


.post {
Barva ozadja: #fff;
oblazinjenje: 20px;
margin-bottom: 20px;
mejni polmer: 5px;
box-shadow: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.posth3 {
margin-top: 0;
}


.poststr {
margin-bottom: 10px;
}


.postul {
list-style-type: nič;
oblazinjenje-levo: 0;
}


.komentar {
margin-bottom: 10px;
oblazinjenje: 10px;
Barva ozadja: #f9f9f9;
mejni polmer: 5px;
}
noga {
Barva ozadja: #f2f2f2;
oblazinjenje: 10px;
poravnava besedila: center;
}

Spremenite glavo element base.html predlogo, kot sledi:

<glavo>
<naslov>{% block title %}Preprost spletni dnevnik{% endblock %}naslov>
<povezavahref="{{ url_for('static', path='/styles.css') }}"rel="stylesheet">
glavo>

Funkcija url_for() ustvari URL (pot) za styles.css (/static/styles.css) v datoteki statična imenik, ki ga nato samodejno streže FastAPI.

Obisk http://localhost: 8000/ v brskalniku.

Isti postopki veljajo za streženje slikovnih in JavaScript datotek.

Ne pozabite upoštevati najboljših praks

Pri delu s predlogami Jinja v FastAPI je pomembno, da sledite nekaterim najboljšim praksam, da zagotovite dobro organizirano in učinkovito osnovo kode.

  • Organizirajte predloge v namenskem imeniku in razmislite o uporabi podimenikov za povezane predloge.
  • Uporabite dedovanje predlog za ustvarjanje večkrat uporabnih osnovnih predlog in njihovo razširitev za določeno vsebino.
  • Previdno izberite podatke, ki jih želite prenesti v predloge, pri čemer naj bo koristna obremenitev majhna, za pogosto uporabljene podatke pa uporabite procesorje konteksta ali vmesno programsko opremo.
  • Izkoristite funkcije predlog Jinja, kot so makri, filtri in nadzorne strukture za izboljšano ponovno uporabo in berljivost kode.
  • Optimizirajte zmogljivost z implementacijo strategij predpomnjenja za statične predloge, uporabo glav HTTP predpomnjenja in profiliranjem za ozka grla pri delovanju.

Z upoštevanjem teh najboljših praks lahko vzdržujete strukturiran projekt, optimizirate zmogljivost upodabljanja in učinkovito izkoristite funkcije predlog Jinja v svojih aplikacijah FastAPI.

Uporaba FastAPI za gradnjo RestAPI-jev

Poleg gradnje aplikacij, ki zahtevajo predloge za upodabljanje. FastAPI je odličen pri gradnji RestAPI-jev zaradi svoje visoke zmogljivosti, sintakse, enostavne za uporabo, samodejnega ustvarjanja dokumentacije in razširljivosti. Zaradi teh funkcij je FastAPI idealen za učinkovit razvoj robustnih spletnih API-jev.