Sử dụng các dịch vụ web RESTful

Chương này sẽ thảo luận chi tiết về việc sử dụng Dịch vụ Web RESTful bằng cách sử dụng jQuery AJAX.

Tạo một ứng dụng web Spring Boot đơn giản và viết các tệp lớp bộ điều khiển được sử dụng để chuyển hướng sang tệp HTML để sử dụng các dịch vụ web RESTful.

Chúng ta cần thêm Spring Boot Starter Thymeleaf và phụ thuộc Web vào tệp cấu hình bản dựng của chúng ta.

Đối với người dùng Maven, hãy thêm các phần phụ thuộc bên dưới vào tệp pom.xml của bạn.

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

Đối với người dùng Gradle, hãy thêm các phần phụ thuộc bên dưới vào tệp build.gradle của bạn -

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

Mã cho tệp lớp @Controller được cung cấp bên dưới:

@Controller
public class ViewController {
}

Bạn có thể xác định các phương thức URI yêu cầu để chuyển hướng vào tệp HTML như hình dưới đây:

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

API này http://localhost:9090/products sẽ trả về JSON bên dưới để phản hồi như hình dưới đây -

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

Bây giờ, hãy tạo tệp view-products.html trong thư mục mẫu trong classpath.

Trong tệp HTML, chúng tôi đã thêm thư viện jQuery và viết mã để sử dụng dịch vụ web RESTful khi tải trang.

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

Phương thức POST và URL này http://localhost:9090/products nên chứa Nội dung yêu cầu và Cơ quan phản hồi bên dưới.

Mã cho nội dung Yêu cầu được cung cấp bên dưới:

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

Mã cho phần phản hồi được cung cấp bên dưới:

Product is created successfully

Bây giờ, hãy tạo tệp add-products.html trong thư mục mẫu trong classpath.

Trong tệp HTML, chúng tôi đã thêm thư viện jQuery và viết mã gửi biểu mẫu tới dịch vụ web RESTful khi nhấp vào nút.

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

Mã hoàn chỉnh được đưa ra bên dưới.

Maven - tệp 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>

Mã cho Gradle - build.gradle được cung cấp bên dưới -

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

Tệp lớp bộ điều khiển được cung cấp bên dưới - ViewController.java được cung cấp bên dưới -

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

Tệp view-products.html được cung cấp bên dưới -

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

Tệp add-products.html được cung cấp bên dưới -

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

Tệp lớp Ứng dụng Spring Boot chính được cung cấp bên dưới:

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

Bây giờ, bạn có thể tạo tệp JAR thực thi và chạy ứng dụng Spring Boot bằng cách sử dụng các lệnh Maven hoặc Gradle sau.

Đối với Maven, sử dụng lệnh như dưới đây:

mvn clean install

Sau khi “XÂY DỰNG THÀNH CÔNG”, bạn có thể tìm thấy tệp JAR trong thư mục đích.

Đối với Gradle, sử dụng lệnh như dưới đây:

gradle clean build

Sau khi “XÂY DỰNG THÀNH CÔNG”, bạn có thể tìm thấy tệp JAR trong thư mục build / libs.

Chạy tệp JAR bằng cách sử dụng lệnh sau:

java –jar <JARFILE>

Bây giờ, ứng dụng đã khởi động trên cổng Tomcat 8080.

Bây giờ, hãy nhấn vào URL trong trình duyệt web của bạn và bạn có thể thấy đầu ra như được hiển thị -

http: // localhost: 8080 / view-products

http: // localhost: 8080 / add-products

Bây giờ, hãy nhấp vào nút Click here to submit the form và bạn có thể thấy kết quả như hình -

Bây giờ, hãy nhấp vào URL xem sản phẩm và xem sản phẩm đã tạo.

http://localhost:8080/view-products

Angular JS

Để sử dụng các API bằng cách sử dụng Angular JS, bạn có thể sử dụng các ví dụ dưới đây:

Sử dụng mã sau để tạo Bộ điều khiển JS Angular để sử dụng 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;
   });
});

Sử dụng mã sau để tạo Bộ điều khiển JS Angular để sử dụng 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 - Dữ liệu phương thức Post đại diện cho phần thân Request ở định dạng JSON để tạo sản phẩm.