常用thymeleaf标签
th:value 属性赋值 <input th:value="${user.name}" /> th:onclick 点击事件 th:onclick="'getCollect()'" th:each 属性赋值 tr th:each="user,userStat:${users}"> th:if 判断条件 <a th:if="${userId == collect.userId}" > th:unless 和th:if判断相反 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> th:href 链接地址 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> th:src 图片类地址引入 <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> th:selected selected选择框 选中 th:selected="(${xxx.id} == ${configObj.dd})" th:id 替换id <input th:id="'xxx' + ${collect.id}"/> th:text 文本替换 <p th:text="${collect.description}">description</p> th:utext 支持html的文本替换 <p th:utext="${htmlcontent}">conten</p> th:object 替换对象 <div th:object="${session.user}"> th:style 设置样式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" th:switch 多路选择 配合th:case使用 <div th:switch="${user.role}"> th:case th:switch的一个分支 <p th:case="'admin'">User is an administrator</p> th:fragment 布局标签,定义一个代码片段,方便其它地方引用 <div th:fragment="alert"> th:include 布局标签,替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> th:replace 布局标签,替换整个标签到引入的文件 <div th:replace="fragments/header :: title"></div> th:inline 定义js脚本可以使用变量 <script type="text/javascript" th:inline="javascript"> th:action 表单提交的地址 <form action="subscribe.html" th:action="@{/subscribe}">
七大基础对象:
${#ctx} 上下文对象,可用于获取其它内置对象。
${#vars}: 上下文变量。
${#locale}:上下文区域设置。
${#request}: HttpServletRequest对象。
${#response}: HttpServletResponse对象。
${#session}: HttpSession对象。
${#servletContext}: ServletContext对象。
常用的工具类:
#strings:字符串工具类
#lists:List 工具类
#arrays:数组工具类
#sets:Set 工具类
#maps:常用Map方法。
#objects:一般对象类,通常用来判断非空
#bools:常用的布尔方法。
#execInfo:获取页面模板的处理信息。
#messages:在变量表达式中获取外部消息的方法,与使用#{...}语法获取的方法相同。
#uris:转义部分URL / URI的方法。
#conversions:用于执行已配置的转换服务的方法。
#dates:时间操作和时间格式化等。
#calendars:用于更复杂时间的格式化。
#numbers:格式化数字对象的方法。
#aggregates:在数组或集合上创建聚合的方法。
#ids:处理可能重复的id属性的方法。
【内联写法】
标准格式为:[[${xx}]]
,可以读取服务端变量,也可以调用内置对象的方法。
thymeleaf使用Demo(页面部分代码)
@Controller @RequestMapping("/order") public class OrderController { @RequestMapping("/orderlist") public String orderList(User user,ModelMap map){ List<Orders> orders = ordersService.queryOrdersByUid(user.getId()); //System.out.println("订单列表数据: "+orders); map.put("orders",orders); return "orderlist"; } }
<-- orderlist.html -->
<!-- 右边购物列表 --> <div class="shop_member_bd_right clearfix"> <div class="shop_meber_bd_good_lists clearfix"> <div class="title"><h3>订单列表</h3></div> <table> <thead class="tab_title"> <th style="410px;"><span>商品信息</span></th> <th style="100px;"><span>单价</span></th> <th style="80px;"><span>数量</span></th> <th style="100px;"><span>订单总价</span></th> <th style="115px;"><span>状态与操作</span></th> </thead> <tbody> <!-- 一个订单 --> <tr th:each="order : ${orders}"> <td colspan="5"> <table class="good"> <thead > <tr><th colspan="6"> <span><strong>订单号码:</strong>[[${order.orderid}]]</span> </th></tr> </thead> <tbody> <!-- 一个订单详情 --> <tr th:each="orderdetil,orderdetilState : ${order.orderDetils}"> <td class="dingdan_pic"><img style="height: 80px; 100px" th:src="|http://xx.xx.xx.xx/${#strings.setSplit(orderdetil.gimage, '|')[0]}|" src="images/1dbc94fa0d60cba3990b89ccb01f82c2.jpg_tiny.jpg" /></td> <td class="dingdan_title"><span><a th:text="${orderdetil.gname}">李宁 lining 专柜正品 足球鞋 女式运动鞋【演示数据】</a></span><br /></td> <td class="dingdan_danjia">¥<strong th:text="${orderdetil.gprice}">25.00</strong></td> <td class="dingdan_shuliang" th:text="${orderdetil.gnumber}">1</td> <!-- 后两列跨行 th:if="${orderdetilState.first}" 如果是第一行,first返回ture 就显示这条记录 --> <td th:rowspan="${#arrays.length(order.orderDetils)}" th:if="${orderdetilState.first}" class="dingdan_zongjia">¥<strong th:text="${order.allprice}">25.00</strong><br />(免运费)</td> <td th:switch="${order.status}" th:rowspan="${#arrays.length(order.orderDetils)}" th:if="${orderdetilState.first}" class="digndan_caozuo"> <a th:case="0">待付款<br/> <a th:href="|/pay/alipay?orderid=${order.orderid}|">去付款</a></a> <a th:case="1">待发款</a> <a th:case="2">待收货</a> <a th:case="3">已收货</a> </td> </tr> </tbody> </table> </td></tr> </tbody> </table> </div> </div>
页面效果: