Spring MVC ... primer ejemplo (REST)
Para este ejemplo crearemos una base de datos (yo uso postgresql) llamada proyecto, agregaremos una tabla usuario con los siguientes campos: id, nombre, password, logeado y area.
(
id INTEGER NOT NULL,
nombre CHARACTER VARYING NOT NULL,
password CHARACTER VARYING NOT NULL,
logeado BOOLEAN,
area CHARACTER VARYING,
CONSTRAINT usuario_pkey PRIMARY KEY (id)
);
Ahora agregaremos unos datos:
id, nombre, password, logeado, area)
VALUES (1, 'Antony Yung', '00T$@l12', TRUE, 'sistemas'),(2, 'Adrian Uribe', '3EvBb00', FALSE, 'administracion'),
(3,'Ernestina Pedroza','@22GgHQll',TRUE,'recursos humanos');
Una vez creado la base de datos y su correspondiente tabla nos enfocaremos a crear el ejemplo con Spring MVC.
¿Qués es lo que ncesitaremos?
- Archivo: build.gradle , para configurar las dependencias necesarias
- Archivo: application.properties, para configurar el acceso a la BD,entre otras cosas
- Dentro del paquete controller: UsuarioRestController.java y MainController.java
- Dentro del paquete config: WebSecurityConfig.java y MvcConfig.java
- Dentro del paquete entity: Usuario.java
- Dentro del paquete repository: UsuarioRepository.java
- Dentro del paquete service: UsuarioService.java y UsuarioServiceImpl.java
- Dentro de la subcarpeta src/main/resouces/templates: test_template.html , home.html , login.html y hello.html
- Dentro de la carpeta src/main/resources/static/js el archivo *.js: datatable.js (https://datatables.net/)
Comencemos
Este archivo nos servirá para configurar las dependencias necesarias pra nuestro proyecto (acceso a web, security, bases de datos, en este caso postgresql, etc.)
build.gradle
*
*
*@description Ejemplo
*@version 1.1.0
*
*
*
* 1. Construir proyecto: gradle build
* 2. Ver tareas disponibles: gradle task
* 3. Ejecutar: gradle run รณ gradle bootRun
*/
buildscript {
ext {
springBootVersion = '1.5.6.RELEASE'
}
repositories {
mavenCentral()
maven {
url "https://plugins.gradle.org/m2/"
}
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
apply plugin: 'java'
apply plugin: 'application'
apply plugin: 'war'
apply plugin: 'eclipse-wtp'
apply plugin: 'project-report'
apply plugin: 'org.springframework.boot'
version = '1.0.0'
sourceCompatibility = 1.8
targetCompatibility = 1.8
mainClassName = "com.codemonkey.Application"
description ="""
Ejemplo de proyecto hecho con Gradle build
"""
jar {
baseName='principal'
manifest{
attributes 'Main-Class': 'com.codemonkey.Application'
}
}
repositories {
mavenCentral()
}
dependencies {
compile('org.springframework.boot:spring-boot-starter')
compile('org.springframework.boot:spring-boot-starter-web')
compile('org.springframework.boot:spring-boot-starter-actuator')
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
testCompile group: 'org.slf4j', name: 'slf4j-log4j12', version: '1.7.25'
compile("com.fasterxml.jackson.core:jackson-databind")
compile("org.springframework.boot:spring-boot-starter-data-jpa")
compile("org.springframework.boot:spring-boot-starter-data-rest")
runtime('org.postgresql:postgresql')
compile("org.springframework.boot:spring-boot-starter-security")
}
configurations.all {
resolutionStrategy.cacheDynamicVersionsFor 10, 'minutes'
}
project.configurations.compile.resolvedConfiguration.resolvedArtifacts.each {
println ' [Dependencias] '
println 'artifact: '+it.name
println 'referencia: '+it.file
println '**************************'
}
Este archivo se usará para configurar el acceso a la base de datos en postgresql, indicar el uso de las plantillas Thymeleaf.
application.properties
banner.charset=UTF-8
banner.location=banner.txt
#THYMELEAF TEMPLATES
spring.thymeleaf.cache=false
spring.thymeleaf.check-template=true
spring.thymeleaf.check-template-location=true
spring.thymeleaf.content-type=text/html
spring.thymeleaf.enabled=true
spring.thymeleaf.encoding=UTF-8
#spring.thymeleaf.excluded-view-names= # Comma-separated list of view names that should be excluded from resolution.
#spring.thymeleaf.mode=HTML5 # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
#spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.suffix=.html
#spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain.
#spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.
#POSTGRESQL
spring.jpa.generate-ddl=true
spring.jpa.show-sql=true
spring.datasource.driverClassName=org.postgresql.Driver
spring.datasource.url=jdbc:postgresql://localhost:5432/proyecto
spring.datasource.username=postgres
spring.datasource.password=5432
#spring.jpa.hibernate.ddl-auto=create-drop
spring.jpa.hibernate.ddl-auto=update
#spring.jpa.hibernate.ddl-auto=create
spring.jpa.hibernate.naming-strategy=org.hibernate.cfg.ImprovedNamingStrategy
# JPA (JpaBaseConfiguration, HibernateJpaAutoConfiguration)
spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect
No debemos olvidar las clases principales del programa: Application.java y ServletInitializer.java
ServletInitializer.java
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.support.SpringBootServletInitializer;
public class ServletInitializer extends SpringBootServletInitializer {
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(Application.class);
}
}
Application.java
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
Nuestro @Controller principal.
MainController.java.java
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@Controller
public class MainController {
@RequestMapping(path="/", method=RequestMethod.GET)
public String goHome(){
return "index";
}
}
El @RestController de la aplicación.
UsuarioRestController.java
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
import com.codemonkey.entity.Usuario;
import com.codemonkey.service.UsuarioService;
@RestController
@RequestMapping("/testUsuarios")
public class UsuarioRestController {
@Autowired
private UsuarioService usuarioService;
//REST
//http://localhost:8080/testUsuarios/usuarios
@RequestMapping(path="/usuarios", method=RequestMethod.GET)
public List<Usuario> getAllUsuarios(){
return usuarioService.getAllUsuarios();
}
//http://localhost:8080/testUsuarios/usuario/1/
@RequestMapping(value = "/usuario/{id}", method = RequestMethod.GET)
public Usuario getUsuarioById(@PathVariable("id") long id){
return usuarioService.getUsuarioById(id);
}
//http://localhost:8080/testUsuarios/testUsuarios
@GetMapping("/testUsuarios")
public ModelAndView test_template(){
ModelAndView mav= new ModelAndView("test_template");
return mav;
}
}
El @Configuration de seguridad, donde indicamos el usuario y clave de acceso (root/123)
WebSecurityConfig.java
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/", "/home").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.logout()
.permitAll();
}
@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
auth
.inMemoryAuthentication()
.withUser("root").password("123").roles("USER");
}
}
El @Configuration de vistas home -> login -> hello.
MvcConfig.java
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/home").setViewName("home");
registry.addViewController("/").setViewName("home");
registry.addViewController("/hello").setViewName("hello");
registry.addViewController("/login").setViewName("login");
}
}
La clase Entidad que servirá para enlazar los datos de la tabla 'usuario'.
Usuario.java
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
@Entity
public class Usuario {
@Id
@GeneratedValue
@Column(name="id")
private long id;
@Column(name="nombre")
private String nombre;
@Column(name="password")
private String password;
@Column(name="logeado")
private boolean logeado;
@Column(name="area")
private String area;
public Usuario(){super();}
public Usuario(String nombre, String password,
boolean logeado, String area){
super();
this.nombre=nombre;
this.password=password;
this.logeado=logeado;
this.area=area;
}
public void setId(long id){
this.id=id;
}
public long getId(){
return id;
}
public void setNombre(String nombre){
this.nombre=nombre;
}
public String getNombre(){
return nombre;
}
public void setPassword(String password){
this.password=password;
}
public String getPassword(){
return password;
}
public void setLogeado(boolean logeado){
this.logeado=logeado;
}
public boolean isLogeado(){
return logeado;
}
public void setArea(String area){
this.area=area;
}
public String getArea(){
return area;
}
}
El @Repository, para hacer uso de los métodos necesarios para manipular los datos.
UsuarioRepository.java
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.codemonkey.entity.Usuario;
@Repository("usuarioRepository")
public interface UsuarioRepository extends JpaRepository<Usuario, Long>{
}
La interface que nos permite crear métodos para obtener los registros de la tabla 'usuario'.
UsuarioService.java
import java.util.List;
import com.codemonkey.entity.Usuario;
public interface UsuarioService {
public List<Usuario> getAllUsuarios();
public Usuario getUsuarioById(long id);
}
Esta clase nos permitirá descoplar el código.
UsuarioServiceImpl.java
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.codemonkey.entity.Usuario;
import com.codemonkey.repository.UsuarioRepository;
@Service("usuarioService")
public class UsuarioServiceImpl implements UsuarioService {
@Autowired
private UsuarioRepository usuarioRepository;
@Override
public List<Usuario> getAllUsuarios() {
return usuarioRepository.findAll();
}
@Override
public Usuario getUsuarioById(long id) {
return usuarioRepository.findOne(id);
}
}
Ahora pasemos a los templates o vistas.
Página de bienvenida.
home.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bienvenido</title>
<style type="text/css">
#centro {
margin: auto;
width: 50%;
border: 0.8em solid #2f5777;
padding: 10px;
}
h1{
text-align: center;
}
</style>
</head>
<body><div id="centro">
<h1>Bienvenido</h1>
<p>Da clic en el <a th:href="@{/hello}">enlace</a> para entrar.</p></div>
</body>
</html>
Página de login (root/123) para acceder la vista hello.
login.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Formulario de entrada </title>
<style type="text/css">
#centro {
margin: auto;
width: 50%;
border: 0.8em solid #2f5777;
padding: 10px;
}
#my_input{
border: 1px solid #2f5777;
font-size: medium;
background-color: #2f5777;
color: white;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<div th:if="${param.error}" id="centro">
Nombre de usuario y/o clave incorrectos.
</div>
<div th:if="${param.logout}" id="centro">
Logeado.
</div>
<div id="centro">
<h1>Formulario de entrada</h1>
<form th:action="@{/login}" method="post">
<div><label> Nombre de usuario : <input type="text" name="username"/> </label></div>
<div><label> Clave de acceso: <input type="password" name="password"/> </label></div>
<div><input type="submit" value="Entrar" id="my_input"/></div>
</form>
</div>
</body>
</html>
La página hello.html nos permitirá acceder a nuestro ejemplo.
hello.html
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Has entrado</title>
<script type="text/javascript" src="/js/funciones.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/estilos.css" th:href="@{css/estilos.css}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="/js/datatable.js"></script>
</head>
<body>
<div id="centro">
<h1>Bienvenido</h1>
<p th:inline="text">Hola [[${#httpServletRequest.remoteUser}]]!</p>
<form th:action="@{/logout}" method="post">
<input type="submit" value="Salir" id="my_input"/>
</form> <br/>
</div>
<p>Da clic <a th:href="@{/testUsuarios/testUsuarios}">aquí</a> para entrar y ver los usuarios.</p>
</body>
</html>
Esta página muestra una tabla con los datos de los usuarios registrados en la tabal 'usuario'.
test_template.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Spring Boot + JPA + Datatables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="/js/datatable.js"></script>
</head>
<body>
<h1>Usuarios</h1>
<table id="usuariosTable" class="display">
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Password</th>
<th>Logeado</th>
<th>Área</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Password</th>
<th>Logeado</th>
<th>Área</th>
</tr>
</tfoot>
</table>
</body>
</html>
Este archivo *.js nos permite recoger los datos del JSON creado y desplegarlo en una tabla html
datatable.js
var table = $('#usuariosTable').DataTable({
"sAjaxSource": "/testUsuarios/usuarios",
"sAjaxDataProp": "",
"order": [[ 0, "asc" ]],
"aoColumns": [
{ "mData": "id"},
{ "mData": "nombre" },
{ "mData": "password" },
{ "mData": "logeado" },
{ "mData": "area"},
]
})
});
Construir:
gradle build
Ejecutar:
gradle bootRun
Visualizar:
http://localhost:8080
Saldrá la página de bienvenida, debes dar clic en el enlace y aparecerá el formulario, introduce el usuario (root) y clave (123). Al acceder debes dar clic en el enlace y ver el resultado.
- Sr. Negativo's blog
- Inicie sesión o regístrese para enviar comentarios
Comentarios recientes
hace 1 día 7 horas
hace 1 día 7 horas
hace 17 horas 11 mins
hace 44 semanas 6 días
hace 2 años 4 semanas
hace 2 años 8 semanas
hace 2 años 16 semanas
hace 2 años 24 semanas
hace 2 años 26 semanas
hace 2 años 28 semanas