通过 Thymeleaf 显示控制器方法的输出

Question

我刚开始使用 Thymeleaf，想使用 Thymeleaf 将 Spring 引导应用程序与 HTML 连接起来。我的“普通”控制器没有像这样的 Thymeleaf：

 @GetMapping(path = "/{id}")
    public BookEntity getBookById(@PathVariable Long id) {
        return bookService.getById(id);
    }



@GetMapping
        public List<BookEntity> getAllBooks() {
            return bookService.findAll();
        }

现在我正在使用 Thymeleaf，我创建了一些像这样的新控制器：

 @GetMapping(path = "/book/{id}")
    public String getBookById(@PathVariable("id") Long id, Model model) {
        BookEntity book= bookService.getById(id);
        model.addAttribute("book", book);
        return "book/{id}";
    }
    
@GetMapping("/book/all")
    public String AllBooks(Model model) {
        List<BookEntity> books = bookService.findAll();
        model.addAttribute("books", books);

        return "books";
    }

我还在 resources/templates 中创建了一个 book.html 文件，如下所示：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Books</title>
</head>
<body>
<h4>Select action to do something</h4>
<form th:action="@{/book/{id}(id=book.getId())" method="get">
    <label for="id">id:</label><br>
    <input type="number" id="id" name="id" placeholder="id" required>
    <input type="submit" value="Submit">
</form>


</body>
</html>

但这不起作用我想提交图书 ID（在输入中），在 return 中我得到了具有正确 ID 的图书。我尝试使用 ModelAndView 而不是 Model 和 return ModelAndView 但它没有用。谁能告诉我我做错了什么。提前致谢

Answer 1

您在 @Controller 中使用的字符串 return 类型（与您之前使用的 @RestController 相对）表示 Thymeleaf 模板的名称。

通常，我会使用 2 个模板：

book-list.html 显示图书列表
book.html显示单本书的详细信息

这些文件需要在 src/main/resources/templates 中。假设你有，你的控制器变成：

    @GetMapping(path = "/books/{id}")
    public String getBookById(@PathVariable("id") Long id, Model model) {
        BookEntity book = bookService.getById(id);
        model.addAttribute("book", book);
        return "book";
    }
    
@GetMapping("/books")
    public String AllBooks(Model model) {
        List<BookEntity> books = bookService.findAll();
        model.addAttribute("books", books);

        return "book-list";
    }

在book-list.html中，你可以这样做：

<tr th:each="book: ${books}">
    <td th:text="${book.id}" />
    <td th:text="${book.name}" />
    <td><a th:href="@{/books/{id}(id=book.id)">View details</a></td>
</tr>

在book.html中可以显示本书的详细信息：

<div>
  <h1 th:text="${book.name}"></h1>
  ...
</div>

现在打开浏览器访问 http://localhost:8080/books 应该会显示带有超链接的图书列表，以导航到图书的详细信息。

Answer 2

首先你得明白不解压books你怎么能得到书的id。您必须提取书籍并将 book_id 放在锚标记 link href 中。如果您单击 link 标签，您会找到特定的图书数据。

下面是代码。

假设Entity是：

@Entity
public class Book {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private Integer page;
    
    // getter setter
}

控制器

@GetMapping(path = "/books/{id}")
public String getBookById(@PathVariable("id") Long id, Model model) {
    BookEntity book = bookService.getById(id);
    model.addAttribute("book", book);
    return "book";
}
    
@GetMapping("/books")
public String AllBooks(Model model) {
   List<BookEntity> books = bookService.findAll();
   model.addAttribute("books", books);
   return "books";
}

下面是两个模板book.html和books.html。这两个文件的路径是 src/main/resources/templates.

books.html

<tr th:each="book: ${books}">
    <td th:text="${book.id}" />
    <td th:text="${book.name}" />
    <td th:text="${book.page}" />
    <td><a th:href="@{/books/{id}(id=book.id)">Go To Book</a></td>
</tr>

book.html

<div>
  Book Name: <label th:text="${book.name}"></label>
  How Many Pages: <label th:text="${book.page}"></label>
</div>

通过 Thymeleaf 显示控制器方法的输出

Show Output of Controller method via Thymeleaf

html

java

thymeleaf

spring-boot