Thymeleaf的使用
SpringBoot集成Thymeleaf
使用Spring Initializr创建项目时勾选Thymeleaf,如果不使用Spring Initializr,需要手动添加Thymeleaf的依赖:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Thymeleaf以html为原型,文件后缀是.html,使用Thymeleaf时创建html文件即可。
SpringBoot开箱即用,提供了大量的默认配置,一般使用默认配置即可。
SpringBoot的默认配置中,Thymeleaf的默认前缀是classpath:/resources/templates,默认后缀是.html。
开发、调试时关闭Thymeleaf的页面缓存:
#默认为true,使用页面缓存
spring.thymeleaf.cache=false
上线时改为true,或者删掉、注释掉。
Thymeleaf语法
1、th:text 显示普通文本
<!-- 常量 --> <p th:text="hello"></p> <!-- "hello"会覆盖原来的内容"你好" --> <p th:text="hello">你好</p> <!-- 标签体中没有内容时,可以写成单标签 --> <p th:text="hello" /> <!-- 可以进行数学运算 --> <!-- 3 --> <p th:text="1+2"></p> <!-- 1+2=3 --> <p th:text="'1+2=' + (1+2)"></p> <!-- 可以进行三元运算 --> <p th:text="${user.age}>=18 ? 已成年 : 未成年"></p> <!-- OGNL表达式${}可以取出controller传递的数据 --> <!-- 使用点号取属性值时,底层是调用getter方法 --> <p th:text="'用户名:' + ${user.username}"></p> <!-- OGNL表达式${}中可以调用方法 --> <p th:text="'用户名:' + ${user.getUsername()}"></p> <p th:text="'转换为全大写:' + ${user.username.toUpperCase()}"></p> <!-- 用'xxx'+'xxx'这种方式拼接字符串很麻烦,Thymeleaf简化了字符串拼接,字符串放在| |中即可 --> <p th:text="|用户名:${user.username}|"></p>
Thymeleaf所有的指令都以th:开头,th即Thymeleaf的前2个字母。
controller可以使用Model、ModelAndView来传递数据。
2、th:utext 具有th:text的功能,且可以解析标签
//controller传递的数据中带有html标签 model.addAttribute("msg", "<h2>user</h2>");
<!-- th:text会把标签作为普通字符串处理,不解析 --> <p th:text="${msg}"></p> <!-- th:utext会解析里面的标签 --> <p th:utext="${msg}"></p>
注意:是controller向html传递的数据中有html标签,不是直接在utext中写标签,如果是 <p th:utext="<h2>hello</h2>"></p> 这种直接在th:utext中写标签的,肯定会出错。
3、th:object 处理对象
比如说controller传了一个user对象,在html中要多处使用user对象,${user.xxx},每次都要写user,很麻烦,可以这样:
<!-- th:object用${}直接取对象 --> <div th:object="${user}"> <!-- 后续用*{}来操作,把$换成*,省略对象名 --> <p th:text="'用户名:'+*{username}"></p> <p th:text="'年龄:'+*{age}"></p> <p th:text="'手机号:'+*{tel}"></p> <p th:text="'住址:'+*{address}"></p> </div>
4、th:src、th:href、th:action 分别相当于html的src、href、action
<!-- 在SpringBoot中,比如我把图片、js文件、css文件分别放在static下的img、js、css文件夹中,引用时路径要写成img/xxx,js/xxx,css/xxx --> <script src="js/vue.js"></script> <!-- 路径放在@{}中 --> <script th:src="@{js/vue.js}"></script> <img src="img/mac_pro.png" /> <img th:src="@{img/mac_pro.png}" />
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入static/css下的css文件 --> <link href="css/a.css" type="text/css" rel="stylesheet" /> <link th:href="@{css/a.css}" type="text/css" rel="stylesheet" /> </head> <body> <!-- 访问controller --> <a href="/user">访问静态页面</a> <a th:href="@{/user}">访问controller方法</a> </body> </html>
<form action="/login"></form> <form th:action="@{/login}"></form>
都是把路径放在@{ }中。
5、Thymeleaf常用的内置对象
|
HttpServletRequest对象 |
|
HttpServletReponse对象 |
|
HttpSession对象 |
|
HttpServletContext对象 |
示例:
<!-- 内置对象要在${}中使用,访问内置对象的属性、方法时,不能像写一句java代码一样,末尾不能加分号 --> <p th:text="'用户名:' + ${#request.getParameter('username')}"></p>
6、th:if 条件判断
<!-- 条件为true才显示此元素,为false则不显示 --> <p th:if="3>2">3>2</p> <p th:if="3>4">3>4</p> <!-- 可以用英文字母表示 --> <p th:if="3 gt 2">3 gt 2</p> <!-- 与、或只能用and、or,不能用&&、|| --> <p th:if="2>1 and 3>2">2>1 and 3>2</p> <!-- 非可以用!或者not--> <p th:if="! false">! false</p> <p th:if="not false">not false</p>
> gt 即greater than
< lt 即less than
>= ge 即greater equals
<= le 即less equals
== eq 即equals
!= ne 即not equals
7、th:each 迭代Array、List、Map
controller传给html的数据:
//数组 String[] arr = {"苹果", "李子", "梨子"}; model.addAttribute("arr", arr); //List ArrayList<String> list = new ArrayList<>(); list.add("语文"); list.add("数学"); list.add("英语"); model.addAttribute("list", list); //Map HashMap<String,Double> map = new HashMap<>(); map.put("香蕉", 4.0); map.put("菠萝", 5.0); map.put("芒果", 6.0); model.addAttribute("map", map);
html:
<!-- Array,ele是一个临时变量,代表一个元素 --> <table> <tr th:each="ele:${arr}"> <!-- 要用${}取,这是html不是jsp,${}要放在th指令中才行 --> <td th:text="${ele}"></td> </tr> </table> <!-- List --> <table> <tr th:each="ele:${list}"> <td th:text="${ele}"></td> </tr> </table> <!-- Map,entity是一个临时变量,打代表一个键值对 --> <table> <tr th:each="entity:${map}"> <!-- 直接以key=value的形式显示 --> <td th:text="${ele}"></td> </tr> </table> <!-- Map --> <table> <tr th:each="entity:${map}"> <!--key、value是关键字,不能任意取 --> <td th:text="${entity.key}"></td> <td th:text="${entity.value}"></td> </tr> </table> <!-- Array、List、Map都可以再有一个临时变量,第一临时变量表示一个元素,第二个临时变量表示当前迭代元素的信息 --> <table> <tr th:each="entity,status:${map}"> <td th:text="${entity}"></td> <td th:text="${status}"></td> </tr> </table>
第二个临时变量是一个对象,包含以下属性,可用点号访问:
- index 当前元素是迭代的第几个元素,从0开始
- count 当前元素是迭代的第几个元素,从1开始
- size 总的元素个数
- current 当前元素(如果是map,则是entity)
- odd|even 返回是否第奇|偶数个元素,返回boolean值。odd是奇,even是偶,跟字符数一致。
- first|last 是否为第一个|最后一个元素,返回Boolean值
8、th:switch
、th:case 相当于java的switch语句
<!-- 只显示匹配的元素 --> <div th:switch="${role}"> <p th:case="common">普通用户</p> <p th:case="manager">vip</p> <p th:case="svip">svip</p> <!-- *相当于default --> <p th:case="*">其它</p> </div>
9、th:include、th:include、th:replace 页面引入
我们经常需要在一个页面中引入另一个页面,比如引入header.html,引入footer.html。
比如引入templates/footer.html:
<!-- @{}中写路径,/表示模板的根目录templates,绝对路径 --> <div th:include="@{/footer.html}"></div> <div th:insert="@{/footer.html}"></div> <div th:replace="@{/footer.html}"></div> <!-- 也可以使用相对路径--> <div th:include="@{footer.html}"></div> <div th:insert="@{footer.html}"></div> <div th:replace="@{footer.html}"></div> <!-- Thymeleaf的后缀名是.html,可以省略后缀,直接写文件名 --> <div th:include="@{footer}"></div> <div th:insert="@{footer}"></div> <div th:replace="@{footer}"></div>
3个指令的使用方法完全相同,不过th:include是把内容、效果包含进来,th:replace是用包含页面的代码替换当前标签。
Thymelead 3.0以后,官方推荐用 th:insert 代替 th:include 。
只包含页面的一部分
有时候只想包含页面的某一部分,比如只包含header.html的nav,
比如把header.html、footer.html、aside.html等集中放在一个commons.html中:
<!-- 用th:fragment给片段起一个名字 --> <header th:fragment="header"> <div>header</div> </header> <footer th:fragment="footer"> <div>footer</div> </footer> <aside th:fragment="aside"> <div>aside</div> </aside>
引用:
<!-- 不是放在@{}中,没有@{},页面、片段之间冒号隔开 --> <!-- 页面写成/commons.html、commons.html、commons都行 --> <div th:include="commons :: header"></div> <div th:insert="commons :: aside"></div> <div th:replace="commons :: footer"></div>
如果引用的片段就是本页面中的,可以缺省页面,直接写成 ::片段
可以传递参数
<header th:fragment="info(name,age)"> <p th:text="${name}"></p> <p th:text="${age}"></p> </header>
<div th:include="commons :: info('chy',20)"></div> <div th:insert="commons :: info('chy',20)"></div> <div th:replace="commons :: info('chy',20)"></div>
10、th:remove 移除元素
经常需要自动移除元素,比如controller从数据库查询商品,把商品信息传递给html展示出来,
有时候没有满足条件的商品,传递的是null,这时候光秃秃地显示一个<thead>表头是不合适的,数据为空时应该自动移除表格|表头,给出提示。
<!-- 有数据就什么都不移除(显示table),没数据就移除整个table --> <table th:remove="${goods_list}?none:all"> </table>
th:remove的值可以是:
- all 移除整个元素
- none 不移除什么(显示整个元素)
- tag 只移除标签。比如<table th:remove="tag"></table>是移除<table></table>这个东西,里面的<thead>、<tbody>、<tr>、<td>等标签还在
- body 只移除body。<xxx>、</xxx>之间的东西叫做body,移除body后,<xxx>是空壳的
- all-but-first 移除所有子元素,只保留第一个子元素
说明
Thymeleaf是在html的基础上扩展的,原型是html,扩展名也是.html,
所有在html可以写的代码,都可以写在Thymeleaf中,
如果不想用Thymeleaf的语法,可以使用html的语法。