前端模板引擎Thymeleay基础简录

    技术2025-12-17  11

    一、基础理论

    1、概念 SpringBoot推荐使用Thymeleay来代替jsp进行动态页面展示,和jsp不同,它不需要编译就能运行,所以效率更高。 Thymeleay是基于html的,只要会html,thymeleaf很简单。 2、springboot集成thymeleaf A.在新建springboot项目时,需要在templates engines中勾选thymeleaf。 这样的话pom文件中就有thymeleaf的起步依赖了。 你也可以不勾选,直接在pom文件中添加thymeleaf的起步依赖。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> B、在resources的templates目录下新建thymeleaf文件,以.html结尾。 在<html>的头标签中添加: <html lang="en" xmlns:th="http://www.thymeleaf.org"> 这样就可以在html文件在使用thymeleaf的标签了。 C、缓存 thymeleaf是有缓存的,thymeleaf文件修改后,浏览器再次访问,还是原有的未修改的内容。 解决: 在properties文件中: spring.thymeleaf.cache=false idea设置: edit configurations --> 选中项目 -->将“on update action”和“on frame deactivation”的属性值设置为“update resources”。 如图A。 D、thymeleay的视图解析器(默认即是如此,可不配) #thymeleaf的师徒解析器 spring.thymeleaf.prefix=classpath:/templates spring.thymeleay.suffix=.html

    二、Thymeleay语法

    1、变量表达式 <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 变量表达式:标准变量表达式 和EL表达式一样,需要使用model.addAttribute将键值对设置进去,这儿就可以取出来 --> <h1 th:text="${student}"></h1><br /> <h2 th:text="${student.sid}">编号</h2><br /> <h2 th:text="${student.sname}">姓名</h2><br /> <!-- 变量表达式:选择变量表达式 * 用来代替父标签中的${student} --> <div th:object="${student}"> <h2 th:text="*{sid}">编号</h2><br /> <h2 th:text="*{sname}">年龄</h2> </div> <!-- 变量表达式:路径变量表达式 带参数跳转相对路径, 传统风格和RESTful风格 在form表单中也可以使用 --> <a th:href="@{back1(sid=${student.sid},sname=${student.sname})}">传统风格</a><br /> <a th:href="@{'back2/'+${student.sid}+'/'+${student.sname}}">RESTful风格</a> </body> </html> 2、常见属性 和html标签的属性没任何区别,只不过要加一个“th”前缀而已,但是一般只有从后台取值的时候,需要加上th,否则无法解析。 当然,在<script>中通过src引入js文件是无法引入的,需要通过th:src来引入。 一些比较重要的属性: A、循环遍历 th:each <!-- 循环遍历:th:each 遍历list、map、数组 --> <div th:each="student:${list}"> <span th:text="${studentStat.index}"></span> <span th:text="${student.sid}"></span> <span th:text="${student.sname}"></span> </div> <div th:each="student:${map}"> <span th:text="${studentStat.index}"></span> <span th:text="${student.key}"></span> <span th:text="${student.value}"></span> <span th:text="${student.value.sname}"></span> </div> <div th:each="student:${stus}"> <span th:text="${studentStat.index}"></span> <span th:text="${student.sid}"></span> <span th:text="${student.sname}"></span> </div> B、条件判断 th:if th:switch <!-- 条件判断 th:if th:switch --> <div th:if="${flag == true}">条件为真则显示这句话</div> <div th:switch="${flag}"> <span th:case="true">是true哦</span> <span th:case="false">是false哦</span> <span th:case="*">上述情况都不满足的时候生效</span> </div> C、内敛表达式 th:inline <!-- 内敛表达式 th:inline 有三个取值: text: 内敛文本 取值不用依托于标签 th:inline="text" 一般放在<body>标签上 javascript: 内敛脚本 写js的时候<script>标签一般都要加 这样的话在js代码中也可以[[${student}]]取值 none 没啥用 --> <div th:inline="text"> [[${student}]]内敛文本 </div> <script type="text/javascript" th:inline="javascript"> function showData(){ alert([[${student.sid}]]); } </script> <button onclick="showData()">展示数据</button> D、字符串拼接 <!--字符串拼接--> <span th:text="|sid是${student.sid},sname是${student.sname}|"></span> E、运算符 算术运算符:+ - * \ % 逻辑运算符:< > <= >= == != 三目运算符: 表达式?正确结果:错误结果 F、基本对象/功能对象 基本对象: 以#开头:#session #request <!-- 基本对象:#session #rerquest 当然咯,你代码肯定要在session和request中把数据放进去 --> <span th:text="${#session.getAttribute('session')}"></span> <span th:text="${#request.getAttribute('request')}"></span> 功能对象: 见图B。

    Processed: 0.015, SQL: 9