Spring – Manejo de formularios MVC

Prerrequisitos: Spring MVC , Introducción a Spring

Spring MVC es un marco de Modelo-Vista-Controlador, permite la separación de módulos en Modelo, Vista y Controlador y maneja de manera uniforme la integración de la aplicación. En este artículo, crearemos un formulario de inicio de sesión para estudiantes y veremos cómo Spring MVC maneja las aplicaciones basadas en formularios basadas en web.

Pasos para crear un formulario de estudiante Spring MVC en Eclipse IDE

Primero, cree un proyecto Maven seleccionando maven-archetype-webapp ya que vamos a crear una aplicación web. Ahora, ingrese el Id. de grupo y el Id. de artefacto. Esto creará un proyecto maven con un archivo de configuración pom.xml que se verá así:

Ahora, comencemos con la configuración de la aplicación web para definir y configurar beans para crear instancias. En Spring MVC, debe agregar algunos archivos de configuración para que su aplicación funcione. Comencemos agregando algunas dependencias al pom.xml ya creado después de crear un proyecto maven. El pom.xml define todas las dependencias que Maven tiene que obtener y administrar por usted.

XML

<?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
                             http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  
  <groupId>com.gfg</groupId>
  <artifactId>SpringMvcStudentForm</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <properties>
    <java.version>1.8</java.version>
  </properties>
  
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>
  
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
      
    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
      <scope>provided</scope>
    </dependency>
  
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>5.3.15</version>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/javax.servlet.jsp.jstl/jstl -->
    <dependency>
        <groupId>javax.servlet.jsp.jstl</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
  
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-core -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-core</artifactId>
        <version>5.3.15</version>
    </dependency>
  
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-web -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>5.3.15</version>
    </dependency>
  
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.3.15</version>
    </dependency>
  
    <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/javax.servlet.jsp-api -->
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>javax.servlet.jsp-api</artifactId>
        <version>2.3.3</version>
        <scope>provided</scope>
    </dependency>
      
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-orm -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-orm</artifactId>
        <version>5.3.15</version>
    </dependency>
  
  </dependencies>
  
  <build>
    <finalName>SpringMvcStudentForm</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using 
                           Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

El archivo de contexto raíz en «/src/main/webapp/WEB-INF/spring/root-context.xml» define los recursos compartidos visibles para todos los demás componentes web. En este programa, el contexto raíz define todos los frijoles Spring y sus dependencias transitivas en un archivo XML.

XML

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans 
                           http://www.springframework.org/schema/beans/spring-beans.xsd">        
</beans>

Luego , el archivo web.xml define el mapeo con diferentes URL y servlets para manejar las requests de esas URL. En este archivo de configuración, usamos el detector para el inicio de la aplicación, configuramos el servlet y agregamos un servlet-mapping para mapear la URL. Tenga en cuenta que hemos nombrado el servlet gfg, que se utilizará más adelante.

XML

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                        http://java.sun.com/xml/ns/javaee/web-app_4_0.xsd"
    version="4.0">
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <servlet>
        <servlet-name>gfg</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>gfg</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/root-context.xml</param-value>
    </context-param>
</web-app>

Ahora creamos una clase modelo Student.java con campos como nombre, id y contraseña. La clase se crea en el paquete com.gfg.model. Los campos están vinculados a los campos correspondientes en la página de visualización.

Java

package com.gfg.model;
  
public class Student {
  
    private String name;
    private String id;
    private String password;
  
    // needed to create a new instance via reflection by
    // your persistence framework.
    public Student() { super(); }
  
    // if you don't create an constructor then there is no
    // need to provide an empty constructor.
    public Student(String name, String id, String password)
    {
        super();
        this.name = name;
        this.id = id;
        this.password = password;
    }
  
    public String getName() { return name; }
  
    public void setName(String name) { this.name = name; }
  
    public String getId() { return id; }
  
    public void setId(String id) { this.id = id; }
  
    public String getPassword() { return password; }
  
    public void setPassword(String password)
    {
        this.password = password;
    };
  
    @Override public String toString()
    {
        return String.format(
            "Student [name=%s, id=%s, password=%s]", name,
            id, password);
    }
}

El login.jsp define los componentes de la página de inicio de sesión del estudiante con los campos apropiados para que coincida con el objeto del estudiante, este archivo se encuentra en   «/src/main/webapp/WEB-INF/views/login.jsp». 

