Consommation de services Web RESTful

Ce chapitre abordera en détail la consommation de services Web RESTful à l'aide de jQuery AJAX.

Créez une application Web Spring Boot simple et écrivez un fichier de classe de contrôleur qui est utilisé pour rediriger vers le fichier HTML pour consommer les services Web RESTful.

Nous devons ajouter la dépendance Thymeleaf et Web de démarrage de Spring Boot dans notre fichier de configuration de construction.

Pour les utilisateurs Maven, ajoutez les dépendances ci-dessous dans votre fichier pom.xml.

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

Pour les utilisateurs de Gradle, ajoutez les dépendances ci-dessous dans votre fichier build.gradle -

compile group: ‘org.springframework.boot’, name: ‘spring-boot-starter-thymeleaf’
compile(‘org.springframework.boot:spring-boot-starter-web’)

Le code du fichier de classe @Controller est donné ci-dessous -

@Controller
public class ViewController {
}

Vous pouvez définir les méthodes Request URI pour rediriger vers le fichier HTML comme indiqué ci-dessous -

@RequestMapping(“/view-products”)
public String viewProducts() {
   return “view-products”;
}
@RequestMapping(“/add-products”)
public String addProducts() {
   return “add-products”;
}

Cette API http://localhost:9090/products devrait renvoyer le JSON ci-dessous en réponse comme indiqué ci-dessous -

[
   {
      "id": "1",
      "name": "Honey"
   },
   {
      "id": "2",
      "name": "Almond"
   }
]

Maintenant, créez un fichier view-products.html sous le répertoire templates dans le classpath.

Dans le fichier HTML, nous avons ajouté la bibliothèque jQuery et écrit le code pour utiliser le service Web RESTful lors du chargement de la page.

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
   $.getJSON("http://localhost:9090/products", function(result){
      $.each(result, function(key,value) {
         $("#productsJson").append(value.id+" "+value.name+" ");
      }); 
   });
});
</script>

La méthode POST et cette URL http://localhost:9090/products devrait contenir le corps de la demande et le corps de la réponse ci-dessous.

Le code du corps de la requête est donné ci-dessous -

{
   "id":"3",
   "name":"Ginger"
}

Le code du corps de la réponse est donné ci-dessous -

Product is created successfully

Maintenant, créez le fichier add-products.html sous le répertoire templates dans le chemin de classe.

Dans le fichier HTML, nous avons ajouté la bibliothèque jQuery et écrit le code qui soumet le formulaire au service Web RESTful en cliquant sur le bouton.

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function() {
         var productmodel = {
            id : "3",
            name : "Ginger"
         };
         var requestJSON = JSON.stringify(productmodel);
         $.ajax({
            type : "POST",
            url : "http://localhost:9090/products",
            headers : {
               "Content-Type" : "application/json"
            },
            data : requestJSON,
            success : function(data) {
               alert(data);
            },
            error : function(data) {
            }
         });
      });
   });
</script>

Le code complet est donné ci-dessous.

Maven - fichier pom.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 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.tutorialspoint</groupId>
   <artifactId>demo</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <packaging>jar</packaging>
   <name>demo</name>
   <description>Demo project for Spring Boot</description>

   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>1.5.8.RELEASE</version>
      <relativePath />
   </parent>

   <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
      <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
      <java.version>1.8</java.version>
   </properties>

   <dependencies>
      <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-thymeleaf</artifactId>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>
   
</project>

Le code de Gradle - build.gradle est donné ci-dessous -

buildscript {
   ext {
      springBootVersion = ‘1.5.8.RELEASE’
   }
   repositories {
      mavenCentral()
   }
   dependencies {
      classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
   }
}

apply plugin: ‘java’
apply plugin: ‘eclipse’
apply plugin: ‘org.springframework.boot’

group = ‘com.tutorialspoint’
version = ‘0.0.1-SNAPSHOT’
sourceCompatibility = 1.8

repositories {
   mavenCentral()
}

dependencies {
   compile(‘org.springframework.boot:spring-boot-starter-web’)
   compile group: ‘org.springframework.boot’, name: ‘spring-boot-starter-thymeleaf’
   testCompile(‘org.springframework.boot:spring-boot-starter-test’)
}

Le fichier de classe de contrôleur donné ci-dessous - ViewController.java est donné ci-dessous -

package com.tutorialspoint.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ViewController {
   @RequestMapping(“/view-products”)
   public String viewProducts() {
      return “view-products”;
   }
   @RequestMapping(“/add-products”)
   public String addProducts() {
      return “add-products”;   
   }   
}

Le fichier view-products.html est donné ci-dessous -

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "ISO-8859-1"/>
      <title>View Products</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      
      <script>
         $(document).ready(function(){
            $.getJSON("http://localhost:9090/products", function(result){
               $.each(result, function(key,value) {
                  $("#productsJson").append(value.id+" "+value.name+" ");
               }); 
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "productsJson"> </div>
   </body>
</html>

Le fichier add-products.html est donné ci-dessous -

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "ISO-8859-1" />
      <title>Add Products</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      
      <script>
         $(document).ready(function() {
            $("button").click(function() {
               var productmodel = {
                  id : "3",
                  name : "Ginger"
               };
               var requestJSON = JSON.stringify(productmodel);
               $.ajax({
                  type : "POST",
                  url : "http://localhost:9090/products",
                  headers : {
                     "Content-Type" : "application/json"
                  },
                  data : requestJSON,
                  success : function(data) {
                     alert(data);
                  },
                  error : function(data) {
                  }
               });
            });
         });
      </script>
   </head>
   
   <body>
      <button>Click here to submit the form</button>
   </body>
</html>

Le fichier de classe principal de l'application Spring Boot est donné ci-dessous -

package com.tutorialspoint.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
   public static void main(String[] args) {
      SpringApplication.run(DemoApplication.class, args);
   }
}

Vous pouvez désormais créer un fichier JAR exécutable et exécuter l'application Spring Boot à l'aide des commandes Maven ou Gradle suivantes.

Pour Maven, utilisez la commande comme indiqué ci-dessous -

mvn clean install

Après «BUILD SUCCESS», vous pouvez trouver le fichier JAR sous le répertoire cible.

Pour Gradle, utilisez la commande ci-dessous -

gradle clean build

Après «BUILD SUCCESSFUL», vous pouvez trouver le fichier JAR dans le répertoire build / libs.

Exécutez le fichier JAR à l'aide de la commande suivante -

java –jar <JARFILE>

Maintenant, l'application a démarré sur le port Tomcat 8080.

Maintenant, appuyez sur l'URL dans votre navigateur Web et vous pouvez voir la sortie comme indiqué -

http: // localhost: 8080 / voir les produits

http: // localhost: 8080 / add-products

Maintenant, cliquez sur le bouton Click here to submit the form et vous pouvez voir le résultat comme indiqué -

Maintenant, cliquez sur l'URL de vue des produits et voyez le produit créé.

http://localhost:8080/view-products

Angulaire JS

Pour consommer les API en utilisant Angular JS, vous pouvez utiliser les exemples donnés ci-dessous -

Utilisez le code suivant pour créer le contrôleur Angular JS afin de consommer l'API GET - http://localhost:9090/products -

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
   $http.get('http://localhost:9090/products').
   then(function(response) {
      $scope.products = response.data;
   });
});

Utilisez le code suivant pour créer le contrôleur Angular JS afin de consommer l'API POST - http://localhost:9090/products -

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
   $http.post('http://localhost:9090/products',data).
   then(function(response) {
      console.log("Product created successfully");
   });
});

Note - Les données de la méthode Post représentent le corps de la requête au format JSON pour créer un produit.