今天完成的事情：

继续的t11页面，又发现个问题

我之前是list的全部内容，没有分哪个是前端哪个是后端，添加了两条数据之后发现这样弄不能分开，只能写在一个<c:forEach>里，必然不行

之后改成了两个list，分别统计前端和后端的职位，各管各的

List<Profession> getBefore();

List<Profession> getAfter();

这样就简单了，只要查询对应的id就可以选出哪个是前端哪个是后端了

<select id="getBefore" resultMap="BaseResultMap">
  SELECT * FROM profession WHERE id =1
</select>
<select id="getAfter" resultMap="BaseResultMap">
  SELECT * FROM profession WHERE id =2
</select>

重新设计了jsp页面

<div class="caption">
    <h4>前端开发方向</h4>
</div>

<div class="row">
    <c:forEach items="${beforeEnd}" var="beforeEnd">
        <div class="col-md-4 col-sm-6 col-xs-12 top-margin">

            <div class="warp-border">
                <div class="clearfix">
                    <div class="icon-people"><img src="${beforeEnd.picture}"></div>
                    <div class="text">
                        <h4 class="">${beforeEnd.profession}</h4>
                        <p class="text-present">${beforeEnd.introduce}</p>
                    </div>
                </div>

                <div class="warp-class2">
                    <div class="warp-class2-text">
                        <div class="iconfont text-padding">门槛 <img src="${beforeEnd.level}"></div>
                    </div>
                    <div class="warp-class2-text">
                        <div class="iconfont text-padding text-border-left">难易程度 <img src="${beforeEnd.difficulty}"><img src="${beforeEnd.difficulty}"></div>
                    </div>
                </div>
                <div class="warp-class2">
                    <div class="warp-class2-text">
                        <div class="iconfont text-padding">成长周期 <span class="iconfont-color">${beforeEnd.period}</span>年</div>
                    </div>
                    <div class="warp-class2-text">
                        <div class="iconfont text-padding text-border-left">稀缺程度 <span class="iconfont-color">${beforeEnd.need}</span>家公司需要</div>
                    </div>
                </div>

                <div class="warp-class2">
                    <div class="leftWarp">
                        薪资待遇
                    </div>
                    <div class="rightWarp">
                        <div class="rightWarp-class">
                            <div class="rightWarp-year">0-1年</div>
                            <div class="rightWarp-wages">${beforeEnd.money1}</div>
                        </div>
                        <div class="rightWarp-class">
                            <div class="rightWarp-year">1-3年</div>
                            <div class="rightWarp-wages">${beforeEnd.money2}</div>
                        </div>
                        <div class="rightWarp-class border-bottom">
                            <div class="rightWarp-year">3-5年</div>
                            <div class="rightWarp-wages">${beforeEnd.money3}</div>
                        </div>
                    </div>
                </div>

                <div class="warp-class2">
                    <b class="text-b">有${css}人正在学</b>
                </div>
                <div class="warp-class2">
                    <p class="text-p">${beforeEnd.tips}</p>
                </div>

                <div class="flip-container">
                    <p class="flip-title">${beforeEnd.hiddenName}</p>
                    <p class="flip-text">${beforeEnd.hiddenIntroduce}</p>
                </div>
            </div>

        </div>
    </c:forEach>

</div>




<div class="caption">
    <h4>后端开发方向</h4>
</div>

