Facultad de Ingeniería

Departamento Académico de Ingeniería Civil y Sistemas

TUTORIAL BASICO DE
SPRING BOOT Y JPA
Tutorial de Aplicación Web MVC con Spring Boot,
Spring DATA JPA y Spring Security

Descripción breve
Mini tutorial para crear una aplicación MVC con el Framework Spring 6.0 y Spring Boot 3.0

Ms. Camilo E. Suarez Rebaza

[email protected]
1 Configuración del Entorno
1.1 Descarga y configuración de OpenJDK 20
La librería de JAVA se descarga de http://jdk.java.net/20/:

Y se guarda en “C:\JAVA\jdk”:

1
 Se configura la variable de usuario “PATH”:

y la variable de sistema “JAVA_HOME”:

1.2 Descarga e instalación de Spring Tool Suite

El IDE se descarga de “https://spring.io/tools”:

2
Y se copia en “C:\JAVA\STS\”

Extraemos el archivo con el comando “java -jar spring-tool-suite-4-4.18.1.RELEASE…”:

Y quedaría instalado:

3
 Se inicia el IDE y se selecciona el espacio de trabajo:

Clic en <Launch> e instalamos el soporte para JAVA 20 desde el “Marketplace”:

Buscamos “JAVA 20”:

4
Clic en <Install>:

Aceptamos los términos y clic en <Finish>:

Clic en reiniciar y agregamos el JRE 20 al IDE, clic en menú “Window”:

5
Clic en “Preferences” y vamos a la opción “JAVA>Installed JREs”:

Clic en <Add…> y seleccionamos “Standard VM”:

6
 Clic en <Next>:

Clic en <Directory> para seleccionar el directorio de la JDK 20:

7
 Clic en <Seleccionar carpeta>:

Clic en <Finish> y seleccionamos la JDK que acabamos de añadir:

Clic en <Apply and Close> y listo.

8
1.3 Descarga de Lombok
La librería Lombok se descarga de “https://projectlombok.org/download”:

Y se guarda en:

Y se instala con el comando “java -jar lombok.jar”:

Se muestra:

9
 Se especifica la localización del IDE:

Se acepta la selección:

Se hace clic en <Install/Update> y listo:

10
2 Creación del Proyecto Spring Boot:
2.1 Proyecto Spring Started Project

Clic en “File > New”:

Clic en “Spring Started Project”:

11
Seleccionamos las dependencias para el proyecto y clic en <Finish>:

2.2 Creación de la Base de Datos

Botón derecho sobre “Databases”, y hacer clic en “Create”, “Database…”:

12
 En la siguiente ventana ponemos el nombre de la base de datos a crear:

Clic en guardar:

2.3 Propiedades de la aplicación

Clic en <Finish> y tendríamos el proyecto creado, Editamos el archivo
“application.properties” de la carpeta “src/main/resources” (la base de datos
“ejemplospringboot” ya debe estar creada) :

13
2.4 Configuración adicional en el IDE:
Se recomienda configurar las siguientes propiedades en el IDE “Windows”, “Preferences”:

14
2.5 Estructura del Proyecto
Creamos la siguiente estructura inicial de paquetes y carpetas para el proyecto:

A continuación, una breve explicación de los paquetes del backend.

Paquete Propósito Anotación Spring

Framework
Contiene las clases persistentes de la aplicación
entidad @Entity
(clases de entidad)
Contiene las clases de acceso a datos para @Repository
repositorio
lectura/escritura, basadas en Spring Data JPA (ya no se usa)
servicio Contiene las clases lógica de negocio @Sevice
Contiene clases que atienen las peticiones del
controlador @Controller
usuario según la arquitectura MVC
configuración Clases de configuración para Spring Security @Config

15
16
3 Código Backend (Clases JAVA)
3.1 Paquete Entidad

17
18
Clase Curso inicial, el código definitivo se muestra al final de la sección, conforme se vayan
agregando las relaciones con las clases Notas y Docente:

Ahora modificamos la clase Docente para agregar la relación con Curso, agregamos las líneas 81
y 82, así como las importaciones necesarias:

Por lo que la clase Docente quedaría de la siguiente manera:

19
20
Ahora establecemos las relaciones entre Nota con Alumno y Curso:

21
Hacemos las modificaciones en las clases Alumno.java y Curso.java, quedando así:

22
Observando más detenidamente se puede apreciar la clase Nota, en realidad tiene una clave
compuesta por alumno, curso y docente; por lo tanto, se debe crear una clase que permita
manejar la clave compuesta para la clase Nota, llamada NotaID:

23
Luego de la redefinición de su clave primaria, la clase Nota quedaría así:

24
25
3.2 Paquete Repositorio

