Home > Software design >  spring boot and thymeleaf - displaying All Elements
spring boot and thymeleaf - displaying All Elements

Time:04-27

Can you help me about showing all the elements in "book-data".html file?

My controller class is

@Autowired BooksService booksService
@GetMapping("/books")
private List<Books> getAllBooks() throws IOException, InterruptedException {
    return booksService.getAllBooks();
}

and my service class is

@Autowired BooksRepository booksRepository;
public List<Books> getAllBooks() throws IOException, InterruptedException {
    return (List<Books>) booksRepository.findAll();
}

my book repository interface is

public interface BooksRepository extends CrudRepository<Books, Integer>
{
}

and my "book-data".html file is

<table >
<thead >
    <tr>
        <th scope="col">Book ID</th>
        <th scope="col">Book Name</th>
        <th scope="col">Book Author</th>
        <th scope="col">Book Price</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td th:text="${book.bookid}"></td>
        <td th:text="${book.bookname}"></td>
        <td th:text="${book.author}"></td>
        <td th:text="${book.price}"></td>
    </tr>
</tbody>

In HTML page, it doesn't show any book data. For service class, I saw another solution like below, but it didn't solve the problem.

@RequestMapping("/books")
private String listBooks(Model model){
  model.addAtrribute("books", booksService.getAllBooks());
  return "books";
}

in html:

<tbody>
    <tr th:each="book : ${books}">
          <td th:text="${book.bookid}"></td>
          <td th:text="${book.bookname}"></td>
          <td th:text="${book.author}"></td>
          <td th:text="${book.price}"></td>
    </tr>
  </tbody>

CodePudding user response:

I think something like this is maybe a solution :

in your controller with adding @Controller in class statement :

@Autowired
BooksService booksService

@GetMapping("/books")
private String listBooks(Model model){
  model.addAtrribute("books", booksService.getAllBooks());
  return "views/book-data";
}

your service with adding @Service in class statement :

@Autowired
BooksRepository bookRepository

public List<Books> getAllBooks(){
  return this.booksRepository.findAll();
}

your repository with adding @Repository in class statement : maybe you could had @Query

@Repository
public interface BooksRepository extends CrudRepository<Books, Long>
{
    public List<Books> findAll();
}

And your html :

<table >
    <thead >
        <tr>
            <th scope="col">Book ID</th>
            <th scope="col">Book Name</th>
            <th scope="col">Book Author</th>
            <th scope="col">Book Price</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="book : ${books}">
          <td th:text="${book.bookid}"></td>
          <td th:text="${book.bookname}"></td>
          <td th:text="${book.author}"></td>
          <td th:text="${book.price}"></td>
        </tr>
    </tbody>
</table>

CodePudding user response:

First, I created another html file that shows "all books". This file is named allBooks.html. Then, the service method below solved the problem, for your information.

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="https://thymeleaf.org">
<style>
    table, th, td {
        border: 1px solid black;
        text-align: center;
    }
</style>
<table >
<thead >
    <tr>
        <th scope="col">Book ID</th>
        <th scope="col">Book Name</th>
        <th scope="col">Book Author</th>
        <th scope="col">Book Price</th>
    </tr>
</thead>
<tbody>
    <tr  th:each="book : ${books}">
        <td th:text="${book.bookid}"></td>
        <td th:text="${book.bookname}"></td>
        <td th:text="${book.author}"></td>
        <td th:text="${book.price}"></td>
    </tr>
</tbody>
@GetMapping("/books")
private ModelAndView getAllBooks() throws IOException, InterruptedException {
    ModelAndView mav = new ModelAndView();
    mav.setViewName("allBooks");
    mav.addObject("books", booksService.getAllBooks());
    return mav;
}
  • Related