thymleaf基础 句法格式

16 篇文章 0 订阅
10 篇文章 0 订阅

1、在html页面中引入thymeleaf命名空间,即<html xmlns:th=http://www.thymeleaf.org></html>,此时在html模板文件中动态的属性使用th:命名空间修饰 




2、引用静态资源文件,比如CSS和JS文件,语法格式为“@{}”,如@{/js/blog/blog.js}会引入/static目录下的/js/blog/blog.js文件 




3、访问spring-mvc中model的属性,语法格式为“${}”,如${user.id}可以获取model里的user对象的id属性 




4、循环,在html的标签中,加入th:each=“value:${list}”形式的属性,如<span th:each=”user:${users}”></span>可以迭代users的数据 




5、判断,在html标签中,加入th:if=”表达式”可以根据条件显示html元素 
<span th:if="${not #lists.isEmpty(blog.publishTime)}"> 
<span id="publishtime" th:text="${#dates.format(blog.publishTime, 'yyyy-MM-dd HH:mm:ss')}"></span> 
</span> 
以上代码表示若blog.publishTime时间不为空,则显示时间 




6、时间的格式化, 
${#dates.format(blog.publishTime,'yyyy-MM-dd HH:mm:ss')} 
表示将时间格式化为”yyyy-MM-dd HH:mm:ss”格式化写法与Java格式化Date的写法是一致的。 




7、字符串拼接,有两种形式 
比如拼接这样一个URL:/blog/delete/{blogId} 
第一种:th:href="'/blog/delete/' + ${blog.id }" 
第二种:th:href="${'/blog/delete/' + blog.id }" 






模板:
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>生日</th>
            <th>薪资</th>
        </tr>
        <tr th:each="user : ${userList}">
<img th:src="${}"/>
            <td th:text="${user.id}">0</td>
            <td th:text="${user.name}">zhansan</td>
            <td th:text="${user.birthday}">1988-06-01</td>
            <td th:text="${user.salary}">12345</td>
        </tr>
    </table>


    <select>
        <option th:each="user:${userList}" th:value="${user.id}" th:text="${user.name}">我是默认值</option>
    </select>


</body>
</html>




关于Controller 方法可以接收参数使用@RequestBody、@RequestParam、@ModelAttribute、JSONObject、HttpEntity 等方式,皆与Spring的使用一样


变量表达式和星号表达有什么区别吗?


如果不考虑上下文的情况下,两者没有区别;星号语法评估在选定对象上表达,而不是整个上下文 
什么是选定对象?就是父标签的值,如下:


  <div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
  </div>




这是完全等价于:


  <div th:object="${session.user}">
      <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
      <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
      <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
  </div>




当然,美元符号和星号语法可以混合使用:


  <div th:object="${session.user}">
      <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
      <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
      <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
  </div>


  
  th:action 表单提交的地址 <form action="subscribe.html" th:action="@{/subscribe}">
  th:remove 删除某个属性 <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。
  th:attr 设置标签属性,多个属性可以用逗号分隔 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。
  th:style 设置样式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick 点击事件 th:οnclick="'getCollect()'"
th:fragment 布局标签,定义一个代码片段,方便其它地方引用 <div th:fragment="alert">
使用thymeleaf布局非常的方便


定义代码片段


<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是替换

 

 

 

讲述Thymeleaf中的内置对象(list解析、日期格式化、数字格式化等)、定义变量、获取URL的参数和在页面标签中自定义属性的应用。

如果对Thymeleaf的基本使用、maven依赖等不清楚的可以先阅读我的另一篇文章《Thymeleaf 之 初步使用》

  • Controller部份
@Controller
public class IndexController {

    @GetMapping(value = "index")
    public String index(Model model, HttpServletRequest request) {
        List<String> datas = new ArrayList<String>();
        datas.add("知识林");
        datas.add("http://www.zslin.com");
        datas.add("393156105");
        model.addAttribute("datas", datas);
        model.addAttribute("curDate", new Date());

        model.addAttribute("money", Math.random()*100);
        return "index";
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

在这个控制器的Model中存放了这样几个数据:一个String类型的列表、一个日期对象和一个数值,这些东西在实际应用开发过程中应用非常广泛,下面具体看一下在Thymeleaf中是如何解析这些数据的。

  • 日期格式化
<span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>
  • 1

说明: 使用内置对象datesformat函数即可对日期进行格式化,在format函数中,第一个参数是日期对象,对二两个参数为日期格式(规则跟SimpleDateFormat一样)

需要注意的是:

· 内置对象一般都以s结尾,如dateslistsnumbers

· 在使用内置对象是在对象名前都需要加#号。

  • 数字格式化
<span th:text="${#numbers.formatDecimal(money, 0, 2)}"></span>
  • 1

说明: 此示例表示保留两位小数位,整数位自动;

<span th:text="${#numbers.formatDecimal(money, 3, 2)}"></span>
  • 1

说明: 此示例表示保留两位小数位,3位整数位(不够的前加0)

  • 获取列表长度
<span th:text="${#lists.size(datas)}"></span>
  • 1

说明: 使用#lists.size来获取List的长度。

  • 获取URL参数值
<span th:text="${#httpServletRequest.getParameter('page')}"></span>
  • 1

说明: 当访问http://localhost:1105/index?page=5时页面将会得到page对应的值:5

  • 定义变量
<div th:with="curPage=${#httpServletRequest.getParameter('page')}">
    <h3>当前页码:<span th:text="${curPage}"></span></h3>
</div>
  • 1
  • 2
  • 3

说明: 同样,当访问http://localhost:1105/index?page=5时,页面将显示:当前页码:5,说明用th:with来定义变量,多个用,号隔开,使用范围在当前标签内。

  • 自定义标签属性

Thymeleaf中可以使用th:加上标签的任何属性进行赋值,但有些时候会遇到自定义的属性,再用th:加自定义的属性则会无效。比如:需要对<span>标签增加objNameobjId这样的属性,在非Thymeleaf情况下是这样:

<span objId="1" objName="知识林"></span>
  • 1

变量情况是:

<span objId="${obj.id}" objName="${obj.name}"></span>
  • 1

Thymeleaf下则是:

<span th:attr="myDate=${#dates.format(curDate, 'yyyy-mm-dd')}, myMoney=${money}"></span>
  • 1

说明: 在页面上查看源代码可以看到:<span myMoney="91.6059494319957" myDate="2016-31-02"></span>,说明自定义属性用:th:attr,多个属性用,隔开。

  • 内置对象

上面简单描述了比较常用的dateslistsnumbers这几个内置对象,在Thymeleaf还有很多的内置对象,像strings也非常常用,用法跟java.lang.String类的用法一样。

Thymeleaf中的内置对象有:

#dates:日期格式化内置对象,具体方法可以参照java.util.Date

#calendars:类似于#dates,但是是java.util.Calendar类的方法;

#numbers: 数字格式化;

#strings:字符串格式化,具体方法可以参照java.lang.String,如startsWithcontains等;

#objects:参照java.lang.Object

#bools:判断boolean类型的工具;

#arrays:数组操作的工具;

#lists:列表操作的工具,参照java.util.List

#sets:Set操作工具,参照java.util.Set

#maps:Map操作工具,参照java.util.Map

#aggregates:操作数组或集合的工具;

#messages:操作消息的工具。

示例代码:https://github.com/zsl131/thymeleaf-study/tree/master/study05

本文章来自【知识林】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值