zoukankan      html  css  js  c++  java
  • thymeleaf学习

    1.  获取变量值

    <p th:text="'Hello!, ' + ${name} + '!'" >3333</p>

    对于javaBean的话使用变量名.属性名方式获取,这点和EL表达式一样

    $表达式只能写在th标签内部,不然不会生效,上面例子就是使用th:text标签的值替换p标签里面的值,至于p里面的原有的值只是为了给前端开发时做展示用的.这样的话很好的做到了前后端分离.

    2.  引入url

    Thymeleaf对于URL的处理是通过语法@{…}来处理的

    <a th:href="@{http://blog.csdn.net/u012706811}">绝对路径</a>

    <a th:href="@{/}">相对路径</a>

    <a th:href="@{css/bootstrap.min.css}">Content路径,默认访问static下的css文件夹</a>

    类似的标签有:th:href和th:src

    3.  字符串替换

    很多时候可能我们只需要对一大段文字中的某一处地方进行替换,可以通过字符串拼接操作完成:

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

    简洁的方式是:

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

    当然这种形式限制比较多,|…|中只能包含变量表达式${…},不能包含其他常量、条件表达式等。

    4.  运算符

    在表达式中可以使用各类算术运算符,例如+, -, *, /, %

    th:with="isEven=(${prodStat.count} % 2 == 0)"

    逻辑运算符>, <, <=,>=,==,!=都可以使用,唯一需要注意的是使用<,>时需要用它的HTML转义符:

    th:if="${prodStat.count} &gt; 1"

    th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

    5.  条件表达式

    if/unless

    Thymeleaf中使用th:if和th:unless属性进行条件判断,下面的例子中,标签只有在th:if中条件成立时才显示:

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

    th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。

    6.  Switch

    Thymeleaf同样支持多路选择Switch结构:

    <div th:switch="${user.role}">

         <p th:case="'admin'">User is an administrator</p>

         <p th:case="#{roles.manager}">User is a manager</p>

    </div>

    默认属性default可以用*表示:

    <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>

    7. 循环th:each

    <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>

    8.  Utilities工具类

    为了模板更加易用,Thymeleaf还提供了一系列Utility对象(内置于Context中),可以通过#直接访问:

    • · #dates
    • · #calendars
    • · #numbers
    • · #strings
    • · arrays
    • · lists
    • · sets
    • · maps
    • · … 

    8.1 date

    ${#dates.format(date, 'dd/MMM/yyyy HH:mm')}

    ${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}

    ${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}

    ${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}

    ${#dates.createNow()}

    ${#dates.createToday()}

    8.2 string

    ${#strings.isEmpty(name)}

    ${#strings.arrayIsEmpty(nameArr)}

    ${#strings.listIsEmpty(nameList)}

    ${#strings.setIsEmpty(nameSet)}

    ${#strings.startsWith(name,'Don')}

    //also array*, list* and set*

    ${#strings.endsWith(name,endingFragment)}

    //also array*, list* and set*

    ${#strings.length(str)}

    ${#strings.equals(str)}

    ${#strings.equalsIgnoreCase(str)}

    ${#strings.concat(str)}

    ${#strings.concatReplaceNulls(str)}

    ${#strings.randomAlphanumeric(count)}

    8.3  Other

    <dd th:text="${product.description}">red Chair</dd>

    <dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd>

    <dd th:text="${#dates.format(product.avail, 'yyyy-MM-dd')}">2014-12-01</dd>

    <p class="answer" th:text="${4 * -6 * -2 % 7}">123</p>

    <p class="answer" th:text="${new java.util.Date().getTime()}">22-Jun-2013</p>

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

    <td th:class="${customer.balance gt 10000} ? 'enhanced'" th:text="${customer.balance}">350</td>

    8.4文字国际化表达式

    <th th:text="#{header.address.city}">...</th> 

    <th th:text="#{header.address.country}">...</th>

    文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties),用Key索引Value,还可以提供一组参数(可选).

    8.5布局

       定义代码片段:

    <footer th:fragment="copy">

    &copy; 2016

    </footer>

    在页面任何地方引入:

    <body>

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

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

     </body>

    th:include 和 th:replace区别,include只是加载,replace是替换

    <body>

       <div> &copy; 2016 </div>

      <footer>&copy; 2016 </footer>

    </body>

    常用的页面布局:

    头部,尾部、菜单栏、隐藏栏,点击菜单只改变content区域的页面 ``` html

    Header  left  sidebar  footer

    <head th:include="layout :: htmlhead" th:with="title='Hello'"></head>

    layout 是文件地址,如果有文件夹可以这样写 fileName/layout:htmlheadhtmlhead 是指定义的代码片段 如 th:fragment="copy"

  • 相关阅读:
    从小白到全栈的前端学习路径
    Vue初学者可能不知道的坑
    vue的基础使用
    15-浮动
    02-css的选择器
    深入理解JavaScript的闭包
    深入理解JavaScript的闭包,前戏— 作用域和词法作用域
    JavaScript简介
    02-HTML5新的input属性
    springboot+spring session+redis+nginx实现session共享和负载均衡
  • 原文地址:https://www.cnblogs.com/shaozhiqi/p/8708649.html
Copyright © 2011-2022 走看看