Jinja-Vorlagen bieten eine leistungsstarke Sprache, mit der Sie problemlos dynamische Webseiten erstellen können.

Durch die Integration von Jinja mit FastAPI können Sie dynamische Webseiten erstellen, die Python nahtlos integrieren Code mit HTML, sodass Sie die Präsentationsebene Ihrer Anwendung von der Logik trennen können Schicht. Mit dynamischen Webseiten können Sie personalisierte und datengesteuerte Inhalte generieren und so das Benutzererlebnis verbessern.

Was ist Jinja?

Jinja ist eine robuste, funktionsreiche Template-Engine für Python, die dynamische Webseiten generiert. Jinja Templating unterstützt Vererbung, bedingte Anweisungen, Schleifen und verschiedene Funktionen, die die Erstellung dynamischer Webseiten vereinfachen.

Sie können FastAPI und Jinja kombinieren, um Webseiten mit einem einheitlichen Layout zu erstellen, das Echtzeitdaten anzeigen und Benutzereingaben verarbeiten kann. Sie können es auch erreichen Trennung von BedenkenDadurch wird Ihr Code wartbarer und verständlicher.

instagram viewer

Richten Sie ein FastAPI-Projekt ein

Um zu beginnen, müssen Sie ein FastAPI-Projekt einrichten.

  1. Erstellen und aktivieren Sie eine virtuelle Umgebung Verwenden Sie diese Terminalbefehle:
    python -m venv env
    # Unter Unix/MacOS: 
    Quelle venv/bin/activate
    # Unter Windows:
    .\venv\Scripts\activate
  2. Installieren Sie FastAPI und die erforderlichen Abhängigkeiten.
    pip install „fastapi[all]“
  3. Erstellen Sie ein Projektverzeichnis mein Blog.
  4. Erstellen Sie eine Python-Datei main.py in Ihrem Projektverzeichnis.
  5. Fügen Sie den folgenden Code hinzu main.py Datei:
    aus Fastapi importieren FastAPI
    fake_posts_db = [{
    'Titel': „Erster Blogbeitrag“,
    'Inhalt': „Inhalt des ersten Blogbeitrags.“,
    'Autor': 'John Doe',
    'Veröffentlichungsdatum': '2023-06-20',
    'Kommentare': [
     {'Autor': „Alice“, 'Inhalt': 'Guter Eintrag!'},
     {'Autor': 'Bob', 'Inhalt': „Interessante Lektüre.“}
     ],
    'Status': 'veröffentlicht'
    },{
    'Titel': „Zweiter Blogbeitrag“,
    'Inhalt': „Inhalt des zweiten Blogbeitrags.“,
    'Autor': 'Jane Smith',
    'Veröffentlichungsdatum': Keiner,
    'Kommentare': [],
    'Status': 'Entwurf'
    }]
    

    app = FastAPI()
    @app.get("/about")
    defum():
    zurückkehren„Alles, was Sie über Simple Blog wissen müssen“
    Der obige Code erstellt eine einfache FastAPI-Anwendung mit einem einzelnen Endpunkt, der eine JSON-Antwort zurückgibt, wenn über die entsprechende URL darauf zugegriffen wird. Du kannst Verwenden Sie ein Python-Wörterbuch so anstelle einer tatsächlichen Datenbank; Es hilft, die Komplexität zu reduzieren und sich gleichzeitig auf das Hauptziel zu konzentrieren.
  6. Führen Sie den Server aus.
    uvicorn main: app --reload

Besuchen http://localhost: 8000/ca in Ihrem Browser, um die Serverantwort zu sehen.

Integration von Jinja Templating

