Primavera – Respuesta REST JSON

Las API REST se están volviendo populares por las ventajas que brindan en el desarrollo de aplicaciones. Las API REST funcionan como una arquitectura cliente-servidor. El cliente realiza una solicitud y un servidor (API REST) ​​responde proporcionando algún tipo de datos. Un cliente puede ser cualquier marco front-end como Angular, React, etc., o la propia aplicación Spring (interna/externa). Los datos se pueden enviar en varios formatos, como texto sin formato, XML, JSON, etc. De estos formatos, JSON (Notación de objetos de JavaScript) es un estándar para el transporte de datos entre aplicaciones web.

Spring Application

Los requisitos previos requeridos son los siguientes: 

  1. La string JSON se puede almacenar en su propio archivo con la extensión ‘ .json ‘.
  2. Tiene el tipo MIME de – ‘ application/json ‘.

JSON

JSON es una abreviatura de JavaScript Object Notation. Es un formato de datos basado en texto que sigue la sintaxis de objetos de Javascript. Tiene una sintaxis similar a la de un objeto literal de Javascript y se puede usar independientemente de Javascript. Muchos entornos de programación tienen la capacidad de analizar y generar JSON. Existe como una string y debe convertirse en un objeto Javascript nativo para acceder a los datos mediante los métodos JSON globales disponibles de Javascript.

Estructura del JSON

{
  "id" : 07,
  "framework" : "Spring",
  "API" : "REST API",
  "Response JSON" : true
}
On sending an array of objects, they are wrapped in the square brackets

[
 {
  "id" : 07,
  "name" : "darshan"
 },
 {
  "id" : 08,
  "name" : "DARSHAN"
 }
]
  • La dependencia ‘Starter Web’ de Spring Framework le brinda las dos características esenciales de Spring MVC: (el marco web de Spring) y la metodología RESTful (API REST).
  • Para incluir ‘Starter Web’ en la aplicación Spring, agregue la siguiente dependencia:
Maven -> pom.xml

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

Estructura del proyecto – Maven

Archivo: pom.xml (Configuraciones)

XML

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>sia</groupId>
    <artifactId>GFG-JSON-REST-RESPONSE</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>GFG-JSON-REST-RESPONSE</name>
    <description>REST API Response</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
    </dependencies>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
 
</project>

Archivo: GfgJsonRestResponseApplication.java (Bootstrapping de la aplicación)

Java

// Java Program to Illustrate Bootstrapping of an
// Application
 
package gfg;
 
// Importing classes
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
// Annotation
@SpringBootApplication
 
// Main class
public class GfgJsonRestResponseApplication {
 
    // Main driver method
    public static void main(String[] args)
    {
 
        SpringApplication.run(
            GfgJsonRestResponseApplication.class, args);
    }
}

Archivo: DomainBean.java (Propiedades de usuario: los datos que se transferirán) 

  • Java Beans requiere los métodos Getter/Setter.
  • Uno puede generarlos automáticamente con la anotación ‘@Data’ de la biblioteca ‘Lombok’.
  • La dependencia es como se muestra a continuación de la siguiente manera:
Maven -> pom.xml

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

Java

// java Program to illustrate DomainBean class
 
package gfg;
 
// Importing class
import lombok.Data;
 
// Annotation
@Data
// Class
public class DomainBean {
 
    String id;
    String name;
    String data;
}

Archivo : RestJsonResponse.java (API REST)

  • Esta clase proporciona servicios RESTful.
  • Las anotaciones esenciales son:

Anotación

Descripción

@RestController Combina @Controller y @ResponseBody
@RequestMapping Asigna requests web con atributo ‘ruta’ y formato de respuesta con atributo ‘produce’
@CrossOrigin Permite requests web de origen cruzado en las clases/métodos de controlador específicos
@GetMapping Mapea la solicitud GET en un método de controlador específico
@PathVariable Vincula las variables de la plantilla de URI a los parámetros del método.

Java

package gfg;
 
import java.util.ArrayList;
 
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
@RequestMapping(path="/JSON", produces="application/json")
@CrossOrigin(origins="*")
public class RestJsonResponse {
 
    @GetMapping("/data")
    public ArrayList<DomainBean> get() {
         
        ArrayList<DomainBean> arr = new ArrayList<>();
         
        DomainBean userOne = new DomainBean();
        userOne.setId("1");
        userOne.setName("@geek");
        userOne.setData("GeeksforGeeks");
         
        DomainBean userTwo = new DomainBean();
        userTwo.setId("2");
        userTwo.setName("@drash");
        userTwo.setData("Darshan.G.Pawar");
         
        arr.add(userOne);
        arr.add(userTwo);
         
        return arr;
    }
     
