Sådan opretter du dynamiske websider med Jinja-skabelon i FastAPI

Jinja-skabeloner tilbyder et kraftfuldt sprog, du kan bruge til at skabe dynamiske websider med lethed.

Ved at integrere Jinja med FastAPI kan du skabe dynamiske websider, der problemfrit blander Python kode med HTML, så du kan adskille præsentationslaget i din applikation fra logikken lag. Med dynamiske websider kan du generere personligt og datadrevet indhold, hvilket forbedrer brugeroplevelsen.

Hvad er Jinja?

Jinja er en robust, funktionsrig skabelonmotor til Python, der genererer dynamiske websider. Jinja Templating understøtter arv, betingede erklæringer, loops og forskellige funktioner, der forenkler oprettelsen af dynamiske websider.

Du kan kombinere FastAPI og Jinja for at skabe websider med et ensartet layout, der kan vise realtidsdata og håndtere brugerinput. Du kan også opnå adskillelse af bekymringer, hvilket gør din kode mere vedligeholdelsesvenlig og lettere at forstå.

Konfigurer et FastAPI-projekt

For at komme i gang skal du konfigurere et FastAPI-projekt.

Opret og aktiver et virtuelt miljø
instagram viewer
ved at bruge disse terminalkommandoer:
```
python -m venv env# På Unix/MacOS: 
kilde venv/bin/activate# På Windows:
.\venv\Scripts\aktiver
```
Installer FastAPI og de nødvendige afhængigheder.
```
pip installer "fastapi[all]"
```
Opret en projektmappe min blog.
Opret en Python-fil main.py i din projektmappe.

Tilføj følgende kode til main.py fil:

fra fastapi importere FastAPIfake_posts_db = [{
'titel': 'Første blogindlæg',
'indhold': 'Indholdet af det første blogindlæg.',
'forfatter': 'John Doe',
'publication_date': '2023-06-20',
'kommentarer': [
 {'forfatter': 'Alice', 'indhold': 'Fantastisk indlæg!'},
 {'forfatter': 'Bob', 'indhold': "Interessant læsning."}
 ],
'status': 'udgivet'
},{
'titel': 'Andet blogindlæg',
'indhold': 'Indholdet af det andet blogindlæg.',
'forfatter': 'Jane Smith',
'publication_date': Ingen,
'kommentarer': [],
'status': 'udkast'
}]
app = FastAPI()@app.get("/om")
defom():
Vend tilbage"Alt hvad du behøver at vide om Simple Blog"

Koden ovenfor opretter en simpel FastAPI-applikation med et enkelt slutpunkt, der returnerer et JSON-svar, når det tilgås via den tilsvarende URL. Du kan bruge en Python-ordbog som dette i stedet for en egentlig database; det hjælper med at reducere kompleksiteten og samtidig fokusere på det primære mål.

Kør serveren.
```
uvicorn main: app --genindlæs
```

Besøg http://localhost: 8000/ca i din browser for at se serversvaret.

Integrering af Jinja-skabelon

Efter at have sat dit projekt op, kan du nu tilføje Jinja-skabeloner til det.

I main.py fil, skal du importere følgende moduler:

fra fastapi.skabelon importere Jinja2 skabeloner
fra fastapi.staticfiles importere Statiske filer

Nedenfor app variabel, skal du oprette en forekomst af Jinja2 skabeloner klasse og videregive den mappe, der skal indeholde dine skabeloner.
```
skabeloner = Jinja2Templates (mappe="skabeloner")
```
Efter skabeloner variabel, skal du tilføje følgende kodelinje:
```
app.mount("/statisk", StaticFiles (mappe="statisk"), navn="statisk")
```
Koden ovenfor monterer statisk mappe og instruerer FastAPI til at betjene statiske filer i mappen, når en anmodnings-URL begynder med /static.
I min blog bibliotek oprette to mapper, skabeloner til at holde HTML-filer og statisk som vil indeholde alle statiske filer.

Med disse trin gennemført, har du med succes integreret Jinja Templating med dit projekt.

Oprettelse af dynamisk webside med Jinja

Jinja giver et rigt sæt syntaks og funktioner til at skabe dynamiske skabeloner.

I dette afsnit vil du se, hvordan du bruger Jinja-skabelonsyntaks til at skabe dynamiske websider.

Vedlæg skabelontags med en krøllet bøjle og procent symbol på begge sider. Du kan bruge sådanne tags til at udføre kontrolflow og logiske operationer i skabelonen. Nogle almindeligt anvendte skabelontags omfatter:

Tilstand: Kører kodeblokken, hvis betingelsen er sand.
```
{% hvis betingelse %}...{% endif %}
```
Løkke: Itererer over en iterabel og kører kodeblokken for hvert element.
```
{% til vare i iterable %}...{% endfor %}
```
Omfatte: Inkluderer en anden skabelon i den aktuelle skabelon.
```
{% inkluderer 'skabelonnavn.html' %}
```
Blok: Definerer en blok, som underordnede skabeloner kan tilsidesætte ved brug af arv.
```
{% block block_name %}...{% endblock %}
```
Forlænge: Tillader den underordnede skabelon at arve og udvide den overordnede skabelon.
```
{% extend parent_temp.html %}
```

Disse tags giver en fleksibel og udtryksfuld måde at generere HTML-indhold baseret på dynamiske data og kontrollere logikken i din applikation.

Skabelon Arv

Jinja Templating understøtter skabelonarv. Dette lader dig definere en basisskabelon (overordnet) med et fælles layout og sektioner, som en underskabelon kan udvide eller tilsidesætte. En børneskabelon kan bruge Forlænge tag for at arve og udvide den overordnede skabelon.

Lave en base.html fil i skabeloner bibliotek med følgende kode.

html>
<html>
<hoved>
<titel>{% block title %}Simpel blog{% endblock %}titel>
hoved>
<legeme>
<h1>{% block heading %}Simpel blog{% endblock %}h1> {% bloker indhold %}
 {% slutblok %} {% include "footer.html" %}
legeme>
html>

På denne måde har du en overordnet skabelon, der indeholder den fælles kode for alle dine skabeloner, så den underordnede skabelon kan arve og udvide den efter behov.

I skabeloner mappe oprette en footer.html fil med følgende kode.

<sidefod>
<s>© 2023 Simpel blog. Alle rettigheder forbeholdes.s>
<-enhref="{{ url_for('about') }}">Om-en>
sidefod>

footer.html er en inkluderet skabelon, der indeholder HTML-koden til sidefodsektionen. Du kan genbruge det på tværs af flere sider ved at inkludere det i basisskabelonen ved hjælp af Omfatte tag.

I skabeloner mappe oprette en blog.html fil med følgende kode.

{% udvider "base.html" %}{% block title %}Simpel blog - blogside{% endblock %}
{% block heading %}Simpel blog - blogside{% endblock %}
{% bloker indhold %}
<h2>Samlet antal indlæg: {{ indlæg|længde }}h2>
 {% for indlæg i indlæg %}
<divklasse="stolpe">
 {% if post.status == 'publiceret' %}
<h3>{{ post.title }}h3>
<s>{{ post.content|truncate }}s>
<s>Udgivet den: {{ post.publication_date }}s>
<h4>Kommentarer:h4>
<ul>
 {% for kommentar i post.comments %}
<liklasse="kommentar">{{ comment.author }}-: {{ comment.content }}li>
 {% endfor %}
ul>
 {% andet %}
<s>Dette indlæg er stadig i kladdetilstand.s>
 {% Afslut Hvis %}
div>
<hr>
 {% endfor %}
{% slutblok %}

Denne underordnede skabelon arver fra base.html bruger Forlænge tag. Den tilsidesætter specifikke blokke, der er defineret i basisskabelonen for at levere tilpasset indhold til blogsiden. Det inkluderer også den nødvendige logik og iteration til at vise et indlæg og tilhørende kommentarer.

Udtryk

Jinja understøtter en lang række udtryk, herunder aritmetiske operationer, sammenligninger og logiske operationer. For eksempel:

{{2 + 2}} // output: 4

Variabel substitution

For at udlæse variabler i skabelonen skal du omslutte dem inden for dobbelte krøllede klammeparenteser. For eksempel:

{{post.title}} // output: 'Første blogindlæg'

Filtre

Filtre ændrer output af en variabel. Du kan tilføje en efter en variabel ved at bruge rørsymbolet (|). For eksempel:

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

Du kan tilføje indlejrede kommentarer og kommentarer med flere linjer i dine skabeloner. Jinja vil ignorere disse kommentarer under skabelongengivelsen, så de er nyttige til at tilføje forklaringer i en skabelon.

{# #} // inline{% kommentar %}... {% end comment %} // multiline

URL'er

For at give dig mulighed for at generere korrekte hyperlinks til andre sider i applikationen, inkluderer Jinja-skabelonkonteksten en url_for fungere. For eksempel:

<-enhref="{{ url_for('about') }}">Om-en>

Koden ovenfor bliver http://localhost: 8000/ca. Du vil også se, hvordan du bruger url_for funktion for at få statiske filstier senere.

Dette er blot nogle af de grundlæggende aspekter af Jinja Templating syntaks. Jinja Templating giver mange flere funktioner og funktionaliteter, såsom makroer, skabelonkontekst og mere, for at gøre skabelonoprettelse og tilpasning effektiv og fleksibel.

Overførsel af data til skabeloner

Nu hvor du har dine skabeloner klar, skal du overføre data fra dine FastAPI-endepunkter til skabelonerne til gengivelse.

Tilføj følgende kode til main.py fil:

fra fastapi importere FastAPI, anmodning
fra fastapi.svar importere HTML-svar@app.get("/", response_class=HTMLResponse)
asynkrondeflæs_indlæg(anmodning: anmodning):
Vend tilbage skabeloner. Skabelonsvar("blog.html", {"anmodning": anmodning, 
"indlæg": falske_indlæg_db})

Koden definerer et FastAPI-slutpunkt, der håndterer en GET-anmodning til rod-URL'en ("/") og returnerer en HTML-svar genereret fra blog.html skabelon. Den passerer en kontekstordbog, der indeholder strømmen anmodningsobjekt og falske_indlæg_db, ind i skabelonen. På denne måde kan Jinja gengive nøjagtige og dynamiske data.

Besøg http://localhost: 8000/ i din browser, og du skulle se noget som dette:

Du har med succes overført data til skabelonerne til gengivelse.

Visning af statiske filer

Ud over at gengive dynamiske skabeloner, giver FastAPI også funktionalitet til visning af statiske filer såsom CSS-filer, JavaScript-filer og billeder.

Du vil bruge CSS til at forbedre udseendet og følelsen af siden.

I statisk mappe, opret en styles.css fil med følgende kode.

legeme {
skrifttype-familie: Arial, sans serif;
margen: 0;
polstring: 20px;
baggrundsfarve: #f5f5f5;
}h1, h2, h3, h4 {
farve: #333;
}
.stolpe {
baggrundsfarve: #fff;
polstring: 20px;
margin-bund: 20px;
grænse-radius: 5px;
kasse-skygge: 0 2px 4pxrgba(0, 0, 0, 0.1);
}
.stolpeh3 {
margin-top: 0;
}
.stolpes {
margin-bund: 10px;
}
.stolpeul {
liste-stil-type: ingen;
polstring-venstre: 0;
}
.kommentar {
margin-bund: 10px;
polstring: 10px;
baggrundsfarve: #f9f9f9;
grænse-radius: 5px;
}sidefod {
baggrundsfarve: #f2f2f2;
polstring: 10px;
tekstjustering: centrum;
}

Rediger hoved element af base.html skabelon som følger:

<hoved>
<titel>{% block title %}Simpel blog{% endblock %}titel>
<linkhref="{{ url_for('static', path='/styles.css') }}"rel="stylesheet">
hoved>

Funktionen url_for() genererer en URL (sti) til styles.css (/static/styles.css) fil i statisk mappe, som derefter betjenes automatisk af FastAPI.

Besøg http://localhost: 8000/ på din browser.

De samme procedurer gælder for visning af billed- og JavaScript-filer.

Husk at følge bedste praksis

Når du arbejder med Jinja Templating i FastAPI, er det vigtigt at følge visse bedste praksisser for at sikre en velorganiseret og effektiv kodebase.

Organiser skabeloner i en dedikeret mappe, og overvej at bruge undermapper til relaterede skabeloner.
Brug skabelonarv til at oprette genanvendelige basisskabeloner og udvide dem til specifikt indhold.
Vælg omhyggeligt de data, der skal overføres til skabeloner, hold nyttelasten let, og brug kontekstprocessorer eller middleware til almindeligt anvendte data.
Gør brug af Jinja-skabelonfunktioner som makroer, filtre og kontrolstrukturer for forbedret kodegenanvendelighed og læsbarhed.
Optimer ydeevnen ved at implementere cachestrategier for statiske skabeloner, bruge HTTP-cache-headere og profilering for ydeevneflaskehalse.

Ved at følge disse bedste praksis kan du vedligeholde et struktureret projekt, optimere gengivelsesydelsen og effektivt udnytte funktionerne i Jinja Templating i dine FastAPI-applikationer.

Brug af FastAPI til at bygge RestAPI'er

Bortset fra at bygge applikationer, der kræver gengivelse af skabeloner. FastAPI udmærker sig ved at bygge RestAPI'er på grund af dens høje ydeevne, brugervenlige syntaks, automatiske dokumentationsgenerering og skalerbarhed. Disse funktioner gør FastAPI ideel til effektiv udvikling af robuste web-API'er.

About Technology - denizatm.com