springmvc 集成 tiles2实现页面模板局部刷新(二）

最新推荐文章于 2017-04-13 16:33:05 发布

xiangjai

最新推荐文章于 2017-04-13 16:33:05 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： spring ApacheTiles spring 文章标签： spring mvc

本文链接：https://blog.youkuaiyun.com/xiangjai/article/details/53815422

spring 同时被 3 个专栏收录

36 篇文章

订阅专栏

spring

35 篇文章

订阅专栏

ApacheTiles

2 篇文章

订阅专栏

本文介绍了一个使用SpringMVC结合Tiles2实现页面模板局部刷新的简单案例。通过配置web.xml和tiles定义文件，实现了基础模板页的创建，并展示了如何进行页面布局及局部内容更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

springmvc 集成 tiles2实现页面模板局部刷新(一）

描述的可能不太准确完善，做了简单的demo仅供参考

http://download.youkuaiyun.com/detail/xiangjai/9718638

工程目录

web.xml文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance 
				http://www.springmodules.org/schema/cache/springmodules-cache.xsd 
				http://www.springmodules.org/schema/cache/springmodules-ehcache.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                        http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">

	<display-name>管理台</display-name>
	
	<!-- Spring监听器 -->
	
	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<async-supported>true</async-supported>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
	   <init-param>  
	        <param-name>forceEncoding</param-name>  
	        <param-value>true</param-value>  
    	</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	

	<!-- Spring MVC servlet -->
	<servlet>
		<servlet-name>SpringMVC</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring-mvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
		<async-supported>true</async-supported>
	</servlet>
	<servlet-mapping>
		<servlet-name>SpringMVC</servlet-name>
		<!-- 此处可以可以配置成*.do，对应struts的后缀习惯 -->
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	
	<!-- 配置访问首页 -->
	<servlet-mapping>
		<servlet-name>SpringMVC</servlet-name>
		<url-pattern>/main</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>main</welcome-file>
	</welcome-file-list>


</web-app>

titles.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>

	<!-- 定义一个基础模板页 -->
	<definition name="template_base" template="/WEB-INF/jsp/main/template.jsp"></definition>

	<!-- 不继承直接引用也行 -->
	<definition name="baseLayout" extends="template_base">
		<put-attribute name="title" value="" />
		<put-attribute name="header" value="/WEB-INF/jsp/main/header.jsp" />
		<put-attribute name="menu" value="/WEB-INF/jsp/main/menu.jsp" />
		<put-attribute name="body" value="/WEB-INF/jsp/main/content-right.jsp" />
		<put-attribute name="footer" value="/WEB-INF/jsp/main/footer.jsp" />
	</definition>

	<!-- 右侧内容模板定义 -->
	<definition name="contentLayout" template="/WEB-INF/jsp/main/content.jsp">
		<put-attribute name="body" value="/WEB-INF/jsp/main/content-right.jsp" />
	</definition>

	<!-- 主页面<先执行，布局框架> -->
	<definition name="mainView" extends="baseLayout">
		<put-attribute name="title" value="主页面" />
	</definition>

	<definition name="one" extends="contentLayout">
		<put-attribute name="title" value="用户管理" />
		<put-attribute name="body" value="/WEB-INF/jsp/content/one.jsp" />
	</definition>

	<definition name="two" extends="contentLayout">
		<put-attribute name="title" value="用户管理" />
		<put-attribute name="body" value="/WEB-INF/jsp/content/two.jsp" />
	</definition>
	
</tiles-definitions>

jsp页面目录结构

页面详情可以下载demo

这里面涉及到浏览器高度自适应问题代码如下 (demo content-right.jsp页面中)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	String context = request.getContextPath();
	request.setAttribute("context", context);
	
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>右侧页面-用于展示框架右侧的内容</title>
</head>
<body>
	<!-- 用于展示所有右侧区域的内容 -->
	<iframe name="commonFrame" id="commonFrame" src="${context}/one"   frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onLoad="setIframeHeight()" ></iframe>

	
	<script type="text/javascript"> 
		function getHeight(doc) {
		    doc = doc || document;
		    var body = doc.body, html = doc.documentElement;
		    var height = Math.max( body.scrollHeight, body.offsetHeight, 
		        html.clientHeight, html.scrollHeight, html.offsetHeight );
		    return height;
		}
		
		function setIframeHeight() {
		    var ifrm = document.getElementById('commonFrame');
		    var doc = ifrm.contentDocument? ifrm.contentDocument: 
		        ifrm.contentWindow.document;
		    ifrm.style.visibility = 'hidden';
		    ifrm.style.height = "10px"; // reset to minimal height ...
		    ifrm.style.height = getHeight( doc ) + 60 + "px";
		    ifrm.style.visibility = 'visible';
		}
		
		 window.onresize = function () { 
			 setIframeHeight();	 
     	};
		
	</script> 	
</body>
</html>

其它一些相关可以看demo