thymeleaf模板引擎常用语句

最新推荐文章于 2024-07-27 13:31:57 发布

爱无盐

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量138

点赞数 1

文章标签： java 开发语言

本文链接：https://blog.csdn.net/wnxiaobear/article/details/125024079

版权

模板引擎：诞生是为了将显示和数据分离

JSP的局限性：

springboot内嵌容器时（打jar包时），不支持jsp
undertow不支持jsp
对于一些默认的处理，很难自定义
在容器化技术，如：docker，对jsp的使用很繁杂

早期的模板引擎：velocity、freemarker、thymeleaf、bettl

一：thymeleaf

自然的模板：动静分离的设计思想，是一个处理纯文本的模板引擎

变量表达式：	${…}
选择变量表达式	*{}
消息表达式	#{}
链接表达式	@{}
片段表达式	~{}

加入thymeleaf引用

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

变量表达式

实现：数据的拼接

方式一：
<p th:text="${person.name} + 'is' + ${person.age}"></p>
方式二：
<p th:text="|${person.name}  is  ${person.age}|"></p>

判断语句的使用

  1.如果传递过来的msg的值是也yes，那么就显示
<p th:text = "${msg}" th:if="${msg == 'yes'}"></p>  
  2.如果传递过来的额msg的值不是yes，那么就展示
<p th:text = "${msg}" th:unless="${msg == 'yes'}"></p>
  3.使用switch的方式进行条件判断
<div th:switch="${msg}">
  <p th:case="1"></p>
  <p th:case="1"></p>
  <p th:case="1"></p>
  <p th:case="1"></p>
</div>

循环语句的使用和状态属性

基础操作
<table>
  <tr>
    <th>姓名：</th>
    <th>年龄<th/>
  </tr>
  <tr th:each="list:${list}">
    <td th:text=${list.name}>name</td>
    <td th:txet="list.age">age</td>
    
    <td th:text = "listStat.index"></td>
    <td th:text = "listStat.count"></td>
    <td th:text = "listStat.size"></td>
    <td th:text = "listStat.current"></td>
    <td th:text = "listStat.first"></td>
    <td th:text = "listStat.last"></td>
    <td th:text = "listStat.even"></td>
    <td th:text = "listStat.oven"></td>
  </tr>
</table>
状态变量：默认命名是参数名+Stat
属性：
index 索引， 从0开始
count 计数， 从1开始
size 集合的大小 
current 当前对象
first/last 布尔类型 判断是否设计第一个/最后一个
even/oven  布尔类型 判断当前遍历的count是否为奇数/偶数

链接表达式

1.form表单提交
<form th:action="@{/login}" method="post">
  <input type="text" name="username"/>
  <input type="text" name="password">
  <input type="sumbit" value="提交">
</form>
2.绝对路径的使用
(1)a连接
<a th:href="@{https://gitee.com/}">跳转外链</a>
（2）协议自动识别的补全方式,注意两个“//”
<script typr="text/javascript" 
        th:src="@{//code.jquery.com/jquery-3.4.1.min.js}">
</script>
（3）参数的使用
<-- 单个参数的使用 -->
<a th:href="@{/admin/delete(id=${person.id})}">删除</a>
<-- 多个参数的使用 -->
<a th:href="@{/admin/delete(id=${person.id},name=${person.name})}">删除</a>


3.相对路径的使用
（a）上下文相关的URL
项目路径：localhost:8090/demo
请求名字：<form th:action="@{/login}" method="post">
此时需要在application.yml中添加一行这样的配置
server.servlet.context-path=/demo
（b）服务器相关的URL
  <a tth:href = "@{~/a.html}"></a>
4.引入js文件
<script typr="text/javascript" th:src="@{/js/jquery.js}"></script>

工具类

<-- 1.日期dates的使用 -->
//打印默认时间
<p th:text="${date}"><p>
//格式化时间
<p th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"><p>
<p th:text="${#dates.createNow()}"></p>当前的年月日时分秒
<p th:text="${#dates.createToday()}"></p>当前的年月日
<-- 2.字符串stringsde的使用 -->
//判断str是否为空
<p th:text="#strings.isEmpty(str)"></p>
//输出str的长度
<p th:text="#strings.length(str)"></p>
//判断str和duing是否相等
<p th:text="#strings.equals(str,'duing')"></p>
<-- 3.SpEl -->
//展示集合中索引为0的数据中name属性
<p th:text="${list[0].name}"></p>
//计算数值
<p th:text="${1 * 2 + 3 -4}"></p>
//调用java类中的方法
<p th:text="${T(java.lang.Math).random()}"></p>

内联表达式

1.内联表达式
<p>加油，[[${info}]]</p>
<p>加油，<span th:text="${info}"></span></p>
2.禁用内联表达式
<p th:inline="none"> 加油，[[<span th:text="${info}">]] </p>
3.内联Javascript
  <-- 
     同样支持动静分离,只能在html文件中的js代码里生效，外部的js文件中无法使用
     同时适用于css 
      
      -->
  <script type="text/javascript" th:inline="javascript">
    var info = /*[[${info}]]*/ "测试";
    console.log(info);
  </script>