Las plantillas de Jinja ofrecen un lenguaje poderoso que puede usar para crear páginas web dinámicas con facilidad.

La integración de Jinja con FastAPI le permite crear páginas web dinámicas que combinan perfectamente Python código con HTML, lo que le permite separar la capa de presentación de su aplicación de la lógica capa. Con páginas web dinámicas, puede generar contenido personalizado y basado en datos, mejorando las experiencias de los usuarios.

¿Qué es Jinja?

Jinja es un motor de plantillas robusto y rico en funciones para Python que genera páginas web dinámicas. Jinja Templating admite herencia, declaraciones condicionales, bucles y varias características que simplifican la creación de páginas web dinámicas.

Puede combinar FastAPI y Jinja para crear páginas web con un diseño consistente que pueda mostrar datos en tiempo real y manejar la entrada del usuario. También puedes lograr separación de intereses, haciendo que su código sea más mantenible y más fácil de entender.

Configurar un proyecto FastAPI

instagram viewer

Para comenzar, deberá configurar un proyecto FastAPI.

  1. Crear y activar un entorno virtual usando estos comandos de terminal:
    python -m venv env
    # En Unix/MacOS: 
    fuente venv/bin/activar
    # En Windows:
    .\venv\Scripts\activar
  2. Instale FastAPI y las dependencias requeridas.
    pip instalar "fastapi [todos]"
  3. Crear un directorio de proyectos mi blog.
  4. Crear un archivo de Python principal.py en el directorio de tu proyecto.
  5. Agregue el siguiente código a la principal.py archivo:
    de fastapi importar API rápida
    fake_posts_db = [{
    'título': 'Primera publicación de blog',
    'contenido': 'Contenido de la primera publicación del blog.',
    'autor': 'Juan Doe',
    'fecha de publicación': '2023-06-20',
    'comentarios': [
     {'autor': 'Alicia', 'contenido': '¡Buena publicación!'},
     {'autor': 'Beto', 'contenido': 'Lectura interesante'.}
     ],
    'estado': 'publicado'
    },{
    'título': 'Segunda publicación de blog',
    'contenido': 'Contenido de la segunda publicación del blog.',
    'autor': 'Jane Smith',
    'fecha de publicación': Ninguno,
    'comentarios': [],
    'estado': 'borrador'
    }]
    

    aplicación = FastAPI()
    @app.get("/acerca de")
    definitivamenteacerca de():
    devolver"Todo lo que necesitas saber sobre Simple Blog"
    El código anterior crea una aplicación FastAPI simple con un punto final único que devuelve una respuesta JSON cuando se accede a través de la URL correspondiente. Puede usar un diccionario de Python así en lugar de una base de datos real; ayuda a reducir la complejidad mientras se enfoca en el objetivo principal.
  6. Ejecute el servidor.
    uvicornio principal: aplicación --recargar

Visita http://localhost: 8000/alrededor en su navegador para ver la respuesta del servidor.

Integración de plantillas Jinja

Una vez que haya configurado correctamente su proyecto, ahora puede agregarle plantillas Jinja.

  1. En el principal.py archivo, importe los siguientes módulos:
    de fastapi.templating importar Plantillas Jinja2
    de fastapi.archivos estáticos importar Archivos estáticos
  2. Bajo el aplicación variable, cree una instancia de la Plantillas Jinja2 class y pase el directorio que contendrá sus plantillas.
    plantillas = Jinja2Templates (directorio ="plantillas")
  3. Después de la plantillas variable, agregue la siguiente línea de código:
    aplicación.montar("/estático", StaticFiles (directorio="estático"), nombre="estático")
    El código anterior monta el estático directorio e instruye a FastAPI para servir cualquier archivo estático ubicado en el directorio cuando una URL de solicitud comienza con /static.
  4. En mi blog directorio crear dos directorios, plantillas para almacenar archivos HTML y estático que contendrá todos los archivos estáticos.

Con estos pasos completados, ha integrado con éxito Jinja Templating con su proyecto.

Creación de una página web dinámica con Jinja

Jinja proporciona un amplio conjunto de sintaxis y funciones para crear plantillas dinámicas.

En esta sección, verá cómo usar la sintaxis de plantillas de Jinja para crear páginas web dinámicas.

