SpringBoot-使用-Thymeleaf

发表于 | 分类于 | 阅读次数 |
字数统计 3721
Thymeleaf是一种新的模板引擎，完全可以代替传统的JSP，一个html页面效果做好后，只需在其需要后端控制变化的标签里添加属性，让html从静态页面变成动态页面，学习thymeleaf，只需要学习他的一些标签的用法和它内嵌的一些变量即可。顺带一说，学习过vue在html上的那些标签[v-if、v-for...]的，相对于会上手的快一些

介绍

Thymeleaf是一种新的模板引擎，完全可以代替传统的JSP，一个html页面效果做好后，只需在其需要后端控制变化的标签里添加属性，让html从静态页面变成动态页面，学习thymeleaf，只需要学习他的一些标签的用法和它内嵌的一些变量即可。顺带一说，学习过vue在html上的那些标签[v-if、v-for…]的，相对于会上手的快一些

使用

添加pom

想要在springboot上使用thymeleaf，需要添加spring-boot-starter-thymeleaf

1
2
3
4
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

如何使用

  1. 配置静态资源配置webConfig.java

    1
    2
    3
    4
    5
    6
    7
    8
    //webConfig.java
@Configuration
public class webConfig implements WebMvcConfigurer {
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/templates/", "classpath:/templates/");
    }
}

  2. 当然这些在html上还不能用，还需要在html标签上添加xmlns:th属性，值为http://www.thymeleaf.org

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    </body>
</html>

  3. 到这里，你就可以愉快的使用thymeleaf

常用的themeleaf标签

标签 用途 例子
th:id 替换当前标签的id属性 <div th:id="'divId' + ${id}"></div>
th:if 判断事件 <div th:if="${value == 'right'}">show</div>
th:unless 判断事件[相当于else] <div th:unless="${value == 'error'}">show</div>
th:each 循环事件 <tr th:each="value : ${list}"><td>value</td></tr>
th:text 替换标签内容 <div th:text="${text}">none</div>
th:utext 替换标签内容，支持html的文本 <div th:utext="${text}">none</div>
th:value 替换标签value属性 <input th:value="${value}"/>
th:style 设置标签样式 <div th:style="'color:'+${value}">none</div>
th:onclick 设置标签点击事件 <div th:onclick="'func('+${value}+')'">none</div>
th:href 设置标签链接 <a th:href="'www.'+${value}"+'.com'>none</a>
th:switch 分支判断，需要与th:case配合使用 <div th:switch="${value}"></div>
th:case th:switch的分支 <span th:case="'right'">none</span>
th:src 设置img标签的图片路径 <img th:src="'./fold/'+${value}"/>
th:action 替换表单的action属性 <form th:action="@{/login}">
th:with 可变量进行赋值运算 <div th:with="value = 1 + 2"></div>

## 常用标签的用法

在Springboot中，如果要将数据传输到html页面上有两种方法，一种是通过前端ajax发请求后，后端返回数据；一种是通过将数据存入session，再通过thymeleaf访问session存入的数据，处理并显示出来，这里就是通过第二种

推荐搭配demo使用。代码里的class标签都不需要理，样式而已，下面的代码一般第一个div用来显示，第二个div用来操作

image-20240207031937219

th:id

th:id属性的作用：替换当前标签的id属性值

  1. 这里通过id来设置样式，id为colorRed文字为红色，id为colorBlue文字为蓝色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div>
    <h1>th:id</h1>
    <div class="testText" id="colorRed" th:id="'color'+${session.color}">测试文字Test_Text</div>
    <h4>tips：id为colorRed文字为红色，id为colorBlue文字为蓝色</h4>
</div>
<br/>
<div>
    <a class="btn p10-20 red" href="/changeIdRed">变红</a>
    <a class="btn p10-20 blue" href="/changeIdBlue">变蓝</a>
    <a class="btn p10-20" href="/test">返回</a>
</div>

  2. 在testController.java来设置session.color的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @RequestMapping("/changeIdRed")
public String changeIdRed(HttpSession session){
    session.setAttribute("color","Red");
    return "redirect:/test1";
}
@RequestMapping("/changeIdBlue")
public String changeIdBlue(HttpSession session){
    session.setAttribute("color","Blue");
    return "redirect:/test1";
}

  3. 通过启动demo的springboot启动类启动查看效果

    image-20240207031959922

th:if | th:unless

th:if属性的作用：判断属性值True或False，True为显示，False为隐藏[不能被审查元素找到]

