Predlošci Jinja nude moćan jezik koji možete koristiti za stvaranje dinamičnih web stranica s lakoćom.

Integracija Jinje s FastAPI-jem omogućuje vam stvaranje dinamičkih web stranica koje besprijekorno spajaju Python kod s HTML-om, što vam omogućuje da odvojite prezentacijski sloj svoje aplikacije od logike sloj. S dinamičkim web stranicama možete generirati personalizirani sadržaj temeljen na podacima, poboljšavajući korisnička iskustva.

Što je Jinja?

Jinja je robustan mehanizam za predloške bogat značajkama za Python koji generira dinamičke web stranice. Jinja Templating podržava nasljeđivanje, uvjetne izjave, petlje i razne značajke koje pojednostavljuju stvaranje dinamičkih web stranica.

Možete kombinirati FastAPI i Jinju za stvaranje web stranica s dosljednim izgledom koji može prikazati podatke u stvarnom vremenu i rukovati korisničkim unosom. Također možete postići razdvajanje koncerna, čineći vaš kod lakšim za održavanje i razumljivijim.

Postavite FastAPI projekt

Da biste započeli, morat ćete postaviti FastAPI projekt.

instagram viewer
  1. Stvorite i aktivirajte virtualno okruženje pomoću ovih terminalskih naredbi:
    python -m venv env
    # Na Unixu/MacOS-u: 
    izvor venv/bin/aktivirati
    # U sustavu Windows:
    .\venv\Skripte\aktivirati
  2. Instalirajte FastAPI i potrebne ovisnosti.
    pip instalacija "fastapi[sve]"
  3. Napravite imenik projekta moj blog.
  4. Stvorite Python datoteku glavni.py u direktoriju vašeg projekta.
  5. Dodajte sljedeći kod u glavni.py datoteka:
    iz brzi uvoz FastAPI
    lažni_postovi_db = [{
    'titula': 'Prva objava na blogu',
    'sadržaj': 'Sadržaj prvog posta na blogu.',
    'Autor': 'John Doe',
    'Datum objave': '2023-06-20',
    'komentari': [
     {'Autor': 'Alice', 'sadržaj': 'Sjajan post!'},
     {'Autor': 'Bob', 'sadržaj': 'Zanimljivo štivo.'}
     ],
    'status': 'Objavljeno'
    },{
    'titula': 'Drugi post na blogu',
    'sadržaj': 'Sadržaj drugog posta na blogu.',
    'Autor': 'Jane Smith',
    'Datum objave': Nijedan,
    'komentari': [],
    'status': 'Nacrt'
    }]
    

    aplikacija = FastAPI()
    @app.get("/o")
    defoko():
    povratak"Sve što trebate znati o Simple Blogu"
    Gornji kod stvara jednostavnu aplikaciju FastAPI s jednom krajnjom točkom koja vraća JSON odgovor kada joj se pristupi putem odgovarajućeg URL-a. Možeš koristite Python rječnik ovako umjesto stvarne baze podataka; pomaže smanjiti složenost dok se usredotočuje na primarni cilj.
  6. Pokrenite poslužitelj.
    uvicorn main: app --reload

Posjetiti http://localhost: 8000/oko u svom pregledniku da vidite odgovor poslužitelja.

Integracija Jinja šablona

Nakon što ste uspješno postavili svoj projekt, sada mu možete dodati Jinja šablone.

  1. u glavni.py datoteku, uvezite sljedeće module:
    iz fastapi.templating uvoz Jinja2Templates
    iz fastapi.staticfiles uvoz StaticFiles
  2. Ispod aplikacija varijable, stvorite instancu Jinja2Templates klase i proslijedite direktorij koji će sadržavati vaše predloške.
    predlošci = Jinja2Templates (direktorij="predlošci")
  3. Nakon što šablone varijable dodajte sljedeći redak koda:
    app.mount("/statički", StaticFiles (direktorij="statički"), ime="statički")
    Gornji kod montira statički direktorij i upućuje FastAPI da posluži sve statičke datoteke koje se nalaze u direktoriju kada URL zahtjeva počinje s /static.
  4. U moj blog direktorij stvoriti dva direktorija, šablone za držanje HTML datoteka i statički koji će sadržavati sve statičke datoteke.

Nakon što ste dovršili ove korake, uspješno ste integrirali Jinja Templating u svoj projekt.

Stvaranje dinamičke web stranice s Jinjom

Jinja pruža bogat skup sintakse i značajki za stvaranje dinamičkih predložaka.

U ovom odjeljku vidjet ćete kako koristiti sintaksu Jinja šablona za stvaranje dinamičkih web stranica.