<div class="row padding-bottom">
<c:forEach items="${afterEnd}" var="afterEnd">
    <div class="col-md-4 col-sm-6 col-xs-12 top-margin">

        <div class="warp-border">
            <div class="clearfix">
                <div class="icon-people"><img src="${afterEnd.picture}"></div>
                <div class="text">
                    <h4 class="">${afterEnd.profession}</h4>
                    <p class="text-present">${afterEnd.introduce}</p>
                </div>
            </div>

            <div class="warp-class2">
                <div class="warp-class2-text">
                    <div class="iconfont text-padding">门槛 <img src="${afterEnd.level}"></div>
                </div>
                <div class="warp-class2-text">
                    <div class="iconfont text-padding text-border-left">难易程度 <img src="${afterEnd.difficulty}"><img src="${afterEnd.difficulty}"></div><img src="${afterEnd.difficulty}"><img src="${afterEnd.difficulty}">
                </div>
            </div>
            <div class="warp-class2">
                <div class="warp-class2-text">
                    <div class="iconfont text-padding">成长周期 <span class="iconfont-color">${afterEnd.period}</span>年</div>
                </div>
                <div class="warp-class2-text">
                    <div class="iconfont text-padding text-border-left">稀缺程度 <span class="iconfont-color">${afterEnd.need}</span>家公司需要</div>
                </div>
            </div>

            <div class="warp-class2">
                <div class="leftWarp">
                    薪资待遇
                </div>
                <div class="rightWarp">
                    <div class="rightWarp-class">
                        <div class="rightWarp-year">0-1年</div>
                        <div class="rightWarp-wages">${afterEnd.money1}</div>
                    </div>
                    <div class="rightWarp-class">
                        <div class="rightWarp-year">1-3年</div>
                        <div class="rightWarp-wages">${afterEnd.money2}</div>
                    </div>
                    <div class="rightWarp-class border-bottom">
                        <div class="rightWarp-year">3-5年</div>
                        <div class="rightWarp-wages">${afterEnd.money3}</div>
                    </div>
                </div>
            </div>

            <div class="warp-class2">
                <b class="text-b">有${java}人正在学</b>
            </div>
            <div class="warp-class2">
                <p class="text-p">${afterEnd.tips}</p>
            </div>

            <div class="flip-container">
                <p class="flip-title">${afterEnd.hiddenName}</p>
                <p class="flip-text">${afterEnd.hiddenIntroduce}</p>
            </div>
        </div>

    </div>
</c:forEach>
    </div>

展示的结果就特别完美了

贴这么长的代码我都不好意思了..

tiles框架，还是蛮简单的

一般来说一个网站会有很多不同界面，这些界面之间有很多结构都是一样的，比如title，footer一般都一样，就中间内容不一样。tiles框架就可以把这些页面拆成一份一份的，把相同的东西拿出来做成一个个固定的页面，然后做新网页的时候就可以把它们拼起来，省时省力。

举个栗子，比如腾讯网，有100w个jsp页面（肯定不止），它们的边框和底部都是相同的。有一天麻花疼突然抽风决定要在所有的页面上加上亡者农药的广告，而且必须一个小时内弄完。这时候怎么办，一个一个改估计腾讯黄了也改不完。tiles技术就是解决这种问题的，把每个网页相同的东西拿出来做成一个单独的页面，其他的jsp页面都引用它，然后只需要修改这一个页面就可以完成无限个页面的修改了。

首先添加依赖

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</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>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-extras</artifactId>
    <version>3.0.7</version>
</dependency>

这几个就够了，目前是

布局文件我还是用的t10和t11，在它们的基础上进行修改。选出其中相同的部分，这里边就是title和footer，抽出html代码，写成单独的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<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="${pageContext.request.contextPath}/t10/imges/54537.png"></a>
                    <a href="#" target="_blank"><img alt=""  src="${pageContext.request.contextPath}/t10/imges/45678678.png"></a>
                    <a href="#" target="_blank"> <img alt=""  src="${pageContext.request.contextPath}/t10/imges/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="${pageContext.request.contextPath}/t10/imges/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="${pageContext.request.contextPath}/home">首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/job">职业</a></li>
                    <li><a href="">推荐</a></li>
                    <li><a href="">关于</a></li>
                </ul>
            </div>

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<body>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-4 col-md-5 col-lg-5 up-1">
                <p><a>技能树-改变你我</a></p>
                <p><a href="http://www.jnshu.com/material/us">关于我们 </a>|<a href="http://www.jnshu.com/material/contact"> 联系我们 </a>|<a href="http://www.jnshu.com/partner"> 合作企业 </a></p>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-5 col-lg-5 up-2">
                <p>旗下网站</p>
                <ul class="list-inline">
                    <li><a href="#">草船云孵化器</a></li>
                    <li><a href="#">最强IT特训营</a><br></li>
                </ul>
                <ul class="list-inline">
                    <li><a href="#">葡萄藤轻游戏</a></li>
                    <li><a href="#">桌游精灵</a></li>
                </ul>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 up-3">
                <p>微信公众平台</p>
                <img alt="" src="${pageContext.request.contextPath}/t10/imges/2524.jpg">
            </div>
        </div>
    </div>
    <div class="container-fluid text-center">
        <p>Copyright &copy; 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1</p>
    </div>
