Esta semana, me consultaron por las alternativas que se tienen en Spring para implementar el patrón MVC del lado del frontend, de las múltiples formas que se tienen, la que más me llama la atención es thymeleaf dado que es lo más cerca a código html puro. En este post quiero explicar como podemos crear un proyecto con spring, en el que useamos thymeleaft para el desarrollo de las vistas, añadiendo contenido estático (js, css) a nuestra web y consumiendo una base de datos como postgres usando jdbc.
Como indico en el parrafo anterior, en este post usaremos las siguientes herramientas:
- Spring initializr
- Spring JDBC
- Spring Web Started
- Thymeleaf
- Lombok
- PostgreSQL
Nuestro proyecto en cuestión, consiste en la realización de una página web donde podemos visualizar los logs que se generen en una aplicativo, siendo estos de los distintos tipos que existen. El proyecto en cuestión es uno personal que tengo en mente y pienso desarrollarlo en conjunto con una serie de post, se me hace interesante por que me permitirá agrupar el logging de diversar aplicaciones. Soy consciente que actualmente existen herramientas que brindan esta información con dashboards muy completos entre otras ventajas. Pero, no me negarán que existe una mistica especial en crear algo uno mismo desde cero. Además quiero que en esta aplicación también se pueda visualizar las consultas que se efectuan al motor de postgres, siendo este un simil al SQL Profiler que tenemos en SQL Server, he buscado exhaustivamente alguna alternativa que me permita conseguir esto y no la he encontrado, motivo por el cual me plantee generar una por mi mismo, siendo consciente que muy probablemente no tenga todas las características inicialmente que podemos encontrar en la herramientas de microsoft. Volviendo al post que nos reclama, iniciaremos creando un proyecto de la siguiente manera:
Con el proyecto creado, replicamos la estructura ya antes mencionada para el repository, service y controller. Me dedicaré a explicar como se configuran los archivos estáticos y la demás configuración correspondiente a la integración con thymeleaft.
Debemos copiar los archivos que vamos a usar en la siguiente ruta de nuestro proyecto:
Para nuestros archivos html, creamos una carpeta shared en la que pondremos archivos como el header o el footer de nuestra aplicación, esto será usado como fragment en nuestras demás vistas. Para este primer post, sólo creare el “index” de nuestra aplicación en donde desarrollare una solicitud para llenar un combo con información de base de datos y la realización de un post.
En el header, importaremos las dependencias css y js. Además de realizar ciertas configuraciones para poder usarlo como fragment en nuestras demás vistas.
Importar estilos con thymeleaft:
<link rel="stylesheet"
th:href="@{/lib/plugins/daterangepicker/daterangepicker.css}">Importar javascript con thymeleaft:
<script th:src="@{/lib/plugins/jquery/jquery.min.js}"></script>Configurar una sección HTML en el header para ser llamada como fragment:
Como se puede ver, se indica que es un fragment y se le asigna un nombre por el cual será llamada, el html en cuestión es un loader a ser usado en las demás páginas html cuando carguen.
En el controlador, cuando trabajemos con MVC, es necesario usar la notación “@Controller” en lugar de “RestController” que usabamos cuando trabajamos con APIS. el primer controller a crear es el index y posee la siguiente estructura.
Como se ve, es un controller del tipo string, y debe retornar el nombre del html, para nuestro caso “logger”. Es necesario que nuestro index tenga el tipo de entrada “Model” que es una clase propia del framework que nos permite indicarle a la vista los atributos con los cuales trabajará. Como podemos ver, estoy declarando un atributo con el nombre “search” que es del tipo “SearchLog” que es una entidad que posee los siguientes campos:
Los campos que estén dentro de nuestro formulario html, deben tener los mismos valores definidos para nuestra entidad “SearchLog”. Además, se añaden otros dos atributos, que contienen las listas de nombres de las máquinas en las cuales se generaron los logs y los nombres de las aplicación de las cuales se tiene log registrados. En la vista “logger”, se tiene la siguiente configuración:
Llamada al fragment:
Como se puede observar, hago un insert del fragment, indicando la ubicación del archivo que lo contiene y el nombre que le indicamos.
Configuración del form:
En este “form” es importante notas que se está indicando la acción a la cual debe dirigir “/search”, el objecto que contiene que lleva el nombre “search” y si ven el post lineas arriba es el nombre que le indicamos en el model e indicar que es del tipo post. Por otro lado los campos contenidos en el form, poseen los nombres exactos que se definieron en la entidad y finalmente, para la lista que se devuelve, se itera sobre esta y se esta indicando en el valor y el texto a desplegar el mismo valor que es el nombre.
En el controlador tenemos que definir un método post con nombre “search”, quedando de la siguiente manera:
Es necesario definir como entrada de nuestro controlador un “@ModelAttribute” que debe ser del mismo tipo que definimos en nuesto model y del que posee nuestro form, para que pueda ser mapeado correctamente. Finalmente, llenamos los datos en nuestra entidad.
Presionamos el botón “search” y deberíamos llegar a nuestro método post con variable de entrada “SearchLog” y los campos que hemos ingresado.
Como podemos ver, es relativamente sencillo configurar y empezar a trabajar con thymeleaft, en otros post explicare la integración que podemos realizar con spring secutiry y sessions usando esta herramienta. Espero que les haya servido, como en los otros post dejo el link al repositorio de github del proyecto y el video.
REPO: GITHUB
Saludos.
Deja un comentario
