手摸手，一起重温SpringBoot 2知识点（四）整合视图层技术之Thymeleaf

最新推荐文章于 2024-09-10 10:21:38 发布

码上艺术家

最新推荐文章于 2024-09-10 10:21:38 发布

阅读量238

点赞数

文章标签： java html web

本文链接：https://blog.csdn.net/qq_26030541/article/details/106134330

版权

参考： Thymeleaf入门到吃灰

简介

Thymeleaf 是新一代 Java 模板引擎，它类似于 Velocity、FreeMarker 等传统 Java 模板引擎，但是与传统 Java 模板引擎不同的是，Thymeleaf 支持 HTML 原型。

它既可以让前端工程师在浏览器中直接打开查看样式，也可以让后端工程师结合真实数据查看显示效果，同时，SpringBoot 提供了 Thymeleaf 自动化配置解决方案，因此在 SpringBoot 中使用 Thymeleaf 非常方便。

事实上， Thymeleaf 除了展示基本的 HTML ，进行页面渲染之外，也可以作为一个 HTML 片段进行渲染，例如我们在做邮件发送时，可以使用 Thymeleaf 作为邮件发送模板。

另外，由于 Thymeleaf 模板后缀为 .html，可以直接被浏览器打开，因此，预览时非常方便。

特点

动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

一、项目搭建

新建SpringBoot项目，引入Thymeleaf依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

新建Book实体类

package com.junya.thymeleaf.entity;

import lombok.Data;

/**
 * @author ZHANGCHAO
 * @date 2020/5/15 8:43
 * @since 1.0.0
 */
@Data
public class Book {

  private Integer id;
  private String name;
  private String author;
  private Double price;
}

新建BookController类

package com.junya.thymeleaf.controller;

import com.junya.thymeleaf.entity.Book;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

/**
 * @author ZHANGCHAO
 * @date 2020/5/15 8:45
 * @since 1.0.0
 */
@Controller
public class BookController {

    @GetMapping("/book")
    public String book(Model model) {
        List<Book> books = new ArrayList<>();
        for (int i =0 ;i<10;i++) {
            Book book = new Book();
            book.setId(i);
            book.setName("金瓶梅 - "+i);
            book.setAuthor("liyiyuan - "+i);
            book.setPrice(30.0);
            books.add(book);
        }
        model.addAttribute("books",books);
        return "book";
    }
}

新建book.html页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Books</title>
</head>
<body>
<table border="1">
    <tr>
        <td>图书编号</td>
        <td>图书名称</td>
        <td>图书作者</td>
        <td>图书价格</td>
    </tr>
    <tr th:each="book :${books}">
        <td th:text="${book.id}"></td>
        <td th:text="${book.name}"></td>
        <td th:text="${book.author}"></td>
        <td th:text="${book.price}"></td>
    </tr>
</table>
</body>
</html>