Spring Boot Tutorial: Vistas y Controllers

Sebastian Gomez

Feb 22, 2025

Spring Boot Tutorial: Vistas y Controllers

🚀 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.
Mostrar 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: Spring Initializr.

Configura el proyecto:

Project: Maven

Language: Java

Spring Boot Version: La última estable (por ejemplo, 3.2.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 (verifica con

java -version

Añade 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:runLa 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="en" 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="en" 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 📝

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

package com.docencia.tutorial.controllers;

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. Actualizar el Controlador de Productos 🔄

Modifica ProductController.java para manejar el envío del formulario:

@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";
}

3. 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! 🛠️

¡Espero que este tutorial te haya sido útil! Si tienes alguna pregunta, no dudes en dejarla en los comentarios. ¡Happy coding! 👨‍💻👩‍💻