Les modèles Jinja offrent un langage puissant que vous pouvez utiliser pour créer facilement des pages Web dynamiques.

L'intégration de Jinja avec FastAPI vous permet de créer des pages Web dynamiques qui mélangent parfaitement Python code avec HTML, vous permettant de séparer la couche de présentation de votre application de la logique couche. Avec des pages Web dynamiques, vous pouvez générer du contenu personnalisé et basé sur les données, améliorant ainsi l'expérience utilisateur.

Qu'est-ce que Jinja?

Jinja est un moteur de modèle 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 diverses 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 capable d'afficher des données en temps réel et de gérer les entrées de l'utilisateur. Vous pouvez également atteindre

instagram viewer
séparation des préoccupations, ce qui rend votre code plus maintenable et plus facile à comprendre.

Configurer un projet FastAPI

Pour commencer, vous devrez configurer un projet FastAPI.

  1. Créer et activer un environnement virtuel en utilisant ces commandes de terminal :
    python -m venv env
    # Sous Unix/Mac OS: 
    source venv/bin/activer
    # Sous Windows :
    .\venv\Scripts\activate
  2. Installez FastAPI et les dépendances requises.
    pip installer "fastapi [tous]"
  3. Créer un répertoire de projet mon blog.
  4. Créer un fichier Python main.py dans votre répertoire de projet.
  5. Ajoutez le code suivant au main.py déposer:
    depuis fastapi importer FastAPI
    fake_posts_db = [{
    'titre': "Premier article de blog",
    'contenu': 'Contenu du premier article de blog.',
    'auteur': 'John Doe',
    'date de publication': '2023-06-20',
    'commentaires': [
     {'auteur': 'Alice', 'contenu': 'Super article!'},
     {'auteur': 'Bob', 'contenu': 'Lecture intéressante.'}
     ],
    'statut': 'publié'
    },{
    'titre': 'Deuxième article de blog',
    'contenu': 'Contenu du deuxième article de blog.',
    'auteur': 'Jane Smith',
    'date de publication': Aucun,
    'commentaires': [],
    'statut': 'brouillon'
    }]
    

    app = FastAPI()
    @app.get("/about")
    définitivementà propos():
    retour"Tout ce que vous devez savoir sur Simple Blog"
    Le code ci-dessus crée une application FastAPI simple avec un point de terminaison unique qui renvoie une réponse JSON lorsqu'il est accessible via l'URL correspondante. Tu peux utiliser un dictionnaire Python comme ceci à la place d'une base de données réelle; cela aide à réduire la complexité tout en se concentrant sur l'objectif principal.
  6. Exécutez le serveur.
    principal d'uvicorn: app --reload

Visite http://localhost: 8000/environ dans votre navigateur pour voir la réponse du serveur.

Intégration des modèles Jinja

Après avoir configuré votre projet avec succès, vous pouvez maintenant y ajouter des modèles Jinja.

  1. Dans le main.py fichier, importez les modules suivants :
    depuis fastapi.template importer Jinja2Templates
    depuis fastapi.staticfiles importer Fichiersstatiques
  2. Sous le application variable, créez une instance de la Jinja2Templates class et passez le répertoire qui contiendra vos templates.
    templates = Jinja2Templates (répertoire="modèles")
  3. Après le modèles variable, ajoutez la ligne de code suivante :
    app.mount("/statique", StaticFiles (répertoire="statique"), nom="statique")
    Le code ci-dessus monte le statique répertoire et demande à FastAPI de servir tous les fichiers statiques situés dans le répertoire lorsqu'une URL de demande commence par /static.
  4. Dans mon blog répertoire créer deux répertoires, modèles pour contenir des fichiers HTML et statique qui contiendra tous les fichiers statiques.

Une fois ces étapes terminées, vous avez intégré avec succès Jinja Templating à votre projet.

Créer une page Web dynamique avec Jinja

Jinja fournit un riche ensemble de syntaxes et de fonctionnalités pour créer des modèles dynamiques.

Dans cette section, vous verrez comment utiliser la syntaxe des modèles Jinja pour créer des pages Web dynamiques.