Oznake predložaka stavite s a vitičasta zagrada i simbol postotka na obje strane. Možete koristiti takve oznake za izvođenje kontrolnih tokova i logičkih operacija u predlošku. Neke često korištene oznake predložaka uključuju:

  • Stanje: Pokreće blok koda ako je uvjet istinit.
    {% ako uvjet %}...{% endif %}
  • Petlja: Ponavlja iterable i pokreće blok koda za svaku stavku.
    {% za artikal u iterable %}...{% endfor %}
  • Uključiti: Uključuje još jedan predložak unutar trenutnog predloška.
    {% uključuje 'naziv_predloška.html' %}
  • Blok: Definira blok koji podređeni predlošci mogu nadjačati korištenjem nasljeđivanja.
    {% block block_name %}...{% endblock %}
  • Proširi: Omogućuje podređenom predlošku da naslijedi i proširi roditeljski predložak.
    {% extend parent_temp.html %}

Ove oznake pružaju fleksibilan i izražajan način za generiranje HTML sadržaja na temelju dinamičkih podataka i kontrolu logike vaše aplikacije.

Nasljeđivanje predloška

Jinja Templating podržava nasljeđivanje predložaka. To vam omogućuje definiranje osnovnog (roditeljskog) predloška sa zajedničkim izgledom i odjeljcima koje podređeni predložak može proširiti ili nadjačati. Dječji predložak može koristiti Proširi oznaku za naslijeđivanje i proširenje nadređenog predloška.

Stvoriti baza.html datoteka u šablone imenik sa sljedećim kodom.

html>
<html>
<glava>
<titula>{% block title %}Jednostavan blog{% endblock %}titula>
glava>
<tijelo>
<h1>{% block heading %}Jednostavan blog{% endblock %}h1>
 {% blokiraj sadržaj %}
 {% endblock %}
 {% uključi "footer.html" %}
tijelo>
html>

Na ovaj način imate nadređeni predložak koji sadrži zajednički kod za sve vaše predloške, dopuštajući podređenom predlošku da ga naslijedi i proširi po potrebi.

u šablone stvoriti imenik a podnožje.html datoteku sa sljedećim kodom.

<podnožje>
<str>© 2023 Jednostavan blog. Sva prava pridržana.str>
<ahref="{{ url_for('about') }}">Okoa>
podnožje>

podnožje.html je uključeni predložak koji sadrži HTML kod za odjeljak podnožja. Možete ga ponovno koristiti na više stranica tako da ga uključite u osnovni predložak pomoću Uključiti označiti.

u šablone stvoriti imenik a blog.html datoteku sa sljedećim kodom.

{% proširuje "base.html" %}
{% block title %}Jednostavan blog - stranica bloga{% endblock %}


{% block heading %}Jednostavan blog - stranica bloga{% endblock %}


{% blokiraj sadržaj %}
<h2>Ukupan broj postova: {{ postova|duljina }}h2>


 {% za objavu u objavama %}
<divrazreda="post">


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


<h4>Komentari:h4>
<ul>
 {% za komentar u post.comments %}
<lirazreda="komentar">{{ comment.author }}-: {{ comment.content }}li>
 {% endfor %}
ul>
 {% else %}
<str>Ovaj je post još uvijek u načinu nacrta.str>
 {% završi ako %}
div>
<hr>
 {% endfor %}
{% endblock %}

Ovaj podređeni predložak nasljeđuje od baza.html koristiti Proširi označiti. On nadjačava određene blokove definirane u osnovnom predlošku kako bi pružio prilagođeni sadržaj za stranicu bloga. Također uključuje potrebnu logiku i ponavljanje za prikaz posta i povezanih komentara.

Izrazi

Jinja podržava širok raspon izraza, uključujući aritmetičke operacije, usporedbe i logičke operacije. Na primjer:

{{2 + 2}} // izlaz: 4

Zamjena varijable

Da biste ispisali varijable u predlošku, stavite ih u dvostruke vitičaste zagrade. Na primjer:

{{post.title}} // izlaz: 'Prvi post na blogu'

Filteri

Filtri mijenjaju izlaz varijable. Možete dodati jedan nakon varijable koristeći simbol crte (|). Na primjer:

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

Svojim predlošcima možete dodati ugrađene i višeredne komentare. Jinja će zanemariti ove komentare tijekom renderiranja predloška, ​​tako da su korisni za dodavanje objašnjenja unutar predloška.

