一碗硬、背景介紹
如果我們所有的頁面都是靠對應的一個 jsp 頁面來完成的話維護起來會非常繁瑣定嗓，頁面之間有很多相似的部分奋早，如果我們想要修改這些部分那么我們就需要一個個的去修改對應的 jsp 頁面袖扛。這個時候 Tiles 就是為了讓我們從這種重復的體力活動中解放出來拦耐。
Tiles是一種 JSP 布局框架，主要目的是為了將 jsp 頁面拆解為多個子頁面榕暇，然后用來組合成一個最終表示用頁面用的，比如 head、footer彤枢，這樣的話狰晚，便于對頁面的機能的變更及維護。tiles使得 springmvc 在頁面的處理方面多了一種選擇缴啡。并且更容易實現代碼的重用壁晒。
二、demo 實戰(zhàn)
下面我來演示一下如何在 springmvc 中使用 Tiles 框架业栅。
1. 添加 tiles 的依賴文件
? <groupId>org.apache.tiles
? <artifactId>tiles-extras
? <version>3.0.7
? <groupId>org.apache.tiles
? <artifactId>tiles-servlet
? <version>3.0.7
? <groupId>org.apache.tiles
? <artifactId>tiles-jsp
? <version>3.0.7
</dependency>
2. 在 WEB-INF 文件夾下添加 Tiles 的配置文件 tiles.xml?
我們可以看到在這里首先我們定義了一個 base秒咐，這個名字可以任取，只要不和 controller 里面跳轉的 string 一樣就好碘裕。因為在 controller 里面跳轉網頁的時候設定的 string 就對應了我們配置文件中的 name 屬性携取。
在這個基礎框架中我們引用了一個布局文件 template.jsp【這個我后面會給出】，然后插入了預先設定好的 header 和 footer辽社。因為這些部分對于我們的網站的每個網頁來說都是一樣的濒翻。
接下來我們定義了頁面 home恭垦，它繼承了上述的框架，并且插入了自己獨一無二的 body 部分晤斩。
<?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">
? ? <!--主布局? -->
? ? <definition name="layout" template="/WEB-INF/views/layout/template.jsp"/>
? ? <!--主布局? -->
? ? <!-- 項目 -->
? ? <!--登錄頁面-->
? ? <definition name="*" extends="layout">
? ? ? ? <put-attribute name="header" value="/WEB-INF/views/layout/header.jsp"/>
? ? ? ? <!--這里{1}/{2}是通配符的意思，{1}代表definition name="*/*"中的第一個*姆坚，{2}代表第二個*-->
? ? ? ? <put-attribute name="body" value="/WEB-INF/views/layout/{1}.jsp" />
? ? ? ? <put-attribute name="footer" value="/WEB-INF/views/layout/footer.jsp"/>
</tiles-definitions>
3. 設定布局文件 template.jsp 與 其他子頁面
template.jsp 內容如下：
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
? ? <meta charset="utf-8">
? ? <title>${pageContext.request.contextPath}
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta content="width=device-width, initial-scale=1.0" name="viewport" charset="UTF-8">
? ? <link rel="stylesheet" >
? ? <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
? ? <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
? ? <link href="${path}/css/t11.css" rel="stylesheet" type="text/css">
? ? <link href="${path}/css/base.css" rel="stylesheet" type="text/css">
? ? <link href="${path}/css/bootstrap.min.css" rel="stylesheet" type="text/css">
? ? <link href="${path}/css/Untitled-3.css" rel="stylesheet" type="text/css">
? ? <link href="${path}/css/Untitled-1base.css" rel="stylesheet" type="text/css">
? ? <link href="${path}/css/font.css" rel="stylesheet" type="text/css">
? ? <link href="${path}/css/dfghrgdffbdfb6base.css" rel="stylesheet" type="text/css">
? ? <link href="${path}/css/ghjghjghjbnmyhj.css" rel="stylesheet" type="text/css">
<tiles:insertAttribute name="header"/>
<tiles:insertAttribute name="body"/>
<tiles:insertAttribute name="footer"/>
<script src="${path}/js/jquery.min.js">
<script src="${path}/js/bootstrap.min.js">
接下來澳泵，我們需要添加其他的子網頁，讓 tiles 來拼接它們兼呵。
header.jsp：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>header</title>
</head>
<body>
<h1 style="font-weight: bold;color: silver;">Tiles</h1>
</body>
</html>
home.jsp：
<body>
hello tiles,I'm home.
</body>
footer.jsp：
<body>
? ? <div>
? ? ? ? <footer>
? ? ? ? <p class="pull-right">
? ? ? ? ? ? <a href="#">Back to top</a>
? ? ? ? </p>
? ? ? ? <p>
? ? ? ? ? ? ? 2016 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a>
? ? ? ? </p>
? ? ? ? </footer>
? ? </div>
</body>
3. 在 springmvc 配置文件中啟用 Tiles
<bean id="viewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver">
<property name="viewClass">
<value>org.springframework.web.servlet.view.tiles3.TilesView</value>
</property>
</bean>
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<property name="definitions">
<list>
<value>/WEB-INF/tiles.xml</value>
</list>
</property>
</bean>
最后我們在 controller 里面設置好跳轉就可以把項目跑起來了烹俗！
需要注意的是 controller 只能跳轉到 tiles.xml 中定義的 name，否則 tiles 不知道我們到底需要訪問什么頁面萍程。
三幢妄、我們可能會遇到的問題
1. 網頁中文亂碼
? ? 由于我們把網頁拆分成了多個子 jsp 文件，所以每個文件都是單獨經過應用服務器編譯后再去拼接茫负，這個時候必須要每個 jsp 頁面的上方添加如下標簽蕉鸳，確定其編碼格式。
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
四忍法、其他的思考
1. tiles 套頁面是否有學習的必要潮尝？
答：有的。雖然現在都流行使用 restful 的接口饿序，前后端分離開發(fā)勉失。但是這種套頁面的開發(fā)方式在短時間內還會有一定的需求。
2. tiles 項目早已停止開發(fā)原探，是否有其他替代方案乱凿？
答：Sitemesh3.0