Entourez les balises de modèle d'un accolade et symbole de pourcentage sur les deux côtés. Vous pouvez utiliser ces balises pour effectuer des flux de contrôle et des opérations logiques dans le modèle. Certaines balises de modèle couramment utilisées incluent :

  • Condition: exécute le bloc de code si la condition est vraie.
    {% si condition %}...{% endif %}
  • Boucle: Itère sur un itérable et exécute le bloc de code pour chaque élément.
    {% pour article dans itérable %}...{% endfor %}
  • Inclure: Inclut un autre modèle dans le modèle actuel.
    {% inclure 'nom_modèle.html' %}
  • Bloc: définit un bloc que les modèles enfants peuvent remplacer à l'aide de 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 flexible 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èle

Jinja Templating prend en charge l'héritage de modèle. Cela vous permet de définir un modèle de base (parent) avec une mise en page commune et des sections qu'un modèle enfant peut étendre ou remplacer. Un modèle enfant peut utiliser le Étendre balise pour hériter et étendre le modèle parent.

Créer un base.html dossier dans le modèles répertoire avec le code suivant.

html>
<html>
<diriger>
<titre>{% block title %}Blog simple{% endblock %}titre>
diriger>
<corps>
<h1>{% block header %}Blog simple{% endblock %}h1>
 {% bloque le contenu %}
 {% endblock %}
 {% incluent "footer.html" %}
corps>
html>

De cette façon, 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 le modèles répertoire créer un pied de page.html fichier avec le code suivant.

<bas de page>
<p>© 2023 Simple Blog. Tous les droits sont réservés.p>
<unhref="{{ url_for('about') }}">À proposun>
bas de page>

pied de page.html est un modèle inclus qui contient le code HTML de la section de pied de page. Vous pouvez le réutiliser sur plusieurs pages en l'incluant dans le modèle de base à l'aide de la Inclure étiqueter.

Dans le modèles répertoire créer un blog.html fichier avec le code suivant.

{% étend "base.html" %}
{% block title %}Blog simple - Page de blog{% endblock %}


{% block header %}Blog simple - Page de blog{% endblock %}


{% bloque le contenu %}
<h2>Nombre total de messages: {{ messages|longueur }}h2>


 {% pour le message dans les messages %}
<divclasse="poste">


 {% if post.status == 'publié' %}