26
3.3 Paquete Servicio
Debido a que las clases de servicio tienen una funcionalidad base común, primero crearemos
una interfase genérica con dicha funcionalidad. Se le dice genérica porque además de los tipos
de datos clásicos o clases usa tipos de datos genéricos.

Luego mediante herencia extendemos la funcionalidad a las clases servicio

27
Paso siguiente es implementar las interfaces con la logica propia de cada caso:

28
29
30
31
3.4 Vistas Preliminares
La vista preliminar consta de algunas plantillas para las ventanas principales del sistema,
en base a HTML y Thymeleaf sin CSS, JavaScript ni Bootstrap, solo a modo de
previsualización de la interacción de la capa de presentación o GUI y para una mejor
comprensión de las clases de controlador.

Posteriormente se mostrará el código completo de las vistas incluyendo librerías para

Diseño adaptativo (Bootstrap).

Cabe recalcar que en una aplicación WEB-MVC las vistas (Plantillas Thymeleaf) se crean
dentro de la carpeta “src/main/resources/templates”, por lo tanto, dentro de ella, vamos
a crear el archivo “index.html” (ventana principal del sistema) y las carpetas “alumno”,
“docente”, “curso”, “nota”; así mismo dentro de la carpeta “docente” crearemos los
archivos “docenteIndex.html” y “docenteForm.html”.

32
Quedaría inicialmente así:

El código Thymeleaf para la ventana principal “index.html” (carga por defecto) seria:

En la línea 8 se muestra el hiperenlace como normalmente sería sin usar Thymeleaf, la

dificultad con este enfoque es que cuando cambie el puerto o el host de la aplicación ese
enlace tal como está ya no serviría pues la dirección habría cambiado. Para prevenir esto
es necesario que el host y el puerto de la aplicación se generen automáticamente en el
hiperenlace, a esto de denomina contexto de la aplicación.

El contexto de la aplicación se obtiene con la etiqueta Thymeleaf th:href y el símbolo

“@{/}” quienes generan dinámicamente el hiperenlace con el host y el puerto correctos,
tal como se muestran en las líneas 9, 10 y 11; la ventana principal se muestra así:

33
Cuando el usuario hace clic en “Registrar Docente” en realidad hace una petición tipo GET
a la aplicación, la petición seria “/docente/index” esa petición será atendida por el
FrontController de Spring, quien lo derivará al controlador DocenteController.Java que
en última instancia procesará la petición. Este controlador se creará luego y su código se
mostrará en la siguiente sección; sin embargo, como se verá más adelante, este
controlador responde la petición devolviendo la plantilla “docenteIndex.html” para ser
renderizada, generando el código HTML que será devuelto al usuario. A continuación, se
muestra el código de la plantilla Thymeleaf “docenteIndex.html”:

34
Como ya se ha mencionado, el código mostrado no contempla temas de diseño web,
dicha funcionalidad se añadirá posteriormente en la versión final de la plantilla a través
de Bootstrap y otros, si se ha incluido la funcionalidad necesaria para mostrar los datos
provenientes de PostgreSQL.

Los datos provenientes de PostgreSQL son enviados a la vista por el controlador mediante
el modelo. Los datos del modelo están organizados en forma de variables que, como se
verá más adelante, son añadidas por el controlador y se agregar tantas variables como
datos se necesiten pasar del controlador a la vista que en realidad accede a las variables.

Los datos que el controlador puede agregar se conocen como atributos del modelo y cada
atributo tiene un nombre y un dato a enviar que puede ser de cualquier tipo desde un
String, Integer y Long hasta Objetos complejos e incluso listas de objetos.

El motor de plantillas Thymeleaf (la vista) accede a las variables con la sintaxis ${variable},
tal como se muestra en la línea 30 de “docenteIndex.html”, donde los datos de los
docentes se obtienen de la variable ${listaDocentes} que contiene la lista de docentes,
dicha lista se recorre con la directiva th:each (línea 30) y cada elemento de la lista es
accedido con la variable docente, luego Thymeleaf crea dinámicamente una fila <TR> por
cada elemento de la lista, mostrando los datos de cada docente en una celda <TD> usando
la variable ${docente} y la propiedad respectiva (líneas desde 31 hasta 38).

Por lo tanto, la ventana (interface GUI) que se mostraría sería la siguiente:

Cuando en la ventana listado de docentes se hace clic en el enlace “Agregar Docente” se

está haciendo una nueva petición a la aplicación, también de tipo GET, la petición seria
“/docente/nuevo” esa petición será derivada al controlador “DocenteController.Java”
que procesará la petición. Como se verá más adelante, este controlador responde a esta
petición devolviendo la plantilla “docenteForm.html” de la cual se generará el código
HTML que será devuelto al usuario.

35
Ahora se muestra el código del formulario de ingreso de datos “docenteForm.html”:

