Jinja-mallit tarjoavat tehokkaan kielen, jonka avulla voit luoda dynaamisia verkkosivuja helposti.

Integroimalla Jinjan FastAPI: n kanssa voit luoda dynaamisia verkkosivuja, jotka yhdistävät saumattomasti Pythonin koodi HTML: llä, jolloin voit erottaa sovelluksesi esityskerroksen logiikasta kerros. Dynaamisten verkkosivujen avulla voit luoda yksilöllistä ja tietopohjaista sisältöä, mikä parantaa käyttökokemusta.

Mikä on Jinja?

Jinja on vankka, monipuolinen Python-mallipohja, joka luo dynaamisia verkkosivuja. Jinja Templating tukee periytymistä, ehdollisia lausekkeita, silmukoita ja erilaisia ​​ominaisuuksia, jotka yksinkertaistavat dynaamisten verkkosivujen luomista.

Voit yhdistää FastAPI: n ja Jinjan luodaksesi yhtenäisen asettelun omaavia verkkosivuja, jotka voivat näyttää reaaliaikaisia ​​tietoja ja käsitellä käyttäjän syötteitä. Voit myös saavuttaa huolenaiheiden erottaminen, jolloin koodistasi tulee helpommin ylläpidettävä ja ymmärrettävämpi.

Määritä FastAPI-projekti

Aloittaaksesi sinun on määritettävä FastAPI-projekti.

instagram viewer
  1. Luo ja aktivoi virtuaalinen ympäristö käyttämällä näitä päätekomentoja:
    python -m venv env
    # Unix/MacOS: ssä: 
    lähde venv/bin/activate
    # Windowsissa:
    .\venv\Scripts\activate
  2. Asenna FastAPI ja tarvittavat riippuvuudet.
    pip asennus "fastapi[kaikki]"
  3. Luo projektihakemisto blogini.
  4. Luo Python-tiedosto main.py projektihakemistossasi.
  5. Lisää seuraava koodi main.py tiedosto:
    alkaen fastapi tuonti FastAPI
    fake_posts_db = [{
    'titteli': "Ensimmäinen blogikirjoitus",
    'sisältö': "Ensimmäisen blogikirjoituksen sisältö.",
    'kirjailija': "John Doe",
    'julkaisupäivämäärä': '2023-06-20',
    'kommentit': [
     {'kirjailija': "Liisa", 'sisältö': 'Hieno postaus!'},
     {'kirjailija': 'Bob', 'sisältö': "Mielenkiintoista luettavaa."}
     ],
    'Tila': 'julkaistu'
    },{
    'titteli': "Toinen blogikirjoitus",
    'sisältö': "Toisen blogikirjoituksen sisältö.",
    'kirjailija': "Jane Smith",
    'julkaisupäivämäärä': Ei mitään,
    'kommentit': [],
    'Tila': 'luonnos'
    }]
    

    sovellus = FastAPI()
    @app.get("/about")
    defnoin():
    palata"Kaikki mitä sinun tulee tietää Simple Blogista"
    Yllä oleva koodi luo yksinkertaisen FastAPI-sovelluksen yhdellä päätepisteellä, joka palauttaa JSON-vastauksen, kun sitä käytetään vastaavan URL-osoitteen kautta. Sinä pystyt käytä Python-sanakirjaa kuten tämä todellisen tietokannan sijasta; se auttaa vähentämään monimutkaisuutta keskittyen samalla ensisijaiseen tavoitteeseen.
  6. Suorita palvelin.
    uvicorn main: app --reload

Vierailla http://localhost: 8000/n selaimessasi nähdäksesi palvelimen vastauksen.

Jinja-mallin integrointi