Nachdem Sie Ihr Projekt erfolgreich eingerichtet haben, können Sie ihm nun Jinja-Vorlagen hinzufügen.

  1. Im main.py Datei importieren Sie die folgenden Module:
    aus fastapi.templating importieren Jinja2Templates
    aus fastapi.staticfiles importieren Statische Dateien
  2. Unter dem App Variable, erstellen Sie eine Instanz der Jinja2Templates Klasse und übergeben Sie das Verzeichnis, das Ihre Vorlagen enthalten soll.
    templates = Jinja2Templates (directory=„Vorlagen“)
  3. Nach dem Vorlagen Variable, fügen Sie die folgende Codezeile hinzu:
    app.mount("/statisch", StaticFiles (Verzeichnis="statisch"), name="statisch")
    Der obige Code mountet die statisch Verzeichnis und weist FastAPI an, alle statischen Dateien im Verzeichnis bereitzustellen, wenn eine Anforderungs-URL mit beginnt /static.
  4. In mein Blog Verzeichnis zwei Verzeichnisse erstellen, Vorlagen um HTML-Dateien zu speichern und statisch die alle statischen Dateien enthält.

Nachdem diese Schritte abgeschlossen sind, haben Sie Jinja Templating erfolgreich in Ihr Projekt integriert.

Erstellen einer dynamischen Webseite mit Jinja

Jinja bietet umfangreiche Syntax und Funktionen zum Erstellen dynamischer Vorlagen.

In diesem Abschnitt erfahren Sie, wie Sie mithilfe der Jinja-Vorlagensyntax dynamische Webseiten erstellen.

Schließen Sie Vorlagen-Tags mit einem ein geschweifte Klammer Und Prozentzeichen auf beiden Seiten. Sie können solche Tags verwenden, um Kontrollfluss- und Logikoperationen in der Vorlage auszuführen. Zu den häufig verwendeten Vorlagen-Tags gehören:

  • Zustand: Führt den Codeblock aus, wenn die Bedingung wahr ist.
    {% Wenn Bedingung %}...{% endif %}
  • Schleife: Iteriert über ein Iterable und führt den Codeblock für jedes Element aus.
    {% für Artikel In iterierbar %}...{% endfor %}
  • Enthalten: Fügt eine weitere Vorlage in die aktuelle Vorlage ein.
    {% enthalten 'Vorlagenname.html' %}
  • Block: Definiert einen Block, den untergeordnete Vorlagen mithilfe der Vererbung überschreiben können.
    {% block block_name %}...{% endblock %}
  • Erweitern: Ermöglicht der untergeordneten Vorlage, die übergeordnete Vorlage zu erben und zu erweitern.
    {% erweitern parent_temp.html %}

Diese Tags bieten eine flexible und ausdrucksstarke Möglichkeit, HTML-Inhalte basierend auf dynamischen Daten zu generieren und die Logik Ihrer Anwendung zu steuern.

Vorlagenvererbung

Jinja Templating unterstützt die Vorlagenvererbung. Auf diese Weise können Sie eine Basisvorlage (übergeordnete Vorlage) mit einem gemeinsamen Layout und Abschnitten definieren, die eine untergeordnete Vorlage erweitern oder überschreiben kann. Eine untergeordnete Vorlage kann die verwenden Erweitern Tag, um die übergeordnete Vorlage zu erben und zu erweitern.

Ein... kreieren base.html Datei in der Vorlagen Verzeichnis mit dem folgenden Code.

html>
<html>
<Kopf>
<Titel>{% block title %}Einfacher Blog{% endblock %}Titel>
Kopf>
<Körper>
<h1>{% block heading %}Einfacher Blog{% endblock %}h1>
 {% Inhalt blockieren %}
 {% endblock %}
 {% include „footer.html“ %}
Körper>
html>

Auf diese Weise verfügen Sie über eine übergeordnete Vorlage, die den gemeinsamen Code für alle Ihre Vorlagen enthält, sodass die untergeordnete Vorlage ihn nach Bedarf erben und erweitern kann.

Im Vorlagen Verzeichnis erstellen a footer.html Datei mit dem folgenden Code.

<Fusszeile>
<P>© 2023 Einfacher Blog. Alle Rechte vorbehalten.P>
<Ahref="{{ url_for('about') }}">UmA>
Fusszeile>

footer.html ist eine mitgelieferte Vorlage, die den HTML-Code für den Fußzeilenbereich enthält. Sie können es auf mehreren Seiten wiederverwenden, indem Sie es mit in die Basisvorlage aufnehmen Enthalten Schild.

Im Vorlagen Verzeichnis erstellen a blog.html Datei mit dem folgenden Code.

