Spring Boot Tutorial: Vistas y Controllers con Gestión de Productos

Sebastian Gomez

Feb 22, 2025

Updated: Jun 25, 2026

Spring Boot Tutorial: Vistas y Controllers con Gestión de Productos

Hola, desarrolladores. En este tutorial vamos a crear una aplicación Spring Boot para gestionar productos. Aprenderás a configurar un proyecto desde cero, crear una página de inicio, mostrar una lista de productos, detallar productos individuales y simular la creación de productos con validación de formularios. Vamos a ello.

Introducción

Este tutorial te guiará paso a paso para construir una aplicación Spring Boot que permita gestionar productos. Cubriremos los siguientes temas:

Configuración de un proyecto Spring Boot.
Creación de una página de inicio.
Visualización de una lista de productos.
Cómo mostrar los detalles de un producto.
Simulación de creación de productos con validación de formularios.

Al final tendrás una aplicación funcional que podrás expandir y mejorar.

Paso 1: Creación del Proyecto Spring Boot

### Opción A: Usando Spring Initializr (Recomendado)

Abre Spring Initializr.
Configura el proyecto:

- Project: Maven - Language: Java - Spring Boot Version: la última estable que te ofrezca Initializr (a día de hoy la línea 3.5.x). - Group: com.docencia - Artifact: tutorial - Name: tutorial - Package Name: com.docencia.tutorial - Packaging: Jar - Java Version: selecciona la versión instalada en tu sistema (verifícala con java -version).

Añade las dependencias:

- Spring Web (para endpoints REST). - Thymeleaf (para plantillas HTML). - Spring Boot Starter Validation (para validación de formularios).

Genera y descarga el proyecto.
Extrae el archivo ZIP y ábrelo en tu IDE favorito (IntelliJ, Eclipse, etc.).
Ejecuta el proyecto:

./mvnw spring-boot:run

La aplicación estará disponible en http://localhost:8080/.

Paso 2: Creación de la Página de Inicio

### 1. Crear el Controlador de Inicio

Crea un archivo llamado HomeController.java en src/main/java/com/docencia/tutorial/controllers/:

package com.docencia.tutorial.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("title", "Bienvenido a Spring Boot");
        model.addAttribute("subtitle", "Una aplicación Spring Boot de EAFIT");
        return "home/index";
    }
}

### 2. Crear la Vista de Inicio

Crea un archivo llamado index.html en src/main/resources/templates/home/:

<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${title}"></title>
</head>
<body>
    <h1 th:text="${subtitle}"></h1>
</body>
</html>

Paso 3: Listado de Productos

### 1. Crear el Controlador de Productos

Crea un archivo llamado ProductController.java en src/main/java/com/docencia/tutorial/controllers/:

package com.docencia.tutorial.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;
import java.util.Map;

@Controller
public class ProductController {

    private static final List<Map<String, String>> products = List.of(
        Map.of("id", "1", "name", "TV", "description", "Mejor TV"),
        Map.of("id", "2", "name", "iPhone", "description", "Mejor iPhone"),
        Map.of("id", "3", "name", "Chromecast", "description", "Mejor Chromecast"),
        Map.of("id", "4", "name", "Gafas", "description", "Mejores Gafas")
    );

    @GetMapping("/products")
    public String index(Model model) {
        model.addAttribute("title", "Productos - Tienda Online");
        model.addAttribute("products", products);
        return "product/index";
    }
}

### 2. Crear la Vista de Listado de Productos

Crea un archivo llamado index.html en src/main/resources/templates/product/:

<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${title}"></title>
</head>
<body>
    <h2>Lista de Productos</h2>
    <ul>
        <li th:each="product : ${products}">
            <span th:text="${product.name}"></span>
        </li>
    </ul>
</body>
</html>

Paso 4: Creación de Productos (Validación de Formularios)

### 1. Añadir un Modelo de Formulario de Producto

