| Blog |Templates en Flask

Templates
Has escrito las vistas de autenticación para tu aplicación, pero si estás ejecutando el servidor e intentas acceder a alguna de las URLs, verás un error de TemplateNotFound. Esto se debe a que las vistas llaman a render_template(), pero aún no has escrito las plantillas. Los archivos de plantilla se guardarán en el directorio "templates" dentro del paquete "flask_todlist".

Las plantillas son archivos que contienen datos estáticos y marcadores de posición para datos dinámicos. Una plantilla se renderiza con datos específicos para producir un documento final. Flask utiliza la biblioteca de plantillas Jinja para renderizar las plantillas.

En tu aplicación, utilizarás las plantillas para renderizar HTML que se mostrará en el navegador del usuario. En Flask, Jinja está configurado para escapar automáticamente cualquier dato que se renderice en las plantillas HTML. Esto significa que es seguro renderizar la entrada del usuario; cualquier carácter que hayan ingresado y que pueda afectar el HTML, como < y >, se escapará con valores seguros que se ven iguales en el navegador pero no causan efectos no deseados.

Jinja se ve y se comporta en su mayoría como Python. Se utilizan delimitadores especiales para distinguir la sintaxis de Jinja de los datos estáticos en la plantilla. Todo lo que se encuentra entre {{ y }} es una expresión que se mostrará en el documento final. {% y %} indican una declaración de flujo de control como if y for. A diferencia de Python, los bloques se denotan con etiquetas de inicio y fin en lugar de la indentación, ya que el texto estático dentro de un bloque podría cambiar la indentación.

El Layout base

Cada página en la aplicación tendrá el mismo diseño básico alrededor de un cuerpo diferente. En lugar de escribir toda la estructura HTML en cada plantilla, cada plantilla extenderá una plantilla base y sobrescribirá secciones específicas.

flask_todolist/templates/base.html

<!doctype html>
<title>{% block title %}{% endblock %} - Flask TodoList</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<nav>
  <h1>Flask</h1>
  <ul>
    {% if g.user %}
      <li><span>{{ g.user['username'] }}</span>
      <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
    {% else %}
      <li><a href="{{ url_for('auth.register') }}">Register</a>
      <li><a href="{{ url_for('auth.login') }}">Log In</a>
    {% endif %}
  </ul>
</nav>
<section class="content">
  <header>
    {% block header %}{% endblock %}
  </header>
  {% for message in get_flashed_messages() %}
    <div class="flash">{{ message }}</div>
  {% endfor %}
  {% block content %}{% endblock %}
</section>

g está automáticamente disponible en las plantillas. Según si g.user está establecido (desde load_logged_in_user), se mostrará el nombre de usuario y un enlace para cerrar sesión, o se mostrarán enlaces para registrarse e iniciar sesión. url_for() también está automáticamente disponible y se utiliza para generar URLs a las vistas en lugar de escribirlas manualmente.

Después del título de la página y antes del contenido, la plantilla itera sobre cada mensaje devuelto por get_flashed_messages(). Usaste flash() en las vistas para mostrar mensajes de error, y este es el código que los mostrará.

Aquí se definen tres bloques que se sobrescribirán en las otras plantillas:

{% block title %} cambiará el título que se muestra en la pestaña del navegador y en el título de la ventana.
{% block header %} es similar a title pero cambiará el título que se muestra en la página.
{% block content %} es donde va el contenido de cada página, como el formulario de inicio de sesión o una publicación de blog.

La plantilla base está directamente en el directorio de plantillas. Para mantener las demás organizadas, las plantillas para un blueprint se colocarán en un directorio con el mismo nombre que el blueprint.

Register

flask_todolist/templates/auth/register.html

{% extends 'base.html' %}

{% block header %}
  <h1>{% block title %}Register{% endblock %}</h1>
{% endblock %}

{% block content %}
  <form method="post">
    <label for="username">Username</label>
    <input name="username" id="username" required>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" required>
    <input type="submit" value="Register">
  </form>
{% endblock %}

{% extends 'base.html' %} le indica a Jinja que esta plantilla debe reemplazar los bloques de la plantilla base. Todo el contenido renderizado debe aparecer dentro de las etiquetas {% block %} que sobrescriben los bloques de la plantilla base.

Un patrón útil utilizado aquí es colocar {% block title %} dentro de {% block header %}. Esto establecerá el bloque de título y luego mostrará el valor en el bloque de encabezado, de modo que tanto la ventana como la página compartan el mismo título sin tener que escribirlo dos veces.

Las etiquetas de entrada están utilizando el atributo required. Esto le indica al navegador que no envíe el formulario hasta que se completen esos campos. Si el usuario está utilizando un navegador más antiguo que no admite ese atributo, o si están utilizando algo distinto a un navegador para hacer solicitudes, aún desea validar los datos en la vista de Flask. Es importante validar siempre completamente los datos en el servidor, incluso si el cliente también realiza alguna validación.

Log In
Esto es idéntico a la plantilla de registro, excepto por el título y el botón de envío.

flask_todolist/templates/auth/login.html

{% extends 'base.html' %}

{% block header %}
  <h1>{% block title %}Log In{% endblock %}</h1>
{% endblock %}

{% block content %}
  <form method="post">
    <label for="username">Username</label>
    <input name="username" id="username" required>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" required>
    <input type="submit" value="Log In">
  </form>
{% endblock %}

Registrar un usuario
Ahora que se han escrito las plantillas de autenticación, puedes registrar un usuario. Asegúrate de que el servidor siga en ejecución (ejecuta `flask run` si no lo está), luego ve a http://127.0.0.1:5000/auth/register.

Intenta hacer clic en el botón "Register" sin completar el formulario y verás que el navegador muestra un mensaje de error. Intenta quitar los atributos `required` de la plantilla register.html y haz clic en "Register" nuevamente. En lugar de que el navegador muestre un error, la página se recargará y se mostrará el error de flash() en la vista.

Completa un nombre de usuario y una contraseña y serás redirigido a la página de inicio de sesión. Intenta ingresar un nombre de usuario incorrecto o el nombre de usuario correcto y una contraseña incorrecta. Si inicias sesión, recibirás un error porque aún no hay una vista de índice a la cual redirigir.

← Blueprint y vistas | Continúa con Archivos Estáticos →

gnuxdar

Templates en Flask

Últimas Publicaciones

Le puede interesar los ultimos articulos públicados

Categorías

Mis Twits