SpringBoot: Spring MVC con Thymeleaf

Descubre cómo usar Spring MVC con Thymeleaf para crear aplicaciones web dinámicas y mantener una arquitectura MVC clara y eficiente en Spring Boot.

Spring MVC con Thymeleaf

Spring MVC representa el patrón arquitectónico Modelo-Vista-Controlador implementado dentro del ecosistema Spring Boot. Este enfoque separa claramente las responsabilidades de una aplicación web: el modelo gestiona los datos, la vista presenta la información al usuario, y el controlador coordina las interacciones entre ambos componentes.

La integración con Thymeleaf como motor de plantillas proporciona una solución completa para desarrollar aplicaciones web dinámicas. Thymeleaf permite crear páginas HTML que pueden procesarse tanto en el servidor como visualizarse directamente en el navegador durante el desarrollo, facilitando significativamente el proceso de creación de interfaces web.

Arquitectura MVC en Spring Boot

El patrón MVC organiza el código en tres capas bien diferenciadas. Los controladores reciben las peticiones HTTP y determinan qué lógica de negocio ejecutar. El modelo encapsula los datos y la lógica de la aplicación. Las vistas generan la respuesta HTML que se envía al navegador del usuario.

Spring Boot simplifica esta arquitectura mediante anotaciones que automatizan gran parte de la configuración. Un controlador básico se define utilizando la anotación @Controller:

@Controller
public class HomeController {
    
    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("mensaje", "Bienvenido a Spring MVC");
        return "index";
    }
}

El método home() maneja las peticiones GET a la ruta raíz. El parámetro Model permite pasar datos a la vista, mientras que el valor de retorno especifica qué plantilla Thymeleaf debe renderizarse.

Configuración de Thymeleaf

Thymeleaf se integra automáticamente en Spring Boot sin necesidad de configuración adicional. Las plantillas se ubican por defecto en el directorio src/main/resources/templates/ y utilizan la extensión .html.

La configuración básica en application.properties permite personalizar el comportamiento:

spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

La propiedad cache=false resulta especialmente útil durante el desarrollo, ya que permite ver los cambios en las plantillas sin reiniciar la aplicación.

Sintaxis básica de Thymeleaf

Las expresiones Thymeleaf se integran directamente en el HTML utilizando atributos especiales. La sintaxis th:text reemplaza el contenido de un elemento:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Mi Aplicación</title>
</head>
<body>
    <h1 th:text="${mensaje}">Texto por defecto</h1>
    <p th:text="${descripcion}">Descripción por defecto</p>
</body>
</html>

El namespace xmlns:th habilita las funcionalidades de Thymeleaf en el documento HTML. Las expresiones ${variable} acceden a los datos pasados desde el controlador.

Paso de datos del controlador a la vista

El objeto Model actúa como contenedor para transferir información desde el controlador hacia la plantilla. Los datos se añaden mediante el método addAttribute():

@Controller
public class ProductoController {
    
    @GetMapping("/productos")
    public String listarProductos(Model model) {
        List<String> productos = Arrays.asList("Laptop", "Mouse", "Teclado");
        model.addAttribute("listaProductos", productos);
        model.addAttribute("titulo", "Catálogo de Productos");
        return "productos";
    }
}

La plantilla correspondiente puede iterar sobre la lista utilizando th:each:

<div>
    <h2 th:text="${titulo}">Título</h2>
    <ul>
        <li th:each="producto : ${listaProductos}" th:text="${producto}">
            Producto
        </li>
    </ul>
</div>

Formularios y vinculación de datos

Los formularios HTML se integran naturalmente con Spring MVC mediante la vinculación automática de datos. Thymeleaf facilita la creación de formularios que se conectan directamente con objetos Java:

@Controller
public class UsuarioController {
    
    @GetMapping("/registro")
    public String mostrarFormulario(Model model) {
        model.addAttribute("usuario", new Usuario());
        return "registro";
    }
    
    @PostMapping("/registro")
    public String procesarFormulario(@ModelAttribute Usuario usuario) {
        // Procesar los datos del usuario
        return "confirmacion";
    }
}

La plantilla del formulario utiliza th:object para vincular el formulario con el objeto:

<form th:action="@{/registro}" th:object="${usuario}" method="post">
    <input type="text" th:field="*{nombre}" placeholder="Nombre" />
    <input type="email" th:field="*{email}" placeholder="Email" />
    <button type="submit">Registrar</button>
</form>

La expresión *{nombre} accede a las propiedades del objeto vinculado, mientras que @{/registro} genera la URL de destino del formulario.

Gestión de rutas y parámetros

Spring MVC permite capturar parámetros de URL de múltiples formas. Los parámetros de consulta se obtienen mediante @RequestParam:

@GetMapping("/buscar")
public String buscar(@RequestParam String termino, Model model) {
    model.addAttribute("resultados", "Buscando: " + termino);
    return "resultados";
}

Los parámetros de ruta se capturan con @PathVariable:

@GetMapping("/usuario/{id}")
public String verUsuario(@PathVariable Long id, Model model) {
    model.addAttribute("usuarioId", id);
    return "perfil";
}

Thymeleaf puede generar estas URLs dinámicamente:

<a th:href="@{/usuario/{id}(id=${usuario.id})}">Ver perfil</a>
<a th:href="@{/buscar(termino='spring')}">Buscar Spring</a>

Condicionales y expresiones

Las expresiones condicionales en Thymeleaf permiten mostrar contenido basado en condiciones específicas:

<div th:if="${usuario != null}">
    <p th:text="'Hola, ' + ${usuario.nombre}">Saludo</p>
</div>

<div th:unless="${productos.empty}">
    <p th:text="${productos.size()} + ' productos encontrados'">Contador</p>
</div>

<span th:class="${activo} ? 'activo' : 'inactivo'">Estado</span>

Las expresiones th:if y th:unless controlan la visibilidad de elementos, mientras que el operador ternario permite asignaciones condicionales.

Esta arquitectura MVC con Thymeleaf proporciona una base sólida para desarrollar aplicaciones web en Spring Boot, manteniendo una separación clara de responsabilidades y facilitando el mantenimiento del código.

Empezar curso de SpringBoot

Lecciones de este módulo de SpringBoot

Lecciones de programación del módulo Spring MVC con Thymeleaf del curso de SpringBoot.

Vista En Spring Mvc Con Thymeleaf

Controladores Spring Rest

Open Api Y Cómo Agregarlo En Spring Boot

Rxjava En Spring Web

Introducción A Los Modelos Mvc

Layouts Y Fragmentos En Thymeleaf

Métodos Get En Controladores Mvc

Crear Proyecto Con Intellij Idea

Servicios En Spring

Clientes Resttemplate Y Restclient

Métodos Post En Controladores Mvc

Gestión De Errores Controlleradvice

Controladores Spring Mvc

Estilización Con Tailwind Css

Formularios En Spring Mvc

Estilización Con Bootstrap Css

Ejercicios de programación en este módulo de SpringBoot

Evalúa tus conocimientos en Spring MVC con Thymeleaf con ejercicios de programación Spring MVC con Thymeleaf de tipo Test, Puzzle, Código y Proyecto con VSCode.