Kun projektisi on määritetty onnistuneesti, voit nyt lisätä siihen Jinja-mallin.

  1. Vuonna main.py tiedosto, tuo seuraavat moduulit:
    alkaen fastapi.templates tuonti Jinja2 Templates
    alkaen fastapi.staticfiles tuonti StaticFiles
  2. Alapuolella sovellus muuttuja, luo esiintymä Jinja2 Templates luokka ja välitä hakemisto, joka sisältää mallisi.
    templates = Jinja2Templates (hakemisto="malleja")
  3. Jälkeen malleja muuttuja, lisää seuraava koodirivi:
    app.mount("/staattinen", StaticFiles (hakemisto="staattinen"), nimi="staattinen")
    Yllä oleva koodi kiinnittää staattinen hakemistoon ja käskee FastAPI: ta palvelemaan kaikki hakemistossa olevat staattiset tiedostot, kun pyynnön URL-osoite alkaa /static.
  4. Sisään blogini hakemisto luo kaksi hakemistoa, malleja säilyttää HTML-tiedostoja ja staattinen joka sisältää kaikki staattiset tiedostot.

Kun nämä vaiheet on suoritettu, olet onnistuneesti integroinut Jinja Templatesin projektiisi.

Dynaamisen Web-sivun luominen Jinjan kanssa

Jinja tarjoaa runsaasti syntaksia ja ominaisuuksia dynaamisten mallien luomiseen.

Tässä osiossa näet, kuinka Jinja-mallisyntaksia käytetään dynaamisten verkkosivujen luomiseen.

Liitä mallitunnisteet kirjaimella a kihara olkaimet ja prosentin symboli molemmin puolin. Tällaisten tunnisteiden avulla voit suorittaa ohjausvirta- ja logiikkatoimintoja mallissa. Jotkut yleisesti käytetyt mallitunnisteet sisältävät:

  • Kunto: Suorittaa koodilohkon, jos ehto on tosi.
    {% jos ehto %}...{% endif %}
  • Silmukka: Iteroi iteroitavan ja suorittaa kunkin kohteen koodilohkon.
    {% varten kohde sisään iteroitavissa %}...{% endfor %}
  • Sisältää: Sisältää toisen mallin nykyiseen malliin.
    {% sisältää 'mallin_nimi.html' %}
  • Lohko: Määrittää lohkon, jonka alimallipohjat voivat ohittaa periytymisen avulla.
    {% block block_name %}...{% endblock %}
  • Laajenna: Sallii alatason mallin periä ja laajentaa ylätason mallia.
    {% extend parent_temp.html %}

Nämä tunnisteet tarjoavat joustavan ja ilmeikäs tavan luoda dynaamisiin tietoihin perustuvaa HTML-sisältöä ja hallita sovelluksesi logiikkaa.

Mallin perintö

Jinja Templating tukee mallipohjan periytymistä. Tämän avulla voit määrittää perusmallin (ylämallin), jossa on yhteinen asettelu ja osiot, joita alamalli voi laajentaa tai ohittaa. Lapsimalli voi käyttää Laajenna -tunniste periä ja laajentaa päämallia.

Luo base.html tiedosto tiedostoon malleja hakemistoon seuraavalla koodilla.

html>
<html>
<pää>
<otsikko>{% block title %}Yksinkertainen blogi{% endblock %}otsikko>
pää>
<kehon>
<h1>{% block heading %}Yksinkertainen blogi{% endblock %}h1>
 {% block content %}
 {% endblock %}
 {% include "footer.html" %}
kehon>
html>

Tällä tavalla sinulla on ylämalli, joka sisältää yhteisen koodin kaikille malleillesi, jolloin alimalli voi periä ja laajentaa sitä tarpeen mukaan.

Vuonna malleja hakemiston luominen a alatunniste.html tiedosto seuraavalla koodilla.

<alatunniste>
<s>© 2023 yksinkertainen blogi. Kaikki oikeudet pidätetään.s>
<ahref="{{ url_for('about') }}">Noina>
alatunniste>

alatunniste.html on mukana oleva malli, joka sisältää alatunnisteosion HTML-koodin. Voit käyttää sitä uudelleen useilla sivuilla sisällyttämällä sen perusmalliin käyttämällä Sisältää tag.

Vuonna malleja hakemiston luominen a blogi.html tiedosto seuraavalla koodilla.

{% laajentaa "base.html" %}
{% block title %}Yksinkertainen blogi - Blogisivu{% endblock %}


