thymeleaf基础-快速使用

thymeleaf

对于Thymeleaf，网上特别官方的解释无非就是：网站或者独立应用程序的新式的服务端java模板引擎，可以执行HTML，XML，JavaScript，CSS甚至纯文本模板。

一、th简单表达式

• ① ${…} 变量表达式：

  <input type="text" name="userName" value="Beyrl" th:value="${user.name}" />
  

  上述代码为引用user对象的name属性值，将值传入 input 中

• ② *{…} 选择表达式:

  <div th:object="${session.user}">                                      
       <p>Nationality: <span th:text="*{nationality}">XXXX</span>.</p>    
  </div>
  

  选择表达式一般跟在th:object后，直接选择object中的属性。

• ③ #{…} 消息文字表达式：

  <p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
  

• ④ @{…} 链接url表达式：

  <a href="details.html" th:href="@{/webPage/details(orderId=${o.id})}">view</a>
  

  @{……}支持决定路径和相对路径。其中相对路径又支持跨上下文调用url和协议的引用

二、th 常用标签

• 1.th:id:

  类似于html标签中的id属性

  <div class="student" th:id = "food+(${pizza.index}+1)"></div>
  

• 2.th:text:与*th:utext:*

  即文本显示，可对表达式或变量求值，并将结果显示在其被包含的HTML标签内，替换原有HTML文本。th:text 与 th:utext 的区别在于 th:utext可以对内容进行转义。例子：

  若
  restraunt.welcome=welcome to our <b>delicious</b>restaurant!
  那么
  <p h:text="#{restaurantt.welcome}"></p>
  解析的结果为：welcome to our <b>delicious</b>restaurant!
  <p h:utext="#{restaurant.welcome}"></p>
  解析的结果为：welcome to our delicious restaurant!
  

• 3.*th:object：*

  用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数,常与th:field一起使用进行表单数据绑定。

  注意：{…}表达式的值是在选定的对象而不是整个context的map。也就是说，如果没有选定的对象，{…}和${…}没有区别。例子：

  <div th:object="${session.user}">
      <p>姓名：<span th:text="*{Name}">noodles</span></p>
      <p>年龄：<span th:text="*{age}">24</span></p>
      <p>国籍：<span th:text="*{nationlity}">中国</span></p>
  </div>
  

  上面的代码等同于下面的代码

  <div>
      <p>姓名：<span th:text="${session.user.Name}">noodles</span></p> 　  
      <p>年龄：<span th:text="${session.user.age}">24</span></p>    
      <p>国籍：<span th:text="${session.user.nationlity}">中国</span></p>
  </div>
  

• 4.*th:field：*

  常用于表单字段绑定。通常与th:object一起使用。 属性绑定、集合绑定。例子：

  <form th:action="@{/bb}" th:object="${user}" method="post" th:method="post">
      <input type="text" th:field="*{name}"/>
      <input type="text" th:field="*{msg}"/>
      <input type="submit"/>
  </form>
  

• 5.th:action:

  定义后台控制器路径，类似标签的action属性。例子：

  <form action="subscribe.html" th:action="@{/subscribe}">
  

• 6.th：href:

  定义超链接，类似标签的href 属性。value形式为@{/logout}。例子：

  <!-- 输出： 'http://localhost:8080/gtvg/order/details?orderId=3' -->
  <a href="details.html" 
    th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
  
  <!-- 输出： '/gtvg/order/details?orderId=3' -->
  <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
  
  <!-- 输出： '/gtvg/order/3/details' -->
  <a href="details.html"       th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
  

• 7.th：src:

  用于外部资源引入，类似于