{# #} // u redu
{% comment %}... {% end comment %} // više redaka

URL-ovi

Kako bismo vam omogućili generiranje ispravnih hiperveza na druge stranice unutar aplikacije, kontekst predloška Jinja uključuje a url_za funkcija. Na primjer:

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

Gornji kod postaje http://localhost: 8000/oko. Također ćete vidjeti kako koristiti url_za funkciju za dobivanje staza statičke datoteke kasnije.

Ovo su samo neki od temeljnih aspekata sintakse Jinja Templating. Jinja Templateing pruža mnogo više značajki i funkcionalnosti, kao što su makronaredbe, kontekst predloška i više, kako bi stvaranje i prilagodba predložaka bila učinkovita i fleksibilna.

Slanje podataka u predloške

Sada kada imate spremne predloške, trebate proslijediti podatke iz krajnjih točaka FastAPI u predloške za iscrtavanje.

Dodajte sljedeći kod u glavni.py datoteka:

iz brzi uvoz FastAPI, zahtjev
iz fastapi.odgovori uvoz HTMLResponse
@app.get("/", response_class=HTMLResponse)
asinkronidefpročitaj_postove(zahtjev: zahtjev):
povratak šablone. TemplateResponse("blog.html", {"zahtjev": zahtjev, 
"postovi": fake_posts_db})

Kod definira krajnju točku FastAPI koja obrađuje GET zahtjev prema korijenskom URL-u ("/") i vraća HTMLResponse generiran iz blog.html šablona. Prolazi rječnik konteksta koji sadrži trenutni objekt zahtjeva i lažni_postovi_db, u predložak. Na taj način Jinja može prikazati točne i dinamične podatke.

Posjetiti http://localhost: 8000/ na vašem pregledniku i trebali biste vidjeti nešto poput ovoga:

Uspješno ste proslijedili podatke u predloške za iscrtavanje.

Posluživanje statičkih datoteka

Uz renderiranje dinamičkih predložaka, FastAPI također pruža funkcionalnost za posluživanje statičkih datoteka kao što su CSS datoteke, JavaScript datoteke i slike.

CSS ćete koristiti za poboljšanje izgleda i dojma stranice.

u statički imenik, stvorite a stilovi.css datoteku sa sljedećim kodom.

tijelo {
obitelj-fontova: Arial, sans-serif;
margina: 0;
podstava: 20px;
boja pozadine: #f5f5f5;
}
h1, h2, h3, h4 {
boja: #333;
}


.post {
boja pozadine: #F F F;
podstava: 20px;
margina-dno: 20px;
granični radijus: 5px;
kutija-sjena: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.posth3 {
margin-top: 0;
}


.poststr {
margina-dno: 10px;
}


.postul {
lista-stil-tip: nikakav;
padding-lijevo: 0;
}


.komentar {
margina-dno: 10px;
podstava: 10px;
boja pozadine: #f9f9f9;
granični radijus: 5px;
}
podnožje {
boja pozadine: #f2f2f2;
podstava: 10px;
poravnanje teksta: centar;
}

Izmijenite glava element od baza.html predložak kako slijedi:

<glava>
<titula>{% block title %}Jednostavan blog{% endblock %}titula>
<vezahref="{{ url_for('static', path='/styles.css') }}"rel="list stilova">
glava>

Funkcija url_for() generira URL (put) za stilovi.css (/static/styles.css) datoteku u statički imenik koji zatim automatski poslužuje FastAPI.

Posjetiti http://localhost: 8000/ na vašem pregledniku.

Isti postupci vrijede za posluživanje slikovnih i JavaScript datoteka.

Ne zaboravite slijediti najbolje prakse

Kada radite s Jinja Templating u FastAPI-ju, važno je slijediti određene najbolje prakse kako biste osigurali dobro organiziranu i učinkovitu bazu koda.

  • Organizirajte predloške u namjenskom direktoriju i razmislite o korištenju poddirektorija za povezane predloške.
  • Upotrijebite nasljeđivanje predložaka za stvaranje osnovnih predložaka koji se mogu ponovno koristiti i proširite ih za određeni sadržaj.
  • Pažljivo odaberite podatke za prosljeđivanje u predloške, održavajući korisni teret laganim i koristite procesore konteksta ili međuprogram za podatke koji se često koriste.
  • Iskoristite značajke Jinja Templating kao što su makronaredbe, filtri i kontrolne strukture za poboljšanu ponovnu upotrebu i čitljivost koda.
  • Optimizirajte izvedbu implementacijom strategija predmemoriranja za statičke predloške, korištenjem zaglavlja HTTP predmemoriranja i profiliranjem za uska grla u izvedbi.

Slijedeći ove najbolje prakse, možete održavati strukturirani projekt, optimizirati performanse renderiranja i učinkovito iskoristiti značajke Jinja Templating u svojim FastAPI aplikacijama.

Korištenje FastAPI-ja za izgradnju RestAPI-ja

Osim izrade aplikacija koje zahtijevaju predloške za renderiranje. FastAPI se ističe u izgradnji RestAPI-ja zbog svoje visoke izvedbe, sintakse jednostavne za korištenje, automatskog generiranja dokumentacije i skalabilnosti. Ove značajke čine FastAPI idealnim za učinkovit razvoj robusnih web API-ja.