您的位置：首页 > 编程语言 > Java开发

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

2016-10-28 14:45 288 查看


 


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


pom依赖

<tiles.version>2.2.2</tiles.version>

<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>${tiles.version}</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-api</artifactId>
<version>${tiles.version}</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-core</artifactId>
<version>${tiles.version}</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-servlet</artifactId>
<version>${tiles.version}</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-template</artifactId>
<version>${tiles.version}</version>
</dependency>



tiles配置视图解析 

注:tiles视图解析配置推荐配置在springmvc的视图解析器之前，这样就会优先匹配tiles配置来进行视图解析。（配在springmvc配置文件中）

<!-- 引入tiles配置文件 -->
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer" >
<property name="definitions">
<list>
<value>/WEB-INF/tiles.xml</value>
</list>
</property>
</bean>
<!-- 配置视图解析器 -->
<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<!--不能省略-->
<property name="viewClass">
<value>org.springframework.web.servlet.view.tiles2.TilesView</value>
</property>
</bean>

<mvc:resources mapping="/css/**" location="/resources/css" />
<mvc:resources mapping="/img/**" location="/resources/img" />
<mvc:resources mapping="/js/**" location="/resources/js" />
<mvc:default-servlet-handler/>
 关于<mvc:resources> 标签的使用参考：http://www.jianshu.com/p/d8aee77e5f3a

 
tiles.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>
<!--test 测试-->
<span style="white-space:pre">	</span><definition name="test" extends="contentLayout">
<span style="white-space:pre">		</span><put-attribute name="title" value="公共平台管理系统-用户管理"/>
<span style="white-space:pre">		</span><put-attribute name="body" value="/WEB-INF/jsp/mrquest/test.jsp"/>
<span style="white-space:pre">	</span></definition>

</tiles-definitions>


template.jsp文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="t"%>

<!-- HTML头 开始 -->
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

</head>

<!-- HTML文件内容 开始 -->
<body>
<div id="wrapper">
<!-- 左侧导航栏 开始-->
<t:insertAttribute name="menu" />
<!-- 左侧导航栏 结束-->
<div id="page-wrapper" class="gray-bg">
<!-- 页面头 开始 -->
<t:insertAttribute name="header" />
<!-- 页面头 结束 -->
<!--  IFRAME布局 开始 -->
<div class="main-content">
<t:insertAttribute name="body" />
</div>
<!--  IFRAME布局 结束 -->
<!-- 页面尾 开始 -->
<t:insertAttribute name="footer" />
<!-- 页面尾 结束 -->
</div>
</div>

</body>

</html>


header.jsp文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div class="row border-bottom">
测试头文件
</div>

menu.jsp文件

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

<div class="sidebar-collapse">
<ul >
<li  ><span class="nav-label"> 左侧</span> </li>
</ul>
</div>


footer.jsp文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div class="footer">
<div class="pull-right">
used by <strong>xiangjia</strong> Free.
</div>

</div>


下面tiles 借助iframe 实现内容的局部刷新

content.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:insertAttribute name="title" ignore="true"/></title>
</head>
<body style="padding-top:0px !important;border-top: 0px;" >
<div id="container" >
<tiles:insertAttribute name="body" />
</div>
</body>
</html>


content-right.jsp文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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>
<div id="container" style="height:900px;width:100%">
<!-- 用于展示所有右侧区域的内容 -->
<iframe name="commonFrame" id="commonFrame" src="${context}/test"  height="auto" scrolling="no" frameborder="0"  style="margin:0;padding:0;width:100%;height:100%;"></iframe>
</div>
</body>
</html>


TestController配置

@Controller
public class TestController {

@RequestMapping(value = "/test")
public String testGet() {
return "test";
}
}




内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航