Spring Boot学习笔记四:使用Thymeleaf

2020-03-14  本文已影响0人  神小六

在开发中我们可能会遇到前后端不分离的情况,这样我们就会需要页面模板。这样我们可能就会用到Thymeleaf。今天就学习一下Thymeleaf 在 Spring Boot 中的整合。

Thymeleaf 简介

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

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

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

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

整合Thymeleaf

首先在springboot里添加依赖

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

接着在配置文件中设置thymeleaf属性

#thymelea模板配置
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8

创建一个Controller

@Controller
public class UserController {
    @Autowired
    UserRepository userRepository;

    @RequestMapping(value = "/list",method = RequestMethod.GET)
    public String list(Model model){
        List<User>list = userRepository.findAll();
        model.addAttribute("list", list);
        return "list";
    }
}

接着我们去resources/templates目录下创建一个list.html文件,创建出来的html文件中我们还要加一段代码

<html lang="en" xmlns:th="http://www.thymeleaf.org">

这样我们才能在代码中使用th:*形式的标签。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr th:each="user : ${list}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
        </tr>
    </table>
</body>
</html>

一个简单的Thymeleaf模版就创建好了,接下来就可以启动项目了,访问/list接口


image.png

成功!

上一篇 下一篇

猜你喜欢

热点阅读