36
En la línea 7 se declara el formulario para el envío de datos, hay tres cosas importantes:
la primera es la directiva th:object="${docente}" que establece que los controles del
formulario trabajarán con los atributos del objeto docente; la segunda es la directiva
th:action="@{/docente/nuevo}" que indica la ruta del requerimiento donde se
procesarán los datos; y la tercera es la directiva th:method="post" que indica el tipo de
petición del requerimento.

En la línea 17 y similares muestra las directivas Thymeleaf th:field="*{apellidos}" y

th:value="*{apellidos}" que establecen la asociación entre el control INPUT html y el
atributo apellido del objeto docente. Esta asociación establece que los datos ingresados
en el control input sean asignados al atributo apellido del objeto docente y guardados
cuando los datos se envían al servidor y viceversa cuando los datos vienen de la base de
datos y se muestran al usuario para su edición.

Cuando el usuario hace clic en el botón <Guardar> los datos ingresados en los controles
se asignan a los atributos respectivos del objeto docente y el objeto como tal se envía
como parte de la petición, ya se dijo anteriormente que esta petición es de tipo POST, eso
quiere decir que en el controlador “DocenteController” debe haber un método
mapeando la ruta “/docente/nuevo” por el método POST, es decir debe estar marcado
con la anotación @PostMapping (“/docente/nuevo”)., tal como se mostrará más
adelante en el bloque correspondiente a las clases del Package Controller.

A continuación, se muestra la página HTML devuelta al usuario:

37
Ingresamos los siguientes datos:

Al guardar regresa al listado de docentes:

Una característica importante de Thymeleaf es la reutilización de código HTML, es decir,

la reutilización de plantillas, lo que se consigue mediante el uso de FRAGMENTOS. Los
fragmentos se declaran una vez y pueden ser llamados cuando se les necesite, incluso
pueden recibir parámetros para obtener un comportamiento dinámico.

Para tal efecto crearemos la carpeta “_frag”, dentro de ella la plantilla “base.html” para
los fragmentos “site-head”, “site-header” y plantilla “Inputs.html” para fragmentos
parametrizados de INPUTs HTML para nuestros formularios. La finalidad de ambas
plantillas es reutilizar código HTML.

38
A continuación, se muestran las plantillas y sus fragmentos mencionados:

Plantilla Base.html, con fragmento para los “head” y “header” de las GUI:

En la línea 1 se utiliza la directiva th:fragment para declarar un fragmento, en este caso,

llamado “site-head”, para reutilizar este fragmento se usa “th:replace” en el destino.

Plantilla Inputs.html con fragmento iHTML con parámetros para controles de formularios:

El fragmento llamado iHtml tiene cuatro parámetros: tipo para especificar el tipo de
control HTML (Text, Date, number, etc.), label para establecer la etiqueta del control, ph
para especificar el placeholder del control (cuando corresponda) y campo para identificar
el atributo asociado al control. Estos parámetros se acceden como si fueran variables es
decir con la sintaxis ${nombre_variable}.

A continuación, se muestran las plantillas index.html (actualizada) y de Registro de cursos

(cursoIndex.html, cursoForm.html), donde se muestran como llamar a los fragmentos
Thymeleaf previamente creados.

39
Plantilla index.html

En la línea 2 el contenido de la etiqueta <head> será reemplazado por el fragmento

llamado “site-head” perteneciente a la plantilla “Base” de la carpeta “_frag”, para lo cual
se usa la directiva th:replace. Similar situación en la línea 5, donde el contenido de la
etiqueta <header> será reemplazado por el fragmento “site-header”.

Plantilla “cursoIndex.html”:

40
Plantilla “cursoForm.html”:

En la ventana principal hacemos clic en “Registrar Curso” y se mostrará:

41
Clic en “Agregar Curso”:

Ingresamos “Arquitectura de Software” con 4 créditos y clic en aceptar:

42
A continuación, las plantillas de Registro de Alumnos: alumnoIndex.html y
alumnoForm.html.

Plantilla “alumnoIndex.html”:

43
Plantilla “alumnoForm.html”:

En la ventana principal hacemos clic en “Registrar Alumno” y se mostrará:

44
Hacemos clic en “Agregar Alumno”:

Ingresamos datos y hacemos clic en <Aceptar>:

45
Hacemos clic en el enlace “matricular” y nos aparecerá:

El código de la plantilla “notaForm.HTML” seria:

46
3.5 Paquete Controlador
A continuación, se muestra el controlador “DocenteController.JAVA”:

47
Ahora del controlador “CursoController.JAVA”:

48
Controlador “AlumnoController.JAVA”:

49
Para “NotaController.java” primero debemos actualizar “NotaRepository.java”,
“NotaService.java” y “NotaServiceImpl.java”:

50
51