springMVC集成tiles布局框架

为什么要用布局框架？

在web项目开发中有很多页面片段需要也应该重用它，比如页面中的header、body、footer等，所以我们就需要想办法重用它们，这就有了我们的需求。我们可以使用jsp的include指令去重用这些页面，但是这样我们就需要每个页面单独自己组合，会耗费大量的时间来做重复性的工作，因此使用页面布局框架，减少页面开发的复杂度和开发时间，是较好的选择，最常用的就是Sitemesh和Tiles

tiles的pom依赖

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-extras</artifactId>
    <version>3.0.7</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-servlet</artifactId>
    <version>3.0.7</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.7</version>
</dependency>

配置tiles视图解析器

tiles视图解析配置推荐配置在springmvc的视图解析器之前，确保优先匹配tiles配置来进行视图解析。

spring-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd 
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd 
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
	<mvc:annotation-driven />

    <context:component-scan base-package="mongodb.controller" />
    
    <!-- 引入tiles配置文件 -->
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer" >
        <property name="definitions">
            <list>
                <value>/WEB-INF/tiles.xml</value>
            </list>
        </property>
    </bean>

    <!-- 配置tiles视图解析器 -->
    <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass">
            <value>org.springframework.web.servlet.view.tiles3.TilesView</value>
        </property>
    </bean>
    <!-- 配置基于Session的处理,将提交上来的locale参数进行处理 -->  
    <bean id="localeResolver" class="org.springframework.web.servlet.i18n.SessionLocaleResolver">
        <!-- 该属性可以不用配置 -->
        <property name="defaultLocale" value="ja"></property>
    </bean>  
    
    <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

配置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/views/layouts/template.jsp"></definition>

    <!-- 不继承直接引用也行 -->
    <definition name="*/*" extends="template_base">
        <put-attribute name="header" value="/WEB-INF/views/layouts/_top.jsp" />
        <!--这里{1}/{2}是通配符的意思，{1}代表definition name="*/*"中的第一个*，{2}代表第二个*-->
        <put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" />
        <put-attribute name="footer" value="/WEB-INF/views/layouts/_footer.jsp" />
    </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="tiles" %>
<% String path = request.getContextPath();
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
   request.setAttribute("basePath", basePath);
 %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%@include file="../layouts/_bootstrap_css.jsp" %>
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>Tiles</title>
</head>
<body>
	<div class="container">
		<div class="panel panel-default text-center">
			<div class="panel-body">
				<tiles:insertAttribute name="header" />
			</div>
		</div>
		<div class="panel panel-default text-center">
	    	<tiles:insertAttribute name="body" />
	   	</div>
	   	<tiles:insertAttribute name="footer" />
	</div>
</body>
</html>

_top.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">MongoDB</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active"><a href="dbs">数据库</a></li>
				<li><a href="list">数据表</a>
				<li><a href="" >注销</a></li>
			</ul>
		</div>
	</div>
</nav>

_footer.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<div class="panel panel-default text-center">
   	<div class="panel-heading">
		技术支持：tompiking
	</div>
</div>
<script src="<%= request.getAttribute("basePath")%>js/bootstrap.min.js"></script>

控制器和body页面

控制器返回的viewName（first/list）会和tiles.xml 中
<definition name="*/*" extends="template_base">的name匹配格式，找到对应的页面模板，并且确定body页面

	@RequestMapping("/list")
	public ModelAndView list(){
		List<Person> ps = personService.search();
		Map<String, List<Person>> list = new HashMap<String, List<Person>>();
		list.put("list", ps);
		return new ModelAndView("first/list", list);
	}

list.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<% String path = request.getContextPath();
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
   request.setAttribute("basePath", basePath);
 %>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
   	<div class="panel-heading">
   		<h2>列表</h2>
   	</div>
   	<div class="panel-body">
   		<table class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th width="25%"> 姓名</th>
				    <th width="10%"> 年龄</th>
				    <th width="45%"> 地址</th>
				    <th width="20%"> 操作</th>
				</tr>
			</thead>
			<c:if test="${list.size()<=0}">
				<tr>
				    <td colspan="4" align="center">暂无数据</td>
				</tr>
			</c:if>
			<c:if test="${list.size()>0}"> 
				<c:forEach var="person" items="${list}">
					<tr>
					    <td align="center">${person.name }</td>
					    <td align="center">${person.age }</td>
					    <td align="center">${person.address }</td>
					    <td align="center"></td>
					</tr>
				</c:forEach>
			</c:if>
		</table>
	</div>

运行效果