springboot整合thymeleaf

听钱塘信起

5881人浏览 · 2022-10-02 16:18:15

听钱塘信起 · 2022-10-02 16:18:15 发布

一、介绍

二、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>
基于可以根据条件展示不同结果、按钮等等

苏州本地的技术开发者社区，在这里可以交流本地的好吃好玩的，可以交流技术，可以交流招聘等等，没啥限制。

更多推荐

想学大模型智能体开发？这份指南帮你吃透 11 款顶尖 AI Agent 框架！

苏州城市开发者社区

Java驱动家政变革：多商户预约抢单派单与自营商城的完美结合

Java技术正在重构家政服务数字化生态，通过微服务架构支撑高并发多商户协同系统，实现抢单派单与自营商城的深度融合。系统采用SpringBoot+Nacos集群，支持5000+TPS并发处理，集成LBS定位实现15分钟快速响应。创新性地将标准化服务抢单与复杂订单智能派单结合，同时通过自营商城延伸服务价值链，带动GMV增长25%。实践案例显示，该系统使商户入驻增长220%，投诉率下降67%，推动家政服