{% block heading %}Yksinkertainen blogi - Blogisivu{% endblock %}


{% block content %}
<h2>Viestien kokonaismäärä: {{ viestiä|pituus }}h2>


 {% viestistä viesteissä %}
<divluokkaa="lähettää">


 {% if post.status == 'julkaistu' %}
<h3>{{ post.title }}h3>
<s>{{ post.content|lyhennä }}s>
<s>Julkaistu: {{ post.publication_date }}s>


<h4>Kommentit:h4>
<ul>
 {% kommentista post.commentsissa %}
<liluokkaa="kommentti">{{ comment.author }}-: {{ comment.content }}li>
 {% endfor %}
ul>
 {% muuta %}
<s>Tämä viesti on edelleen luonnostilassa.s>
 {% loppu Jos %}
div>
<hr>
 {% endfor %}
{% endblock %}

Tämä lapsimalli on perinyt base.html käyttämällä Laajenna tag. Se ohittaa tietyt perusmallissa määritellyt lohkot tarjotakseen mukautettua sisältöä blogisivulle. Se sisältää myös tarvittavan logiikan ja iteroinnin postauksen ja siihen liittyvien kommenttien näyttämiseen.

Ilmaisut

Jinja tukee monenlaisia ​​lausekkeita, mukaan lukien aritmeettiset operaatiot, vertailut ja loogiset operaatiot. Esimerkiksi:

{{2 + 2}} // lähtö: 4

Muuttujan korvaaminen

Jos haluat tulostaa muuttujat malliin, sulje ne kaksoissulkeisiin. Esimerkiksi:

{{post.title}} // tulos: 'Ensimmäinen blogikirjoitus'

Suodattimet

Suodattimet muokkaavat muuttujan tulosta. Voit lisätä yhden muuttujan perään käyttämällä putkisymbolia (|). Esimerkiksi:

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

Voit lisätä malleihisi upotettuja kommentteja ja monirivisiä kommentteja. Jinja jättää nämä kommentit huomioimatta mallin renderöinnin aikana, joten niistä on hyötyä lisättäessä selityksiä malliin.

