springboot整合thymeleaf

原创已于 2022-10-02 18:13:40 修改 · 5.9k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#java

于 2022-10-02 16:18:15 首次发布

springboot 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Thymeleaf的基本概念及其在Spring Boot项目中的应用。涵盖了安装配置、页面渲染及数据传递等内容。

一、介绍

二、Thymeleaf 的特点

三、语法规则

四、springboot中集成Thymeleaf

一、介绍

Thymeleaf 是新一代 Java 模板引擎，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。

二、Thymeleaf 的特点

动静结合、开箱即用、多方言支持等

三、语法规则

在使用 Thymeleaf 之前，首先要在页面的 html 标签中声明名称空间
xmlns:th="http://www.thymeleaf.org"
Thymeleaf 语法分为以下 2 类：

标准表达式语法

                变量表达式：${...}

                选择变量表达式：*{...}

                链接表达式：@{...}

                国际化表达式：#{...}

                片段引用表达式：~{...}等

th 属性

  th:id 、 th:text、 th:utext、 th:object、 th:each、 th:if 等等、用来替换原有的html属性。

四、springboot中集成Thymeleaf

1、导入依赖

        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>

2、配置

spring:
  thymeleaf:
    mode: HTML
    cache: false

五、使用

1、在resource目录下新建templates、存放页面资源

index.html如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>hello,Thymeleaf</h1>
</body>
</html>

2、在IndexController,新建一个方法，拦截Get请求，拦截路劲为"/index",如下

代码：

@Controller
public class IndexController {

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

}

启动后访问改路径：http://localhost:8889/index

如此、便是测试成功了

六、将数据存入页面并取出

6.1 存入普通数据

6.1.1 存入普通数据 msg

    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("msg","hello ,springboot");
        return "index";
    }

取出msg

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>hello,Thymeleaf</h1>

    <h1 th:text="${msg}"></h1>
    <h1 th:utext="${msg}"></h1>

</body>
</html>

访问页面后的结果

6.1.2 存入对象

 @Controller
public class IndexController {

    @GetMapping("/index")
    public String index(Model model){
        IUser user = new IUser();
        user.setUserName("张三");
        user.setEmail("123456@qq.com");
        user.setPassWord("123");
        model.addAttribute("user",user);
    }

}

取出存入对象

<h1 th:utext="${user}"></h1>

测试

取出存入对象的某个值

<div th:object="${user}">
    <h1 th:text="${user.userName}"></h1>
    <h1 th:text="${user.passWord}"></h1>
</div>

测试

6.1.3 存入List

    @GetMapping("/index")
    public String index(Model model){
//        model.addAttribute("msg","hello ,springboot");

        IUser user1 = new IUser();
        user1.setUserName("张三");
        user1.setEmail("123456@qq.com");
        user1.setPassWord("123");

        IUser user2 = new IUser();
        user2.setUserName("张四");
        user2.setEmail("123456@qq.com");
        user2.setPassWord("1234");

        IUser user3 = new IUser();
        user3.setUserName("张五");
        user3.setEmail("123456@qq.com");
        user3.setPassWord("12345");

      List<IUser> userList = new ArrayList<>();
      userList.add(user1);
      userList.add(user2);
      userList.add(user3);
      model.addAttribute("userList",userList);

        return "index";
    }

遍历List并取出1

<h1 th:each="user :${userList}" th:text="${user}" ></h1>

测试

遍历List并取出2

<div th:each="user :${userList}" >
            <h1 th:text="${user}"></h1>
</div>

测试

遍历List并取出3

<div th:each="user :${userList}" >
           [[${user}]]
</div>

测试：

遍历userList,得到user,取出user的某个属性的值，

直接通过以属性的方式获取即可，例如：

<div th:each="user :${userList}" >
           [[${user.userName}]]
</div>

测试

6.2 跳转另一个页面

准备：

    
    @GetMapping("/getUser")
    @ResponseBody
    private String getUser(){
        return "getUserDate";
    }
模拟下，访问此接口，得到User的所有数据并转为Json格式

跳转链接：
<a th:href="@{/getUser}">Thymeleaf写法：查询用户</a>
<hr>
<a href="/getUser">原生写法：查询用户</a>
两种方法否可以实现跳转：

6.3 判断

  @GetMapping("/index")
    public String index(Model model){
        int a =1;
        model.addAttribute("msg",a);

        return "index";
    }
将int a =1,存入model对象，页面取出后进行判断
<div th:if="${msg<1}">
    <h1>a<1</h1>
</div>

<div th:unless="${msg>2}">
    <h1>a<=2</h1>
</div>
基于可以根据条件展示不同结果、按钮等等