Adjunte etiquetas de plantilla con un corsé y símbolo de porcentaje a ambos lados. Puede utilizar dichas etiquetas para realizar operaciones lógicas y de flujo de control en la plantilla. Algunas etiquetas de plantilla de uso común incluyen:

  • Condición: Ejecuta el bloque de código si la condición es verdadera.
    {% si condición %}...{% endif %}
  • Bucle: itera sobre un iterable y ejecuta el bloque de código para cada elemento.
    {% para artículo en iterable %}...{% endfor %}
  • Incluir: incluye otra plantilla dentro de la plantilla actual.
    {% incluir 'nombre_plantilla.html' %}
  • Bloquear: define un bloque que las plantillas secundarias pueden anular mediante la herencia.
    {% bloque nombre_bloque %}...{% bloque final %}
  • Extender: permite que la plantilla secundaria herede y amplíe la plantilla principal.
    {% extender parent_temp.html%}

Estas etiquetas brindan una forma flexible y expresiva de generar contenido HTML basado en datos dinámicos y controlar la lógica de su aplicación.

Herencia de plantilla

Jinja Templating admite la herencia de plantillas. Esto le permite definir una plantilla base (principal) con un diseño común y secciones que una plantilla secundaria puede ampliar o anular. Una plantilla secundaria puede utilizar el Extender etiqueta para heredar y ampliar la plantilla principal.

Crear un base.html archivo en el plantillas directorio con el siguiente código.

html>
<html>
<cabeza>
<título>{% block title %}Blog sencillo{% endblock %}título>
cabeza>
<cuerpo>
<h1>{% block header %}Blog sencillo{% endblock %}h1>
 {% contenido del bloque %}
 {% bloque final %}
 {% incluye "pie de página.html" %}
cuerpo>
html>

De esta forma, tiene una plantilla principal que contiene el código común para todas sus plantillas, lo que permite que la plantilla secundaria la herede y amplíe según sea necesario.

En el plantillas directorio crear un pie de página.html archivo con el siguiente código.

<pie de página>
<pag>© 2023 blog sencillo. Reservados todos los derechos.pag>
<ahref="{{ url_for('acerca de') }}">Acerca dea>
pie de página>

pie de página.html es una plantilla incluida que contiene el código HTML para la sección de pie de página. Puede reutilizarlo en varias páginas incluyéndolo en la plantilla base usando el Incluir etiqueta.

En el plantillas directorio crear un blog.html archivo con el siguiente código.

{% extiende "base.html" %}
{% block title %}Blog simple: página de blog{% endblock %}


{% block header %}Blog simple: página de blog{% endblock %}


{% contenido del bloque %}
<h2>Número total de publicaciones: {{ publicaciones | longitud }}h2>


 {% para publicación en publicaciones %}
<divisiónclase="correo">


 {% si post.status == 'publicado' %}
<h3>{{ título de la entrada }}h3>
<pag>{{ publicar.contenido|truncar }}pag>
<pag>Publicado el: {{ post.publication_date }}pag>


<h4>Comentarios:h4>
<ul>
 {% para comentario en publicación.comentarios%}
<liclase="comentario">{{ comentario.autor }}-: {{ comentario.contenido }}li>
 {% endfor%}
ul>
 {% demás %}
<pag>Esta publicación aún está en modo borrador.pag>
 {% terminara si %}
división>
<hora>
 {% endfor%}
{% bloque final %}

Esta plantilla secundaria hereda de base.html utilizando el Extender etiqueta. Anula bloques específicos definidos en la plantilla base para proporcionar contenido personalizado para la página del blog. También incluye la lógica y la iteración necesarias para mostrar una publicación y los comentarios asociados.

Expresiones

Jinja admite una amplia gama de expresiones, incluidas operaciones aritméticas, comparaciones y operaciones lógicas. Por ejemplo:

{{2 + 2}} // salida: 4

Sustitución de variables

Para generar variables en la plantilla, enciérrelas entre llaves dobles. Por ejemplo:

{{post.title}} // resultado: 'Primera publicación de blog'

filtros

Los filtros modifican la salida de una variable. Puede agregar uno después de una variable usando el símbolo de tubería (|). Por ejemplo:

{{post|longitud}} // salida: 2

Puede agregar comentarios en línea y comentarios de varias líneas en sus plantillas. Jinja ignorará estos comentarios durante la representación de la plantilla, por lo que son útiles para agregar explicaciones dentro de una plantilla.

