收获：

学习tiles

tiles是为了解决当有大量的页面，而且页面有部分板块的重复，当实现页面或者修改页面时，大量重复性劳动的避免

1. pom.xml的配置

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

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

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

2. spring-mvc.xml的配置

    <!-- tiles视图解释类 -->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass">
            <value>
                org.springframework.web.servlet.view.tiles3.TilesView
            </value>
        </property>
        <property name="order" value="1" />
    </bean>
    <!-- tiles配置路径 -->
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
        <property name="definitions">
            <list>
                <value>/WEB-INF/views/core/test-tiles.xml</value>
            </list>
        </property>
    </bean>
</beans>

3. 选出重复的页面进行独立设计

4.在相关页面代码拆分出引入的css,jss和html代码

CSS

<!doctype html>
<meta charset="utf-8">
<title>t10</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" charset="UTF-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="/statics/css/task10/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/statics/css/task10/Untitled-3.css" rel="stylesheet" type="text/css">
<link href="/statics/css/task10/Untitled-1base.css" rel="stylesheet" type="text/css">

html

<head>
    <tiles:insertAttribute name="cssresources" />
<div class="container  hidden-xs">
    <div class="row header-top">
        <p class="col-xs-12 col-sm-6 col-md-6 col-lg-6">客服电话:010-594-78634</p>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 text-right">
            <div>
                <a href="#" target="_blank"> <img alt=""  src="image/task11/54537.png"></a>
                <a href="#" target="_blank"><img alt=""  src="image/task11/45678678.png"></a>
                <a href="#" target="_blank"> <img alt=""  src="image/task11/54375483543.png"></a>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">
                <img src="image/task11/logo.png" alt="Brand" class="img-responsive">
            </a>
            <button data-target="#open-nav" data-toggle="collapse" class="navbar-toggle btn-primary collapsed" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="open-nav" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav navbar-right text-center list-inline">
                <li><a href="">首页</a></li>
                <li><a href="/profession">职业</a></li>
                <li><a href="">推荐</a></li>
                <li><a href="">关于</a></li>
            </ul>
        </div>

    </div>
</nav>
</head>

5. 配置tiles.xml文件

<tiles-definitions>
    <!-- tiles基础模板 -->
    <definition name="t10-head" template="/WEB-INF/views/core/task4-header.jsp">
        <put-attribute name="cssresources" value="/WEB-INF/views/core/task4-t10-css.jsp" />
    </definition>

    <definition name="test" extends="t10-head">
        <put-attribute name="title" value="首页" />
    </definition>

</tiles-definitions>

6.使用页面

<%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
</head>
<body>
    <tiles:insertDefinition name="t10-head" />
</body>
</html>