How to Display Data on a Webpage using Spring Boot

Introduction

In this guide, we will explore how to display data on a webpage using Spring Boot. Spring Boot is a powerful framework for building Java web applications, and displaying dynamic data is a fundamental aspect of web development. By understanding the process of fetching and rendering data, you can create interactive and responsive applications.

We will cover the use of controllers, models, and services in Spring Boot to effectively display data on your webpages. This tutorial is ideal for beginners looking to enhance their Java web application skills.

Understanding Spring Boot Controllers
Model and View in Spring Boot
Service Layer and Its Role
Example Code: Displaying Data on a Webpage
Conclusion

1. Understanding Spring Boot Controllers

To understand how to display data on a webpage using Spring Boot, we start with controllers. In Spring Boot, a Controller handles incoming HTTP requests and determines how the application responds. Controllers are annotated with @Controller, and their methods are mapped to URLs using annotations like @GetMapping and @PostMapping.

For more details, refer to the official Spring Boot guide on Serving Web Content.

Here is an example of a simple controller:

package com.example.demo.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import com.example.demo.model.Post;
import com.example.demo.service.PostService;

@Controller
public class HomeController {

    @Autowired
    private PostService postService;

    @GetMapping("/")
    public String home(Model model){
        List posts = postService.getAllPosts();
        model.addAttribute("posts", posts);
        return "home";
    }
}

package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

import com.example.demo.model.Post;

import com.example.demo.service.PostService;

@Controller

public class HomeController {

@Autowired

private PostService postService;

@GetMapping("/")

public String home(Model model){

List posts = postService.getAllPosts();

model.addAttribute("posts", posts);

return "home";

}

2. Model and View in Spring Boot

The Model in Spring Boot serves as a container for data that will be displayed on the webpage. The View is typically a template file that renders the model data into HTML.

Understanding the model and view is crucial when learning how to display data on a webpage using Spring Boot. The model holds the data, and the view presents it to the user.

Learn more from the Spring Boot guide on Handling Form Submission.

3. Service Layer and Its Role

The Service Layer represents the business logic of the application. It contains methods that fetch data from the repository layer, process it, and provide it to the controllers.

package com.example.demo.service;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.example.demo.model.Post;
import com.example.demo.repository.PostRepository;

@Service
public class PostService {

    @Autowired
    private PostRepository postRepository;

    public List getAllPosts() {
        return postRepository.findAll();
    }
}

package com.example.demo.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.example.demo.model.Post;

import com.example.demo.repository.PostRepository;

@Service

public class PostService {

@Autowired

private PostRepository postRepository;

public List getAllPosts() {

return postRepository.findAll();

}

4. Example Code: Displaying Data on a Webpage

Let’s see how to display data on a webpage using Spring Boot with a practical example. The controller fetches data using the service and passes it to the view through the model.

Here is the home.html template using Thymeleaf:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
</head>
<body>
    <h2>Posts</h2>
    <ul>
        <li th:each="post : ${posts}">
            <h3 th:text="${post.title}"></h3>
            <p th:text="${post.content}"></p>
        </li>
    </ul>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h2>Posts</h2>

<ul>

</li>

</ul>

</body>

</html>

This template iterates over the list of posts and displays each one’s title and content, effectively showing you how to display data on a webpage using Spring Boot.

Conclusion

We have covered the steps on how to display data on a webpage using Spring Boot. By utilizing controllers, models, and services, you can create dynamic and interactive Java web applications. Understanding this flow is essential for any developer working with Spring Boot.

For further reading, visit the Official Spring Boot Documentation and explore more Spring Guides.

If you’re interested in more topics on Spring Boot, consider reading:

S03L05 – Displaying data on webpage, Spring Boot

How to Display Data on a Webpage using Spring Boot

Introduction

Table of Contents

1. Understanding Spring Boot Controllers

2. Model and View in Spring Boot

3. Service Layer and Its Role

4. Example Code: Displaying Data on a Webpage

Conclusion

How to Display Data on a Webpage using Spring Boot

Introduction

Table of Contents

1. Understanding Spring Boot Controllers

2. Model and View in Spring Boot

3. Service Layer and Its Role

4. Example Code: Displaying Data on a Webpage

Conclusion

Related Posts

S03L04 – Adding seed data in the database

S03L03 – Adding repository and service classes in Spring Boot

S06L02 – Project setup