Spring Boot 集成 Thymeleaf 入门及实例

seven_ • 2023年2月28日下午12:15 • 后端漫谈 • 阅读 184

Spring Boot 集成 Thymeleaf 入门及实例

1.Thymeleaf 介绍

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

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

2.项目文件目录

3.引入依赖

在pom.xml中引入thymeleaf异类
代码如下（示例）：

<!-- 引入thymeleaf模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

3.相关配置：

在application.properties中进行相关配置
代码如下（示例）：

# thymeleaf
spring.thymeleaf.prefix=classpath:/templates/    # 默认路径
spring.thymeleaf.suffix=.html   # 默认后缀
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.check-template=true
spring.thymeleaf.check-template-location=true

4.新建文件（.html,.java)：

1.新建model-htm.html,model-in.html并引入thymeleaf

model-htm.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<form action="connect" method="post">
    用户: <input type="text" name="username" id="username"> <br>
    <input type="submit" value="提交">
</form>
</body>
</html>

model-in.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">>
<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>进入成功</title>
</head>
<body>
欢迎！！！！
</body>
<script type="text/javascript" th:inline="javascript">
        $(document).ready(function(){
        var rs =[[${rs}]];
        alert(rs);
    })
</script>
</html>

2.Controller类

@Controller
public class ModelControlller {

    @GetMapping("/")
    public String index() {
        return "model-htm";
    }

    @PostMapping("/connect")
    public String connect(String username,Model model){
        String rs="提交失败，用户名不能为空";
        if (StringUtils.isNotBlank(username)){
            rs="提交成功！";
            model.addAttribute("rs",rs);
            return "model-in";
        }
        model.addAttribute("rs",rs);
        return "model-in";
    }
}