Flask – Vistas y plantillas HTML

En este tutorial veremos cómo trabajar con las plantillas en flask, pasando variables y renderizando una u otra plantilla dependiendo de la ruta.

Antes de comenzar con las plantillas de flask recomiendo ver la introducción a Flask.

Plantillas con Flask

Las plantillas van dentro del directorio templates. Por el momento no veremos herencia de vistas o layouts, simplemente vistas con datos.

Para renderizar una vista con flask utilizamos render_template, esta función toma un argumento: el nombre del archivo HTML, por ejemplo, hola.html

Adicionalmente podemos pasarle kwargs como veremos en los ejemplos.

Por cierto, si tú no quieres colocar tus plantillas en el directorio templates, mira este post para ver cómo cambiar la ruta.

Rutas y vistas

Veamos nuestro archivo con las rutas; es muy simple y está basado en el hola mundo de flask.

"""
Plantillas con Flask

https://parzibyte.me/blog
"""
from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def inicio():
    return render_template("hola.html", nombre="Luis")

@app.route('/suma')
def suma():
    return render_template("suma.html")

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8000, debug=True)

Si queremos renderizar una vista sin pasarle datos tenemos un ejemplo en la línea 17, invocamos a render_template sin pasarle datos.

En cambio, para pasar datos a una vista podemos indicarlo en forma de kwargs, como se ve en la línea 13, dentro de la vista vamos a acceder a la variable nombre.

Por cierto, si quisieras pasar más variables simplemente sepáralas con una coma:

render_template("plantilla.html", nombre="Luis",edad=22)

Ahora veremos las vistas.

Las vistas para flask

No olvides que estas vistas están dentro de la carpeta templates. La que es hola.html queda así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mi web con Flask</title>
</head>
<body>
    <h1>Hola, {{nombre}}</h1>
</body>
</html>

Como ves, para mostrar un valor se usan los mostachos o llaves {{}}. Ahora veamos la de suma.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Resultado de suma</title>
</head>
<body>
    <h1>5 + 5 = {{ 5 + 5 }}</h1>
</body>
</html>

Si te fijas bien, esta vista no recibe ningún dato, pero es capaz de mostrar el resultado ya que las llaves no solo muestran valores, sino que evalúan expresiones y muestran el resultado.

Probando

Ahora vamos a probar. Al ejecutar la app con python main.py y visitar localhost:8000 vemos esto:

Aunque este ejemplo es básico, puedes ver cómo podemos definir plantillas utilizando el motor de plantillas jira; que por cierto, no es el único motor disponible.

Si quieres investigar más, puedes ver la documentación oficial.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/