{% erweitert „base.html“ %}
{% block title %}Einfaches Blog – Blog-Seite{% endblock %}


{% block heading %}Einfaches Blog – Blog-Seite{% endblock %}


{% Inhalt blockieren %}
<h2>Gesamtzahl der Beiträge: {{ Beiträge|Länge }}h2>


 {% für Beitrag in Beiträgen %}
<divKlasse="Post">


 {% if post.status == 'veröffentlicht' %}
<h3>{{ post.title }}h3>
<P>{{ post.content|truncate }}P>
<P>Veröffentlicht am: {{ post.publication_date }}P>


<h4>Kommentare:h4>
<ul>
 {% für Kommentar in post.comments %}
<liKlasse="Kommentar">{{ comment.author }}-: {{ comment.content }}li>
 {% endfor %}
ul>
 {% anders %}
<P>Dieser Beitrag befindet sich noch im Entwurfsmodus.P>
 {% endif %}
div>
<Std>
 {% endfor %}
{% endblock %}

Diese untergeordnete Vorlage erbt von base.html Verwendung der Erweitern Schild. Es überschreibt bestimmte in der Basisvorlage definierte Blöcke, um benutzerdefinierte Inhalte für die Blog-Seite bereitzustellen. Es umfasst auch die notwendige Logik und Iteration für die Anzeige eines Beitrags und der zugehörigen Kommentare.

Ausdrücke

Jinja unterstützt eine breite Palette von Ausdrücken, einschließlich arithmetischer Operationen, Vergleiche und logischer Operationen. Zum Beispiel:

{{2 + 2}} // Ausgabe: 4

Variablensubstitution

Um Variablen in der Vorlage auszugeben, schließen Sie sie in doppelte geschweifte Klammern ein. Zum Beispiel:

{{post.title}} // Ausgabe: 'Erster Blog-Beitrag'

Filter

Filter ändern die Ausgabe einer Variablen. Sie können eine Variable nach einer Variablen hinzufügen, indem Sie das Pipe-Symbol (|) verwenden. Zum Beispiel:

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

Sie können Ihren Vorlagen Inline-Kommentare und mehrzeilige Kommentare hinzufügen. Jinja ignoriert diese Kommentare beim Rendern der Vorlage, daher sind sie nützlich, um Erklärungen innerhalb einer Vorlage hinzuzufügen.