HTML

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Student Login Form</title>
</head>
<body>
    <form:form name="submitForm" method="POST">
  
        <div align="center">
            <table>
                <tr>
                    <td>Student name</td>
                    <td><input type="text" name="name" /></td>
                </tr>
                <tr>
                    <td>User id</td>
                    <td><input type="text" name="id" /></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><input type="password" name="password" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit" /></td>
                </tr>
            </table>
            <div style="color: red">${error}</div>
  
        </div>
    </form:form>
</body>
</html>

Este es el archivo gfg-servlet.xml ubicado en   “/src/main/webapp/WEB-INF/gfg.servlet.xml” . Este archivo lleva el nombre del nombre de servlet que hemos mencionado en el archivo web.xml , maneja todas las requests HTTP para las aplicaciones web. La función impulsada por anotaciones habilita la función Spring @Controller , el mapeo de recursos ayuda a manejar las requests HTTP para todos los recursos. La configuración del bean ayuda a identificar y escanear el jsp ubicado en la carpeta de vistas. El análisis de componentes localiza y asigna beans de acuerdo con la anotación mencionada.

XML

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc 
                        http://www.springframework.org/schema/mvc/spring-mvc.xsd
                        http://www.springframework.org/schema/beans 
                        http://www.springframework.org/schema/beans/spring-beans.xsd
                        http://www.springframework.org/schema/context 
                        http://www.springframework.org/schema/context/spring-context.xsd">
  
    <resources mapping="/resources/**" location="/resources/" />
    
    <annotation-driven />
    
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
    </beans:bean>
    
    <context:component-scan base-package="com.spring.controller" />
</beans:beans>

La clase de controlador maneja la lógica relacionada con el negocio , maneja las requests provenientes del cliente (en este caso, el navegador) y las redirige a la página de vista. La clase StudentController invocada mediante @Controller tiene dos métodos para dos requests, el primero es studentLogin, que permite obtener una solicitud utilizando la anotación @GetMapping , tiene Model como parámetro, la información y los datos proporcionados por el usuario se pasan a la interfaz del modelo. que luego se procesa y se muestra en la vista, el segundo método es una solicitud de publicación usando @PostMappingque se utiliza para crear nuevos datos en la base de datos, pero en este caso, los estamos redirigiendo a success.jsp sin guardar los datos y también validando la identificación de usuario y la contraseña ingresados.

Java

package com.gfg.controller;
  
import com.gfg.model.Student;
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;
  
@Controller
public class StudentController {
  
    @GetMapping(path = "/")
    public String studentLogin(Model model)
    {
        model.addAttribute(
            "var", "Please Enter Your Login Details");
        return "login.jsp";
    }
  
    @PostMapping
    public String
    submitLogin(Model model,
                @ModelAttribute("student") Student student)
    {
        if (student.getId() != null
            & student.getPassword() != null) {
            if (student.getId().equals("gfg")
                && student.getPassword().equals("123")) {
  
                model.addAttribute("var",
                                   student.getName());
                return "success.jsp";
            }
            else {
  
                model.addAttribute("error",
                                   "Invalid Details");
                return "login.jsp";
            }
        }
        else {
            model.addAttribute("error",
                               "Please enter Details");
            return "login.js[";
        }
    }
}

Después de un inicio de sesión exitoso, la clase StudentController redirigirá la página al archivo success.jsp ubicado en «/src/main/webapp/WEB-INF/views/success.jsp». Esta página tiene una página de bienvenida escrita en HTML muy simple.

HTML

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>Success Form</title>
    </head>
    <body>
        <font color="562789" align="center"><h1>Student Welcome page</h1></font>
        <span>${var}</span> You have successfully logged in.
        <font color="555555"><h1>Hope you have a great day !</h1></font>
    </body>
</html>

Después de codificar todas las clases y el archivo de configuración, la estructura de su proyecto se vería así:

Producción: 

Ahora es el momento de ejecutar su proyecto en Tomcat, consulte este enlace si necesita ayuda para ejecutar un servidor Tomcat. Después de ejecutar con éxito el servidor tomcat, escriba este enlace «http://localhost:8080/SpringMvcStudentForm/» en su navegador favorito. (ID de usuario – “gfg” y contraseña – “123”)

OutputOutput

Por lo tanto, hemos creado una aplicación web basada en un formulario de inicio de sesión muy básico con Spring MVC y la hemos probado localmente en el servidor Tomcat.

Publicación traducida automáticamente

Artículo escrito por ashutosh44 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *