[无名弟子]于博韬|2017年08月14日的日报-技能树.IT修真院

发表于： 2017-08-14 21:57:34

1 1203

今天做的事：

讲小课堂

大家一起被老大关爱。。。

在Windows下的cmd中重启mysql

使用net start可查看开启的服务

然后使用net stop 服务名结束服务

再使用 net start 服务名开启服务

IDEA 搜索按钮

Ctrl+F

然后把所有静态资源变成动态资源，其中学到了一些新东西，会重点标注出来

这次的篇幅可能比较大，请耐心观看

项目结构

测试代码就不贴了

接下来进行讲解

首先使用mybatis的代码自动生成，相信前天的日报已经详细讲述了如何生成了，这里就不赘述了

接下来，只贴我使用的方法，因为基本我自己要用的方法都不是自动生成的，所以要自己写一点

先说一下BigProfession这个业务类，不是代码自动生成的，而是我特地创建用来存放通过外键进行表连接的临时表的数据的。（有点拗口，一点一点断句）

BigProfession.java

public class BigProfession {
    private Integer id;
    
    private Integer pid;
    
    private String picture;
    
    private String profession;
    
    private String introduce;
    
    private String level;
    
    private String difficult;
    
    private String growup;
    
    private Integer scarcity;
    
    private String salary1;
    
    private String salary2;
    
    private String salary3;
    
    private String tips;
    
    private Integer ppid;
    
    private String createBy;
    
    private String updateBy;
    
    private Long createAt;
    
    private Long updateAt;
    
    private String profession_name;
    
    private String introduceself;
   
   //省略setter，getter和toString方法
}

用来存放的数据是通过这个语句查出来的

<select id="getFrot_end" resultMap="BigBaseResultMap">
  SELECT
   p.id, p.pid, p.picture, p.profession, p.introduce, p.level, p.difficult, p.growUp, p.scarcity, p.salary1,
  p.salary2, p.salary3, p.tips, p.ppid, p.create_by, p.update_by, p.create_at, p.update_at,pc.profession_name,pc.introduceself
   FROM profession p,profession_classified pc
   WHERE p.ppid = pc.ppid AND p.ppid = 1
</select>

<resultMap id="BigBaseResultMap" type="com.ptteng.POJO.BigProfession" >
  <id column="id" property="id" jdbcType="INTEGER" />
  <result column="pid" property="pid" jdbcType="INTEGER" />
  <result column="picture" property="picture" jdbcType="VARCHAR" />
  <result column="profession" property="profession" jdbcType="VARCHAR" />
  <result column="introduce" property="introduce" jdbcType="VARCHAR" />
  <result column="level" property="level" jdbcType="VARCHAR" />
  <result column="difficult" property="difficult" jdbcType="VARCHAR" />
  <result column="growUp" property="growup" jdbcType="VARCHAR" />
  <result column="scarcity" property="scarcity" jdbcType="INTEGER" />
  <result column="salary1" property="salary1" jdbcType="VARCHAR" />
  <result column="salary2" property="salary2" jdbcType="VARCHAR" />
  <result column="salary3" property="salary3" jdbcType="VARCHAR" />
  <result column="tips" property="tips" jdbcType="VARCHAR" />
  <result column="ppid" property="ppid" jdbcType="INTEGER" />
  <result column="create_by" property="createBy" jdbcType="VARCHAR" />
  <result column="update_by" property="updateBy" jdbcType="VARCHAR" />
  <result column="create_at" property="createAt" jdbcType="BIGINT" />
  <result column="update_at" property="updateAt" jdbcType="BIGINT" />
  <result column="profession_name" property="profession_name" jdbcType="VARCHAR"/>
  <result column="introduceself" property="introduceself" jdbcType="VARCHAR"/>
</resultMap>

这里通过外连接条件

p.ppid = pc.ppid

来进行相关连接，再通过条件

p.ppid = 1

进行筛选

其实就是多条件查询，使用AND关键字，当然也可以使用子查询

然后又看了一下外连接查询，算是有一点相关性吧

左外连接，LEFT JION 。。。 ON

如图

右外连接，RIGHT JOIN 。。。 ON

如图

左外连接是使用左边的表作为参照表，右外连接就是用右边的。

你肯定奇怪为什么两种方式一样？

因为判断条件相同，这里条件也可以多个，使用AND连接

如下

这样就可以理解左右参照表的具体含义了。

多条件查询

再加一个条件

先不管逻辑，我们看到多条件起作用了！

然后还有一个SQL语句，也是师兄之前提到的，查找表中符合某个条件的记录有多少条

<select id="getStudying" resultType="java.lang.Integer">
  SELECT
  count(*)
  FROM student
  WHERE studying = 1
</select>

这里使用

count(*)

就是对相关的字段进行计数操作，当然count（）内的内容可以是某一具体字段，使用方法就是可以写字段，然后得出所有该字段非空的记录条数。

其他Service层、Dao层什么的代码也不写了，就是调用方法一类的。

其他的方法什么的就都比较简单了，就不贴了

直接上controller

package com.ptteng.Controller;

import com.ptteng.POJO.*;
import com.ptteng.Service.headService;
import com.ptteng.Service.learnService;
import com.ptteng.Service.professionService;
import com.ptteng.Service.studentService;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.List;

/**
 * Created by Administrator on 2017/08/12.
 */
@Controller
public class OneController {

    private static Logger logger = Logger.getLogger(OneController.class);

    @Autowired
    private headService hS;
    
    @Autowired
    private learnService lS;
    
    @Autowired
    private studentService sS;
    
    private Integer studying;
    
    private Integer working;
    
    
    @Autowired
    private professionService pS;
    
    private Integer frot_endNum;
    
    private Integer back_endNum;


    @RequestMapping(value = "/index",method = RequestMethod.GET)
    public String getAll(Model model){
        logger.info("进不进来啊！！！！！");
        //第一部分
        List<head> heads = hS.getAll();
        model.addAttribute("heads",heads);
        //第二部分
        List<learn> learns = lS.getAll();
        model.addAttribute("learns",learns);
        //第三部分
        List<student> students = sS.getExcellent();
        model.addAttribute("students",students);
        //返回在学
        studying = sS.getStudying();
        model.addAttribute("studying",studying);
        //返回工作
        working = sS.getWorking();
        model.addAttribute("working",working);
        return "cs10";
    }
    
    @RequestMapping(value = "/profession",method = RequestMethod.GET)
    public String getAnotherAll(Model model){
        //返回前端职业
        List<BigProfession> frot_ends = pS.getFrot_end();
        model.addAttribute("frot_ends",frot_ends);
        //返回后端职业
        List<BigProfession> back_ends = pS.getBack_end();
        model.addAttribute("back_ends",back_ends);
//        返回前端在学人数
        frot_endNum = pS.getFrot_endNum();
        model.addAttribute("frot_endNum",frot_endNum);
//        返回后端在学人数
        back_endNum = pS.getBack_endNum();
        model.addAttribute("back_endNum",back_endNum);
        return "cs11";
    }

}

然后把效果图发出来。

cs11页面的

然后将相关的jsp代码贴一下

cs10.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html; charset=utf-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首首首首页</title>
<link href="/cs10/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-3.3.5-dist/css/bootstrap.css">
<link href="/cs10/Untitled-3.css" rel="stylesheet" type="text/css">
<link href="/cs10/Untitled-1base.css" rel="stylesheet" type="text/css">
</head>
<body>
   <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="/cs10/imges/54537.png"></a>
                        <a href="#" target="_blank"><img alt=""  src="/cs10/imges/45678678.png"></a>
                        <a href="#" target="_blank"> <img alt=""  src="/cs10/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="/cs10/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="">首页</a></li>
                        <li><a href="../t11/index.html">职业</a></li>
                        <li><a href="">推荐</a></li>
                        <li><a href="">关于</a></li>
                    </ul>
                </div>
                        
         </div> 
   </nav>
      
   <div id="myCarousel" class="carousel slide">
      <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                    <li data-slide-to="1" data-target="#myCarousel"></li>
                    <li data-slide-to="2" data-target="#myCarousel"></li>
                    <li data-slide-to="3" data-target="#myCarousel"></li>
         </ol>
      <div class="carousel-inner">
                    <div class="item active">
                        <img alt="First slide" src="/cs10/imges/547567.jpg">
                    </div>
                    <div class="item">
                        <img alt="Second slide" src="/cs10/imges/547567.jpg">
                    </div>
                    <div class="item">
                        <img alt="Third slide" src="/cs10/imges/547567.jpg">
                    </div>
                    <div class="item">
                        <img alt="Third slide" src="/cs10/imges/547567.jpg">
                    </div>
                   <a data-slide="prev" href="#myCarousel" class="carousel-control left">
                       <i class="icon-left"><img src="/cs10/imges/54354.png"></i>
                   </a>
                   <a data-slide="next" href="#myCarousel" class="carousel-control right">
                       <i class="icon-right"><img src="/cs10/imges/4525424.png"></i>
                   </a>
        </div>            
      </div>

        
   <div class="main container">
            <!--第一部分开始-->
            <div class="main-a row">
              <c:forEach items="${heads}" var="heads" begin="0" end="2">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                    <div class="row text-center">
                        <ul class="list-unstyled">
                            <li class="col-xs-12 up-1">
                                <img alt="" src="${heads.picture}">
                            </li>
                            <li class="up-2 col-xs-12">${heads.title}</li>
                            <li class="up-3 col-xs-12">${heads.message}</li>
                        </ul>
                    </div>
                </div>
              </c:forEach>


                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 text-center">
                    <p>
                        <img src="/cs10/imges/453254312.png">${studying}<br>
                        <span class="up-3">累计在线学习人数</span>
                    </p>
                    <p>
                        <img src="/cs10/imges/453254312.png">${working}<br>
                        <span class="up-3">学员已经找到满意工作</span>
                    </p>
                </div>
            </div>

            <!--第二部分开始-->
            <div class="main-b row">
                <h3 class="text-center main-tab">如何学习</h3>
                <ul class="list-unstyled text-center">
                    <c:forEach items="${learns}" var="learns" varStatus="End" begin="0" end="7">
                    <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                            <span class="up-1 text-center">${learns.id}</span>
                            <p class="up-2">${learns.message}</p>
                        <c:if test="${!End.last}">
                            <span class="up-3">${learns.picture}</span>
                        </c:if>
                        <c:if test="${End.last}">
                            <span class="up-3 invisible">${learns.picture}</span>
                        </c:if>
                    </li>
                    </c:forEach>
                </ul>
            </div>

            <!--第三部分开始-->
            <div class="main-c row">
                <h3 class="text-center main-tab">优秀学员展示</h3>
                <ul class="list-unstyled text-center">
                    <c:forEach items="${students}" var="students" begin="0" end="3">
                    <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                        <div>
                            <img src="${students.image}">
                            <span>${students.profession}：${students.name}</span>
                            <p class="text-left">${students.introduce}</p>
                        </div>
                    </li>
                    </c:forEach>
                </ul>
            </div>

            <!--第四部分开始-->
        <div class="row main-bottom">
            <h3 class="text-center">战略合作企业</h3>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <ul class="logo">
                <li>
                   <a href=""><img src="/cs10/imges/123132.png"></a>
                </li>
                <li>
                    <a href=""> <img src="/cs10/imges/1549865.png"></a>
                </li>
                <li>
                    <a href=""> <img src="/cs10/imges/785345.png"></a>
                </li>
                <li>
                    <a href=""> <img src="/cs10/imges/1471.png"></a>
                </li>
                <li>
                    <a href="">  <img src="/cs10/imges/7861.png"></a>
                </li>
            </ul>
            </div>
        </div>
     </div>
    
    <div class="main-e">
            <h3 class="text-center main-tab ">友情链接</h3>
            <div class="container">
                <ul class="text-justify">
                    <li><a href="#">手机软件</a></li>
                    <li><a href="#">教师招聘</a></li>
                    <li><a href="#">找工作</a></li>
                    <li><a href="#">教师招聘</a></li>
                    <li><a href="#">找工作</a></li>
                    <li><a href="#">手机软件</a></li>
                    <li><a href="#">教师招聘</a></li>
                    <li><a href="#">手机软件</a></li>
                    <li><a href="#">手机软件</a></li>
                    <li><a href="#">找工作</a></li>
                    <li><a href="#">手机软件</a></li>
                    <li><a href="#">教师招聘</a></li>
                    <li><a href="#">找工作</a></li>
                    <li><a href="#">教师招聘</a></li>
                    <li><a href="#">找工作</a></li>
                    <li><a href="#">手机软件</a></li>
                    <li><a href="#">教师招聘</a></li>
                    <li><a href="#">手机软件</a></li>
                    <li><a href="#">手机软件</a></li>
                    <li><a href="#">找工作</a></li>
                </ul>
            </div>
        </div>
      
      <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="#">关于我们 </a>|<a href="#"> 联系我们 </a>|<a href="#"> 合作企业 </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="/cs10/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>
<script src="/cs10/jquery.min.js"></script>
<script  src="/cs10/bootstrap.min.js"></script>
</html>

这里

${studying}

是通过方法计算在学人数

<select id="getStudying" resultType="java.lang.Integer">
  SELECT
  count(*)
  FROM student
  WHERE studying = 1
</select>

${working}

同理

这里有两个新的知识点，一个是<c:if>标签，<c:if>标签进行判空，可以使用empty关键字

<c:if test"${empty str}">其中str是相关的变量什么的

非空可以使用<c:if test"${!empty str}">或<c:if test"${not empty str}">

不过empty只能使用在集合判空

集合判空的另一种方法

<c:if test="${mdxDimensionInfoList=='[]'}">

不过看不懂。。。

然后另一个是<c:forEach>标签，这里学到一个新的参数varStatus，可以使用它来判断所取得的数组的最后一个参数

用法如下

varStatus属性可以方便我们实现一些与行数相关的功能

先就varStatus=“status”属性常用参数总结下：

${status.index} 输出行号，从0开始。

${status.count} 输出行号，从1开始。

${status.current} 当前这次迭代的（集合中的）项

${status.first} 判断当前项是否为集合中的第一项，返回值为true或false

${status.last} 判断当前项是否为集合中的最后一项，返回值为true或false

begin、end、step分别表示：起始序号，结束序号，跳跃步伐。

其中step步长就是一次跳跃几个，比如有12345，从1开始遍历，step=2，得到的结果就是1,3,5

不过，由 varStatus 属性命名的变量并不存储当前索引值或当前元素，而是赋予 javax.servlet.jsp.jstl.core.LoopTagStatus 类的实例。

然后将cs11.jsp贴一下，也比较长

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html; charset=utf-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>职业介绍啦~</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="/cs11/t11.css" rel="stylesheet" type="text/css">
<link href="/cs11/base.css" rel="stylesheet" type="text/css">
</head>

<body>
<header>
    <div class="top container">
        <p class="hidden-xs">客服热线：010-594-78634</p>
        <img src="/cs11/imges/12321.gif">
    </div>

    <div role="navigation" class="nav1 navbar navbar-default">
        <div class="container">
            <div class="header-logo">
                <div class="logo-middle"><img src="/cs11/imges/logo.png"></div>
            </div>
            <div class="navbar-header marginTop">
                <button data-target="#example-navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div id="example-navbar-collapse" class=" collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <a href=""><li>首 页</li></a>
                    <a href=""><li class="border">职 业</li></a>
                    <a href=""><li>推 荐</li></a>
                    <a href=""><li>关 于</li></a>
                </ul>
            </div>
        </div>

    </div>

</header>

    <div class="container">

        <div class="nav-title">首页&gt;职业</div>
        <div class="nav-bar">
            <span class="">方向：</span>
            <a class="nav-bar-a a-selected" href="">全部</a>
            <a class="nav-bar-a" href="">前端开发</a>
            <a class="nav-bar-a" href="">后端开发</a>
            <a class="nav-bar-a" href="">移动开发</a>
            <a class="nav-bar-a" href="">整站开发</a>
            <a class="nav-bar-a" href="">运营维护</a>
        </div>




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

        <div class="row">
            <c:forEach items="${frot_ends}" var="frot_ends">
            <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="${frot_ends.picture}"></div>
                        <div class="text">
                            <h4 class="">${frot_ends.profession}</h4>
                            <p class="text-present">${frot_ends.introduce}</p>
                        </div>
                    </div>

                    <div class="warp-class2">
                        <div class="warp-class2-text">
                            <div class="iconfont text-padding">门槛 <img src="${frot_ends.level}"></div>
                        </div>
                        <div class="warp-class2-text">
                            <div class="iconfont text-padding text-border-left">难易程度 <img src="${frot_ends.difficult}"><img src="${frot_ends.difficult}"></div>
                        </div>
                    </div>
                    <div class="warp-class2">
                        <div class="warp-class2-text">
                            <div class="iconfont text-padding">成长周期 <span class="iconfont-color">${frot_ends.growup}</span>年</div>
                        </div>
                        <div class="warp-class2-text">
                            <div class="iconfont text-padding text-border-left">稀缺程度 <span class="iconfont-color">${frot_ends.scarcity}</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">${frot_ends.salary1}</div>
                            </div>
                            <div class="rightWarp-class">
                                <div class="rightWarp-year">1-2年</div>
                                <div class="rightWarp-wages">${frot_ends.salary2}</div>
                            </div>
                            <div class="rightWarp-class border-bottom">
                                <div class="rightWarp-year">2-3年</div>
                                <div class="rightWarp-wages">${frot_ends.salary3}</div>
                            </div>
                        </div>
                    </div>

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

                    <div class="flip-container">
                        <p class="flip-title">${frot_ends.profession_name}</p>
                        <p class="flip-text">${frot_ends.introduceself}</p>
                    </div>
                </div>

            </div>
            </c:forEach>

        </div>

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

        <div class="row">
            <c:forEach items="${back_ends}" var="back_ends">
            <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="${back_ends.picture}"></div>
                        <div class="text">
                            <h4 class="">${back_ends.profession}</h4>
                            <p class="text-present">${back_ends.introduce}</p>
                        </div>
                    </div>

                    <div class="warp-class2">
                        <div class="warp-class2-text">
                            <div class="iconfont text-padding">门槛 <img src="${back_ends.level}"></div>
                        </div>
                        <div class="warp-class2-text">
                            <div class="iconfont text-padding text-border-left">难易程度 <img src="${back_ends.difficult}"><img src="${back_ends.difficult}"></div>
                        </div>
                    </div>
                    <div class="warp-class2">
                        <div class="warp-class2-text">
                            <div class="iconfont text-padding">成长周期 <span class="iconfont-color">${back_ends.growup}</span>年</div>
                        </div>
                        <div class="warp-class2-text">
                            <div class="iconfont text-padding text-border-left">稀缺程度 <span class="iconfont-color">${back_ends.scarcity}</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">${back_ends.salary1}</div>
                            </div>
                            <div class="rightWarp-class">
                                <div class="rightWarp-year">1-2年</div>
                                <div class="rightWarp-wages">${back_ends.salary2}</div>
                            </div>
                            <div class="rightWarp-class border-bottom">
                                <div class="rightWarp-year">2-3年</div>
                                <div class="rightWarp-wages">${back_ends.salary3}</div>
                            </div>
                        </div>
                    </div>

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

                    <div class="flip-container">
                        <p class="flip-title">${back_ends.profession_name}</p>
                        <p class="flip-text">${back_ends.introduceself}</p>
                    </div>
                </div>

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

 <!--footer-->
<footer class="footer">
    <div class="container height">
        <div class="row">
            <div class="text-left col-sm-4">
                <span>技能树 &mdash; 改变你我</span>
                <p class="bottom">关于我们 | 联系我们 | 合作企业</p>
            </div>
            <div class="text-center col-sm-4">
                <p>旗下网站</p>
                <span>草船云孵化器     最强IT特训营</span>
                <span>葡萄藤轻游戏     桌游精灵</span>
            </div>
            <div class="text-right col-sm-4">
                <p>微信公众号</p>
                <img src="imges/2524.jpg">
            </div>
        </div>

    </div>

    <div class="footer-bottom">
        Copyright &copy; 2015技能树 www.jnshu.com  All Rights Reserved | 京ICP
    </div>
</footer>

</body>
</html>