thymeleaf模板引擎简单应用

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

表达式

${}  变量  
*{}  选择变量
#{}  消息
@{}  链接
~{}  片段 

1 字符串的拼接方式

<p th:text="${person.name} + ' is ' + ${person.age}"></p>

<p th:text="|${person.name} is ${person.age}|"></p>

2 条件判断

1）if的使用

<p> 这是第一个msg取值 </p>
<p th:text="${msg}" th:if="${msg=='yes'}"> </p>

<p th:if="${msg=='no'}"> 这是第二个msg取值 </p>
<p th:text="${msg}" th:if="${msg=='no'}"> </p>

2）unless的使用 （可以与IF判断相同的值 组成 if else）   

<p th:unless="${msg=='no'}"> 这是第二个msg取值 </p>
<p th:text="${msg}" th:unless="${msg=='no'}"> </p>

3）switch的使用

<div th:switch="${num}">
    <p th:case="1"> 1 </p>
    <p th:case="2"> 2 </p>
    <p th:case="*"> * </p>
</div>

3 for循环

基础应用

<table>
    <thead>
      <tr>
          <th>名字</th>
          <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="data:${list}">
          <td th:text="${data.name}">name</td>
          <td th:text="${data.age}">age</td>
      </tr>
    </tbody>
</table>

状态变量，默认命名是参数名+Stat(如上，dataStat), 用来保存迭代状态。

自定义的命名方法   <tr th:each="data,status:${list}">

属性：

index 索引，从0开始

count 计数，从1开始

size 集合的大小

current 当前对象

first/last 布尔类型 是否是第一个/最后一个

even/odd 布尔类型 是否是偶数/奇数个

<table>
    <thead>
      <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>
    </thead>
    <tbody>
      <tr th:each="data:${list}">
          <td th:text="${data.name}">name</td>
          <td th:text="${data.age}">age</td>
          <td th:text="${dataStat.index}">index</td>
          <td th:text="${dataStat.count}">count</td>
          <td th:text="${dataStat.size}">size</td>
          <td th:text="${dataStat.current}">current</td>
          <td th:text="${dataStat.even}">even</td>
          <td th:text="${dataStat.odd}">odd</td>
          <td th:text="${dataStat.first}">first</td>
          <td th:text="${dataStat.last}">last</td>
      </tr>
    </tbody>
</table>

4 URL的使用

1）基础使用

<form th:action="@{/login}" method="post">

    username:
    <input type="text" name="username">
    password:
    <input type="password" name="password">

    <input type="submit" value="提交">
</form>

2）绝对路径的使用

<a th:href="@{http://cn.bing.com}">跳转外链</a>
<!--渲染效果为  <a href="http://cn.bing.com">跳转外链</a>-->

协议自动补全的使用方式

以引用静态资源举例

<script type="text/javascript" th:src="@{//code.jquery.com/jquery-3.4.1.min.js}"></script>

渲染效果 <script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.min.js"></script>

3）相对路径的使用

a) 上下文相关的URL ->

 <form th:action="@{/login}" method="post"> 

     比如，部署项目的地址   localhost:8080/demo
     渲染结果为  <form action="/demo/login" method="post"> 

     验证方式，配置文件增加 server.servlet.context-path=/demo

引用静态资源的方式

      <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.1</version>
        </dependency>

或

 <script type="text/javascript" th:src="@{/webjars/jquery/3.4.1/jquery.js}"></script>

参数的使用

aa) 情形一 -》 /addPerson?id=1

     @{/addPerson(id=1)}   // 单个参数的使用  括号括起来

bb) 情形二 -》 /addPerson?id=1&name='edward'

   @{/addPerson(id=1,name='edward')}  // 多个参数的使用  逗号分隔

cc) 情形三 -》 /addPerson/1?name='edward'

     @{/addPerson/{id}(id=1,name='edward')}  
     // 支持路径中包含变量  可以使用参数去替换

b) 服务器相关的URL

渲染结果为 <a href="/a.html">

     渲染结果为   <a href="/a.html">
   
     不会增加上下文路径(项目访问路径)，可以同一个服务器上的不同项目，访问到固定地址。

5、内置对象/内嵌变量

工具类, 使用方式是 加前缀#

dates

calendars

numbers

strings

objects

bools

arrays

lists

sets

Maps

1) 日期dates #dates.format()方法等

dates的使用

<p th:text="${date}"></p>
<p th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></p>

<br>
<p th:text="${#dates.createNow()}"></p>
<p th:text="${#dates.createToday()}"></p>

2) strings的使用

<p th:text="${#strings.isEmpty(str)}"></p>
<p th:text="${#strings.length(str)}"></p>
<p th:text="${#strings.equals(str,'duing')}"></p>

6、表达式语言

OGNL -> Object-Graph Navigation Language

可以通过表达式语言 来获取java的对象

Spel 类似OGNL, 本质都是 在视图层和控制层 将数据建立联系的方式

<p th:text="${ 1 * 2 + 3 - 4}"></p>

<p th:text="${list[0].name}"></p>

<p th:text="${T(java.lang.Math).random()}"></p>

7、内联表达式

<p> 加油，[[${info}]] </p>
<p> 加油，<span th:text="${info}"></span> </p>

th:text =>  [[...]]
th:utext => [(...)]

如果文本需要展示形如“[[就展示]]”的数据 ，可以禁用内联

<p th:inline="none" > 加油，[[<span th:text="${info}"></span>]] </p>

内联Javascript

<!--同样支持动静分离  但原本的注释不能使用-->
<!--注意： 只能在html文件中的js代码里生效  外部的js文件中无法使用-->
<script type="text/javascript" th:inline="javascript">

    var info = /*[[${info}]]*/ "测试";
    console.log(info);

</script>

<!--类似js，同样支持css-->
<!--<style th:inline="css">-->

<!--</style>-->

消息读取messages.properties配置文件里的信息 #{}

#messages.properties
something = 好好学习PHP
java = 好好学习java

<p th:text="#{something}">message</p>
<p th:text="#{java}">java</p>

引入文件

th:fragment	布局标签，定义一个代码片段，方便其它地方引用
th:include	布局标签，替换内容到引入的文件
th:replace	布局标签，替换整个标签到引入的文件
th:insert	布局标签，保留自己的主标签，保留替换内容的主标签

<div th:insert="footer::copy"></div>
<div th:replace="footer::copy"></div>
<div th:include="footer::copy"></div>

<footer th:fragment="copy">&copy; 2021</footer>

选择变量 ${} *{}

Restaurant ra=new Restaurant();
ra.setBoss("Java");
ra.setChef("Go");
model.addAttribute("ra",ra);

<p th:text="${ra.boss}"></p>

<p th:text="${ra.chef}"></p>
<br>
<div th:object="${ra}">
    <p>Boss: <span th:text="*{boss}"></span></p>
     <p>Boss: <span>[[*{boss}]]</span></p>
    <p>chef: <span th:text="*{chef}"></span></p>
</div>

th:text th:utext

model.addAttribute("name","<h1>thymeleaf</h1>");

<p th:text="${name}"></p>
<!--  会解析标签-->
<p th:utext="${name}"></p>
<p>[(${name})]</p>

字符串表达式

<div th:utext="${name + ' good'}"></div>
<div th:utext="${name} + ' is good'"></div>
<div th:utext="|${name} is good|"></div>