Curso de Spring Boot | Petición Rest

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Controlador

package com.app.controllers
...
@CrossOrigin // Para hacer peticiones desde otro servidor
@RestController // Para hacer peticiones REST
@RequestMapping("/people")
public class PersonaController {

	@Autowired
	private PersonaRepository personaRepository;
	
	@PostMapping("/")
	public void createPeople(@RequestBody Persona person) {
		personaRepository.save(person);
	}

	@DeleteMapping("/{id}")
	public void deletePeople(@PathVariable("id") Integer id) {
		Persona i = new Persona();
		i.setId(id);
		personaRepository.delete(i);
	}
	
	@GetMapping
	public List<Persona> selectPeople() {
		List<Persona> people = personaRepository.findAll();
		return people;
	}
	
	@PutMapping("/{id}")
	public void updatePeople(@RequestBody Persona person, @PathVariable("id")Integer id) {
		person.setId(id);
		personaRepository.save(person);
	}
}

Modelo

package com.app.repositories.PersonaRepository
...
public interface PersonaRepository extends JpaRepository<Persona, Integer> {
/*
   Puedes ampliar las operaciones contra la base de datos que es posible realizar con el repository añadiendo líneas como las siguientes a esta interfaz:

   @Query("SELECT e FROM Equipo e WHERE e.equipo_cod=:id")
   Equipo findEquipoByEquipoCod(@Param("id")int id);

   @Transactional
   void deleteByNombre(String nombre);
*/
}

Probando las peticiones

Aquí tienes el conjunto de de peticiones del frontend que se estan comunicando con la API anterior.

import axios from 'axios';
const instance = axios.create({ baseURL: 'http://localhost:8080/people' });

export const savePersonName = async (obj) => await instance.post('/', obj)

export const getPersons = async () => await instance.get();

export const deletePerson = async (id) => await instance.delete('/' + id);

export const updatePerson = async (id, name) => await instance.put('/'+id, { nombre: name });

Para probar las peticiones post con Postman:

Ejercicios REST

En los siguientes ejercicios tendrás que descargar el código fuente de una Single Page Application hecha con react. Esta aplicación tendrá uno o varios ficheros desde los que se harán peticiones a una API creada con SpringBoot.

Lista de invitados

Hacer una página web para una lista de invitados con 4 secciones. Una para consultar los invitados, otra para dar de alta un nuevo invitado y otra para darlo de baja.La tabla que usaremos tendrá dos campos: nombre (VARCHAR) e ID (INT, AUTOINCREMENT, PK).

Cada uno de los siguientes pantallazos representa una página diferente.

Descargar spa

Descargar solución con Springboot

Ejercicio futbol

En una primera página mostraremos un listado de equipos de futbol. Luego, al pulsar en uno de los equipos, mostraremos el listado de sus jugadores, la foto del equipo y la foto del escudo en una página independiente.

Necesitaremos añadir este código al repository

@Query("SELECT e FROM Equipo e WHERE e.equipo_cod=:id")
Equipo findEquipoByEquipoCod(@Param("id")int id);

Hospital

Librería

Descargar spa

Descargar solución con Springboot

Ejercicio calidades

Subir una imagen

Necesitaremos definir el siguiente fichero de configuración:

com.pablomonteserin.prueba.config.Config

package com.app.config.Config
...
@Configuration
public class Config {
	@Bean
	StandardServletMultipartResolver multipartResolver() {
	    return new StandardServletMultipartResolver();
	}
}

Y el siguiente método del controlador:

private final Path root = Paths.get("uploads");

@PostMapping("/upload")
public ResponseEntity<?> handleFileUpload(@RequestParam("file") MultipartFile file) {
	try {
		Files.copy(file.getInputStream(), this.root.resolve(file.getOriginalFilename()));
		return ResponseEntity.ok().body("{\"resp\":\"Archivo cargado con éxito\"}");

	} catch (Exception e) {
		if (e instanceof FileAlreadyExistsException) {
			throw new RuntimeException("A file of that name already exists.");
		}
		throw new RuntimeException(e.getMessage());
	}
}

Probando la subida

Con Postman:

Con HTML y Javascript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>Con Ajax</h2>
    <form action="#" id="fileUploadForm" method="post">
      <input type="file" name="file" id="file" />
      <button type="submit">Enviar</button>
    </form>
   
    <script>
      document
        .getElementById("fileUploadForm")
        .addEventListener("submit", function (e) {
          e.preventDefault();
          const formData = new FormData();
          const imagefile = document.querySelector("#file");
          formData.append("file", imagefile.files[0]);
          fetch("http://localhost:8080/evento/upload", {
            method: "POST",
            body: formData,
          })
            .then((response) => {
              return response.json();
            })
            .then((data) => {
              alert("Imagen cargada con éxito");
            })
            .catch((error) => {
              alert("Error al cargar la imagen");
            });
        });
    </script>
  </body>
</html>