Vamos a crear el modelo del formulario en un paquete model, no dentro de controllers. Mantener los modelos y DTOs separados de los controladores es una buena práctica de capas que te ayudará a medida que el proyecto crezca. Crea un archivo llamado ProductForm.java en src/main/java/com/docencia/tutorial/model/:

package com.docencia.tutorial.model;

import jakarta.validation.constraints.NotEmpty;
import jakarta.validation.constraints.NotNull;
import jakarta.validation.constraints.Positive;

public class ProductForm {

    @NotEmpty(message = "El nombre del producto es obligatorio")
    private String name;

    @NotNull(message = "El precio es obligatorio")
    @Positive(message = "El precio debe ser un número positivo")
    private Double price;

    // Getters y Setters
}

### 2. Mostrar el Formulario de Creación

Antes de poder enviar el formulario necesitamos una ruta que lo muestre. La vista usa th:object="${productForm}", así que el controlador debe añadir un productForm vacío al modelo. Añade este handler a ProductController.java (recuerda importar también tu nuevo modelo):

import com.docencia.tutorial.model.ProductForm;

@GetMapping("/products/create")
public String create(Model model) {
    model.addAttribute("productForm", new ProductForm());
    return "product/create";
}

Sin este @GetMapping, visitar /products/create lanzaría un error por el atributo productForm ausente.

### 3. Actualizar el Controlador para Guardar el Producto

Ahora modifica ProductController.java para manejar el envío del formulario. Fíjate en los imports: son necesarios para que el snippet compile sin sorpresas.

import com.docencia.tutorial.model.ProductForm;
import jakarta.validation.Valid;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@PostMapping("/products/save")
public String save(@Valid @ModelAttribute("productForm") ProductForm productForm,
                   BindingResult result, Model model) {
    if (result.hasErrors()) {
        return "product/create";
    }
    // Lógica de guardado (simulada)
    return "redirect:/products";
}

### 4. Crear la Vista del Formulario

Crea un archivo llamado create.html en src/main/resources/templates/product/:

<form th:action="@{/products/save}" method="post" th:object="${productForm}">
    <input type="text" th:field="*{name}" placeholder="Nombre del Producto" />
    <input type="number" th:field="*{price}" placeholder="Precio" />
    <button type="submit">Enviar</button>
</form>

Paso 5: Ejecución de la Aplicación

### 1. Ejecuta la Aplicación Spring Boot

./mvnw spring-boot:run

### 2. Accede a la Aplicación

Página de Inicio: http://localhost:8080/
Lista de Productos: http://localhost:8080/products
Crear Producto: http://localhost:8080/products/create

Conclusión

Felicidades. Has creado una aplicación Spring Boot que incluye:

Página de inicio con Thymeleaf.
Listado dinámico de productos.
Validación de formularios con Jakarta Validation.
Simulación de creación de productos.

Próximos Pasos

¿Qué tal si conectas la aplicación a una base de datos usando Spring Data JPA? Sigue aprendiendo y construyendo.

Ejercicios propuestos

Crea una página de detalle de producto en /products/{id} que muestre el nombre y la descripción de un producto concreto.
Sustituye el List<Map<String, String>> por una clase Product propia con sus campos tipados y adapta el controlador y las vistas.
Muestra los mensajes de validación en create.html usando th:errors="*{name}" y th:errors="*{price}", y comprueba que se ven cuando envías el formulario vacío.

Resumen en 3 puntos

Un controlador de Spring Boot mapea rutas con @GetMapping y @PostMapping y pasa datos a las vistas de Thymeleaf a través del Model.
La validación de formularios se apoya en las anotaciones de Jakarta Validation (@NotEmpty, @NotNull, @Positive) junto con @Valid y BindingResult en el controlador.
Cada formulario necesita tanto un @GetMapping que lo muestre con un objeto vacío en el modelo como un @PostMapping que procese el envío.

Espero que este tutorial te haya sido útil y lo puedas aplicar a algún proyecto que tengas en mente. Si tienes alguna pregunta, no dudes en dejarla en los comentarios, y si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo. Happy coding.