博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  • 公共资源文件css、js 等统一引入示例
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header(title,link,style)">
    <meta charset="utf-8">
    <title th:replace="${title}">The awesome application</title>
    <!--全局通用框架样式 begin-->
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/bootstrap.min.css}" />
    <!-- Font Awesome -->
    <!-- Theme style -->
    <!--zTreee-->
    <!--文件上传-->
    <!--bootstrapTable -->
    <!--日期-->
    <!--select2-->
    <!--全局通用框架样式 end-->
    <!--/* Per-page placeholder for additional links */-->
    <script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/common.js}" ></script>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
    </script>
    <!--添加下面一句话 才能引入特有的css-->
    <th:block th:replace="${link}" />
    <th:block th:replace="${style}" />
    <style>
        .bck{
            background-color: #46b8da;
            padding-top:10px;
            padding-bottom: 10px;
}
</style>
</head>
  • 在公共头部文件里获取 项目路径,方便统一调用
<script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
    </script>
  • 获取对象的某个属性,例如获取item的id属性
<a th:href="@{'/newsDetail?id='+${item.id}}">
  • 格式化成标准日期: HH :代表24小时,hh :代表12小时制,例如将startTime转成yyyy-MM-dd HH:mm
<span th:text="${#dates.format(activity.startTime, 'yyyy-MM-dd HH:mm')}"></span>
  • 日期的比较: gt(大于) lt(小于) eq(等于) !=(不等于) ==(等于),例如判断当前日期是否小于applyDeadline
 <span th:if="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd HH:mm:ss')} lt ${#dates.format(activity.applyDeadline, 'yyyy-MM-dd HH:mm:ss')}">
  • url的拼接:单个参数 以及 多个参数,item 为object
    <a th:href="@{'/newsDetail?id='+${item.id}}">
    <div th:href="@{/Culturecloud/dispDetail(id=${item.id},flag=${'6'})}"></div>
<a th:if="${user != null}" th:href="@{'/bgmx/'+${hotblog.id}+'?ticket='+${user.token}}" ></a>
  • 加载图片地址的拼接
<img th:src="@{'/upload/activity/'+${item.activityImg}}" "javascript:this.src='../statics/images/no-pictures.png';">
  • 对于list集合的判断: th:if 以及 th:unless
 <div  th:if="${#lists.isEmpty(heritageList)}"></div>
 <div  th:unless="${#lists.isEmpty(heritageList)}"></div>
  • 对于list集合的循环:display 为json数据的key
 <div class="item" th:each="item : ${display}"></div>
  • 对于某个属性不确定值的判断: th:switch
    <div class="md-img" th:switch="${{item.resourceTypeid}}">
         <span th:case="1"></span>
         <span th:case="2"></span>
         ................
    </div>
    <!--判断是否为0-->
    <span th:if="${isfinally} == 0" ></span>
    <!--判断是否为空-->
    <span th:if="${object } != null"></span>
  • 对于html文本的解析: th:utext
<span  th:utext="${cloudworks.worksContent}"></span>
  • 对于一些数学基本运算: +,-,*,/,%
 <span th:text="${activity.appointmen} - ${activity.appointmen}"></span>
  • 对于字符串的函数处理:book 是一个数组,3 是下标,book[3]为字符串,+ 号 为 拼接;
    <span class="active" th:data="${#strings.substring(book[3],0,10)}+'@'+${book[0]['1'].stageid}" ></span>
    ${#strings.indexOf(name,frag)}																						
	${#strings.substring(name,3,5)}																						
	${#strings.substringAfter(name,prefix)}				
	${#strings.substringBefore(name,suffix)}												
	${#strings.replace(name,'las','ler')}	
  • 对于获取 数组->map
 <sapn th:text="${book[0]['1']}></span>
  • 设置自定义属性值:
<span th:data="${data.val}" id="val"></span>
<!--在js中获取:var val= $("#val").attr("data");-->
    
  • 获取存在session里的数据
 <span th:if="${session.user != null}">
        <span id="userId" hidden th:text="${session.user.id}"></span>
        <span id="isVolun" th:text="${session.user.isVolun}" hidden></span>
    </span>
<!--类似还有application:⽤于获取应⽤程序或servlet上下⽂属性;request:直接访问与当前请求关联的-->
    

在标签里自定义属性值数据,例如data-val

<input class="radioChecked" th:value="${catalog.id}" th:attr="data-val=${catalog.name}" >

使用标签截取字符串

<span th:text="${#strings.abbreviate(blogs.summary,50)}"></span>

获取文本值 th:text

 <a href="" th:text="'当前第'+${list.currentPage}+'页'">当前第页</a>

在标签里进行加减

           <li th:if="${list.currentPage != list.totalPage && list.isMore gt 0 }">
                <a th:if="${user == null}" th:href="@{'/all.vw?currentPage='+${list.currentPage + 1 }}">下一页</a>
                <a th:if="${user != null}" th:href="@{'/all.vw?currentPage='+${list.currentPage + 1 }+'&ticket='+${user.token}}">下一页</a>
            </li>