Thymeleaf模板引擎的使用

Thymeleaf 模板引擎功能强大,使用简单,Spring Boot推荐使用。

1、配置Thymeleaf

步骤一:导入thymeleaf依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

步骤二:在yml中配置thymeleaf

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    encoding: UTF-8
    cache: false

步骤三:处理静态资源

html静态页面放在路径classpath:/templates下,在静态页面中导入thymeleaf的名称空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">

步骤四:使用thymeleaf语法渲染数据即可

<!DOCTYPE html>
<!--名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Thymeleaf 语法</title>
    </head>
    <body>
        <h2>hymeleaf 语法</h2>
        <!--th:text 设置当前元素的文本内容,常用,优先级不高-->
        <p th:text="${thText}" />
        <p th:utext="${thUText}"/>

        <!--th:value 设置当前元素的value值,常用,优先级仅比th:text高-->
        <input type="text" th:value="${thValue}" />

        <!--th:object 声明变量,和*{} 一起使用-->
        <div th:object="${thObject}">
            <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
            <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
            <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
        </div>

        <!--th:each 遍历列表,常用,优先级很高,仅此于代码块的插入-->
        <!--th:each 修饰在div上,则div层重复出现,若只想p标签遍历,则修饰在p标签上-->
        <div th:each="message : ${thEach}"> <!-- 遍历整个div-p,不推荐-->
            <p th:text="${message}" />
        </div>
        <!--只遍历p,推荐使用-->
        <div>
            <p th:each="user : ${ulist}" th:object="${user}">
                <span th:text="*{id}"></span>
                <span th:text="*{name}"></span>
                <span th:text="*{phone}"></span>
            </p>
        </div>

        <!--th:if 条件判断,类似的有th:switch,th:case,优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
        <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>

        <!--th:insert 把代码块插入当前div中,优先级最高,类似的有th:replace,th:include,~{} :代码块表达式 -->
        <div th:insert="~{template/footer :: copy}"></div>
        <div th:replace="~{template/footer :: copy}"></div>
        <div th:include="~{template/footer :: copy}"></div>


    </body>
</html>

后台给负责给变量赋值,和跳转页面。

@RequestMapping("/admin")
public String toAdmin(Model model){
    PageHelper.startPage(1,10);
    PageHelper.orderBy("id desc");
    List<InterUser> ulist = interUserService.selectInterUserList();
    model.addAttribute("ulist",ulist);
    model.addAttribute("thText","thText1");
    model.addAttribute("thUText","thUText1");
    model.addAttribute("thValue","thValue1");
    model.addAttribute("thEach", Arrays.asList("th:each", "遍历列表"));
    model.addAttribute("thIf", "msg is not null");
    model.addAttribute("thObject", new ThObject(1L, "th:object", "用来偷懒的th属性"));
    return "/admin/admin";
}

官方文档:https://www.thymeleaf.org/documentation.html

2、常用th属性解读

html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。

  1. th:text : 设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。
  2. th:value : 设置当前元素的value值,类似修改指定html标签属性的还有th:src,th:href。
  3. th:each : 遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细看后文。
  4. th:if : 条件判断,类似的还有th:unless,th:switch,th:case。
  5. th:insert : 代码块引入,类似的还有th:replace,th:include,三者区别很大,若使用不恰当会破坏html结构,常用于公共代码块的提取复用。
  6. th:fragment : 定义代码块,方便被th:insert引用。
  7. th:object : 声明变量,一般和*{}一起配合使用,达到偷懒的效果。
  8. th:attr : 修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙。

作者:荆辰曦
链接:https://www.jianshu.com/p/5bbac20348ec
来源:简书

3、标准表达式语法

变量表达式:

${...}

链接表达式:

@{...}

消息表达式:

#{...}

代码块表达式:

~{...}

选择变量表达式

*{...}

作者:荆辰曦
链接:https://www.jianshu.com/p/5bbac20348ec
来源:简书

最后修改:2021 年 10 月 05 日 02 : 45 AM
如果觉得我的文章对你有用,请随意赞赏