<h3>{{ titre de l'article }}h3>
<p>{{ post.content|truncate }}p>
<p>Publié le: {{ post.publication_date }}p>


<h4>Commentaires:h4>
<ul>
 {% pour le commentaire dans post.comments %}
<liclasse="commentaire">{{ comment.author }}-: {{ comment.content }}li>
 {% endfor %}
ul>
 {% autre %}
<p>Ce message est encore en mode brouillon.p>
 {% fin si %}
div>
<heure>
 {% endfor %}
{% endblock %}

Ce modèle enfant hérite de base.html en utilisant le Étendre étiqueter. Il remplace les blocs spécifiques définis dans le modèle de base pour fournir un contenu personnalisé pour la page de blog. Il inclut également la logique et l'itération nécessaires pour afficher une publication et les 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}} // sortie: 4

Substitution variable

Pour générer des variables dans le modèle, placez-les entre des accolades doubles. Par exemple:

{{post.title}} // sortie: 'Premier article de blog'

Filtres

Les filtres modifient la sortie d'une variable. Vous pouvez en ajouter un après une variable en utilisant le symbole pipe (|). Par exemple:

{{post|longueur}} // sortie: 2

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.

{# #} // en ligne
{% commentaire %}... {% fin de commentaire %} // multiligne

URL

Pour vous permettre de générer des liens hypertexte corrects vers d'autres pages de l'application, le contexte du modèle Jinja inclut un url_for fonction. Par exemple:

<unhref="{{ url_for('about') }}">À proposun>

Le code ci-dessus devient http://localhost: 8000/environ. Vous verrez également comment utiliser le url_for fonction pour obtenir des chemins de fichiers statiques plus tard.

Ce ne sont là que quelques-uns des aspects fondamentaux de la syntaxe Jinja Templating. Jinja Templating fournit de nombreuses autres fonctionnalités et fonctionnalités, telles que des macros, un contexte de modèle, etc., pour rendre la création et la personnalisation de modèles efficaces et flexibles.

Transmission de données aux modèles

Maintenant que vos modèles sont prêts, vous devez transmettre les données de vos points de terminaison FastAPI dans les modèles pour le rendu.

Ajoutez le code suivant au main.py déposer:

depuis fastapi importer FastAPI, demande
depuis fastapi.responses importer Réponse HTML
@app.get("/", response_class=HTMLResponse)
asynchronedéfinitivementread_posts(demande: demande):
retour modèles. ModèleRéponse("blog.html", {"demande": demande, 
"des postes": fake_posts_db})

Le code définit un point de terminaison FastAPI qui gère une requête GET à l'URL racine ("/") et renvoie un Réponse HTML généré à partir de la blog.html modèle. Il passe un dictionnaire de contexte, contenant le courant objet de requête et fake_posts_db, dans le modèle. De cette façon, Jinja peut restituer des données précises et dynamiques.

Visite http://localhost: 8000/ sur votre navigateur et vous devriez voir quelque chose comme ceci :

Vous avez transmis avec succès des données dans les modèles pour le rendu.

Servir des fichiers statiques

En plus de rendre des modèles dynamiques, FastAPI fournit également des fonctionnalités pour servir des fichiers statiques tels que des fichiers CSS, des fichiers JavaScript et des images.

Vous utiliserez CSS pour améliorer l'apparence de la page.

Dans le statique répertoire, créez un styles.css fichier avec le code suivant.

corps {
famille de polices: Arial, sans empattement;
marge: 0;
rembourrage: 20pixels;
Couleur de l'arrière plan: #f5f5f5;
}
h1, h2, h3, h4 {
couleur: #333;
}


.poste {
Couleur de l'arrière plan: #fff;
rembourrage: 20pixels;
marge inférieure: 20pixels;
rayon de bordure: 5pixels;
boîte ombre: 0 2pixels 4pixelsRVB(0, 0, 0, 0.1);
}


.posteh3 {
marge supérieure: 0;
}


.postep {
marge inférieure: 10pixels;
}


.posteul {
type de style de liste: aucun;
rembourrage gauche: 0;
}


.commentaire {
marge inférieure: 10pixels;
rembourrage: 10pixels;
Couleur de l'arrière plan: #f9f9f9;
rayon de bordure: 5pixels;
}
bas de page {
Couleur de l'arrière plan: #f2f2f2;
rembourrage: 10pixels;
aligner le texte: centre;
}

Modifier le diriger élément de la base.html modèle comme suit :

<diriger>
<titre>{% block title %}Blog simple{% endblock %}titre>
<lienhref="{{ url_for('static', path='/styles.css') }}"rel="feuille de style">
diriger>

La fonction url_for() génère une URL (chemin) pour le styles.css (/static/styles.css) dans le fichier statique répertoire qui est ensuite servi automatiquement par FastAPI.

Visite http://localhost: 8000/ sur votre navigateur.

Les mêmes procédures s'appliquent à la diffusion de 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 garantir une base de code bien organisée et efficace.

  • Organisez les modèles dans un répertoire dédié et envisagez d'utiliser des sous-répertoires pour les modèles associés.
  • Utilisez l'héritage de modèles pour créer des modèles de base réutilisables et les étendre pour un contenu spécifique.
  • Sélectionnez soigneusement les données à transmettre aux modèles, en gardant la charge utile légère, et utilisez des processeurs de contexte ou des intergiciels pour les données couramment utilisées.
  • Utilisez les fonctionnalités de Jinja Templating telles que les macros, les filtres et les structures de contrôle pour améliorer la réutilisation et la lisibilité du code.
  • Optimisez les performances en mettant en œuvre des stratégies de mise en cache pour les modèles statiques, en utilisant des en-têtes de mise en cache HTTP et en profilant les goulots d'étranglement des performances.

En suivant ces bonnes pratiques, vous pouvez maintenir un projet structuré, optimiser les performances de rendu et tirer efficacement parti des fonctionnalités de Jinja Templating dans vos applications FastAPI.

Utiliser FastAPI pour créer des RestAPI

Outre la création d'applications nécessitant des modèles de rendu. FastAPI excelle dans la création 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 fonctionnalités font de FastAPI la solution idéale pour le développement efficace d'API Web robustes.