Spring Boot: Página inicial con Bootstrap

 

Este es el segundo artículo de la serie sobre Spring Boot que comenzamos hace dos semanas, si quieres ver el primero puedes acceder pulsando aquí.

En el primer artículo vimos cómo descargar nuestro proyecto configurado para nuestros intereses y listo para ser importado en nuestro IDE (nosotros usaremos Eclipse).

Lo primero que vamos a hacer es importar el proyecto:

1. File -> Import
2. Existing Maven Projects
3. Seleccionamos el fichero pom.xml en la carpeta donde lo hemos descomprimido y esperamos unos segundos

Cuando acabe la importación, esta es la estructura que nos aparecerá:

Con Spring Boot no necesitamos configurar el servidor, ya se encarga él de facilitarnos la vida. Lo único que tenemos que hacer es arrancar la clase BootApplication.java, que se encargará de arrancar Tomcat y dejar nuestra aplicación funcionando en el puerto 8080. 

Y si todo fuera bien, podríamos acceder a través de la URL: http://localhost:8080/

Pero ahora mismo tenemos un error de conexión con base de datos que nos impide que la aplicación arranque.

Vamos a empezar a hacer unas cuantas modificaciones para que todo empiece a funcionar.

Para poder seguir todos los cambios he creado este repositorio en Github: https://github.com/tecnificados/boot 

Ahora mismo tiene los siguientes commits:

Los tres primeros commits son la creación del repositorio y la subida del código que descargamos de https://start.spring.io/

El cuarto commit es una corrección para que no nos dé problemas la configuración con la base de datos, si no añadimos estas líneas en el pom.xml, nuestro desarrollo será incapaz de conectarse con la base de datos. 

 <plugin> 

 <groupId>org.apache.maven.plugins</groupId> 

 <artifactId>maven-resources-plugin</artifactId>

 <version>3.1.0</version>

 </plugin>

Los dos últimos commits son los que quiero revisar con vosotros, ya que son los que nos van permitir hacer que la aplicación arranque y trabajar con JSPs, JSTL y añadir Bootstrap a través de sus recursos (css y js).

Cambios para poder trabajar con JSPs (Commit 757e5f2)

Lo primero que vamos a hacer es arreglar el problema con la base de datos. Debemos configurarla. Vamos a utilizar MySQL. Puedes instalarlo directamente, o utilizar la máquina virtual que subimos a Mega hace unas semanas (aquí el artículo). 

No hace falta tener ninguna tabla, simplemente que el servicio esté funcionando.

Vamos a editar el fichero application.properties y dejarlo con la configuración de conexión a BBDD:

#nivel de log en la aplicación
logging.level.root=info

#Configuración de Base de Datos
 
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
 
#Url donde está el servicio de tu mysql y el nombre de la base de datos
spring.datasource.url=jdbc:mysql://localhost:3306/boot_demo?useSSL=false&serverTimezone=Europe/Madrid
 
#Usuario y contrasena para tu base de datos descrita en la línea anterior
spring.datasource.username=boot_demo
spring.datasource.password=boot_demo
 
#[opcional]Imprime en tu consola todo el SQL.
spring.jpa.show-sql = true

Si todo está bien ya podremos arrancar nuestro proyecto con la clase BootApplication.java

Y al acceder a través de http://localhost:8080/ veremos lo siguiente:

¿Qué es esto? Spring Security en nuestra aplicación, todo va bien.

Apagamos y vamos a decirle a Spring Security que de momento no proteja algunas páginas.

Para eso vamos a crear la clase WebSecurityConfig.java y añadiremos el siguiente contenido:

@Configuration

@EnableWebSecurity

public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

@Override

protected void configure(HttpSecurity http) throws Exception {

http

    .authorizeRequests()

.antMatchers("/", "/login", "/resources/**").permitAll()

.anyRequest().authenticated()

.and()

.formLogin()

    .loginPage("/login")

    .permitAll()

    .and()

    .logout()

    .permitAll();

}

}

Con esta clase entre otras cosas configuramos el acceso libre a las rutas:

1. /: la pagina inicial
2. /resources/**: ruta donde estarán nuestros recursos estáticos
3. /login: nuestra página de acceso

En el fichero application.properties añadiremos estas líneas:

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

Así se configura la ruta a nuestras JSPs.

Ahora vamos a crear un controlador (StartController.java), que será el encargado de capturar las peticiones a la página inicial.

@Controller

public class StartController {

 

    @RequestMapping("/")

    public String mensaje() {

         

        return "index";

    }

}

Lo único que le decimos es que capture las peticiones a la página por defecto y las mande a la JSP index.jsp, que va a tener el siguiente contenido: 

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Hola</title>

</head>

<body>

Hola con Spring Boot

</body>

</html> 

Y para acabar este punto vamos a necesitar añadir la dependencia que permite ejecutar JSPs en nuestro fichero pom.xml:

<dependency>

<groupId>org.apache.tomcat.embed</groupId>

<artifactId>tomcat-embed-jasper</artifactId>

<scope>provided</scope>

</dependency>

Si ahora arrancamos de nuevo y accedemos a nuestro http://localhost:8080/ ahora deberíamos ver un saludo como este:

Es un poco simple, pero es un comienzo.

Cambios para desarrollar con recursos. Bootstrap añadido (Commit 37cfa22)

Este commit es muy importante, ya que vamos a crear la clase de configuración del proyecto (MvcConfig), donde vamos a poder ir añadiendo 'piezas' según las vayamos necesitando. Y la primera pieza a añadir es decirle a Spring que nos permita servir recursos estáticos como CSS y ficheros JS.

Para empezar vamos a ir por esos recursos, nos vamos a la web oficial de Bootstrap y nos descargamos la versión que nos interese (4.6 por ejemplo): https://getbootstrap.com/docs/4.6/getting-started/download/

Esto nos descargará un zip, vamos a descomprimir su contenido en la carpeta:  "src\main\webapp\resources"

Ahora ya tenemos que ya tenemos los recursos vamos a decirle a Spring dónde están y que nos permita acceder a ellos. Para esto creamos la clase MvcConfig.java

@Configuration

@EnableWebMvc

public class MvcConfig implements WebMvcConfigurer {

@Override

public void addResourceHandlers(ResourceHandlerRegistry registry) {

registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");

}

@Bean

public InternalResourceViewResolver viewResolver() {

InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();

viewResolver.setViewClass(JstlView.class);

viewResolver.setPrefix("/WEB-INF/views/");

viewResolver.setSuffix(".jsp");

return viewResolver;

}

}

En el método addResourceHandlers configuramos dónde están nuestros recursos y con InternalResourceViewResolver configuramos dónde están nuestras JSPs. Esto último lo habíamos escrito en las primeras líneas del application.properties, como ahora debe estar aquí, lo borramos de ese fichero.

Ahora vamos a añadir dos dependencias nuevas a nuestro fichero pom.xml:

<dependency>
<groupId>org.glassfish.web</groupId>
<artifactId>jakarta.servlet.jsp.jstl</artifactId>
<version>1.2.6</version>
</dependency>

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

La primera es para poder usar las etiquetas JSTL en nuestras JSPs (los recursos los añadiremos con c:url) y la segunda es para que si hacemos modificaciones en nuestras páginas, Spring detecte los cambios sin tener que reiniciar.

Y para terminar vamos a modificar nuestra página de inicio para añadir acceso a los recursos que necesitamos y darle un formato un poco más llamativo.

Aquí os dejo un par de ejemplos para que veáis cómo se insertan recursos estáticos:




<script src="<c:url value="/resources/js/vendor/jquery.slim.min.js"/>"></script>

<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap.min.css"/>" >

La página inicial la he modificado basándome en el ejemplo Jumbotron de Bootstrap. 

De modo que ahora nuestra página de inicio, tiene un aspecto bastante diferente del anterior:

En este punto ya tenemos lista nuestra aplicación para interactuar con nuestra base de datos y poder aplicar seguridad a diferentes páginas. Y lo iremos viendo poco a poco en los siguientes artículos de la serie.

Nos vemos pronto.