Thymeleaf模板使用实例+模板分页

叁歲伎倆 2022-05-24 09:44 539阅读 0赞

## 1. 概述 ##

在web开发中，我们经常会将公共头，公共尾，菜单等部分提取成模板供其它页面使用。在thymeleaf中，通过th:fragment、th:include、th:replace、参数化模板配置、css选择器加载代码块等实现。下文通过例子来说明用法:

*  fragment语法
 *  通过 th:fragment 和 css选择器加载代码块
 *  th:include 和 th:replace
 *  参数化模板配置

Thymeleaf基本搭建和配置可以参考其他网站的配置实例，这里不详细说明。

**2.引入头文件**

首先我们讲述web项目里的js，css如何放到一个公共页面，用thymeleaf模板语法调用呢？其实thymeleaf里有个标签可以使用：

initHead.html

<th:block id="initHead">
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <script type="text/javascript" th:src="@{/resources/js/share/backstage/jquery.js}"></script>
    
    
    <script type="text/javascript" th:src="@{/resources/js/share/jquery-ui-1.12.1.custom/external/jquery/jquery.js}"></script>
    <link th:href="@{/resources/js/share/jquery-ui-1.12.1.custom/jquery-ui.css}" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    var rootPath = "/{项目名}";
    </script>
    </th:block>

homepage.html

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <title>主页</title>
    <th:block th:replace="common/base/initHead :: #initHead"></th:block>
    <script language="javascript">
    $(function() {});
    </script>
    </head>
    <body class="homepage_body">....common/base/initHead :: #initHead"></th:block>
    <script language="javascript">
    $(function() {});
    </script>
    </head>
    <body class="homepage_body">....

问题来了，我们如何找到initHead.html文件呢？

其实也是通过配置的thymeleaf路径下查找。例如我配置了

<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">  
    	<property name="prefix" value="/thymeleaf/" />  
    	<property name="suffix" value=".html" />  
    	<property name="templateMode" value="HTML" />  
    	<property name="cacheable" value="false" /> 
    	<property name="order" value="#{T(org.springframework.core.Ordered).HIGHEST_PRECEDENCE}" /> 
    	<property name="characterEncoding" value="UTF-8"/>
    </bean>

配置了thymeleaf查找路径是“/thymeleaf/”

加上红色部分的路径，那么initHead.html文件的路径就必须是“WebRoot/thymeleaf/common/base/initHead.html”

**3.分页**

分页我使用vue.js的分页插件

道理和上面一样，附上源码：

pageInfo.html