</div>
</body>

新建一个布局配置文件tiles.xml

<tiles-definitions>
    <definition name="task4-head" template="/WEB-INF/pages/module/header.jsp">
        <put-attribute name="cssresources" value="/WEB-INF/pages/module/css.jsp"/>
    </definition>

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

    <definition name="task4-footer" template="/WEB-INF/pages/module/footer.jsp">
        <put-attribute name="jsresources" value="/WEB-INF/pages/module/js.jsp" />
    </definition>

    <definition name="task4-f" extends="task4-footer">
        <put-attribute name="title" value="首页" />
    </definition>
</tiles-definitions>

一个<definition>中可以通过<put-attribute>嵌套另一个<definition>，或者通过extends继承另一个<difinition>

在所有的jsp页面中，都可以通过<tiles:insertDefinition>标签类引入该模板的内容

<header>
    <tiles:insertDefinition name="task4-head" />
</header>

</body>
<tiles:insertDefinition name="task4-footer" />
</html>

然后还要为tiles配置视图解析器，在spring-servlet.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/tiles.xml</value>
        </list>
    </property>
</bean>

还可以把css和js的东西也提取出来，通过在模块jsp中配置<tiles:insertAttribute>来完成替换

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<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="${pageContext.request.contextPath}/t11/t11.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/t11/base.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/t10/Untitled-3.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/t10/Untitled-1base.css" rel="stylesheet" type="text/css">

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/t10/jquery.min.js"></script>
<script  src="${pageContext.request.contextPath}/t10/bootstrap.min.js"></script>

在header中加入

<tiles:insertAttribute name="cssresources"/>

在footer中加入

<tiles:insertAttribute name="jsresources" />

好了，运行一下看看

可以的。还有个动态定义模板的我再看看

新建一个布局

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@page language="java" contentType="text/html;charset=utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title><tiles:insertAttribute name="header"/></title>
</head>
<body>
<div id="body_ccontainer">
    <tiles:insertAttribute name="body" />
</div>
<tiles:insertAttribute name="footer" />
</body>

视图解析器什么的已经配好了，写一下tiles.xml

<!-- 测试用的 -->
<definition name="baseTemplate">
    <put-attribute name="title" value="" />
    <put-attribute name="header" value="/WEB-INF/pages/views/header.jsp" />
    <put-attribute name="body" value="/WEB-INF/pages/views/body.jsp" />
    <put-attribute name="footer" value="/WEB-INF/pages/views/footer.jsp" />
</definition>
<definition name="mainSimpleTemplate" template="/WEB-INF/test.jsp" extends="baseTemplate" ></definition>

这里每一个小块我都写的很简单，不看了，直接controller

一个应该会卡住人的问题，controller里返回什么，我找的这个教程里直接就指出了

返回jsp页面会404

@RequestMapping(value = "/template", method = RequestMethod.GET)
public String Test() {
    return "mainSimpleTemplate";

访问一下

有个小问题，header跑上边去了而且..

设计失误，我以为header里边还要写<p>这种呢，原来不用

代码上传到服务器上跑一下看看吧

额，又是ssl连接错误，加上&amp;useSSL=false就可以了

mysql默认的数据通道是不加密的，如果设置端口为ssl，可以为数据通道加密。

我在服务器查了一下mysql有没有ssl加密

这个Empty才是最骚的，我这一直

javax.net.ssl.SSLHandshakeException: Failed to negotiate the use of secure

它还说没有ssl，僵硬

明天计划的事情：

tiles收尾，别的看情况

遇到的问题：

tiles还有点问题要弄一下

收获：

tiles框架使用，又debug好久

禅道链接：http://task.ptteng.com/zentao/project-task-286.html