Curso de Spring Boot
Petición Rest

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) {
  personaRepository.deleteById(id);
 }
 
 @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.equipoCod=:id")
   Equipo findEquipoByEquipoCod(@Param("id")int id);

   List<Asignatura> findByUserlistContaining(user);

   @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.

./src/services/api.js

import axios from 'axios';
export default api= axios.create({ baseURL: 'http://localhost:8080/people' });

./src/services/guests.js

import api from './api.js';

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, que habilita la posibilidad de subir ficheros al servidor mediante peticiones HTTP.

com.pablomonteserin.prueba.config.Config

package com.app.config.WebConfig
...
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // Mapea /uploads/images/** a la carpeta física del servidor
        String uploadPath = System.getProperty("user.dir") + "/uploads/";

        registry.addResourceHandler("/uploads/**")
                .addResourceLocations("file:" + uploadPath);
    }
}

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>