Spring Boot整合Thymeleaf及Thymeleaf页面基本语法

引入依赖

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.1.7.RELEASE</version>
        </dependency>

application.yml文件

spring:
  thymeleaf:
    cache: false
    encoding: utf-8
    mode: HTML5
    suffix: .html

默认页面后缀为.html 路径为templates文件夹下

然后我们在templates 创建一个 info.html页面

后台控制器写法

 @RequestMapping(value = "/index")
    public String index() {
        return "info";
    }

这里的info就是templates下的info.html页面的文件名

----------------------------一些页面基础用法-------------------------

页面集合遍历

<tr th:each="o,index : ${List}">
                        <td th:text="${index.index+1}">Tanmay</td>
                        <td th:text="${o.nickName}">Tanmay</td>
                        <td th:text="${o.mobile}">Bangalore</td>
                        <td th:text="${o.totalView}">560001</td>
                    </tr>

变量和常量拼接

<span th:text="${percent}+'%'">40%</span>

字符串是否是null

  <div th:if="${msg} != null"></div>

判断是不是为空字符串

<span th:if="${#strings.isEmpty(msg)}">空的</span>

页面引入

在index.html页面引入其他页面footer.html （默认页面都在templates文件夹下）

1、把foot页面用

<div th:fragment="footer">

    footer页面的html代码
</div>

2、然后在index.html中写

 <th:block th:include="footer :: footer" />

注：这里的第一个footer是指footer.html页面 从templates文件夹开始算起，如果footer.html页面在 templates的include文件夹下，那么这里就换成 include/footer

第二个footer是指footer.html中的 th:fragment=“footer”这里的标签名称  然后就会把这个div中包含的html代码块替换到 我们写的index.html的 <th:block >标签的位置

日期格式化

<span th:text="${#dates.format(content.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>

分页demo

 <table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="center" class="pn-sp">
        共 [[${pagination.total}]] 条&nbsp;
        每页 [[${pagination.size}]] 条&nbsp;
        <input type="button" value="首 页" onclick="_gotoPage('1');" th:disabled="${pagination.current} ==1"/>
        <input type="button" value="上一页" th:onclick="_gotoPage('[[${pagination.current}-1]]');"  th:disabled="${pagination.current} ==1" />
        <input type="button" value="下一页" th:onclick="_gotoPage('[[${pagination.current}+1]]');" th:disabled="${pagination.current} ==${pagination.pages}" />
        <input type="button" value="尾 页" th:onclick="_gotoPage('[[${pagination.pages}]]');" th:disabled="${pagination.current} ==${pagination.pages}" />&nbsp;
        当前 [[${pagination.current}]]/[[${pagination.total}]] 页 &nbsp;转到第<input type="text" id="_goPs" onfocus="this.select();" onkeypress="if(event.keyCode==13){$('#_goPage').click();return false;}" style="width:50px; border:1px solid #e7e7e7;"/>页
        <input id="_goPage" type="button" value="转" onclick="_gotoPage($('#_goPs').val());" th:disabled="${pagination.pages} ==1" />
    </td>
    </tr>
    </table>

    <script type="text/javascript">
        function _gotoPage(pageNo) {
            try {
                var tableForm = document.getElementById("tableForm");
                $("input[name=pageNo]").val(pageNo);
                tableForm.onsubmit = null;
                tableForm.submit();
            } catch (e) {
                console.log(e);
                alert('_gotoPage(pageNo)方法出错');
            }
        }
    </script>

html列表中有

 <form th:action="@{'/member/channel/list/'+${channel.channelId}}" id="tableForm">
        <input type="hidden" name="pageNo"/>
</form>

后台

 IPage<Content> pagination = contentService.page(page, queryWrapper);
 model.addAttribute("pagination", pagination);

页面标签disabled 判断

th:disabled="${pagination.current} ==1"

控制display 是否显示 （满足条件显示）

th:style="'display:' + @{(${status!=null} ? 'inline-block' : 'none')} + ''"

按指定字符分割字符串然后遍历

 <div class="col-xs-12 col-md-12" th:each="item,state:${#strings.arraySplit(content.outLink,'，')}">
        <a  th:href="${item}" target="_blank">[[${state.index+1}]]、[[${item}]]</a>
    </div>