{# #} // en línea
{% comentario %}... {% end comment %} // multilinea

URL

Para permitirle generar hipervínculos correctos a otras páginas dentro de la aplicación, el contexto de la plantilla Jinja incluye un url_para función. Por ejemplo:

<ahref="{{ url_for('acerca de') }}">Acerca dea>

El código anterior se convierte en http://localhost: 8000/alrededor. También verás cómo usar el url_para función para obtener rutas de archivo estáticas más adelante.

Estos son solo algunos de los aspectos fundamentales de la sintaxis de Jinja Templating. Jinja Templating proporciona muchas más características y funcionalidades, como macros, contexto de plantilla y más, para que la creación y personalización de plantillas sea eficiente y flexible.

Pasar datos a plantillas

Ahora que tiene sus plantillas listas, necesita pasar datos de sus puntos finales de FastAPI a las plantillas para renderizar.

Agregue el siguiente código a la principal.py archivo:

de fastapi importar FastAPI, Solicitud
de fastapi.responses importar HTMLRespuesta
@app.get("/", clase_respuesta=RespuestaHTML)
asíncronodefinitivamenteleer_posts(Solicitud: Solicitud):
devolver plantillas. PlantillaRespuesta("blog.html", {"pedido": pedido, 
"publicaciones": fake_posts_db})

El código define un punto final FastAPI que maneja una solicitud GET a la URL raíz ("/") y devuelve un HTMLRespuesta generado a partir de la blog.html plantilla. Pasa un diccionario de contexto, que contiene el actual objeto de solicitud y fake_posts_db, en la plantilla. De esta manera, Jinja puede generar datos precisos y dinámicos.

Visita http://localhost: 8000/ en su navegador y debería ver algo como esto:

Ha pasado correctamente los datos a las plantillas para la representación.

Sirviendo archivos estáticos

Además de representar plantillas dinámicas, FastAPI también proporciona funcionalidad para entregar archivos estáticos, como archivos CSS, archivos JavaScript e imágenes.

Utilizará CSS para mejorar la apariencia de la página.

En el estático directorio, cree un estilos.css archivo con el siguiente código.

cuerpo {
Familia tipográfica: Arial, sans-serif;
margen: 0;
relleno: 20píxeles;
color de fondo: #f5f5f5;
}
h1, h2, h3, h4 {
color: #333;
}


.correo {
color de fondo: #fff;
relleno: 20píxeles;
margen inferior: 20píxeles;
borde-radio: 5píxeles;
sombra de la caja: 0 2píxeles 4píxelesrgb(0, 0, 0, 0.1);
}


.correoh3 {
margen superior: 0;
}


.correopag {
margen inferior: 10píxeles;
}


.correoul {
tipo-estilo-lista: ninguno;
relleno-izquierda: 0;
}


.comentario {
margen inferior: 10píxeles;
relleno: 10píxeles;
color de fondo: #f9f9f9;
borde-radio: 5píxeles;
}
pie de página {
color de fondo: #f2f2f2;
relleno: 10píxeles;
texto alineado: centro;
}

Modificar el cabeza elemento de la base.html plantilla de la siguiente manera:

<cabeza>
<título>{% block title %}Blog sencillo{% endblock %}título>
<enlacehref="{{ url_for('static', path='/styles.css') }}"real="hoja de estilo">
cabeza>

La función url_for() genera una URL (ruta) para el estilos.css (/static/styles.css) en el archivo estático directorio que luego es servido automáticamente por FastAPI.

Visita http://localhost: 8000/ en su navegador.

Los mismos procedimientos se aplican a la entrega de imágenes y archivos JavaScript.

Recuerde seguir las mejores prácticas

Al trabajar con Jinja Templating en FastAPI, es importante seguir ciertas prácticas recomendadas para garantizar una base de código eficiente y bien organizada.

  • Organice las plantillas en un directorio dedicado y considere usar subdirectorios para plantillas relacionadas.
  • Utilice la herencia de plantillas para crear plantillas base reutilizables y extiéndalas para contenido específico.
  • Seleccione cuidadosamente los datos para pasar a las plantillas, mantenga la carga útil liviana y use procesadores de contexto o middleware para los datos de uso común.
  • Utilice las funciones de Jinja Templating como macros, filtros y estructuras de control para mejorar la reutilización y la legibilidad del código.
  • Optimice el rendimiento implementando estrategias de almacenamiento en caché para plantillas estáticas, utilizando encabezados de almacenamiento en caché HTTP y creando perfiles para cuellos de botella de rendimiento.

Al seguir estas mejores prácticas, puede mantener un proyecto estructurado, optimizar el rendimiento de la representación y aprovechar de manera eficiente las características de Jinja Templating en sus aplicaciones FastAPI.

Uso de FastAPI para crear RestAPI

Además de crear aplicaciones que requieren plantillas de renderizado. FastAPI se destaca en la creación de RestAPI debido a su alto rendimiento, sintaxis fácil de usar, generación automática de documentación y escalabilidad. Estas características hacen que FastAPI sea ideal para el desarrollo eficiente de API web sólidas.