th:unless属性的作用：判断属性值True或False，与th:if反过来

  1. 在第一个大div里的两个div标签里分别设置th:if和th:unless属性，第二个大div里a标签的href设置每个控制类相应的url

    第二个大div里前两个a标签的th:if和th:unless与第一个大div里div相反

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div>
    <h1>th:id|th:unless</h1>
    <div class="testText" th:if="${session.test2Value}">test2Value=True</div>
    <div class="testText" th:unless="${session.test2Value}">test2Value=False</div>
    <h4>tips：点击下面切换test2Value的值</h4>
</div>
<br/>
<div>
    <a class="btn p10-20 blue" th:if="${!session.test2Value}" href="/changeTest2True">True</a>
    <a class="btn p10-20 red" th:unless="${!session.test2Value}" href="/changeTest2False">False</a>
    <a class="btn p10-20" href="/test">返回</a>
</div>

  2. 在testController.java来设置session.test2Value的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @RequestMapping("/changeTest2True")
public String changeTest2True(HttpSession session){
    session.setAttribute("test2Value",true);
    return "redirect:/test2";
}
@RequestMapping("/changeTest2False")
public String changeTest2False(HttpSession session){
    session.setAttribute("test2Value",false);
    return "redirect:/test2";
}

  3. 通过启动demo的springboot启动类启动查看效果

    image-20240207032023404

th:text | th:utext

th:text属性的作用：将标签里的文字替换，不会识别属性值里html的标签

th:utext属性的作用：与上面作用相同，但是会识别属性值里html的标签

  1. 在第一个大div里将th:text和th:utext分别设置在两个div里

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div>
    <h1>th:text|th:utext</h1>
    <div th:text="${session.test3text}"></div>
    <br>
    <h4>你会发现上面与下面的文字很不同，但是是同一个字符串</h4>
    <br>
    <div th:utext="${session.test3text}"></div>
</div>
<br/>
<div>
    <a class="btn p10-20" href="/test">返回</a>
</div>

  2. 在testController.java设置session.test3text的值

    1
    2
    3
    4
    5
    6
    7
    @RequestMapping("/test3")
public String test3(HttpSession session){
    session.setAttribute("page",3);
    String text = "<span color=‘red’>This is a test</span><br/><span color=‘blue’>测试文字</span><br/><span color=‘green’>テストテキスト</span><br/><span color=‘yellow’>Тестовый текст</span>";
    session.setAttribute("test3text",text);
    return "test";
}

  3. 通过启动demo的springboot启动类启动查看效果

    image-20240207032050544

th:each

th:each属性的作用：通过session传过来的数组，并将数据存到” : “前面的变量，th:each所在的标签及标签里的内容会根据数组的数量复制出来，复制出来的标签里，可以使用变量将数组的单个数据输出

  1. 在tr标签里使用th:each

    • 第一个参数value及是对应数据的变量名，tr标签里td的th:text将数据显示出来
    • 第二个参数status以下属性：
      • index：数组下标
      • count：位于数组第几个[从1开始计算]
      • size：数组长度
      • current：当前的值，与第一个参数value相同
      • odd / even：是否为奇偶数
      • first / last：是否为第一个/最后一个
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <div>
                <h1>th:id|th:unless</h1>
                <div style="position:relative;display: flex;justify-self: center;width: 500px;left: calc(50% - 250px)">
                    <table>
                        <tr>
                            <th>标题</th>
                            <th>数据</th>
                            <th>index</th>
                            <th>count</th>
                            <th>size</th>
                            <th>current</th>
                            <th>even偶</th>
                            <th>odd奇</th>
                            <th>first</th>
                            <th>last</th>
                        </tr>
                        <tr th:if="${session.test4Value.isEmpty()}">
                            <td colspan="10">无数据</td>
                        </tr>
                        <tr th:each="value,status:${session.test4Value}">
                            <td th:text="'测试数据'+${value}">测试数据</td>
                            <td th:text="${value}">0</td>
                            <td th:text="${status.index}"></td>
                            <td th:text="${status.count}"></td>
                            <td th:text="${status.size}"></td>
                            <td th:text="${status.current}"></td>
                            <td th:text="${status.even}"></td>
                            <td th:text="${status.odd}"></td>
                            <td th:text="${status.first}"></td>
                            <td th:text="${status.last}"></td>
                        </tr>
                    </table>
                </div>
                <h4>tips：点击下面增加和减少数据</h4>
            </div>
            <br/>
            <div>
                <a class="btn p10-20 blue" href="/addTest4">增加一行数据</a>
                <a class="btn p10-20 red" href="/delTest4">减少一行数据</a>
                <a class="btn p10-20" href="/test">返回</a>
            </div>

  2. 在testController.java添加对应方法，更新数组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    @RequestMapping("/addTest4")
