Flask es un marco web de back-end basado en el lenguaje de programación Python. Básicamente permite crear aplicaciones web en una sintaxis y conceptos Pythonic. Con Flask, podemos usar bibliotecas y herramientas de Python en nuestras aplicaciones web. Usando Flask podemos configurar un servidor web para cargar algunas plantillas HTML básicas junto con la sintaxis de plantillas Jinja2. En este artículo, veremos cómo podemos representar las plantillas HTML en Flask.
Configurar Flask: configurar Flask es bastante fácil. Podemos usar un entorno virtual para crear un entorno aislado para nuestro proyecto y luego instalar los paquetes de Python en ese entorno. Después de eso, configuramos las variables de entorno para ejecutar Flask en la máquina local. Este tutorial asume que tiene configurado el entorno de Python; de lo contrario, continúe para configurar Python y pip en su sistema. Una vez que haya terminado, estará listo para desarrollar aplicaciones de Flask.
Configuración del entorno virtual: para configurar un entorno virtual, podemos utilizar el administrador de paquetes de Python «pip» para instalar el paquete «virtualenv».
pip install virtualenv
Esto instalará el paquete «virtualenv» en su máquina. El comando pip puede ser diferente en la versión de su Python instalada, así que mire la sintaxis diferente del pip para su versión aquí .
Creación de un entorno virtual: una vez instalado el paquete, debemos crear un entorno virtual en nuestra carpeta de proyectos. Por lo tanto, puede ubicar una carpeta vacía donde desea crear la aplicación Flask o crear una carpeta vacía en la ruta deseada. Para crear el entorno simplemente usamos el siguiente comando.
virtualenv venv
Aquí, venv es el nombre del entorno, después de ejecutar este comando, verá una carpeta llamada «venv» en la carpeta actual. El nombre «venv» puede ser cualquier cosa («env») que desee, pero es estándar para hacer referencia a un entorno virtual en un nivel de producción.
Activación del entorno virtual: ahora, después de que se haya configurado y creado el entorno virtual, podemos activarlo usando los comandos en CMD\Powershell o Terminal:
Nota: Debe estar en la misma carpeta que la carpeta «venv».
Para ventanas:
venv\Scripts\activate
Para Linux/macOS:
source venv/bin/activate
Esto debería activar virtualenv con «(venv)» antes del símbolo del sistema.
Captura de pantalla de toda la configuración de virtualenv
Como podemos ver, hemos creado virtualenv con éxito en el sistema operativo Windows, en Linux/macOS el proceso es bastante similar. El (venv) indica que la instancia actual de la terminal/CMD está en un entorno virtual, todo lo que se instale en la instancia actual de una terminal usando pip se almacenará en la carpeta venv sin afectar todo el sistema.
Instalación de Flask: después de que se haya configurado el entorno virtual, simplemente podemos instalar Flask con el siguiente comando:
pip install flask
Esto debería instalar el paquete python Flask real en el entorno virtual.
Adición de Flask a las variables de entorno: necesitamos crear una aplicación para Flask para configurarlo como el punto de partida de nuestra aplicación. Podemos lograr esto creando un archivo llamado » servidor.py «. Puede llamarlo como desee, pero manténgalo en consonancia con otros proyectos de matraz que cree. Dentro de server.py pega el siguiente código:
Python
from flask import Flask app = Flask(__name__) if __name__ == "__main__": app.run()
Este es el código para ejecutar realmente la creación de la aplicación Flask. Este es el llamado punto de entrada de un servidor web Flask. Como puede ver, estamos importando el módulo Flask e instanciando con el nombre de archivo actual en «Flask (__name__)». Por lo tanto, después de la verificación, estamos ejecutando una función llamada run().
Después de esto, debemos configurar el archivo como la aplicación Flask en la variable de entorno.
Para ventanas:
set FLASK_APP=server
Para Linux/macOS:
export FLASK_APP=server
Ahora, esto configurará el punto de partida de Flask para ese archivo que creamos, por lo que una vez que iniciemos el servidor, el servidor de Flask encontrará el camino hacia el archivo «server.py».
Para ejecutar el servidor, ingrese el comando:
flask run
Esto ejecutará el servidor y cuán inteligentemente detectó el archivo server.py como nuestra aplicación matraz real. Si va a la URL «http://localhost:5000», verá que aparece un mensaje No encontrado, esto se debe a que aún no hemos configurado nuestro servidor web para servir nada. Puede presionar CTRL + C para detener el servidor
Frasco configurado para servidor web
Creación de plantillas: ahora podemos pasar al objetivo de este artículo, es decir, renderizar la plantilla. Para hacerlo, primero debemos crear las plantillas, puede usar cualquier plantilla HTML, pero para simplificar, usaré una plantilla HTML básica. Antes de eso, cree una carpeta llamada «plantillas» en la carpeta actual. Dentro de esta carpeta de » plantillas «, todas las plantillas residirán. Ahora vamos a crear una plantilla HTML básica: esta plantilla debe tener algunos bloques Jinja que se pueden reemplazar opcionalmente más adelante. Comenzamos con un solo bloque llamado cuerpo.
plantillas\index.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>FlaskTest</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<h4>Flask: Rendering Templates</h4>
<!-- this section can be replaced by a child document -->
{% block body %}
<p>This is a Flask application.</p>
{% endblock %}
</body>
</html>
Adición de rutas y plantillas de representación: ahora, necesitamos una forma de vincular la plantilla con una ruta o URL específica. Esto significa que siempre que el usuario vaya a una URL específica, se debe representar o generar una plantilla específica. Ahora, necesitamos cambiar el «server.py» con lo siguiente:
Python
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run()
Importamos la función render_template del módulo Flask y agregamos una ruta.
¿Qué es una ruta?
Una ruta es un mapeo de una URL con una función o cualquier otra pieza de código para ser representada en el servidor web. En el frasco, usamos la función decorar @app.route para indicar que la función está vinculada con la URL provista en el parámetro de la función de ruta.
Creación de la ruta básica: en este caso, vinculamos la URL «/», que es la URL base para el servidor con la función «índice» , puede llamarlo como quiera, pero tiene más sentido llamarlo índice aquí. La función simplemente devuelve algo aquí, llama a la función render_template. El render_template encuentra la aplicación de forma predeterminada en la carpeta de plantillas. Entonces, solo necesitamos proporcionar el nombre de la plantilla en lugar de la ruta completa a la plantilla. La función de índice muestra una plantilla index.html y, por lo tanto, vemos el resultado en el navegador.
renderizar la plantilla básica
Agregar sintaxis de plantillas Jinja
Ahora, crearemos una nueva ruta para demostrar el uso de la plantilla Jinja. Necesitamos agregar la ruta, así que solo agregue una parte más del código al «archivo server.py»
Python
@app.route("/<name>")
def welcome(name):
return render_template("welcome.html", name=name)
Ahora, esto puede parecer bastante fácil de entender, simplemente estamos creando una ruta «/<nombre>» que estará vinculada a la función de bienvenida. El “<nombre>” representa cualquier cosa después de “/”. Así que lo tomamos como el parámetro de nuestra función y lo pasamos a la función render_template como nombre. Entonces, después de pasar el nombre de la variable en la función render_template, sería accesible en la plantilla para que podamos representar esa variable. Incluso puede realizar una operación en la variable y luego analizarla.
No, necesitamos crear otra plantilla llamada «welcome.html» dentro de la carpeta de plantillas. Este archivo debe contener el siguiente marcado
HTML
<!DOCTYPE html>
<html>
<head>
<title>FlaskTest</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<h3>Welcome, {{name}}</h3>
</body>
</html>
Usando la plantilla Jinja
Creación y extensión de plantillas
Ahora, necesitamos una forma de heredar algunas plantillas en lugar de reutilizarlas, podemos hacerlo creando los bloques en Jinja. Nos permiten crear un bloque de plantilla y podemos usarlos en otras plantillas con el nombre dado al bloque.
Entonces, reutilicemos nuestro «index.html» y creemos un bloque allí. toma todo lo que está encima y guárdalo en un bloque virtual de plantilla, para finalizar el bloque simplemente usa «{% endblock %}» esto copiará todo lo que está debajo.
plantillas/index.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>FlaskTest</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<h4>Flask: Rendering Templates</h4>
<a href="{{ url_for('home') }}">Home</a>
<a href="{{ url_for('index') }}">Index</a>
{% block body %}
<p>This is a Flask application.</p>
{% endblock %}
</body>
</html>
Por lo tanto, aquí no incluimos las etiquetas <p> ya que todo lo que está debajo de {% endblock %} y todo lo que está arriba de la etiqueta {% block body %} se copia. También estamos usando direcciones URL absolutas. Las urls son dinámicas y bastante fáciles de entender. Los encerramos en “{{ }}” como parte de la sintaxis de Jinja2. La función url_for invierte la URL completa para nosotros, solo tenemos que pasar el nombre de la función como una string como parámetro a la función.
Ahora, crearemos otra plantilla para reutilizar este «cuerpo» del bloque creado, creemos la plantilla «home.html» con los siguientes contenidos:
plantillas/inicio.html
HTML
{% extends 'index.html' %}
{% block body %}
<p> This is a home page</p>
{% endblock %}
Esto parece una línea de dos líneas, pero también extenderá (no incluirá ) el index.html. Esto es mediante el uso de las etiquetas {% extends <file.html> %} , analizan el bloque en la plantilla mencionada. Después de esto podemos añadir las cosas que queramos. Si usa la etiqueta de inclusión , no colocará el párrafo de reemplazo en el lugar correcto en la página index.hmtl. Creará un archivo html no válido, pero dado que el navegador es muy indulgente, no lo notará a menos que mire la fuente generada. El cuerpo del texto debe estar correctamente anidado.
Finalmente, la pieza que queda aquí es la ruta a home.html, así que vamos a crear eso también. Agreguemos otra ruta al «archivo server.py»
Python
@app.route("/home")
def home():
return render_template("home.html")
Por lo tanto, esta es una ruta vinculada a la URL «/home» con la función home que representa la plantilla «home.html» que creamos justo ahora.
Demostración de bloque y URL
Como podemos ver, la URL generada es dinámica; de lo contrario, tendríamos que codificar ambas rutas de la página de la plantilla. Y también el bloque funciona y hereda la plantilla como se proporciona en las plantillas base. Abra la fuente de la página en el navegador para comprobar que tiene el formato html correcto.
<!DOCTYPE html> <html> <head> <title>FlaskTest</title> </head> <body> <h2>Welcome To GFG</h2> <h4>Flask: Rendering Templates</h4> <a href="/home">Home</a> <a href="/">Index</a> <a href="/about">About</a> <a href="/documentation">Documentation</a> <p> This is a home page</p> <p>must use extends not include</p> </body> </html>
Induciendo Lógica en Plantillas: Podemos usar bucles for, condiciones if en plantillas. esta es una gran característica para aprovechar. Podemos crear excelentes plantillas dinámicas sin mucha molestia. Vamos a crear una lista en python e intentar representarla en una plantilla HTML.
Uso de bucles for en plantillas: para eso crearemos otra ruta, esta vez en “/about”, esta ruta se vinculará a la función about que representa la plantilla “about.html”, pero agregaremos algunas cosas más antes de regresar de la función. Crearemos una lista de algunas strings ficticias y luego las analizaremos en la función render_template.
Python
@app.route("/about")
def about():
sites = ['twitter', 'facebook', 'instagram', 'whatsapp']
return render_template("about.html", sites=sites)
Por lo tanto, hemos creado la ruta en «/ about» vinculada a la función about. Dentro de esa función, primero creamos la lista «Sitios» con algunas strings ficticias y, finalmente, al regresar, las analizamos en la función render_template como sitios, puede llamar a cualquier cosa que desee, pero recuerde usar ese nombre en las plantillas. Ahora, para crear las plantillas, crearemos la plantilla “about.html” con los siguientes contenidos:
plantillas/acerca de.html
HTML
{% extends 'index.html' %}
{% block body %}
<ul>
{% for social in sites %}
<li>{{ social }}</li>
{% endfor %}
</ul>
{% endblock %}
Podemos usar bucles for en plantillas encerradas en «{% %}» podemos llamarlos como una forma pythonica regular. Los sitios son la variable (lista) que analizamos en la función de ruta. Podemos volver a usar el iterador como una variable encerrada en «{{ }}». Esto es como unir las piezas de un rompecabezas, se accede a los valores de las variables con «{{ }}», cualquier otra estructura o bloque se encierra en «{% %}».
Ahora, para hacerlo más accesible, puede agregar su URL a index.html de la siguiente manera:
HTML
<!DOCTYPE html>
<html>
<head>
<title>FlaskTest</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<h4>Flask: Rendering Templates</h4>
<a href="{{ url_for('home') }}">Home</a>
<a href="{{ url_for('index') }}">Index</a>
<a href="{{ url_for('about') }}">About</a>
{% block body %}
<p>This is a Flask application.</p>
{% endblock %}
</body>
</html>
Esto no es obligatorio, pero crea un enlace accesible para facilitarlo.
Demostración de bucle en plantillas
Como podemos ver, ha creado dinámicamente todas las listas en la plantilla. Esto se puede usar para obtener los datos de la base de datos si la aplicación está lista para la producción. Además, se puede usar para crear ciertas tareas o datos repetitivos que son muy difíciles de hacer manualmente.
Archivo extendido corregido
Este archivo extendido correctamente definido eliminó el párrafo de marcador de posición y lo reemplaza en el cuerpo del html.
Uso de if else en plantillas: Incluso podemos usar condiciones if-else en plantillas de matraces. De forma similar a la sintaxis de los bucles for, podemos aprovecharla para crear plantillas dinámicas. Veamos un ejemplo de un rol para un sitio web.
Construyamos la ruta para el contacto de la sección. Esta URL es «contacto/<función>», que está vinculada a la función contacto que genera una plantilla llamada «contactos.html». esto toma el argumento como rol. Ahora podemos ver algunos cambios aquí, estos son solo cambios semánticos, nada nuevo, podemos usar la variable persona como un nombre diferente en la plantilla que se asignó como valores de rol.
Python
@app.route("/contact/<role>")
def contact(role):
return render_template("contact.html", person=role)
Entonces, esto crea la ruta como se desea y analiza el rol variable como una persona para la plantilla. Ahora vamos a crear la plantilla.
plantilla/contacto.html
HTML
{% extends 'index.html' %}
{% block body %}
{% if person == "admin" %}
<p> Admin Section </p>
{% elif person == "maintainer" %}
<p> App Source Page for Maintainer</p>
{% elif person == "member" %}
<p> Hope you are enjoying our services</p>
{% else %}
<p> Hello, {{ person }}</p>
{% endif %}
{% endblock %}
Entonces, en la plantilla, estamos verificando el valor de la persona variable que se obtiene de la URL y se analiza desde la función render_template. La sintaxis if else es similar a python con solo «{% %}» encerrado. El código se explica por sí mismo, ya que creamos if-elif y else ladder, verificamos un valor y creamos los elementos HTML según el requisito.
Entonces, podemos ver que la plantilla está representando los contenidos según la variable de rol pasada en la URL. No intente crear un enlace URL para esto, ya que no funcionaría, ya que debemos ingresar la variable de rol manualmente. Debe haber alguna solución alternativa para usarlo.
Así que se trataba de usar y renderizar las plantillas en Flask. Hemos aprovechado la sintaxis de plantillas de Jinja con Python para crear algunas plantillas dinámicas.