<th:block id="pagin" th:fragment="pagin (refreshForm)">
    <style type="text/css">
    .page {font-weight: 900;height: 40px;text-align: center;color: #888;margin: 20px auto 0;background: #f2f2f2;}
    .pagelist {font-size: 0;background: #fff;height: 50px;line-height: 50px;}
    .pagelist span {font-size: 14px;}
    .pagelist .jump {border: 1px solid #ccc;padding: 5px 8px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;cursor: pointer;margin-left: 5px;}
    .pagelist .bgprimary {cursor: default;color: #fff;background: #337ab7;border-color: #337ab7;}
    .jumpinp input {width: 55px;height: 26px;font-size: 13px;border: 1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;text-align: center;}
    .ellipsis {padding: 0px 8px;}
    .jumppoint {margin-left: 30px;}
    .pagelist .gobtn {font-size: 12px;}
    .bgprimary {cursor: default;color: #fff;background: #337ab7;border-color: #337ab7;}
    .pagelist .jump.disabled {pointer-events: none;background: #ddd;}
    .page_select {width: 50px;height: 30px;border: 1px;border-style: solid;border-color: #d5d5d5;border-radius: 5px;}
    </style>
    <div id="pagePlugIn">
    	<div>
    		<div class="page" v-show="show">
    			<div class="pagelist">
    				<span class="jump" :class="{disabled:pstart}" @click="pageUp()">上一页</span> 
    				<span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span> 
    				<span class="ellipsis" v-show="efont">...</span> 
    				<span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{
       {num}}</span>
    				<span class="ellipsis" v-show="ebehind">...</span> 
    				<span :class="{disabled:pend}" class="jump" @click="pageDown()">下一页</span>
    				<span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{
       {pages}}</span> 
    				<span class="jumppoint" >共<span style="color: red;" th:text="${pageInfo.totalCount}"></span>条记录</span>
    				<span class="jumppoint">页大小：</span>
    				<select id="select_PageSize" onchange="select_PageSize();" class="page_select">
    					<option value="5" th:selected="${pageInfo.pageSize eq 5}">5</option>
    					<option value="15" th:selected="${pageInfo.pageSize eq 15}">15</option>
    					<option value="20" th:selected="${pageInfo.pageSize eq 20}">20</option>
    					<option value="50" th:selected="${pageInfo.pageSize eq 50}">50</option>
    					<option value="100" th:selected="${pageInfo.pageSize eq 100}">100</option>
    				</select>
    				<span class="jumppoint">跳转到：</span>
    				<span class="jumpinp"><input type="text" v-model="changePage"></span> 
    				<span class="jump gobtn" @click="jumpPage(changePage)">跳转</span>
    			</div>
    		</div>
    	</div>
    	<input type="hidden" id="pageInfo_pageNum" th:value="${pageInfo.pageNum}" />
    	<input type="hidden" id="pageInfo_pageSize" th:value="${pageInfo.pageSize}" />
    </div>
    <script type="text/javascript" th:src="@{/resources/js/share/pagePlug_in/vue.js}"></script>
    <script type="text/javascript">
    /**
     * 初始化分页插件
     */
    var newlist = new Vue({
    	el : '#pagePlugIn',
    	data : {
    		current_page : [[${pageInfo.pageNum}]], //当前页
    		pages : [[${pageInfo.totalPageCount}]], //总页数
    		//pages : 3, //总页数
    		changePage : '', //跳转页
    		nowIndex : 1
    	},
    	computed : {
    		show : function() {
    			return true
    		},
    		pstart : function() {
    			return this.current_page == 1;
    		},
    		pend : function() {
    			return this.current_page == this.pages;
    		},
    		efont : function() {
    			if (this.pages <= 7) return false;
    			return this.current_page > 5
    		},
    		ebehind : function() {
    			if (this.pages <= 7) return false;
    			var nowAy = this.indexs;
    			return nowAy[nowAy.length - 1] != this.pages;
    		},
    		indexs : function() {
    			var left = 1,
    				right = this.pages,
    				ar = [];
    			if (this.pages >= 7) {
    				if (this.current_page > 5 && this.current_page < this.pages - 4) {
    					left = Number(this.current_page) - 3;
    					right = Number(this.current_page) + 3;
    				} else {
    					if (this.current_page <= 5) {
    						left = 1;
    						right = 7;
    					} else {
    						right = this.pages;
    
    						left = this.pages - 6;
    					}
    				}
    			}
    			while (left <= right) {
    				ar.push(left);
    				left++;
    			}
    			return ar;
    		},
    	},
    	methods : {
    		jumpPage : function(id) {//跳转指定页数方法
    			if(id){
    				this.current_page = id;
    				refreshList(id, $("#select_PageSize option:selected").val());
    			}
    		},
    		pageUp : function(){//上一页
    			this.current_page--;
    			var pageSize = $("#pageInfo_pageSize").val();
    			var pageNum = Number($("#pageInfo_pageNum").val()) - 1;
    			refreshList(pageNum, pageSize);
    		},
    		pageDown : function(){//下一页
    			this.current_page++;
    			var pageSize = $("#pageInfo_pageSize").val();
    			var pageNum = Number($("#pageInfo_pageNum").val()) + 1;
    			refreshList(pageNum, pageSize);
    		}
    	},
    });
    //刷新列表
    function refreshList(nextPageNum, pageSize){
    	var refreshForm = '[[${refreshForm}]]';
    	//console.log(nextPageNum+"::"+pageSize+"::"+refreshForm);
    	if(nextPageNum && nextPageNum > 0 && pageSize && pageSize > 0){
    		if(nextPageNum <= 0){
    			nextPageNum = 1;
    		}
    		var totalPageCount = Number([[${pageInfo.totalPageCount}]]);
    		if(nextPageNum >= totalPageCount){
    			nextPageNum = totalPageCount;
    		}
    		$("#"+refreshForm + " #pageNum").val(nextPageNum);
    		$("#"+refreshForm + " #pageSize").val(pageSize);
    		$("#"+refreshForm).submit();
    	}
    }
    //更新页大小
    function select_PageSize(){
    	refreshList([[${pageInfo.pageNum}]], $("#select_PageSize option:selected").val());
    }
    </script>
    </th:block>

引用部分

userList.html

呈现：

![70][]

感兴趣的朋友可以关注微信公众号（会定时推送新的知识）：

![70 1][]

[70]: /images/20220524/ea3747c210a84075af37ddaf21f38295.png
[70 1]: /images/20220524/e6e8a94d17c74f02bf3757c97ebe5ab7.png