{# #} // im Einklang
{% Kommentar %}... {% end comment %} // mehrzeilig

URLs

Damit Sie korrekte Hyperlinks zu anderen Seiten innerhalb der Anwendung generieren können, enthält der Jinja-Vorlagenkontext eine url_for Funktion. Zum Beispiel:

<Ahref="{{ url_for('about') }}">UmA>

Der obige Code wird http://localhost: 8000/ca. Außerdem erfahren Sie, wie Sie das verwenden url_for Funktion, um später statische Dateipfade abzurufen.

Dies sind nur einige der grundlegenden Aspekte der Jinja-Templating-Syntax. Jinja Templating bietet viele weitere Features und Funktionalitäten, wie Makros, Vorlagenkontext und mehr, um die Erstellung und Anpassung von Vorlagen effizient und flexibel zu gestalten.

Daten an Vorlagen übergeben

Da Sie nun Ihre Vorlagen bereit haben, müssen Sie Daten von Ihren FastAPI-Endpunkten zum Rendern an die Vorlagen übergeben.

Fügen Sie den folgenden Code hinzu main.py Datei:

aus Fastapi importieren FastAPI, Anfrage
aus fastapi.responses importieren HTMLResponse
@app.get("/", Response_class=HTMLResponse)
asynchrondefread_posts(Anfrage: Anfrage):
zurückkehren Vorlagen. TemplateResponse(„blog.html“, {"Anfrage": Anfrage, 
„Beiträge“: fake_posts_db})

Der Code definiert einen FastAPI-Endpunkt, der eine GET-Anfrage an die Stamm-URL („/“) verarbeitet und eine zurückgibt HTMLResponse generiert aus dem blog.html Vorlage. Es übergibt ein Kontextwörterbuch, das den aktuellen Inhalt enthält Anforderungsobjekt Und fake_posts_db, in die Vorlage. Auf diese Weise kann Jinja genaue und dynamische Daten rendern.

Besuchen http://localhost: 8000/ in Ihrem Browser und Sie sollten etwa Folgendes sehen:

Sie haben die Daten erfolgreich zum Rendern an die Vorlagen übergeben.

Statische Dateien bereitstellen

Neben dem Rendern dynamischer Vorlagen bietet FastAPI auch Funktionen zum Bereitstellen statischer Dateien wie CSS-Dateien, JavaScript-Dateien und Bilder.

Sie verwenden CSS, um das Erscheinungsbild der Seite zu verbessern.

Im statisch Verzeichnis, erstellen Sie ein Styles.css Datei mit dem folgenden Code.

Körper {
Schriftfamilie: Arial, serifenlos;
Rand: 0;
Polsterung: 20px;
Hintergrundfarbe: #f5f5f5;
}
h1, h2, h3, h4 {
Farbe: #333;
}


.Post {
Hintergrundfarbe: #F f f;
Polsterung: 20px;
Rand unten: 20px;
Grenzradius: 5px;
Box Schatten: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.Posth3 {
Rand oben: 0;
}


.PostP {
Rand unten: 10px;
}


.Postul {
Listenstiltyp: keiner;
Polsterung links: 0;
}


.Kommentar {
Rand unten: 10px;
Polsterung: 10px;
Hintergrundfarbe: #f9f9f9;
Grenzradius: 5px;
}
Fusszeile {
Hintergrundfarbe: #f2f2f2;
Polsterung: 10px;
Textausrichtung: Center;
}

Modifiziere den Kopf Element der base.html Vorlage wie folgt:

<Kopf>
<Titel>{% block title %}Einfacher Blog{% endblock %}Titel>
<Verknüpfunghref="{{ url_for('static', path='/styles.css') }}"rel=„Stylesheet“>
Kopf>

Die Funktion url_for() generiert eine URL (Pfad) für Styles.css (/static/styles.css)-Datei in der statisch Verzeichnis, das dann automatisch von FastAPI bereitgestellt wird.

Besuchen http://localhost: 8000/ in Ihrem Browser.

Die gleichen Verfahren gelten für die Bereitstellung von Bild- und JavaScript-Dateien.

Denken Sie daran, Best Practices zu befolgen

Bei der Arbeit mit Jinja Templating in FastAPI ist es wichtig, bestimmte Best Practices zu befolgen, um eine gut organisierte und effiziente Codebasis sicherzustellen.

  • Organisieren Sie Vorlagen in einem speziellen Verzeichnis und erwägen Sie die Verwendung von Unterverzeichnissen für verwandte Vorlagen.
  • Nutzen Sie die Vorlagenvererbung, um wiederverwendbare Basisvorlagen zu erstellen und diese für bestimmte Inhalte zu erweitern.
  • Wählen Sie die Daten, die an Vorlagen übergeben werden sollen, sorgfältig aus, halten Sie die Nutzlast gering und verwenden Sie Kontextprozessoren oder Middleware für häufig verwendete Daten.
  • Nutzen Sie Jinja Templating-Funktionen wie Makros, Filter und Kontrollstrukturen für eine verbesserte Wiederverwendbarkeit und Lesbarkeit des Codes.
  • Optimieren Sie die Leistung, indem Sie Caching-Strategien für statische Vorlagen implementieren, HTTP-Caching-Header verwenden und Profile für Leistungsengpässe erstellen.

Durch Befolgen dieser Best Practices können Sie ein strukturiertes Projekt verwalten, die Rendering-Leistung optimieren und die Funktionen von Jinja Templating in Ihren FastAPI-Anwendungen effizient nutzen.

Verwendung von FastAPI zum Erstellen von RestAPIs

Abgesehen vom Erstellen von Anwendungen, die Rendering-Vorlagen erfordern. FastAPI zeichnet sich beim Erstellen von RestAPIs aufgrund seiner hohen Leistung, benutzerfreundlichen Syntax, automatischen Dokumentationsgenerierung und Skalierbarkeit aus. Diese Funktionen machen FastAPI ideal für die effiziente Entwicklung robuster Web-APIs.