Thymeleaf页面静态化技术

1|0Teymeleaf的使用
1|0案例一：springboot搭建Thymeleaf
 
1、导入依赖
2、新建html页面模板
3、新建前端控制层Controller
4、新建启动类

1、导入依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
 
    <groupId>com.chawaner</groupId>
    <artifactId>springboot-thymeleaf</artifactId>
    <version>1.0-SNAPSHOT</version>
    <description>Thymeleaf案例操作</description>
 
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.4.RELEASE</version>
    </parent>
 
    <dependencies>
        <!--web起步依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--thymeleaf配置-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>
</project>

2、新建模板：demo1.html

<!DOCTYPE html>
<!--引入Thymeleaf标签-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf模板引擎</title>
</head>
<body>
    <!--
        需要在指定的Thymeleaf的标签内，使用Thymeleaf语法
        th:text=""  输出文本内容
    -->
    <div th:text="${message}"></div>
</body>
</html>

3、新建前端控制器：TestController

/**
 * @Author TeaBowl
 * @Date 2020/12/15 17:03
 * @Version 1.0
 * Thymeleaf模板引擎
 */
@Controller
@RequestMapping(value = "/test")
public class TestController {
 
    @GetMapping(value = "/hello")
    public  String  hello(Model model){
        model.addAttribute("message","hello Thymeleaf!");
        return "demo1";
    }
}

4、新建启动类：ThymeleafApplication

/**
 * @Author TeaBowl
 * @Date 2020/12/15 17:22
 * @Version 1.0
 */
@SpringBootApplication
public class ThymeleafApplication {
    
    public static void main(String[] args) {
        SpringApplication.run(ThymeleafApplication.class,args);
    }
    
}

5、测试

a.运行启动类ThymeleafApplication
b.打开浏览器：localhost：8080/test/hello
	浏览器页面显示：hello Thymeleaf!
c.测试运行成功！

6、如何证明模板已经生效？

在浏览器显示页面上右键查看源码，

标签内部显示的是数据，而非模板语法

<!DOCTYPE html>
<!--引入Thymeleaf标签-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf模板引擎</title>
</head>
<body>
    <!--
        需要在指定的Thymeleaf的标签内，使用Thymeleaf语法
        th:text=""  输出文本内容
    -->
    <div>hello Thymeleaf!</div>
</body>
</html>

7、关闭缓存

创建application.yml

spring:
  thymeleaf:
    cache: false  #模板缓存

8、thymeleaf基本语法

  1. 输出文本内容
<div th:text="${message}"></div>
  1. th:action 指定表单提交的路径
<div> 
    <form id="login-form" th:action="@{/test/hello}">
    	<button>提交</button>
    </form>
</div>
  1. th:each循环标签

首先，创建一个User类

/**
 * @Author TeaBowl
 * @Date 2020/12/16 15:55
 * @Version 1.0
 */
@Data	//省略setter&getter
@NoArgsConstructor	//无参构造
@AllArgsConstructor	//全参构造
public class User {
    private Integer id;
    private String name;
    private String address;
}

然后，在前端控制器TestController中创建List集合，添加数据并存入到Model;

/**
 * @Author TeaBowl
 * @Date 2020/12/15 17:03
 * @Version 1.0
 * Thymeleaf模板引擎
 */
@Controller
@RequestMapping(value = "/test")
public class TestController {
 
    @GetMapping(value = "/hello")
    public  String  hello(Model model){
        model.addAttribute("message","hello Thymeleaf!");
 
        //创建一个List<User>，并将List<User>存入到Model中，到页面使用Thymeleaf标签显示
        List<User> users = new ArrayList<>();
        users.add(new User(1,"张三","深圳"));
        users.add(new User(2,"李四","北京"));
        users.add(new User(3,"王五","武汉"));
        model.addAttribute("users",users);
 
        return "demo1";
    }
}

最后，从前端页面取数据

<div>
    th:each循环标签
    <table>
        <tr>
            <td>编号</td>
            <td>ID</td>
            <td>NAME</td>
            <td>ADDRESS</td>
        </tr>
        <!--
            循环
            user,userSta:${users}
                user接收users对象
                userSta当前循环对象的状态
        -->
        <tr th:each="user,userSta:${users}">
            <td th:text="${userSta.count}"></td>
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.address}"></td>
        </tr>
    </table>