public String changeTest3Add(HttpSession session){
    ArrayList<Integer> value = (ArrayList<Integer>)session.getAttribute("test4Value");
    value.add(value.size()+1);
    session.setAttribute("test4Value",value);
    return "redirect:/test4";
}
@RequestMapping("/delTest4")
public String changeTest3Sub(HttpSession session){
    ArrayList<Integer> value = (ArrayList<Integer>)session.getAttribute("test4Value");
    if(!value.isEmpty()){
        value.remove(value.size()-1);
    }
    session.setAttribute("test4Value",value);
    return "redirect:/test4";
}

  3. 通过启动demo的springboot启动类启动查看效果

    image-20240207032110649

th:value

th:value属性的作用：替换标签原有的value属性值

  1. 写个表单，用来传输数据到后端，这里的th:value和th:text的属性值用了个三元表达式。button的默认在表单里就是提交

    (session.test5Value == null) ? '' : session.test5Value意思为session.test5Value为空时，这整个的值就是空的，什么都没有，如果不为空，就为session.test5Value，这种方法可以有效的防止session的值为空指针导致后端报错

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div>
    <h1>th:value</h1>
    <form method="post" action="/submitTest5">
        <input name="value" type="text" th:value="${(session.test5Value == null) ? '' : session.test5Value}"/>
        <button class="btn p8-10">保存</button>
        <div th:text="'你保存的文字：'+${(session.test5Value == null) ? '' : session.test5Value}"></div>
    </form>
    <h4>tips：通过表单发送数据给后端，后端在通过session传输到thymeleaf上处理，最后显示到前端</h4>
</div>
<br/>
<div>
    <a class="btn p10-20" href="/test">返回</a>
</div>

  2. 如何将前端的值能够给后端接收呢？

    其实在方法写个形参[一般为String类型]，然后再类型前面加个注释@RequestParam，这个就是后端接收前端里name属性值为value[属性值]的标签里value[属性名]的值

    如果不想以变量名作为前端的name的属性值，可以使用@RequestParam(value=”name属性值”)

    1
    2
    3
    4
    5
    @RequestMapping("/submitTest5")
public String changeTest5(HttpSession session, @RequestParam String value){
    session.setAttribute("test5Value",value);
    return "redirect:/test5";
}

  3. 通过启动demo的springboot启动类启动查看效果

    image-20240207032133650

th:style

th:style属性的作用：替换标签原有的style属性值

  1. class为testText的div就是用来看效果的，有点长，而且也用了三目表达式，可以回想一下这些三目表达式有何作用

    一段一段看，这里使用的都是字符串拼接

    • 'color:'+${(session.test6Color == null) ? 'black' : session.test6Color}：这个其实给标签添加color样式，通过后端设置session.test6Color的值，最后重新渲染页面又返回到前端，例如session.test6Color的值=red，那这个最后显示在div标签上就是style="color:red"
    • ';background-color:'+${(session.test6BgColor == null) ? 'transparent' : session.test6BgColor}：开头的分号[ ; ]用于分开样式，学过css都知道的啦！与上一个同理，就是session的键不一样，例如session.test6BgColor的值=blue，最后显示在div标签上就是style="background-color:blue"
    • table部分就不怎么需要管了，就是传输数据让你更直观的看到效果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div>
    <h1>th:style</h1>
    <form method="post" action="/submitTest6">
        <div class="testText" th:style="'color:'+${(session.test6Color == null) ? 'black' : session.test6Color}+';background-color:'+${(session.test6BgColor == null) ? 'transparent' : session.test6BgColor}">测试文字TestText</div>
        <table class="doubleTdLR">
            <tr>
                <td>color</td>
                <td>：<input name="color" type="text" th:value="${(session.test6Color == null) ? 'black' : session.test6Color}"/></td>
            </tr>
            <tr>
                <td>background-color</td>
                <td>：<input name="background_color" type="text" th:value="${(session.test6BgColor == null) ? 'transparent' : session.test6BgColor}"/></td>
            </tr>
        </table>
        <button class="btn p8-10">保存</button>
    </form>
    <h4>tips：无论怎么刷新，它的样式都还会在</h4>
