Szablony Jinja oferują potężny język, którego można używać do łatwego tworzenia dynamicznych stron internetowych.

Integracja Jinja z FastAPI umożliwia tworzenie dynamicznych stron internetowych, które płynnie łączą język Python kodu z HTML, co pozwala oddzielić warstwę prezentacyjną aplikacji od logiki warstwa. Dzięki dynamicznym stronom internetowym możesz generować spersonalizowane i oparte na danych treści, poprawiając wrażenia użytkowników.

Co to jest Jinja?

Jinja to solidny, bogaty w funkcje silnik szablonów dla Pythona, który generuje dynamiczne strony internetowe. Jinja Templating obsługuje dziedziczenie, instrukcje warunkowe, pętle i różne funkcje, które upraszczają tworzenie dynamicznych stron internetowych.

Możesz łączyć FastAPI i Jinja, aby tworzyć strony internetowe o spójnym układzie, które mogą wyświetlać dane w czasie rzeczywistym i obsługiwać dane wprowadzane przez użytkownika. Możesz też osiągnąć separacja obaw, dzięki czemu Twój kod jest łatwiejszy w utrzymaniu i łatwiejszy do zrozumienia.

instagram viewer

Skonfiguruj projekt FastAPI

Aby rozpocząć, musisz skonfigurować projekt FastAPI.

  1. Stwórz i aktywuj środowisko wirtualne używając tych poleceń terminala:
    python -m venv śr
    # W systemach Unix/MacOS: 
    źródło venv/bin/aktywuj
    # W systemie Windows:
    .\venv\Scripts\aktywacja
  2. Zainstaluj FastAPI i wymagane zależności.
    pip zainstaluj "fastapi [wszystko]"
  3. Utwórz katalog projektu mój blog.
  4. Utwórz plik Pythona main.py w katalogu twojego projektu.
  5. Dodaj następujący kod do pliku main.py plik:
    z fastapi import Fast API
    fake_posts_db = [{
    'tytuł': „Pierwszy wpis na blogu”,
    'treść': „Treść pierwszego wpisu na blogu”.,
    'autor': 'Nieznany z nazwiska',
    'Data publikacji': '2023-06-20',
    'uwagi': [
     {'autor': „Alicja”, 'treść': 'Wspaniały post!'},
     {'autor': 'Pion', 'treść': „Interesująca lektura”.}
     ],
    'status': 'opublikowany'
    },{
    'tytuł': „Drugi wpis na blogu”,
    'treść': „Treść drugiego wpisu na blogu”.,
    'autor': 'Jane Smith',
    'Data publikacji': Nic,
    'uwagi': [],
    'status': 'projekt'
    }]
    

    aplikacja = FastAPI()
    @app.get("/o")
    poko():
    powrót„Wszystko, co musisz wiedzieć o prostym blogu”
    Powyższy kod tworzy prostą aplikację FastAPI z pojedynczym punktem końcowym, który zwraca odpowiedź JSON po uzyskaniu dostępu za pośrednictwem odpowiedniego adresu URL. Możesz użyj słownika Pythona w ten sposób zamiast rzeczywistej bazy danych; pomaga zmniejszyć złożoność, koncentrując się na głównym celu.
  6. Uruchom serwer.
    główny uvicorn: aplikacja --przeładuj

Odwiedzać http://localhost: 8000/ok w przeglądarce, aby zobaczyć odpowiedź serwera.

Integracja szablonów Jinja

Po pomyślnym skonfigurowaniu projektu możesz teraz dodać do niego szablony Jinja.

  1. w main.py plik, zaimportuj następujące moduły:
    z fastapi.szablony import Szablony Jinja2
    z fastapi.pliki statyczne import pliki statyczne
  2. Poniżej aplikacja zmienna, utwórz instancję pliku Szablony Jinja2 class i przekaż katalog, który będzie zawierał twoje szablony.
    szablony = Jinja2Templates (katalog="szablony")
  3. Po szablony zmienna, dodaj następujący wiersz kodu:
    aplikacja.montaż("/statyczny", pliki statyczne (katalog="statyczny"), nazwa="statyczny")
    Powyższy kod montuje statyczny katalog i instruuje FastAPI, aby udostępniał wszystkie pliki statyczne znajdujące się w katalogu, gdy adres URL żądania zaczyna się od /static.
  4. W mój blog katalog utwórz dwa katalogi, szablony do przechowywania plików HTML i statyczny który będzie zawierał wszystkie pliki statyczne.

Po wykonaniu tych kroków pomyślnie zintegrowałeś Jinja Templating ze swoim projektem.

Tworzenie dynamicznej strony internetowej za pomocą Jinja

Jinja zapewnia bogaty zestaw składni i funkcji do tworzenia dynamicznych szablonów.

W tej sekcji zobaczysz, jak używać składni szablonów Jinja do tworzenia dynamicznych stron internetowych.

