Mengkonsumsi Layanan Web RESTful

Bab ini akan membahas secara detail tentang menggunakan Layanan Web RESTful dengan menggunakan jQuery AJAX.

Buat aplikasi web Spring Boot sederhana dan tulis file kelas pengontrol yang digunakan untuk dialihkan ke file HTML untuk menggunakan layanan web RESTful.

Kita perlu menambahkan Thymeleaf starter Spring Boot dan dependensi Web di file konfigurasi build kita.

Untuk pengguna Maven, tambahkan dependensi di bawah ini ke file pom.xml Anda.

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

Untuk pengguna Gradle, tambahkan dependensi di bawah ini ke dalam file build.gradle Anda -

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

Kode untuk file kelas @Controller diberikan di bawah ini -

@Controller
public class ViewController {
}

Anda dapat menentukan metode URI Permintaan untuk dialihkan ke file HTML seperti yang ditunjukkan di bawah ini -

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

API ini http://localhost:9090/products harus mengembalikan JSON di bawah sebagai tanggapan seperti yang ditunjukkan di bawah ini -

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

Sekarang, buat file view-products.html di bawah direktori templates di classpath.

Di file HTML, kami menambahkan pustaka jQuery dan menulis kode untuk menggunakan layanan web RESTful saat pemuatan halaman.

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

Metode POST dan URL ini http://localhost:9090/products harus berisi Badan Permintaan dan Badan Tanggapan di bawah ini.

Kode untuk badan Permintaan diberikan di bawah ini -

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

Kode untuk tubuh Respon diberikan di bawah ini -

Product is created successfully

Sekarang, buat file add-products.html di bawah direktori templates di classpath.

Di file HTML, kami menambahkan pustaka jQuery dan menulis kode yang mengirimkan formulir ke layanan web RESTful dengan mengklik tombol.

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

Kode lengkap diberikan di bawah ini.

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

Kode untuk Gradle - build.gradle diberikan di bawah ini -

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’)
}

File kelas controller diberikan di bawah ini - ViewController.java diberikan di bawah ini -

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”;   
   }   
}

File view-products.html diberikan di bawah ini -

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

File add-products.html diberikan di bawah ini -

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

File kelas Aplikasi Spring Boot utama diberikan di bawah ini -

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);
   }
}

Sekarang, Anda dapat membuat file JAR yang dapat dieksekusi, dan menjalankan aplikasi Spring Boot dengan menggunakan perintah Maven atau Gradle berikut.

Untuk Maven, gunakan perintah seperti yang diberikan di bawah ini -

mvn clean install

Setelah “BUILD SUCCESS”, Anda dapat menemukan file JAR di bawah direktori target.

Untuk Gradle, gunakan perintah seperti yang diberikan di bawah ini -

gradle clean build

Setelah "BUILD SUCCESSFUL", Anda dapat menemukan file JAR di bawah direktori build / libs.

Jalankan file JAR dengan menggunakan perintah berikut -

java –jar <JARFILE>

Sekarang, aplikasi telah dimulai pada port Tomcat 8080.

Sekarang tekan URL di browser web Anda dan Anda dapat melihat hasilnya seperti yang ditunjukkan -

http: // localhost: 8080 / lihat-produk

http: // localhost: 8080 / add-products

Sekarang, klik tombolnya Click here to submit the form dan Anda dapat melihat hasilnya seperti yang ditunjukkan -

Sekarang, tekan URL lihat produk dan lihat produk yang dibuat.

http://localhost:8080/view-products

JS sudut

Untuk menggunakan API dengan menggunakan Angular JS, Anda dapat menggunakan contoh yang diberikan di bawah ini -

Gunakan kode berikut untuk membuat Angular JS Controller untuk menggunakan GET API - 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;
   });
});

Gunakan kode berikut untuk membuat Angular JS Controller untuk menggunakan 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 - Data metode Post merepresentasikan isi Request dalam format JSON untuk membuat produk.