Spring Boot Thymeleaf Consuming RESTful Services

In this article, I am going to discuss Spring Boot Thymeleaf Consuming RESTful Services with Examples. Please read our previous article where we discussed Spring Boot Thymeleaf with Examples.

Spring Boot Thymeleaf Consuming RESTful Services

In previous articles, we have created a Thymeleaf application and a RESTful API. Consuming RESTFul services means creating an application that will use this API.

In this exercise, we shall implement a mechanism by which an application consumes RESTful services. For this project, let us use the application of the fruits from the previous exercise. We will add another class to the project such that the same application is supplying and consuming the API. Note that this can be modified to use an API from another application also (We will learn this in the next article).

Step 1: Add the spring-boot-starter-thymeleaf dependency to the pom.xml file.

Step 2: Create a new class called WebController.java in src/main/java/com/dotnet/restful directory.

Step 3: Modify the newly created file as follows:

We have performed the following modifications:

Imported required packages
Added @Controller annotation to the class.
Added functions that will map client requests to their respective HTML files

Step 3: Create a file called view-products.html in the src/main/resources/templates directory.

Step 4: Modify the HTML file as follows:

Here, we have created an HTML webpage. This file will use the fruits REST API and display the products on the webpage.

Step 5: Create a file called add-products.html in the src/main/resources/templates directory.

Step 6: Modify the HTML file as follows:

This HTML page shall have a button. This button, when pressed, shall enter the value specified in the productmodel variable. As of now, this is hardcoded into the program. However, the program can be modified to request this variable from the user.

Step 7: Execute the application. Ensure compilation is successful.

Step 8: Open your web browser and navigate to http://localhost:8080/view-products. The following webpage must be visible.

Step 9: Open your web browser and navigate to http://localhost:8080/add-products. The following webpage must be visible.

Click on the button. This should add a new fruit (fig) to the application. If this is successful, the following output must be seen:

Step 8: Open your web browser and navigate to http://localhost:8080/view-products. The following webpage must be visible.

As can be seen, the new fruit is added. If the new fruit is not visible, refresh the webpage and then check. Sometimes, the browser caches the webpage (an old copy of the webpage shall be displayed as long as the webpage is not refreshed).

Congratulations! You now learned how to consume REST APIs in Spring Boot.

The Complete Example Code

ConsumerestApplication.java

package com.dotnet.consumerest;

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

@SpringBootApplication
public class ConsumerestApplication {

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

WebController.java

package com.dotnet.consumerest;

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

@Controller
public class WebController
{
    @RequestMapping(value = "/view-products")
    public String viewProducts()    {return "view-products";}

    @RequestMapping(value = "/add-products")
    public String addProducts()    {return "add-products";}
}

add-products.html

<!DOCTYPE html>
<html>
   <head>
      <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 : "5",
                  name : "Fig"
               };
               var requestJSON = JSON.stringify(productmodel);
               $.ajax({
                  type : "POST",
                  url : "http://localhost:8080/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>

view-products.html

<!DOCTYPE html>
<html>
   <head>
      <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:8080/products", function(result){
               $.each(result, function(key,value) {
                  $("#productsJson").append(value.id+" "+value.name+" ");
               }); 
            });
         });
      </script>
   </head>
   
   <body>
        <h1>Fruits: </h1>
        <div id = "productsJson"> </div>
   </body>
</html>

In the next article, I am going to discuss Spring Boot CORS Support with Examples. Here, in this article, I try to explain Spring Boot Thymeleaf Consuming RESTful Services with Examples. I hope you enjoy this Spring Boot Thymeleaf Consuming RESTful Services article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.