Załącz znaczniki szablonu za pomocą a nawias klamrowy I symbol procentu po obu stronach. Takich tagów można używać do wykonywania operacji przepływu sterowania i logiki w szablonie. Niektóre powszechnie używane znaczniki szablonów to:

  • Stan: Uruchamia blok kodu, jeśli warunek jest prawdziwy.
    {% Jeśli warunek %}...{% endif %}
  • Pętla: Iteruje po obiekcie iterowalnym i uruchamia blok kodu dla każdego elementu.
    {% Do przedmiot W iterowalny %}...{% endfor %}
  • Włączać: zawiera inny szablon w bieżącym szablonie.
    {% włączać „nazwa_szablonu.html” %}
  • Blok: Definiuje blok, który szablony podrzędne mogą zastąpić za pomocą dziedziczenia.
    {% blok nazwa_bloku %}...{% blok końcowy %}
  • Rozszerzyć: umożliwia szablonowi podrzędnemu dziedziczenie i rozszerzanie szablonu nadrzędnego.
    {% extend parent_temp.html %}

Te znaczniki zapewniają elastyczny i wyrazisty sposób generowania treści HTML na podstawie dynamicznych danych i kontrolowania logiki aplikacji.

Dziedziczenie szablonu

Jinja Templating obsługuje dziedziczenie szablonów. Pozwala to na zdefiniowanie szablonu podstawowego (nadrzędnego) ze wspólnym układem i sekcjami, które szablon podrzędny może rozszerzyć lub nadpisać. Szablon podrzędny może używać formatu Rozszerzyć tag, aby odziedziczyć i rozszerzyć szablon nadrzędny.

Stwórz baza.html plik w szablony katalog z następującym kodem.

HTML>
<HTML>
<głowa>
<tytuł>{% block title %}Prosty blog{% endblock %}tytuł>
głowa>
<ciało>
<h1>{% block head %}Prosty blog{% endblock %}h1>
 {% zablokuj zawartość %}
 {% blok końcowy %}
 {% zawiera "footer.html" %}
ciało>
HTML>

W ten sposób masz szablon nadrzędny, który zawiera wspólny kod dla wszystkich szablonów, dzięki czemu szablon podrzędny może go dziedziczyć i rozszerzać zgodnie z wymaganiami.

w szablony utwórz katalog a stopka.html plik z następującym kodem.

<stopka>
<P>© Prosty blog 2023. Wszelkie prawa zastrzeżone.P>
<Ahref="{{url_for('informacje') }}">OA>
stopka>

stopka.html to dołączony szablon zawierający kod HTML sekcji stopki. Możesz użyć go ponownie na wielu stronach, dołączając go do szablonu podstawowego za pomocą Włączać etykietka.

w szablony utwórz katalog a blog.html plik z następującym kodem.

{% rozszerza "base.html" %}
{% block title %}Prosty blog — strona bloga{% endblock %}


{% block head %}Prosty blog — strona bloga{% endblock %}


{% zablokuj zawartość %}
<h2>Łączna liczba postów: {{ posts|length }}h2>


 {% za post w postach %}
<dzklasa="post">


 {% if post.status == 'opublikowano' %}
<h3>{{post.title}}h3>
<P>{{post.content|obcinanie }}P>
<P>Opublikowano: {{ post.publication_date }}P>


<h4>Uwagi:h4>
<ul>
 {% za komentarz w post.comments %}
<liklasa="komentarz">{{ komentarz.autor }}-: {{ komentarz.zawartość }}li>
 {% koniec dla %}
ul>
 {% w przeciwnym razie %}
<P>Ten post jest nadal w trybie roboczym.P>
 {% końcówka %}
dz>
<godz>
 {% koniec dla %}
{% blok końcowy %}

Ten szablon podrzędny dziedziczy z baza.html używając Rozszerzyć etykietka. Zastępuje określone bloki zdefiniowane w szablonie podstawowym, aby zapewnić niestandardową zawartość strony blogu. Obejmuje również niezbędną logikę i iterację do wyświetlania posta i powiązanych komentarzy.

Wyrażenia

Jinja obsługuje szeroki zakres wyrażeń, w tym operacje arytmetyczne, porównania i operacje logiczne. Na przykład:

{{2 + 2}} // wynik: 4

Podstawianie zmiennych

Aby wyprowadzić zmienne w szablonie, umieść je w podwójnych nawiasach klamrowych. Na przykład:

{{post.title}} // dane wyjściowe: „Pierwszy post na blogu”

Filtry

Filtry modyfikują dane wyjściowe zmiennej. Możesz dodać jeden po zmiennej, używając symbolu potoku (|). Na przykład:

{{post|długość}} // wynik: 2

W szablonach możesz dodawać komentarze wbudowane i komentarze wielowierszowe. Jinja zignoruje te komentarze podczas renderowania szablonu, więc są one przydatne do dodawania wyjaśnień w szablonie.