</div>

9、Map输出

首先，在TestController中定义一个Map对象

/**
 * @Author TeaBowl
 * @Date 2020/12/15 17:03
 * @Version 1.0
 * Thymeleaf模板引擎
 */
@Controller
@RequestMapping(value = "/test")
public class TestController {
 
    @GetMapping(value = "/hello")
    public  String  hello(Model model){
        model.addAttribute("message","hello Thymeleaf!");
 
        //创建一个List<User>，并将List<User>存入到Model中，到页面使用Thymeleaf标签显示
        List<User> users = new ArrayList<>();
        users.add(new User(1,"张三","深圳"));
        users.add(new User(2,"李四","北京"));
        users.add(new User(3,"王五","武汉"));
        model.addAttribute("users",users);
 
        //Map定义，存入Model
        Map<String,Object> dataMap = new HashMap<String,Object>();
        dataMap.put("No","123");
        dataMap.put("address","深圳");
        model.addAttribute("dataMap",dataMap);
 
        return "demo1";
    }
}

然后，从前端页面取数据

<div>
    读取Map的两种方式<br>
    1、知道Map的Key,直接根据Key获取数据<br>
    3、不知道Map的Key,使用循环的方式获取Key,然后获取数<br>
    <h3>方式一</h3>
        <div>
            获取Key=No的值:<span th:text="${dataMap.No}"></span><br>
            获取Key=Address的值:<span th:text="${dataMap.Address}"></span>
        </div>
    <h3>方式二</h3>
        <div th:each="m:${dataMap}">
            <span th:text="${m.key}"></span>:<span th:text="${m.value}"></span>
        </div>
</div>

10、Data日期输出

首先，在后台创建日期

/**
 * @Author TeaBowl
 * @Date 2020/12/15 17:03
 * @Version 1.0
 * Thymeleaf模板引擎
 */
@Controller
@RequestMapping(value = "/test")
public class TestController {
 
    @GetMapping(value = "/hello")
    public  String  hello(Model model){
        model.addAttribute("message","hello Thymeleaf!");
 
        //创建一个List<User>，并将List<User>存入到Model中，到页面使用Thymeleaf标签显示
        List<User> users = new ArrayList<>();
        users.add(new User(1,"张三","深圳"));
        users.add(new User(2,"李四","北京"));
        users.add(new User(3,"王五","武汉"));
        model.addAttribute("users",users);
 
        //Map定义，存入Model
        Map<String,Object> dataMap = new HashMap<String,Object>();
        dataMap.put("No","123");
        dataMap.put("Address","深圳");
        model.addAttribute("dataMap",dataMap);
 
        //创建日期，存入Model
        model.addAttribute("Now",new Date());
 
        return "demo1";
    }
}

然后，从前端页面取数据

<div>
    Data数据获取
    	format参数：对象，输出格式
    <div>
        <span th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></span>
    </div>
</div>

11、if条件

首先，在后台写数据，存入Model

//if条件，存入Model
model.addAttribute("age",22);

然后，在前端页面写条件判断

<div>
    if条件判断,unless表示条件不成立时
    <div>
        <span th:if="${age>=18}">成年人</span>
        <span th:unless="${age<18}">成年人</span>
    </div>
</div>

12、th:fragment 定义一个模块

新建一个模块：footer.html

<!DOCTYPE html>
<html lang="en">
<!--引入Thymeleaf标签-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>当作一个模块</title>
</head>
<body>
    <!--定义一个模块,命名为copy-->
    <div id="C" th:fragment="copy">
        关于我们<br>
    </div>
</body>
</html>

然后，把定义好的模块引入到前端页面

<div>
    引入模块footer<br>
    th:include="footer::copy"引入footer页面里的copy
    <div>
        <div id="A" th:include="footer::copy"></div>
    </div>
</div>

__EOF__

本文作者：茶碗儿
本文链接：https://www.cnblogs.com/chawaner/p/14145073.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   茶碗儿  阅读(349)  评论(1)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击这里跳转到-->【茶碗儿CSDN】
点击右上角即可分享
微信分享提示