Desarrollo de aplicaciones Web con Spring MVC

Jesús Arias Fisteus

Aplicaciones Web (2023/24)

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 1

 Parte I

El patrón Modelo Vista Controlador

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 2

El patrón Modelo–Vista–Controlador

El patrón Modelo–Vista–Controlador (MVC) es un patrón

de diseño de software para interfaces de usuario que divide la
aplicación en tres componentes: modelo, vista y
controlador.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 3

El patrón Modelo–Vista–Controlador

El componente del modelo gestiona los datos, lógica y reglas

de la aplicación, incluyendo normalmente, en el caso de las
aplicaciones Web, el almacenamiento de datos en una base de
datos.

El componente de la vista presenta los datos a los usuarios

(normalmente con HTML y CSS en el caso de las aplicaciones
Web) y recoge la entrada de los usuarios.

El componente del controlador acepta la entrada de los

usuarios e invoca la funcionalidad apropiada en los
componentes del modelo y de la vista.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 4

El patrón MVC en aplicaciones Web

petición HTTP
navegador Controlador Modelo

re
sp
ue dato
st
a
HT dato
TP

Vista

Base de
datos

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 5

El patrón MVC en aplicaciones Web

1. Mediante una página HTML creada por la vista anterior, el

cliente envı́a una petición HTTP al servidor.
2. El controlador recibe la petición e interacciona con el modelo.
3. El controlador invoca a la vista con los datos que necesita
presentar al usuario.
4. La vista recoge dichos datos, crea la página HTML que los
presenta y construye la respuesta HTTP a enviar al cliente.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 6

 Parte II

Spring MVC

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 7

Spring MVC

Spring MVC1 es un framework que permite el desarrollo de

aplicaciones Web que siguen el patrón MVC sobre Spring
Framework.

Spring Framework2 es un entorno para el desarrollo de

aplicaciones empresariales para diversos entornos (no solo
Web) sobre la plataforma de Java, en lenguajes como Java,
Kotlin o Groovy.

1
https:
//docs.spring.io/spring-framework/reference/web/webmvc.html
2
https://spring.io/projects/spring-framework
Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 8
Spring Boot

Spring Boot3 es una extensión de Spring Framework que

proporciona un entorno de ejecución de aplicaciones para
Spring Framework preconfigurado conforme a distintos
convenios y buenas prácticas, con el objeto de simplificar el
desarrollo y despliegue de las aplicaciones.

3
https://spring.io/projects/spring-boot
Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 9
El componente del modelo

El componente del modelo suele construirse en frameworks

Web sobre bibliotecas de persistencia de objetos, conocidas
normalmente como ORM4 , las cuales proporcionan
automáticamente el código necesario para crear, leer,
actualizar y borrar (CRUD) objetos en la base de datos.

4
ORM: mapeo objeto relacional.
Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 10
El componente del modelo

Sin embargo, también existen alternativas a los ORM

ampliamente usadas, como son:

▶ Construir consultas SQL directamente desde el código de

la aplicación (por ejemplo, en Java, sobre JDBC).
▶ Usar bases de datos no basadas en el modelo relacional ni
en el lenguaje SQL (por ejemplo, MongoDB).

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 11

El componente del modelo en Spring MVC

El componente del modelo en Spring MVC se suele construir

sobre Spring Data JPA5 , el cual trabaja, a su vez, sobre
implementaciones de Jakarta Persistence6 (anteriormente
conocido como Java Persistence API o JPA).

La implementación por defecto de Jakarta Persistence en

Spring es Hibernate ORM7 .

5
https://spring.io/projects/spring-data-jpa
6
https://jakarta.ee/specifications/persistence/
7
https://hibernate.org/orm/
Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 12
El componente del modelo con Spring Data JPA
/*
* Declaraci ó n de una clase del modelo
*/
@Entity
public class User {
@Id
@ Ge ne ra t ed Va lu e ( strategy = Gener ationTyp e . AUTO )
private Integer id ;
@Column ( nullable = false )
@NotBlank
@Size ( max = 64)
private String name ;
@Column ( unique = true , nullable = false )
@Email
@NotBlank
@Size ( max = 128)
private String email ;
public Integer getId () {
return id ;
}
public void setId ( Integer id ) {
this . id = id ;
}
(...)
}
Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 13
El componente del modelo con Spring Data JPA

/*
* Declaraci ó n de una clase repositorio
*/
public interface U serRepos itory
extends CrudRepository < User , Integer > {
User findByEmail ( String email ) ;
}