{# #} // wbudowany
{% komentarz %}... {% koniec komentarza %} // wielowiersz

adresy URL

Aby umożliwić generowanie poprawnych hiperłączy do innych stron w aplikacji, kontekst szablonu Jinja obejmuje url_for funkcjonować. Na przykład:

<Ahref="{{url_for('informacje') }}">OA>

Powyższy kod staje się http://localhost: 8000/ok. Zobaczysz również, jak korzystać z url_for funkcja, aby później uzyskać statyczne ścieżki do plików.

To tylko niektóre z podstawowych aspektów składni Jinja Templating. Jinja Templating zapewnia wiele innych funkcji i funkcji, takich jak makra, kontekst szablonu i wiele innych, aby tworzenie i dostosowywanie szablonów było wydajne i elastyczne.

Przekazywanie danych do szablonów

Teraz, gdy masz gotowe szablony, musisz przekazać dane z punktów końcowych FastAPI do szablonów w celu renderowania.

Dodaj następujący kod do pliku main.py plik:

z fastapi import FastAPI, żądanie
z fastapi.odpowiedzi import HTMLOdpowiedź
@app.get("/", response_class=HTMLResponse)
asynchronicznypokprzeczytaj_posty(prośba: prośba):
powrót szablony. Szablon odpowiedzi(„blog.html”, {"wniosek": wniosek, 
"posty": fake_posts_db})

Kod definiuje punkt końcowy FastAPI, który obsługuje żądanie GET do głównego adresu URL („/”) i zwraca HTMLOdpowiedź generowane z blog.html szablon. Przekazuje słownik kontekstowy, zawierający bieżący obiekt żądania I fake_posts_db, do szablonu. W ten sposób Jinja może renderować dokładne i dynamiczne dane.

Odwiedzać http://localhost: 8000/ w przeglądarce i powinieneś zobaczyć coś takiego:

Pomyślnie przekazałeś dane do szablonów do renderowania.

Obsługa plików statycznych

Oprócz renderowania dynamicznych szablonów, FastAPI zapewnia również funkcjonalność obsługi plików statycznych, takich jak pliki CSS, pliki JavaScript i obrazy.

Użyjesz CSS, aby poprawić wygląd i sposób działania strony.

w statyczny katalog, utwórz plik style.css plik z następującym kodem.

ciało {
rodzina czcionek: Arial, bezszeryfowe;
margines: 0;
wyściółka: 20piks;
kolor tła: #f5f5f5;
}
h1, h2, h3, h4 {
kolor: #333;
}


.post {
kolor tła: #ffff;
wyściółka: 20piks;
margines-dolny: 20piks;
promień granicy: 5piks;
pudełko-cień: 0 2piks 4piksrgba(0, 0, 0, 0.1);
}


.posth3 {
górny margines: 0;
}


.postP {
margines-dolny: 10piks;
}


.postul {
typ-styl-listy: nic;
dopełnienie-lewo: 0;
}


.komentarz {
margines-dolny: 10piks;
wyściółka: 10piks;
kolor tła: #f9f9f9;
promień granicy: 5piks;
}
stopka {
kolor tła: #f2f2f2;
wyściółka: 10piks;
wyrównanie tekstu: Centrum;
}

Zmodyfikuj głowa element baza.html szablon w następujący sposób:

<głowa>
<tytuł>{% block title %}Prosty blog{% endblock %}tytuł>
<połączyćhref="{{url_for('static', path='/styles.css') }}"rel=„arkusz stylów”>
głowa>

Funkcja url_for() generuje adres URL (ścieżkę) dla style.css (/static/styles.css) w pliku statyczny katalog, który następnie jest automatycznie obsługiwany przez FastAPI.

Odwiedzać http://localhost: 8000/ w Twojej przeglądarce.

Te same procedury dotyczą udostępniania plików graficznych i JavaScript.

Pamiętaj o przestrzeganiu najlepszych praktyk

Podczas pracy z Jinja Templating w FastAPI ważne jest przestrzeganie pewnych najlepszych praktyk, aby zapewnić dobrze zorganizowaną i wydajną bazę kodu.

  • Uporządkuj szablony w dedykowanym katalogu i rozważ użycie podkatalogów dla powiązanych szablonów.
  • Wykorzystaj dziedziczenie szablonów do tworzenia podstawowych szablonów wielokrotnego użytku i rozszerzaj je o określoną zawartość.
  • Ostrożnie wybieraj dane, które mają być przekazywane do szablonów, zachowując lekkość ładunku i używaj procesorów kontekstowych lub oprogramowania pośredniczącego dla często używanych danych.
  • Korzystaj z funkcji szablonów Jinja, takich jak makra, filtry i struktury kontrolne, aby poprawić czytelność i ponowne użycie kodu.
  • Zoptymalizuj wydajność, wdrażając strategie buforowania dla szablonów statycznych, używając nagłówków buforowania HTTP i profilowania pod kątem wąskich gardeł wydajności.

Postępując zgodnie z tymi najlepszymi praktykami, możesz utrzymać ustrukturyzowany projekt, zoptymalizować wydajność renderowania i efektywnie wykorzystać funkcje Jinja Templating w swoich aplikacjach FastAPI.

Używanie FastAPI do budowania RestAPI

Oprócz budowania aplikacji, które wymagają szablonów renderowania. FastAPI przoduje w budowaniu RestAPI ze względu na wysoką wydajność, łatwą w użyciu składnię, automatyczne generowanie dokumentacji i skalowalność. Te cechy sprawiają, że FastAPI idealnie nadaje się do wydajnego tworzenia solidnych internetowych interfejsów API.