Spring Boot – Web de inicio

Hoy en día, la mayoría de las aplicaciones exigen una arquitectura Modelo-Vista-Controlador (MVC) para satisfacer las diversas necesidades, como el manejo de datos de usuario, hacer que la aplicación sea eficiente y proporcionar una naturaleza dinámica a las aplicaciones. Se utilizó básicamente para crear interfaces gráficas de usuario (GUI) de escritorio, pero ahora se está volviendo más popular para crear aplicaciones basadas en web. MVC no es una pila de tecnología, sino un patrón arquitectónico que proporciona tres componentes lógicos importantes: modelo, vista y controlador.

1. Modelo : un modelo son los datos y la lógica que maneja los datos. Representa los datos que se transfieren entre los controladores o cualquier otra lógica. El controlador puede recuperar datos (modelo) de una base de datos y/o del usuario.
2. Vista : una vista es una parte de una aplicación que presenta los datos del modelo. Los datos son de forma de base de datos o de la entrada del usuario. Es una presentación de salida para los usuarios a partir de datos manipulados como tablas, gráficos, diagramas, etc.
3. Controlador : un controlador es responsable de manejar la interacción del usuario con la aplicación. Obtiene entradas de mouse y teclado de los usuarios y cambia el modelo y la vista con respecto a las entradas.

Arquitectura MVC

Ventajas de la arquitectura MVC

1. El fácil mantenimiento del código facilita el escalado de las aplicaciones.
2. La prueba se puede realizar por separado del usuario.
3. Model-View-Controller reduce la complejidad.
4. Es compatible con la optimización de motores de búsqueda (SEO).
5. El propio controlador permite la agrupación lógica de acciones relacionadas entre sí.

En el centro de las funciones esenciales de Spring se encuentra Spring MVC: el marco web de Spring. Está empaquetado en el iniciador ‘Spring Web’. Spring MVC también se puede usar para crear API REST que producen resultados que no son HTML (p. ej., JSON, XML, etc.).

Para incrustar Web iniciada en la aplicación Spring:

Spring Tool Suite (STS) -> Ir a archivo -> Nuevo -> Proyecto Spring Starter -> Siguiente -> Spring Web -> Siguiente -> Finalizar

También puede agregar la dependencia de Starter Web.

Maven -> pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

Gradle -> build.gradle

dependencies {
    compile("org.springframework.boot:spring-boot-starter-web")
}

Funcionamiento de Spring MVC

Estructura del proyecto – Maven

pom.xml (configuración del proyecto)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
                             https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.3</version>
        <relativePath/> 
    </parent>
    <groupId>sia</groupId>
    <artifactId>GFG-Starter-Web</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>GFG-Starter-Web</name>
    <description>Spring Boot Starter Web</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
  
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>
  
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

GfgStarterWebApplication.java (Bootstrapping de la aplicación)

package gfg;
  
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
  
@SpringBootApplication
public class GfgStarterWebApplication {
  
    public static void main(String[] args) {
        SpringApplication.run(GfgStarterWebApplication.class, args);
    }
    
}

UserModel.java (Modelo)

• Los beans de Java requieren métodos getter y setter para actualizar y acceder a las variables.
• La biblioteca Java ‘Lombok’ automatiza el proceso de creación del método Getter y Setter con la anotación ‘@Data’.
• Para incluir Lombok en el proyecto, agregue la siguiente dependencia:

Maven -> pom.xml

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

package gfg;
  
import lombok.Data;
  
@Data
public class UserModel {
    public String userText;
}

view.html (Ver – Plantilla de hoja de tomillo )

Lee la entrada del usuario que se une a UserModel, creando así un modelo de datos. Después de enviar, pasa los datos del modelo al controlador.

<!DOCTYPE html>
<html>
  
<head>
<title>GeeksforGeeks</title>
</head>
  
 <body>
  
    <h1 style="color:forestgreen" th:text="${Controller1}">attributeValue will be placed here</h1> 
    <h1 style="color:forestgreen" th:text="${Controller2}">attributeValue will be placed here</h1>
    <h2 style="color:forestgreen" th:text="${message}"> attributeValue will be placed here </h2>
  
    <form method="POST" th:object="${userModel}">
  
            <label for="userText">Type Message : </label><br/>
            <input type="text" th:field="*{userText}"/>
  
            <input type="submit" value="Go"/>
  
    </form >
  
 </body>
</html>

MVCController1.java (Controlador)

Algunas anotaciones útiles utilizadas para los controladores son:

1. @Controller : es una versión especializada de la anotación @Component que indica que una clase es un ‘Controlador’ que se detecta automáticamente durante el escaneo de classpath. Funciona simultáneamente con una anotación como @RequestMapping, anotaciones de métodos de manejo como @GetMapping, @PostMapping, etc.
2. @RequestMapping : se utiliza para asignar requests web a los métodos respectivos de clases de manejo de requests. Se puede utilizar tanto a nivel de clase como a nivel de método. En el nivel de método HTTP, se deben usar anotaciones específicas.
3. @GetMapping : asigna requests web HTTP GET a un método de controlador específico. Su alternativa es ‘@RequestMapping( method=RequestMethod.GET )’.
4. @PostMapping : asigna requests web HTTP POST a un método de controlador específico. Su alternativa es ‘@RequestMapping( method=RequestMethod.POST )’.
5. @SessionAttributes : enumera los atributos del modelo (datos) que deben almacenarse en la sesión y ser utilizados por métodos de controlador anotados específicos.
6. @ModelAtrribute : vincula el parámetro del método o el valor devuelto del método al atributo del modelo nombrado que se expone a una vista web.

Este controlador tiene dos métodos:

1. get(): este método se llama en la solicitud GET que vincula los datos del modelo y devuelve una vista.
2. post() : este método obtiene datos del modelo de la solicitud POST del usuario que otros controladores utilizarán y redirige a MVCController2.java.

package gfg;
  
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.springframework.web.bind.annotation.SessionAttributes;
  
@Controller
@SessionAttributes("userModel")
@RequestMapping("MVC-1")
public class MVCController1 {
      
    @GetMapping
    public String get(Model model) {
        model.addAttribute("Controller1","You are in Controller-1");
        model.addAttribute("userModel", new UserModel());
        return "view";    
    }
      
    @PostMapping
    public String post(@ModelAttribute("userModel") UserModel userModel, Model model,RedirectAttributes redirectAttributes) {    
        redirectAttributes.addFlashAttribute("user", userModel);
        return "redirect:/MVC-2";
    }
}

Salida : vista.html

Vista devuelta después de la solicitud ‘GET’ en MVCController1.java

MVCController2.java (segundo controlador)

Este controlador tiene dos métodos:

1. get(): este método utiliza los datos del modelo enviados por el método post() de MVCController y, junto con otros datos del modelo, devuelve una vista.
2. post(): este método obtiene los datos del usuario del modelo, los reenvía y los redirige a RestMVCController.

package gfg;
  
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.springframework.web.bind.annotation.SessionAttributes;
  
@Controller
@SessionAttributes("userModel")
@RequestMapping("/MVC-2")
public class MVCController2 {
      
    @GetMapping
    public String get(@ModelAttribute("user") UserModel message, Model model) {
        model.addAttribute("Controller2","You are in Controller-2");
        model.addAttribute("message", message.getUserText());
        model.addAttribute("userModel", new UserModel());
        return "view";
    }
      
    @PostMapping
    public String post(@ModelAttribute("userModel") UserModel userModel, Model model,RedirectAttributes redirectAttributes) {
        redirectAttributes.addFlashAttribute("message", userModel);
        return "redirect:/Rest";
    }
      
}

Salida : vista.html

Vista devuelta por MVCController2.java

Funcionamiento de Spring MVC con API REST

RestMVCController.java (API REST)

Algunas anotaciones importantes utilizadas son:

1. @RestController: es la combinación de las anotaciones @RequestMapping y @ResponseBody que devuelven datos en el cuerpo de la respuesta en lugar de como una vista.
2. @CrossOrigin: se utiliza para permitir requests de origen cruzado en clases de controlador y/o en métodos de controlador para consumir datos.

package gfg;
  
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.support.SessionStatus;
import org.springframework.web.bind.annotation.SessionAttributes;
  
@RestController
@SessionAttributes("userModel")
@RequestMapping(path="/Rest", produces="application/json")
@CrossOrigin(origins="*") 
public class RestMVCController {
  
    @GetMapping
    public UserModel get(@ModelAttribute("message") UserModel user, SessionStatus sessionStatus) {
          
        // cleans up the stored 
        // session attributes (data)
        sessionStatus.setComplete(); 
        return user;
    }
}

Salida : 

Devuelve datos del modelo en respuesta (literal JSON)

Nota : la API REST de back-end de Spring Framework puede funcionar en combinación con tecnologías de front-end framework como Angular, React, etc., que pueden solicitar datos y también proporcionarlos.