{# #} // linjassa
{% kommentti %}... {% end comment %} // monirivinen

URL-osoitteet

Jotta voit luoda oikeita hyperlinkkejä muille sovelluksen sivuille, Jinja-mallikonteksti sisältää a url_for toiminto. Esimerkiksi:

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

Yllä oleva koodi muuttuu http://localhost: 8000/n. Näet myös kuinka käyttää url_for toiminto saadaksesi staattiset tiedostopolut myöhemmin.

Nämä ovat vain joitain Jinja Templating -syntaksin perusnäkökohtia. Jinja Templating tarjoaa monia muita ominaisuuksia ja toimintoja, kuten makroja, mallikontekstia ja paljon muuta, mikä tekee mallien luomisesta ja mukauttamisesta tehokasta ja joustavaa.

Tietojen välittäminen malleihin

Nyt kun mallit ovat valmiina, sinun on siirrettävä tiedot FastAPI-päätepisteistäsi malleihin hahmontamista varten.

Lisää seuraava koodi main.py tiedosto:

alkaen fastapi tuonti FastAPI, pyyntö
alkaen fastapi.responses tuonti HTMLResponse
@app.get("/", response_class=HTMLResponse)
asynkdefread_posts(pyyntö: Pyyntö):
palata malleja. TemplateResponse("blogi.html", {"pyyntö": pyyntö, 
"viestit": fake_posts_db})

Koodi määrittää FastAPI-päätepisteen, joka käsittelee GET-pyynnön juuri-URL-osoitteeseen ("/") ja palauttaa HTMLResponse luotu blogi.html sapluuna. Se välittää kontekstisanakirjan, joka sisältää nykyisen pyyntöobjekti ja fake_posts_db, malliin. Tällä tavalla Jinja voi tuottaa tarkkoja ja dynaamisia tietoja.

Vierailla http://localhost: 8000/ selaimessasi ja sinun pitäisi nähdä jotain tällaista:

Olet onnistuneesti siirtänyt tiedot malleihin hahmontamista varten.

Staattisten tiedostojen palveleminen

Dynaamisten mallien renderöinnin lisäksi FastAPI tarjoaa myös toimintoja staattisten tiedostojen, kuten CSS-tiedostojen, JavaScript-tiedostojen ja kuvien, palvelemiseen.

Käytät CSS: ää parantaaksesi sivun ulkoasua ja tuntumaa.

Vuonna staattinen hakemisto, luo a styles.css tiedosto seuraavalla koodilla.

kehon {
font-perhe: Arial, sans-serif;
marginaali: 0;
pehmuste: 20px;
taustaväri: #f5f5f5;
}
h1, h2, h3, h4 {
väri: #333;
}


.lähettää {
taustaväri: #F F F;
pehmuste: 20px;
marginaali-ala: 20px;
raja-säde: 5px;
laatikko-varjo: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.lähettääh3 {
marginaali yläosa: 0;
}


.lähettääs {
marginaali-ala: 10px;
}


.lähettääul {
lista-tyylinen: ei mitään;
pehmuste-vasen: 0;
}


.kommentti {
marginaali-ala: 10px;
pehmuste: 10px;
taustaväri: #f9f9f9;
raja-säde: 5px;
}
alatunniste {
taustaväri: #f2f2f2;
pehmuste: 10px;
tekstin tasaus: keskusta;
}

Muokkaa pää elementti base.html malli seuraavasti:

<pää>
<otsikko>{% block title %}Yksinkertainen blogi{% endblock %}otsikko>
<linkkihref="{{ url_for('static', path='/styles.css') }}"rel="tyylitaulukko">
pää>

Funktio url_for() luo URL-osoitteen (polun) funktiolle styles.css (/static/styles.css) -tiedostossa staattinen hakemistoon, jota FastAPI palvelee sitten automaattisesti.

Vierailla http://localhost: 8000/ selaimessasi.

Samat menettelyt koskevat kuva- ja JavaScript-tiedostojen näyttämistä.

Muista noudattaa parhaita käytäntöjä

Kun työskentelet Jinja Templatingin kanssa FastAPI: ssa, on tärkeää noudattaa tiettyjä parhaita käytäntöjä, jotta varmistetaan hyvin organisoitu ja tehokas koodikanta.

  • Järjestä mallit omaan hakemistoon ja harkitse alihakemistojen käyttöä niihin liittyville malleille.
  • Käytä mallipohjan perintöä luodaksesi uudelleenkäytettäviä perusmalleja ja laajentaaksesi niitä tietylle sisällölle.
  • Valitse huolellisesti malleihin siirrettävät tiedot pitäen hyötykuorman kevyenä ja käytä kontekstiprosessoreita tai väliohjelmistoa yleisesti käytetyille tiedoille.
  • Hyödynnä Jinja Templatingin ominaisuuksia, kuten makroja, suodattimia ja ohjausrakenteita koodin uudelleenkäytettävyyden ja luettavuuden parantamiseksi.
  • Optimoi suorituskyky ottamalla käyttöön välimuististrategioita staattisille malleille, käyttämällä HTTP-välimuistiotsikoita ja profiloimalla suorituskyvyn pullonkauloja.

Noudattamalla näitä parhaita käytäntöjä voit ylläpitää jäsenneltyä projektia, optimoida renderöinnin suorituskyvyn ja hyödyntää tehokkaasti Jinja Templatingin ominaisuuksia FastAPI-sovelluksissasi.

FastAPI: n käyttäminen RestAPI: iden rakentamiseen

Lukuun ottamatta sovellusten rakentamista, jotka vaativat renderöintimalleja. FastAPI loistaa RestAPI: iden rakentamisessa korkean suorituskyvyn, helppokäyttöisen syntaksin, automaattisen dokumentaation luomisen ja skaalautuvuuden ansiosta. Nämä ominaisuudet tekevät FastAPI: sta ihanteellisen kestävien verkkosovellusliittymien tehokkaaseen kehittämiseen.