// Inserci ó n de un objeto
User user = new User () ;
user . setName ( " Mary " ) ;
user . setEmail ( " mary@example . com " ) ;
user Reposito ry . save ( user ) ;

// Obtenci ó n de un objeto desde la base de datos

User user = userRep ository . findByEmail ( " mary@example . com " ) ;

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 14

El componente de la vista

Las vistas suelen ser construidas en frameworks Web

mediante plantillas HTML que, a partir de un conjunto de
variables que contienen los datos a mostrar, producen la
página HTML que los presenta.

Las plantillas consisten fundamentalmente en marcado HTML

con pequeños fragmentos de código incrustado para inyectar
datos, mostrar contenido condicionalmente, iterar sobre los
datos de una colección, etc.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 15

El componente de la vista en Spring MVC

Las aplicaciones Spring MVC usan normalmente los lenguajes

de plantillas Thymeleaf 8 o Java Server Pages (JSP).

8
https://www.thymeleaf.org/
Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 16
Thymeleaf

< div class = " messages " >

< div class = " message " th : each = " post ␣ : ␣ $ { posts } " >
< div class = " text " th : text = " $ { post . getText () } " >
Text of the post
</ div >
< div class = " metadata " >
< span class = " author "
th : text = " $ { post . getUser () . getName () } " >
Author ' s name
</ span >
< span class = " date "
th : text = " $ { post . getTimestamp () } " >
Timestamp
</ span >
</ div >
</ div >
</ div >

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 17

El componente del controlador

Normalmente se programan los controladores mediante

estructuras normales de código (métodos / funciones) en el
lenguaje de programación del framework.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 18

El componente del controlador

Cada método o función se mapea a una o más rutas de

peticiones HTTP, recibe todos los datos que necesite de la
petición HTTP, interacciona con el modelo y, finalmente,
selecciona la plantilla a ser presentada y le pasa a esta los
parámetros que necesite.

Cuando el framework recibe una petición HTTP, decide,

conforme a la ruta de la petición, qué método o función del
controlador necesita ser invocado.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 19

Controladores en Spring MVC

@Controller
@ Re qu es t Ma pp i ng ( path = " / " )
public class M e s s a g e C o n t r o l l e r {
@Autowired
private M e s s a g e R e p o s i t o r y m e s s a g e R e p o s i t o r y ;
@GetMapping ( path = " / message /{ messageId } " )
public String viewMessage (
@PathVariable ( " messageId " ) int messageId ,
Model model ) {
Message message = m e s s a g e R e p o s i t o r y . findById ( messageId ) ;
if ( message != null ) {
model . addAttribute ( " message " , message ) ;
return " view_message " ;
} else {
throw new R e s p o n s e S t a t u s E x c e p t i o n (
HttpStatus . NOT_FOUND , " Message ␣ not ␣ found " ) ;
}
}
(...)
}

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 20

Controladores en Spring MVC

@PostMapping ( path = " / post " )

public String postMessage (
@ Mo de lA t tr ib ut e Message message ,
Principal principal ) {
User user =
user Reposito ry . findByEmail ( principal . getName () ) ;
message . setUser ( user ) ;
message . setTimestamp ( new Date () ) ;
m e ss a g e R e p o s i t o r y . save ( message ) ;
return " redirect : message / " + message . getId () ;
}

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 21

 Parte III

Leyendo datos desde formularios

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 22

Controles en formularios HTML

Cuando el usuario presiona el botón de envı́o de un formulario

HTML, el navegador lee los valores de todos los controles del
mismo y los encapsula en una petición HTTP como una
colección de parámetros nombre–valor. La URL de la
petición se toma del atributo action del elemento form.
El nombre de cada parámetro se toma del atributo name del
control correspondiente.
El valor de cada parámetro se toma de la entrada del usuario
en dicho control.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 23

Controles en formularios HTML

< form action = " find - user " method = " get " >
< label >
Search user :
< input type = " email " name = " email "
placeholder = " email ␣ address " >
</ label >
< input type = " submit " value = " Search " >
</ form >

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 24

Lectura de parámetros de la petición en Spring MVC

Spring proporciona a los métodos del controlador los

parámetros de la petición HTTP directamente como
argumentos del método si estos se declaran mediante la
anotación @RequestParam.

@GetMapping ( path = " / find - user " )

public String findUser (
@RequestParam ( name = " email " ) String email ,
Model model ) {
User user = userRep ository . findByEmail ( email ) ;
model . addAttribute ( " user " , user ) ;
return " view_user " ;
}

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 25

