Guías Técnicas

Manejo de Rutas en Flask: Guía Completa

  Archivos Estáticos y Recursos (CSS, JS, Imágenes)

Este ejemplo muestra cómo definir rutas en Flask y cómo acceder a ellas mediante una barra de navegación utilizando la función url_for().

Estructura del Proyecto

bash 
/flask_app
  /static
      /css
          style.css
  /templates
      base.html
      home.html
      about.html
  app.py

Código de Ejemplo

1. app.py

Este archivo define las rutas de la aplicación.

python 
from flask import Flask, render_template

app = Flask(__name__)

# Ruta para la página de inicio
@app.route('/')
def home():
  return render_template('home.html')

# Ruta para la página "Acerca de"
@app.route('/about')
def about():
  return render_template('about.html')

if __name__ == '__main__':
  app.run(debug=True, port=5000)

2. Herencia de Plantillas, Plantillas HTML con Barra de Navegación

Este archivo es la plantilla base que será extendida por otras páginas, que incluye la barra de navegación.

templates/base.html

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
  <header>
      <h1>Mi Aplicación Flask</h1>
      <div class="navbar">
          <a href="/" class="navbar-brand">Hello Flask</a>
          <a href="{{ url_for('home') }}" class="navbar-item">Inicio</a>
          <a href="{{ url_for('about') }}" class="navbar-item">Acerca de</a>
      </div>
  </header>
  <main>
      {% block content %}{% endblock %}
  </main>
</body>
</html>

templates/home.html

Este es el contenido para la página de inicio.

bash 
{% extends 'base.html' %}

{% block title %}Inicio{% endblock %}

{% block content %}
  <h2>Bienvenido a la Página de Inicio</h2>
  <p>Esta es la página principal de nuestra aplicación Flask.</p>
{% endblock %}

templates/about.html

Este es el contenido para la página “Acerca de”.

bash 
{% extends 'base.html' %}

{% block title %}Acerca de{% endblock %}

{% block content %}
  <h2>Sobre Nosotros</h2>
  <p>Esta es la página "Acerca de" en nuestra aplicación Flask.</p>
{% endblock %}

3. Archivos Estáticos

static/css/style.css

Este es un ejemplo de un archivo CSS simple para darle estilo a nuestra aplicación y ala barra de navegación.

css 
* {
  margin:0; 
  padding:0;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}
header {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}
.navbar {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.navbar a {
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  margin: 0 10px;
  background-color: #555;
  border-radius: 5px;
}
.navbar a:hover {
  background-color: #777;
}
h2 {
  color: #333;
}

Cómo Ejecutar la Aplicación

  1. Coloca todos los archivos en las carpetas correspondientes.
  2. Ejecuta el archivo app.py:
bash 
python app.py
  1. Abre tu navegador y ve a http://127.0.0.1:5000/.

Ahora podrás navegar entre la página de Inicio y la página Acerca de usando la barra de navegación.