thymeleaf中高级

Thymeleaf

1.thymeleaf事件传参

​ th:οnclick="|deleteBy(${tag.id})|" //deleteBy为script代码块中的方法名

2.thymeleaf获得项目虚拟目录

​ var url = [[${#request.contextPath}]]

注意：>

3.thymeleaf+js原生代码+结合axios发送异步请求

<script type="text/javascript" th:inline="javascript">
    var url = [[${#request.contextPath}]];//获得项目虚拟目录
                var deleteBy = function (id) {//id为thymeleaf动态传递的参数
               if ( window.confirm("你确定要删除id为"+id+"的数据吗？")){
                   //axios发送异步请求
                   axios.get(url+"/tag/findAll").then(function (response) {
                       console.log(response.data);
                   })
               }
}
</script>

thymeleaf公共页面的整合

1.th:fragment 注：该页面的路径templates/hearder.html

<div class="row"  th:fragment="header">
    <div class="page-header text-center text-info">
        <h1>班级管理系统&nbsp;<small>V1.0</small></h1>
    </div>
</div >

th:fragment='header'中header为header.html页面中代码片段的唯一标识,命名可以任意

2.th:replace 注：该页面为要引入上述页面代码块的任意页面

 <div class="row" th:replace="header :: header"></div>//::左右都有一个空格

注：代码块中第一个header代表/templates/header.html，第二个header表示header.html页面中标识代码片段

thymeleaf中遍历List集合

<tr th:each="tag : ${tagList}">
    <td th:text="${tag.id}"></td>
    <td th:text="${tag.tagName}"></td>
    <td th:text="${tag.type}"></td>
    <td th:text="${#dates.format(tag.time,'yyyy年MM月dd日')}"></td>
    <td>
</tr>

thymeleaf中的路径表达式

1.传统方式

th:href="@{/city/deleteId(id=${city.id})}"//@代表项目虚拟目录

相当于：虚拟目录/city/deleteId?id=1

2.restful

th:href='@{/city/deleteId/}+${city.id}'