Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的Java模板引擎库，可以通过HTML的标签属性渲染标签内容。

举个例子，

1
<p th:text="${home.welcome}">Welcome to our grocery store!</p>

这里的th:text的内容就是需要后台渲染的，假如没有后台渲染，html会将无法识别的部分直接过滤掉，那么输出就是
1
<p >Welcome to our grocery store!</p>

假如后台传过来的home.welcome的值是Welcome, Yanss!，那么输出就是
1
<p >Welcome, Yanss!</p>

这就是Thymeleaf的用法和作用了，其他的地方也差不多。

记录几个常用的语法。

URL

1
<a th:href="@{http://www.thymeleaf.org}">Thymeleaf</a>

如果需要传参

1
2
<a th:href="@{http://www.thymeleaf.org(id=${id})}">Thymeleaf</a>
<a th:href="@{http://www.thymeleaf.org(id=${id},name=${name})}">Thymeleaf</a>

字符串替换

1
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

条件选择式

类似于java的三元表达式

1
<p th:text="true?'真':'假'"></p>

循环loop

  • 创建表格

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <table>
        <tr>
          <th>NAME</th>
          <th>PRICE</th>
          <th>IN STOCK</th>
        </tr>
        <tr th:each="prod : ${prods}">
          <td th:text="${prod.name}">Onions</td>
          <td th:text="${prod.price}">2.41</td>
          <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
        </tr>
      </table>

  • 创建下拉框

    • 在项目启动访问index页面的时候，把要需要的列表集合存到session作用域

      1
      2
      3
      4
      5
      6
      @RequestMapping("index")
      public String index(HttpSession session){
          List<Classes> list = userService.findAllClasses();
          session.setAttribute("list",list);
          return "index";
      }

    • 前台取值

      1
      2
      3
      4
      <select name="className" class="form-control">
          <option>请选择班级</option>
          <option th:each="list:${session.list}" th:value="$${list.cid}" th:text="${list.cname}"></option>
      </select>

  • 遍历Map和List

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <table class="table">  
      <thead>  
        <th th:each="entry : ${map}" th:text="${entry.key}"></th>  
        <th th:each="entry : ${map}" th:text="${entry.value}"></th>  
      </thead>  
      <tbody >  
        <td th:each="ele : ${list}" th:text="${ele}"></td>  
      </tbody>  
    </table>

  • 遍历List

    1
    2
    3
    4
    <ul th:each="lm : ${listmap}">  
      <li th:each="entry : ${lm}" th:text="${entry.key}" ></li>  
      <li th:each="entry : ${lm}" th:text="${entry.value}"></li>  
    </ul>

if/unless, switch/case

下面<a>标签只有在th:if中条件成立时才显示，th:unless只有不成立时才显示

1
<a th:href="@{/login}" th:if=${session.user != null}>Login</a>

switch/case也很好理解，默认属性default可以用*表示

1
2
3
4
5
<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

inline

举个例子, 当我想在一个两层的标签中同时渲染外层和内层的属性, 可能会出现下面这种错误.

1
<p th:text="${Hello.world}"><span th:if="${user == 'yanss'}">yanss</span></p>

这种写法等同于

1
<p th:text="${Hello.world}"></p>

因为外层的th:text会将内层的覆盖掉, 如果要同时渲染, 可以使用inline属性, 也可以将内外层隔离开.

1
2
3
4
5
6
7
<p th:inline="text">[[${Hello.world}]]<span th:if="${user == 'yanss'}">yanss</span></p>

<!-- or -->
<p >
  <span th:text="${Hello.world}"></span>
  <span th:if="${user == 'yanss'}">yanss</span>
</p>


#thymeleaf
2018 年 03 月 12 日