L’intégration de Jinja avec FastAPI vous permet de créer des pages web dynamiques qui mélangent de manière transparente le code Python et le HTML, ce qui vous permet de séparer la couche de présentation de votre application de la couche logique. Avec les pages web dynamiques, vous pouvez générer un contenu personnalisé et basé sur des données, améliorant ainsi l’expérience de l’utilisateur.
Qu’est-ce que Jinja ?
Jinja est un moteur de template robuste et riche en fonctionnalités pour Python qui génère des pages web dynamiques. Jinja Templating prend en charge l’héritage, les instructions conditionnelles, les boucles et d’autres fonctionnalités qui simplifient la création de pages web dynamiques.
Vous pouvez combiner FastAPI et Jinja pour créer des pages web avec une mise en page cohérente qui peut afficher des données en temps réel et gérer les entrées des utilisateurs. Vous pouvez également séparer les préoccupations, ce qui rend votre code plus facile à maintenir et à comprendre.
Mise en place d’un projet FastAPI
Pour commencer, vous devez mettre en place un projet FastAPI.
- Créez et activez un environnement virtuel à l’aide de ces commandes de terminal :
python -m venv env
# On Unix/MacOS:
source venv/bin/activate
# On Windows:
.\venv\Scripts\activate - Installer FastAPI et les dépendances nécessaires.
pip install "fastapi[all]" - Créer un répertoire de projet mon_blog.
- Créer un fichier Python main.py dans le répertoire de votre projet.
- Ajoutez le code suivant au fichier main.py fichier :
from fastapi import FastAPI
fake_posts_db = [{
'title': 'First Blog Post',
'content': 'Content of the first blog post.',
'author': 'John Doe',
'publication_date': '2023-06-20',
'comments': [
{'author': 'Alice', 'content': 'Great post!'},
{'author': 'Bob', 'content': 'Intresting read.'}
],
'status': 'published'
},{
'title': 'Second Blog Post',
'content': 'Content of the second blog post.',
'author': 'Jane Smith',
'publication_date': None,
'comments': [],
'status': 'draft'
}]
app = FastAPI()
@app.get("/about")
def about():
return "All you need to know about Simple Blog"Le code ci-dessus crée une application FastAPI simple avec un seul point de terminaison qui renvoie une réponse JSON lorsqu’on y accède via l’URL correspondante. Vous pouvez utiliser un dictionnaire Python comme celui-ci à la place d’une base de données réelle ; cela permet de réduire la complexité tout en se concentrant sur l’objectif principal.
- Exécuter le serveur.
uvicorn main:app --reload
Visitez http://localhost:8000/about dans votre navigateur pour voir la réponse du serveur.
Intégration de Jinja Templating
Après avoir configuré votre projet avec succès, vous pouvez maintenant y ajouter le templating Jinja.
- Dans la page main.py importez les modules suivants :
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles - Sous le module l’application créer une instance de la variable Jinja2Templates et transmettez le répertoire qui contiendra vos modèles.
templates = Jinja2Templates(directory="templates") - Après le modèles ajouter la ligne de code suivante :
app.mount("/static", StaticFiles(directory="static"), name="static")Le code ci-dessus monte la variable statique et demande à FastAPI de servir tous les fichiers statiques situés dans le répertoire lorsque l’URL de la requête commence par /statique.
- En mon_blog crée deux répertoires, modèles pour contenir les fichiers HTML et statique qui contiendra tous les fichiers statiques.
Avec ces étapes complétées, vous avez intégré avec succès Jinja Templating à votre projet.
Créer une page web dynamique avec Jinja
Jinja fournit un ensemble riche de syntaxes et de fonctionnalités pour créer des modèles dynamiques.
Dans cette section, vous verrez comment utiliser la syntaxe de création de modèles de Jinja pour créer des pages web dynamiques.
Balises de modèle
Entourer les balises de gabarit d’un accolade bouclée et symbole du pourcentage des deux côtés. Vous pouvez utiliser ces balises pour effectuer des opérations logiques et de flux de contrôle dans le modèle. Les balises de modèle les plus couramment utilisées sont les suivantes
- Condition: Exécute le bloc de code si la condition est vraie.
{% if condition %}...{% endif %} - Boucle: Itère sur une table itérative et exécute le bloc de code pour chaque élément.
{% for item in iterable %}...{% endfor %} - Inclure: Inclut un autre modèle dans le modèle actuel.
{% include 'template_name.html' %} - Bloc: Définit un bloc que les modèles enfants peuvent surcharger en utilisant l’héritage.
{% block block_name %}...{% endblock %} - Étendre: Permet au modèle enfant d’hériter et d’étendre le modèle parent.
{% extend parent_temp.html %}
Ces balises offrent un moyen souple et expressif de générer du contenu HTML basé sur des données dynamiques et de contrôler la logique de votre application.
Héritage de modèles
Jinja Templating prend en charge l’héritage des modèles. Cela vous permet de définir un modèle de base (parent) avec une disposition et des sections communes qu’un modèle enfant peut étendre ou remplacer. Un modèle enfant peut utiliser la méthode Étendre pour hériter et étendre le modèle parent.
Créer une balise base.html dans le fichier modèles avec le code suivant.
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Simple Blog{% endblock %}</title>
</head>
<body>
<h1>{% block heading %}Simple Blog{% endblock %}</h1>
{% block content %}
{% endblock %}
{% include "footer.html" %}
</body>
</html>
De cette manière, vous disposez d’un modèle parent qui contient le code commun à tous vos modèles, ce qui permet au modèle enfant d’en hériter et de l’étendre si nécessaire.
Dans la section modèles répertoire créer un pied de page.html avec le code suivant.
<footer>
<p>© 2023 Simple Blog. All rights reserved.</p>
<a href="{{ url_for('about') }}">About</a>
</footer>
pied de page.html est un modèle inclus qui contient le code HTML pour la section du pied de page. Vous pouvez le réutiliser sur plusieurs pages en l’incluant dans le modèle de base à l’aide de l’option Inclure tag.
Dans le modèles répertoire créer un blog.html avec le code suivant.
{% extends "base.html" %}
{% block title %}Simple Blog - Blog Page{% endblock %}
{% block heading %}Simple Blog - Blog Page{% endblock %}
{% block content %}
<h2>Total Number of Posts: {{ posts|length }}</h2>
{% for post in posts %}
<div class="post">
{% if post.status == 'published' %}
<h3>{{ post.title }}</h3>
<p>{{ post.content|truncate }}</p>
<p>Published on: {{ post.publication_date }}</p>
<h4>Comments:</h4>
<ul>
{% for comment in post.comments %}
<li class="comment">{{ comment.author }}-: {{ comment.content }}</li>
{% endfor %}
</ul>
{% else %}
<p>This post is still in draft mode.</p>
{% endif %}
</div>
<hr>
{% endfor %}
{% endblock %}
Ce modèle enfant hérite de base.html en utilisant l’outil Étendre . Elle remplace les blocs spécifiques définis dans le modèle de base pour fournir un contenu personnalisé à la page du blog. Elle remplace les blocs spécifiques définis dans le modèle de base pour fournir un contenu personnalisé à la page du blog. Elle comprend également la logique et l’itération nécessaires à l’affichage d’un article et des commentaires associés.
Expressions
Jinja prend en charge un large éventail d’expressions, y compris les opérations arithmétiques, les comparaisons et les opérations logiques. Par exemple :
{{2 + 2}} // output: 4
Substitution de variables
Pour éditer des variables dans le modèle, placez-les entre doubles accolades. Par exemple :
{{post.title}} // output: 'First Blog Post'
Filtres
Les filtres modifient la sortie d’une variable. Vous pouvez en ajouter un après une variable à l’aide du symbole de la pipe (|). Par exemple, vous pouvez ajouter un filtre après une variable à l’aide du symbole de la pipe (|) :
{{post|length}} // output: 2
Commentaires
Vous pouvez ajouter des commentaires en ligne et des commentaires multilignes dans vos modèles. Jinja ignorera ces commentaires lors du rendu du modèle, ils sont donc utiles pour ajouter des explications dans un modèle.
{# #} // inline
{% comment %} ... {% end comment %} // multiline
URLs
Pour vous permettre de générer des liens hypertextes corrects vers d’autres pages de l’application, le contexte du modèle Jinja comprend une fonction url_for . Par exemple :
<a href="{{ url_for('about') }}">About</a>
Le code ci-dessus devient http://localhost:8000/about. Vous verrez également comment utiliser la fonction url_for pour obtenir les chemins d’accès aux fichiers statiques par la suite.
Il ne s’agit là que de quelques-uns des aspects fondamentaux de la syntaxe de Jinja Templating. Jinja Templating fournit de nombreuses autres caractéristiques et fonctionnalités, telles que les macros, le contexte du modèle, et plus encore, pour rendre la création et la personnalisation des modèles efficaces et flexibles.
Transmettre des données aux modèles
Maintenant que vos modèles sont prêts, vous devez passer les données de vos points d’accès FastAPI dans les modèles pour le rendu.
Ajoutez le code suivant à l’élément main.py fichier :
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
@app.get("https://www.makeuseof.com/", response_class=HTMLResponse)
async def read_posts(request: Request):
return templates.TemplateResponse("blog.html", {"request": request,
"posts": fake_posts_db})
Le code définit un point d’accès FastAPI qui gère une requête GET vers l’URL racine (« / ») et renvoie un fichier HTMLResponse générée à partir de la page blog.html . Il transmet un dictionnaire de contexte, contenant le fichier objet de la demande et faux_posts_dbdans le modèle. De cette manière, Jinja peut rendre des données précises et dynamiques.
Visitez http://localhost:8000/ sur votre navigateur et vous devriez voir quelque chose comme ceci :
Vous avez réussi à transmettre des données aux modèles pour le rendu.
Servir les fichiers statiques
En plus du rendu des modèles dynamiques, FastAPI fournit également une fonctionnalité pour servir les fichiers statiques tels que les fichiers CSS, les fichiers JavaScript et les images.
Vous utiliserez le CSS pour améliorer l’aspect et la convivialité de la page.
Dans le statique créer un répertoire styles.css avec le code suivant.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
h1, h2, h3, h4 {
color: #333;
}
.post {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.post h3 {
margin-top: 0;
}
.post p {
margin-bottom: 10px;
}
.post ul {
list-style-type: none;
padding-left: 0;
}
.comment {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
Modifier le fichier tête de l’élément base.html comme suit :
<head>
<title>{% block title %}Simple Blog{% endblock %}</title>
<link href="{{ url_for('static', path="/styles.css") }}" rel="stylesheet">
</head>
La fonction url_for() génère une URL (chemin) pour l’élément styles.css (/static/styles.css) dans le fichier statique qui est ensuite servi automatiquement par FastAPI.
Visitez http://localhost:8000/ sur votre navigateur.
Les mêmes procédures s’appliquent pour servir les fichiers image et JavaScript.
N’oubliez pas de suivre les meilleures pratiques
Lorsque vous travaillez avec Jinja Templating dans FastAPI, il est important de suivre certaines bonnes pratiques pour assurer une base de code bien organisée et efficace.
- Organisez les templates dans un répertoire dédié et envisagez d’utiliser des sous-répertoires pour les templates apparentés.
- Utiliser l’héritage des modèles pour créer des modèles de base réutilisables et les étendre à des contenus spécifiques.
- Sélectionner soigneusement les données à transmettre aux modèles, en veillant à ce que la charge utile soit légère, et utiliser des processeurs de contexte ou des logiciels intermédiaires pour les données couramment utilisées.
- Utiliser les fonctionnalités de Jinja Templating comme les macros, les filtres et les structures de contrôle pour améliorer la réutilisation et la lisibilité du code.
- Optimiser les performances en mettant en œuvre des stratégies de mise en cache pour les modèles statiques, en utilisant des en-têtes HTTP de mise en cache et en profilant les goulets d’étranglement des performances.
En suivant ces bonnes pratiques, vous pouvez maintenir un projet structuré, optimiser les performances de rendu et exploiter efficacement les fonctionnalités de Jinja Templating dans vos applications FastAPI.
Utiliser FastAPI pour construire des RestAPIs
En dehors de la construction d’applications nécessitant des modèles de rendu, FastAPI excelle dans la construction d’interfaces RestAPI. FastAPI excelle dans la construction de RestAPI en raison de ses hautes performances, de sa syntaxe facile à utiliser, de sa génération automatique de documentation et de son évolutivité. Ces caractéristiques font de FastAPI un outil idéal pour le développement efficace d’API web robustes.