</div>
<br/>
<div>
    <a class="btn p10-20" href="/test">返回</a>
</div>

  2. 在testController.java设置session的值

    1
    2
    3
    4
    5
    6
    @RequestMapping("/submitTest6")
public String changeTest6(HttpSession session, @RequestParam String color, @RequestParam String background_color){
    session.setAttribute("test6Color",color);
    session.setAttribute("test6BgColor",background_color);
    return "redirect:/test6";
}

  3. 通过启动demo的springboot启动类启动查看效果

    image-20240207032213570

th:onclick | th:href

th:onclick属性的作用：替换标签原有的**onclick **属性值，但是不支持session为字符串传到这个属性值里，会报错

th:href属性的作用：替换标签原有的href属性值，不会有**th:onclick **的情况

  1. 表单只是用来传数据看效果的，具体看第二个大div

    这里来说说thymeleaf里 支持两种写法

    • 字符串拼接：这是最普通的写法
    • 双竖线包裹：使用双竖线包裹可以让代码看起来更直观
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div>
    <h1>th:onclick | th:href</h1>
    <form method="post" action="/submitTest7">
        <input name="value" type="number" th:value="${(session.test7Value == null) ? '' : session.test7Value}"/>
        <button class="btn p8-10">保存</button>
    </form>
    <h4>tips：th:onclick不支持字符串，所以这里只演示了数字</h4>
</div>
<br/>
<div>
    <button class="btn p10-20" th:onclick="'show('+${session.test7Value}+')'">button标签[字符串拼接]</button>
    <button class="btn p10-20" th:onclick="|show(${session.test7Value})|">button标签[||方式]</button>
    <a class="btn p10-20" th:href="'javascript:show('+${session.test7Value}+')'">a标签</a>
    <a class="btn p10-20" href="/test">返回</a>
</div>
<script>
    function show(value) {
        alert(value);
    }
</script>

  2. 在testController.java设置session的值，这里是数字所以要做一下处理，需判断是否为空，在将字符串转化成数字

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @RequestMapping("/submitTest7")
public String changeTest7(HttpSession session, @RequestParam String value){
    int val = 0;
    if(value!=null && !value.isEmpty()){
        val = Integer.parseInt(value);
    }
    session.setAttribute("test7Value",val);
    return "redirect:/test7";
}

  3. 通过启动demo的springboot启动类启动查看效果

    image-20240207032243151

th:switch | th:case

th:switch 和 th:case：前者的值就是通过session作为变量，后者的值就是判断前者的值是否等于后者的值，若是则显示，反之，若子标签的属性th:case=”*“，就是变量的值不等于其他子标签的值，就会显示属性th:case=”*“的子标签

  1. 使用th:switch 和 th:case需要有一个div或者其他的作为载体，并增加th:switch属性，里面的标签用th:case来判断

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div>
    <h1>th:switch | th:case</h1>
    <div th:switch="${session.test8Value}">
        <p th:case="1">你输入了1</p>
        <p th:case="2">你输入了2</p>
        <p th:case="3">你输入了3</p>
        <p th:case="4">你输入了4</p>
        <p th:case="5">你输入了5</p>
        <p th:case="*">你输入了其他乱七八糟的数字</p>
    </div>
    <form method="post" action="/submitTest8">
        <input name="value" type="number" th:value="${(session.test8Value == null) ? 0 : session.test8Value}"/>
        <button class="btn p8-10">保存</button>
    </form>
    <h4>tips：thymeleaf里的switch没有default，只有th:case="*"</h4>
</div>
<br/>
<div>
    <a class="btn p10-20" href="/test">返回</a>
</div>

  2. 在testController.java设置session的值

    1
    2
    3
    4
    5
    @RequestMapping("/submitTest8")
public String changeTest8(HttpSession session, @RequestParam String value){
    session.setAttribute("test8Value",value);
    return "redirect:/test8";
}

  3. 通过启动demo的springboot启动类启动查看效果

    image-20240207032306079

Thyemeleaf的全局对象

全局对象 作用
#arrays 处理数组的方法
#bools 处理布尔值的方法
#calendars 处理java.util.calender的工具对象
#dates 处理java.util.date的工具对象
#lists 处理List集合的方法
#maps 处理map集合的方法
#numbers 处理数字格式化的方法
#sets 处理set集合的方法
#strings 处理字符串的方法

每个变量的方法都特别多，不方便做教程，但是根据方法的名字还是能知道它有什么用

demo

github

gitee