Lectura de parámetros de la petición en Spring MVC

También es posible recibir como argumento un bean9 , cuyos

atributos se inicializan con los valores de los parámetros de la
petición que coincidan en nombre con los mismos, mediante la
anotación @ModelAttribute.

@PostMapping ( path = " / signup " )

public String signUp ( @M od e lA tt ri b ut e ( " user " ) User user ) {
if ( userRepo sitory . findByEmail ( user . getEmail () ) != null ) {
return " redirect : register ? d up l ic at e _e ma il " ;
}
userService . register ( user ) ;
return " redirect : login ? registered " ;
}

9
Los beans son clases Java que encapsulan datos (propiedades) y siguen el
convenio de proporcionar un constructor sin argumentos y métodos de acceso
(getters y setters) a las propiedades.
Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 26
 Parte IV

Plantillas Thymeleaf

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 27

Expresiones

Se inyecta el resultado de evaluar una expresión en un lugar

concreto de la página HTML mediante la sintaxis ${}.

<p >
Your name is < span th : text = " $ { user . name } " > John </ span >
and you are from
< span th : text = " $ { user . country } " > Nowhere </ span >.
</ p >

(Los valores “John” y “Nowhere” se mostrarán solo si se abre la

plantilla directamente en un navegador, sin ejecutarla. Si se ejecuta
la plantilla pidiendo el recurso al servidor, son reemplazados por el
resultado de cada expresión.)

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 28

Bucles

Se definen bucles sobre colecciones de datos con la sintaxis

th:each. El elemento que contenga dicha directiva se
presenta tantas veces como elementos tenga la colección.

< ul >
< li th : each = " user ␣ : ␣ $ { users } " th : text = " $ { user . name } " >
John Doe
</ li >
</ ul >

< div class = " message " th : each = " message ␣ : ␣ $ { messages } " >
< div class = " text " th : text = " $ { message . getText () } " >
Text of the post
</ div >
< div class = " metadata " >
< span class = " author "
th : text = " $ { message . getUser () . getName () } " >
Author ' s name
</ span >
</ div >
</ div >

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 29

Condicionales

Se definen condicionales con la sintaxis th:if. El elemento

que contenga dicha directiva solo aparece si la condición se
evalúa a valor cierto.

<p >
< span th : text = " $ { user . getName () } " > John Doe </ span >
< span th : if = " $ { user . isAdmin () } " >
( admin )
</ span >
</ p >

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 30

 Parte V

Rutas relativas

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 31

Rutas relativas

Una aplicación web generalmente consiste en muchos recursos,

tanto estáticos como dinámicos. Sus URLs generalmente
comparten el mismo esquema y autoridad, es decir, suele
accederse a ellas a través del mismo protocolo, nombre de
dominio y puerto TCP.

Una página HTML generalmente hace referencia a otros

recursos en la misma aplicación web a través de hipervı́nculos,
formularios, imágenes, referencias a hojas de estilo, referencias
a archivos JavaScript, etc.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 32

Rutas relativas

En una página HTML a la cual se accede a través de una URL

dada, las rutas relativas permiten a los creadores evitar tener
que especificar URLs completas, proporcionando simplemente
la parte que cambia con respecto a la URL de la página
HTML actual.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 33

Rutas relativas

https://www.example.com/app/main.html

<html>
<head>
(...)
</head>
<body>
<p>
<img src="foto.jpg"
alt="Una foto"> https://www.example.com/app/foto.jpg
</p>
</body>
</html>

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 34

Rutas relativas

En la mayorı́a de los casos se deberı́a usar rutas relativas para

hacer referencia a otras URLs de la misma aplicación:

▶ Las páginas HTML son más compactas y fáciles de leer, y los

errores en URLs son menos frecuentes.
▶ Se pueden mover las aplicaciones a otro esquema o autoridad
sin necesidad de actualizar los enlaces en cada página HTML.
▶ Durante la fase de desarrollo, se puede acceder a los recursos
en despliegues de la aplicación en local o en servidores que no
son de producción.

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 35

Referencias

▶ Shameer Kunjumohamed, Hamidreza Sattari, Alex Bretet,

Geoffroy Warin. Spring MVC: Designing Real-World Web
Applications, Packt Publishing (2016):
▶ Online access at O’Reilly through UC3M Library

Aplicaciones Web (2023/24) Desarrollo de aplicaciones Web con Spring MVC 36