    @GetMapping("/{id}/{name}/{data}")
    public ResponseEntity<DomainBean> getData(@PathVariable("id") String id,
                             @PathVariable("name") String name,
                                @PathVariable("data") String data) {
         
        DomainBean user = new DomainBean();
        user.setId(id);
        user.setName(name);
        user.setData(data);
         
        HttpHeaders headers = new HttpHeaders();
         
        ResponseEntity<DomainBean> entity = new ResponseEntity<>(user,headers,HttpStatus.CREATED);
         
        return entity;
    }
}

Salidas :

Una array de literales de objetos JSON

Literal de objeto JSON

La respuesta JSON de la API REST puede ser consumida por:

  1. Aplicación de primavera en sí.
  2. Marco/aplicación front-end

A: Aplicación de Primavera

  • Spring ofrece ‘ RestTemplate ‘, una forma conveniente de manejar una respuesta REST.
  • Tiene los métodos de controlador específicos del método HTTP.

Archivo : ConsumeResponse.java (Consume REST API respuesta)

Java

// Java Program to Illustrate Consume REST API response
package gfg;
 
// Importing required classes
import org.springframework.http.ResponseEntity;
import org.springframework.web.client.RestTemplate;
 
// Class
public class ConsumeResponse {
 
    // Creating an object of ResponseEntity class
    RestTemplate rest = new RestTemplate();
 
    public ResponseEntity<DomainBean> get()
    {
 
        return rest.getForEntity(
            "http://localhost:8080/JSON/{id}/{name}/{data}",
            DomainBean.class, "007", "geek@drash",
            "Darshan.G.Pawar");
    }
}

Archivo: ResponseController.java (controlador normal)

Se usa un controlador Spring normal para recuperar las respuestas del método ‘RestTemplate’ y devuelve una vista.

Ejemplo:

Java

// Java Program to Illustrate Regular Controller
 
package gfg;
 
// Importing required classes
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
 
// Annotation
@Controller
@RequestMapping("/ConsumeResponse")
 
// Class
public class ResponseController {
 
    @GetMapping("/get") public String get(Model model)
    {
 
        // Creating object of ConsumeResponse class
        ConsumeResponse data = new ConsumeResponse();
        model.addAttribute("response",
                           data.get().getBody());
        model.addAttribute("headers",
                           data.get().getHeaders());
 
        return "output";
    }
}

Archivo: Output.html (salida de API: plantilla Thymeleaf )

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<title>GeeksforGeeks</title>
</head>
<body>
 
<h1 style="color:forestgreen" th:text="${response.id}">attributeValue will be placed here</h1>
<h1 style="color:forestgreen" th:text="${response.name}">attributeValue will be placed here</h1>
<h1 style="color:forestgreen" th:text="${response.data}">attributeValue will be placed here</h1>
 
<h2 style="color:forestgreen; width : 350px" th:text="${headers}">attributeValue will be placed here</h2>
 
</body>
</html>

Salida :

Respuesta con JSON como tipo de contenido

B: Marco/aplicación front-end – Angular

Archivo: consuma-json.component.ts (componente angular)

  • Este componente recupera los datos JSON de la API REST de orientación URL especificada.
  • Los datos recuperados se almacenan en una variable.
import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-consume-json',
  templateUrl: './consume-json.component.html',
  styleUrls: ['./consume-json.component.css']
})
export class ConsumeJsonComponent implements OnInit {
   
  restData : any;
  constructor(private http:HttpClient) { }

   ngOnInit() { 
    this.http.get('http://localhost:8080/JSON/data')
     .subscribe(data => this.restData = data);
  }
}

Archivo: consuma-json.component.html (vista del componente)

  • Obtenga los datos almacenados mediante la notación de puntos ( . ).
  • ‘ngFor’ es una directiva de plantilla angular utilizada para iterar a través de la colección de objetos.

HTML

<h1>Rest API Response : JSON</h1>
 
<div>
 <table *ngFor="let json of restData">
   <tr>
     <td>{{json.id}}</td>
     <td>{{json.name}}</td>
     <td>{{json.data}}</td>
   </tr>
 </table>
</div>

Archivo: consumir-json.component.css (archivo de estilo) 

CSS

h1, tr{
  color : green;
  font-size : 25px;
}
Add - '<app-consume-json></app-consume-json>' in the 'app.component.html' file

Producción:

Respuesta recuperada por componente Angular

  • Además, puede asignar un objeto a un objeto JSON literal mediante la API de Jackson .
  • Agregue la siguiente dependencia:
Maven -> pom.xml
        
<dependency>
     <groupId>com.fasterxml.jackson.core</groupId>
     <artifactId>jackson-databind</artifactId>
     <version>2.5.3</version>
</dependency>

Nota : esta dependencia también agregará automáticamente las siguientes bibliotecas al classpath:

  • jackson-anotaciones
  • jackson-core

Publicación traducida automáticamente

Artículo escrito por pawardarshan461 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *