JavaWeb黑马旅游网-学习笔记10【项目代码】

• Java后端 学习路线 笔记汇总表【黑马程序员】

1. JavaWeb黑马旅游网-学习笔记01【准备工作】
2. JavaWeb黑马旅游网-学习笔记02【注册功能】
3. JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】
4. JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】
5. JavaWeb黑马旅游网-学习笔记05【分类数据展示功能】
6. JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】
7. JavaWeb黑马旅游网-学习笔记07【旅游线路查询】
8. JavaWeb黑马旅游网-学习笔记08【旅游线路详情】
9. JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】
10. JavaWeb黑马旅游网-学习笔记10【项目代码】

粘贴部分代码

   

 

目录

package cn.itcast.travel.dao;

package cn.itcast.travel.dao.impl;

CategoryDaoImpl.java

package cn.itcast.travel.domain;

package cn.itcast.travel.service;

package cn.itcast.travel.service.impl;

package cn.itcast.travel.util;

package cn.itcast.travel.web;

package cn.itcast.travel.web.filter;

CharchaterFilter.java

package cn.itcast.travel.web.servlet;

ActiveUserServlet.java

resources

druid.properties

jedis.properties

web

favoriterank.html

footer.html

header.html

index.html

login.html

myfavorite.html

register.html

register_ok.html

route_detail.html

route_list.html

---

package cn.itcast.travel.dao;

package cn.itcast.travel.dao.impl;

CategoryDaoImpl.java

package cn.itcast.travel.dao.impl;

import cn.itcast.travel.dao.CategoryDao;
import cn.itcast.travel.domain.Category;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

import java.util.List;

public class CategoryDaoImpl implements CategoryDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public List<Category> findAll() {
        String sql = "select * from tab_category ";
        return template.query(sql, new BeanPropertyRowMapper<Category>(Category.class));
    }
}

package cn.itcast.travel.domain;

package cn.itcast.travel.service;

package cn.itcast.travel.service.impl;

package cn.itcast.travel.util;

package cn.itcast.travel.web;

package cn.itcast.travel.web.filter;

CharchaterFilter.java

package cn.itcast.travel.web.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 解决全站乱码问题，处理所有的请求
 */
@WebFilter("/*")
public class CharchaterFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse rep, FilterChain filterChain) throws IOException, ServletException {
        //将父接口转为子接口
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) rep;
        //获取请求方法
        String method = request.getMethod();
        //解决post请求中文数据乱码问题
        if (method.equalsIgnoreCase("post")) {
            request.setCharacterEncoding("utf-8");
        }
        //处理响应乱码
        response.setContentType("text/html;charset=utf-8");
        filterChain.doFilter(request, response);
    }

    @Override
    public void destroy() {
    }
}

package cn.itcast.travel.web.servlet;

ActiveUserServlet.java

package cn.itcast.travel.web.servlet;

import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/activeUserServlet")
public class ActiveUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取激活码
        String code = request.getParameter("code");
        if (code != null) {
            //2.调用service完成激活
            UserService service = new UserServiceImpl();
            boolean flag = service.active(code);
            //3.判断标记
            String msg = null;
            if (flag) {
                //激活成功
                msg = "激活成功，请<a href='login.html'>登录</a>";
            } else {
                //激活失败
                msg = "激活失败，请联系管理员!";
            }
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write(msg);
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

resources

druid.properties

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql:///travel
username=root
password=root
initialSize=5
maxActive=10
maxWait=3000

jedis.properties

host=127.0.0.1
port=6379
maxTotal=50
maxIdle=10

web

favoriterank.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>收藏排行榜</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/ranking-list.css">
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<div class="contant">
    <div class="shaixuan">
        <span>线路名称</span>
        <input type="text">
        <span>金额</span>
        <input type="text">~<input type="text">
        <button>搜索</button>
    </div>
    <div class="list clearfix">
        <ul>
            <li>
                <span class="num one">1</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
            <li>
                <span class="num two">2</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
            <li>
                <span class="num">3</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
            <li>
                <span class="num">4</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
            <li>
                <span class="num">5</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
            <li>
                <span class="num">6</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
            <li>
                <span class="num">7</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
            <li>
                <span class="num">8</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
        </ul>
    </div>
    <div class="pageNum">
        <ul>
            <li><a href="">首页</a></li>
            <li class="threeword"><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li class="threeword"><a href="javascript:;">下一页</a></li>
            <li class="threeword"><a href="javascript:;">末页</a></li>
        </ul>
    </div>
</div>
<!--导入底部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>

footer.html

<!-- 尾部 start-->
<footer id="footer">
    <div class="why_select">
        <dl>
            <dt class="fl">
                <img src="images/icon_1.jpg" alt="">
            </dt>
            <dd>
                <h1>产品齐全</h1>
                <h2>产品全自主选，随心买</h2>
            </dd>
        </dl>
        <dl>
            <dt class="fl">
                <img src="images/icon_2.jpg" alt="">
            </dt>
            <dd>
                <h1>便利快捷</h1>
                <h2>24小时不打烊，随时买</h2>
            </dd>
        </dl>
        <dl>
            <dt class="fl">
                <img src="images/icon_3.jpg" alt="">
            </dt>
            <dd>
                <h1>安全支付</h1>
                <h2>知名支付工具，放心买</h2>
            </dd>
        </dl>
        <dl>
            <dt class="fl">
                <img src="images/icon_4.jpg" alt="">
            </dt>
            <dd style="margin-right:0px;">
                <h1>贴心服务</h1>
                <h2>客服全年无休，安心买</h2>
            </dd>
        </dl>
    </div>
    <div class="company">
        <p>江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</p>
    </div>
</footer>

header.html

<!-- 头部 start -->
<script src="js/getParameter.js"></script>
<script>
    $(function () {
        //查询用户信息
        $.get("user/findOne", {}, function (data) {
            //{uid:1,name:'李四'}
            var msg = "欢迎回来，" + data.name;
            $("#span_username").html(msg);
        });
        //查询分类数据
        $.get("category/findAll", {}, function (data) {
            //[{cid:1,cname:国内游},{},{}]
            var lis = '<li class="nav-active"><a href="index.html">首页</a></li>';
            //遍历数组,拼接字符串(<li>)
            for (var i = 0; i < data.length; i++) {
                var li = '<li><a href="route_list.html?cid=' + data[i].cid + '">' + data[i].cname + '</a></li>';
                lis += li;
            }
            //拼接收藏排行榜的li,<li><a href="favoriterank.html">收藏排行榜</a></li>
            lis += '<li><a href="favoriterank.html">收藏排行榜</a></li>';
            //将lis字符串，设置到ul的html内容中
            $("#category").html(lis);
        });
        //给搜索按钮绑定单击事件，获取搜索输入框的内容
        $("#search-button").click(function () {
            //线路名称
            var rname = $("#search_input").val();
            var cid = getParameter("cid");
            // 跳转路径 http://localhost/travel/route_list.html?cid=5，拼接上rname=xxx
            location.href = "http://localhost/travel/route_list.html?cid=" + cid + "&rname=" + rname;
        });
    });
</script>
<header id="header">
    <div class="top_banner">
        <img src="images/top_banner.jpg" alt="">
    </div>
    <div class="shortcut">
        <!-- 未登录状态  -->
        <div class="login_out">
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
        </div>
        <!-- 登录状态  -->
        <div class="login">
            <span id="span_username"></span>
            <a href="myfavorite.html" class="collection">我的收藏</a>
            <a href="javascript:location.href='exitServlet';">退出</a>
        </div>
    </div>
    <div class="header_wrap">
        <div class="topbar">
            <div class="logo">
                <a href="/"><img src="images/logo.jpg" alt=""></a>
            </div>
            <div class="search">
                <input name="" id="search_input" type="text" placeholder="请输入路线名称" class="search_input"
                       autocomplete="off">
                <a href="javascript:;" id="search-button" class="search-button">搜索</a>
            </div>
            <div class="hottel">
                <div class="hot_pic">
                    <img src="images/hot_tel.jpg" alt="">
                </div>
                <div class="hot_tel">
                    <p class="hot_time">客服热线(9:00-6:00)</p>
                    <p class="hot_num">400-618-9090</p>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- 头部 end -->
<!-- 首页导航 -->
<div class="navitem">
    <ul id="category" class="nav">
        <!--<li class="nav-active"><a href="index.html">首页</a></li>
        <li><a href="route_list.html">门票</a></li>
        <li><a href="route_list.html">酒店</a></li>
        <li><a href="route_list.html">香港车票</a></li>
        <li><a href="route_list.html">出境游</a></li>
        <li><a href="route_list.html">国内游</a></li>
        <li><a href="route_list.html">港澳游</a></li>
        <li><a href="route_list.html">抱团定制</a></li>
        <li><a href="route_list.html">全球自由行</a></li>
        <li><a href="favoriterank.html">收藏排行榜</a></li>-->
    </ul>
</div>

index.html

<!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>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- banner start-->
<section id="banner">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/banner_1.jpg" alt="">
            </div>
            <div class="item">
                <img src="images/banner_2.jpg" alt="">
            </div>
            <div class="item">
                <img src="images/banner_3.jpg" alt="">
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>
<!-- banner end-->
<!-- 旅游 start-->
<section id="content">
    <!-- 黑马精选start-->
    <section class="hemai_jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="images/icon_5.jpg" alt="">
                <span>黑马精选</span>
            </div>
            <!-- Nav tabs -->
            <ul class="jx_tabs" role="tablist">
                <li role="presentation" class="active">
                    <span></span>
                    <a href="#popularity" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a>
                </li>
                <li role="presentation">
                    <span></span>
                    <a href="#newest" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a>
                </li>
                <li role="presentation">
                    <span></span>
                    <a href="#theme" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a>
                </li>
            </ul>
        </div>
        <div class="jx_content">
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="popularity">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_4.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_4.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_4.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_4.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="newest">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_1.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_1.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_1.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_1.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="theme">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_2.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_2.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_2.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:;">
                                <img src="images/jiangxuan_2.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 黑马精选end-->
    <!-- 国内游 start-->
    <section class="hemai_jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="images/icon_6.jpg" alt="">
                <span>国内游</span>
            </div>
        </div>
        <div class="heima_gn">
            <div class="guonei_l">
                <img src="images/guonei_1.jpg" alt="">
            </div>
            <div class="guone_r">
                <div class="row">
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 国内游 end-->
    <!-- 境外游 start-->
    <section class="hemai_jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="images/icon_7.jpg" alt="">
                <span>境外游</span>
            </div>
        </div>
        <div class="heima_gn">
            <div class="guonei_l">
                <img src="images/jiangwai_1.jpg" alt="">
            </div>
            <div class="guone_r">
                <div class="row">
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="route_detail.html">
                            <img src="images/jiangxuan_4.jpg" alt="">
                            <div class="has_border">
                                <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 境外游 end-->
</section>
<!-- 旅游 end-->
<!--导入底部-->
<div id="footer"></div>
</body>
</html>

login.html

<!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 rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--导入angularJS文件-->
    <!--<script src="js/angular.min.js"></script>-->
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //1.给登录按钮绑定单击事件
            $("#btn_sub").click(function () {
                //2.发送ajax请求，提交表单数据
                $.post("user/login", $("#loginForm").serialize(), function (data) {
                    //data : {flag:false,errorMsg:''}
                    if (data.flag) {
                        //登录成功
                        location.href = "index.html";
                    } else {
                        //登录失败
                        $("#errorMsg").html(data.errorMsg);
                    }
                });
            });
        });
        //3.处理响应结果
    </script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<section id="login_wrap">
    <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">
    </div>
    <div class="login-box">
        <div class="title">
            <img src="images/login_logo.png" alt="">
            <span>欢迎登录黑马旅游账户</span>
        </div>
        <div class="login_inner">
            <!--登录错误提示消息-->
            <div id="errorMsg" class="alert alert-danger"></div>
            <form id="loginForm" action="" method="post" accept-charset="utf-8">
                <input type="hidden" name="action" value="login"/>
                <input name="username" type="text" placeholder="请输入账号" autocomplete="off">
                <input name="password" type="text" placeholder="请输入密码" autocomplete="off">
                <div class="verify">
                    <input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
                    <span><img src="checkCode" alt="" onclick="changeCheckCode(this)"></span>
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src = "checkCode?" + new Date().getTime();
                        }
                    </script>
                </div>
                <div class="submit_btn">
                    <button type="button" id="btn_sub">登录</button>
                    <div class="auto_login">
                        <input type="checkbox" name="" class="checkbox">
                        <span>自动登录</span>
                    </div>
                </div>
            </form>
            <div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>
        </div>
    </div>
</section>
<!--引入尾部-->
<div id="footer"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>

myfavorite.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>黑马旅游网-我的收藏</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        .tab-content .row > div {
            margin-top: 16px;
        }

        .tab-content {
            margin-bottom: 36px;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 排行榜 start-->
<section id="content">
    <section class="hemai_jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="images/icon_5.jpg" alt="">
                <span>我的收藏</span>
            </div>
        </div>
        <div class="jx_content">
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="route_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="jroute_detail.html">
                                <img src="images/collection_pic.jpg" alt="">
                                <div class="has_border">
                                    <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                    <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pageNum">
            <ul>
                <li><a href="">首页</a></li>
                <li class="threeword"><a href="#">上一页</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
                <li><a href="#">10</a></li>
                <li class="threeword"><a href="javascript:;">下一页</a></li>
                <li class="threeword"><a href="javascript:;">末页</a></li>
            </ul>
        </div>
    </section>
</section>
<!-- 排行榜 end-->
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        /*
            表单校验：
                1.用户名：单词字符，长度8到20位
                2.密码：单词字符，长度8到20位
                3.email：邮件格式
                4.姓名：非空
                5.手机号：手机号格式
                6.出生日期：非空
                7.验证码：非空
         */
        //校验用户名
        //单词字符，长度8到20位
        function checkUsername() {
            //1.获取用户名值
            var username = $("#username").val();
            //2.定义正则
            var reg_username = /^\w{8,20}$/;
            //3.判断，给出提示信息
            var flag = reg_username.test(username);
            if (flag) {
                //用户名合法
                $("#username").css("border", "");
            } else {
                //用户名非法,加一个红色边框
                $("#username").css("border", "1px solid red");
            }
            return flag;
        }

        //校验密码
        function checkPassword() {
            //1.获取密码值
            var password = $("#password").val();
            //2.定义正则
            var reg_password = /^\w{8,20}$/;
            //3.判断，给出提示信息
            var flag = reg_password.test(password);
            if (flag) {
                //密码合法
                $("#password").css("border", "");
            } else {
                //密码非法,加一个红色边框
                $("#password").css("border", "1px solid red");
            }
            return flag;
        }

        //校验邮箱
        function checkEmail() {
            //1.获取邮箱
            var email = $("#email").val();
            //2.定义正则		[email protected]
            var reg_email = /^\w+@\w+\.\w+$/;
            //3.判断
            var flag = reg_email.test(email);
            if (flag) {
                $("#email").css("border", "");
            } else {
                $("#email").css("border", "1px solid red");
            }
            return flag;
        }

        $(function () {
            //当表单提交时，调用所有的校验方法
            $("#registerForm").submit(function () {
                //1.发送数据到服务器
                if (checkUsername() && checkPassword() && checkEmail()) {
                    //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123
                    $.post("user/regist", $(this).serialize(), function (data) {
                        //处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}
                        if (data.flag) {
                            //注册成功，跳转成功页面
                            location.href = "register_ok.html";
                        } else {
                            //注册失败,给errorMsg添加提示信息
                            $("#errorMsg").html(data.errorMsg);
                        }
                    });
                }
                //2.不让页面跳转
                return false;
                //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
            });
            //当某一个组件失去焦点是，调用对应的校验方法
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
        });
    </script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_form_center">
            <div id="errorMsg" style="color:red;text-align: center"></div>
            <!--注册表单-->
            <form id="registerForm" action="user">
                <!--提交处理请求的标识符-->
                <input type="hidden" name="action" value="register">
                <table style="margin-top: 25px;">
                    <tr>
                        <td class="td_left">
                            <label for="username">用户名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="username" name="username" placeholder="请输入账号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="password">密码</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="password" name="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="email">Email</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="email" name="email" placeholder="请输入Email">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="name">姓名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="telephone">手机号</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="sex">性别</label>
                        </td>
                        <td class="td_right gender">
                            <input type="radio" id="sex" name="sex" value="男" checked> 男
                            <input type="radio" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="birthday">出生日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="check">验证码</label>
                        </td>
                        <td class="td_right check">
                            <input type="text" id="check" name="check" class="check">
                            <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
                            <script type="text/javascript">
                                //图片点击事件
                                function changeCheckCode(img) {
                                    img.src = "checkCode?" + new Date().getTime();
                                }
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        </td>
                        <td class="td_right check">
                            <input type="submit" class="submit" value="注册">
                            <span id="msg" style="color: red;"></span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_form_right">
            <p>
                已有账号？
                <a href="#">立即登录</a>
            </p>
        </div>
    </div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>

register_ok.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div style="text-align:center;red:yellow;font-weight:bold;height:150px;padding-top:100px;font-size:30px;">
    <h4>恭喜，注册成功！请登录您的注册邮箱进行激活您的账号，激活后才能登录。</h4>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>

route_detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>路线详情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 详情 start -->
<div class="wrap">
    <div class="bread_box">
        <a href="/">首页</a>
        <span> &gt;</span>
        <a href="#">国内游</a><span> &gt;</span>
        <a href="#">全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</a>
    </div>
    <div class="prosum_box">
        <dl class="prosum_left">
            <dt>
                <img alt="" class="big_img"
                     src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
            </dt>
            <dd id="dd">
                <a class="up_img up_img_disable"></a>
                <a title="" class="little_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m20920d0669855e745d97f9ad1df966ebb.jpg">
                </a>
                <a title="" class="little_img cur_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m29788843d72171643297ccc033d9288ee.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2531a8dbceefa2c44e6d0e35627cd2689.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m26d8cb900e9f6c0a762aca19eae40c00c.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg"
                   style="display:none;">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m25ea00f6eba562a767b5095bbf8cffe07.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg"
                   style="display:none;">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg"
                   style="display:none;">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg"
                   style="display:none;">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m267db00e1b76718fab0fe8b96e10f4d35.jpg">
                </a>
                <a title="" class="little_img"
                   data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg"
                   style="display:none;">
                    <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg">
                </a>
                <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
            </dd>
        </dl>
        <div class="prosum_right">
            <p class="pros_title" id="rname">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</p>
            <p class="hot" id="routeIntroduce">1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
            <div class="pros_other">
                <p>经营商家：<span id="sname">黑马国旅</span></p>
                <p>咨询电话: <span id="consphone">400-618-9090</span></p>
                <p>地址：<span id="address">传智播客黑马程序员</span></p>
            </div>
            <div class="pros_price">
                <p class="price"><strong id="price">¥2699.00</strong><span>起</span></p>
                <p class="collect">
                    <a class="btn" id="favorite" onclick="addFavorite();"><i
                            class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>
                    <!-- <a  class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>-->
                    <span id="favoriteCount">已收藏100次</span>
                </p>
            </div>
        </div>
    </div>
    <div class="you_need_konw">
        <span>旅游须知</span>
        <div class="notice">
            <p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>
            <p>
                2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>
            <p>
                3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>
            <p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>
            <p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
            <p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br>
            <p>
                2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p>
            <p>
                3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p>
            <p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p>
            <p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p>
        </div>
    </div>
</div>
<!-- 详情 end -->
<!--引入头部-->
<div id="footer"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script src="js/getParameter.js"></script>
<script>
    $(document).ready(function () {
        //自动播放
        goImg();
        // var timer = setInterval("auto_play()", 5000);
    });

    function goImg() {
        //焦点图效果
        //点击图片切换图片
        $('.little_img').on('mousemove', function () {
            $('.little_img').removeClass('cur_img');
            var big_pic = $(this).data('bigpic');
            $('.big_img').attr('src', big_pic);
            $(this).addClass('cur_img');
        });
        //上下切换
        var picindex = 0;
        var nextindex = 4;
        $('.down_img').on('click', function () {
            var num = $('.little_img').length;
            if ((nextindex + 1) <= num) {
                $('.little_img:eq(' + picindex + ')').hide();
                $('.little_img:eq(' + nextindex + ')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click', function () {
            var num = $('.little_img').length;
            if (picindex > 0) {
                $('.little_img:eq(' + (nextindex - 1) + ')').hide();
                $('.little_img:eq(' + (picindex - 1) + ')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
    }

    //自动轮播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }

    $(function () {
        /*
         <dd>
            <a class="up_img up_img_disable"></a>
            <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m20920d0669855e745d97f9ad1df966ebb.jpg">
            </a>
            <a title="" class="little_img cur_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m29788843d72171643297ccc033d9288ee.jpg">
            </a>
            <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2531a8dbceefa2c44e6d0e35627cd2689.jpg">
            </a>
            <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m26d8cb900e9f6c0a762aca19eae40c00c.jpg">
            </a>
            <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m25ea00f6eba562a767b5095bbf8cffe07.jpg">
            </a>
            <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg">
            </a>
            <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg">
            </a>
            <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m267db00e1b76718fab0fe8b96e10f4d35.jpg">
            </a>
            <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg" style="display:none;">
                <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg">
            </a>
            <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>
        </dd>
         */
        //1.获取rid
        var rid = getParameter("rid");
        //2.发送请求请求 route/findOne
        $.get("route/findOne", {rid: rid}, function (route) {
            //3.解析数据填充html
            $("#rname").html(route.rname);
            $("#routeIntroduce").html(route.routeIntroduce);
            $("#price").html("¥" + route.price);
            $("#sname").html(route.seller.sname);
            $("#consphone").html(route.seller.consphone);
            $("#address").html(route.seller.address);
            //设置收藏次数
            $("#favoriteCount").html("已收藏" + route.count + "次");
            //图片展示
            var ddstr = '<a class="up_img up_img_disable"></a>';
            //遍历routeImgList
            for (var i = 0; i < route.routeImgList.length; i++) {
                var astr;
                if (i >= 4) {
                    astr = '<a title="" class="little_img" data-bigpic="' + route.routeImgList[i].bigPic + '" style="display:none;">\n' +
                        '                        <img src="' + route.routeImgList[i].smallPic + '">\n' +
                        '                    </a>';
                } else {
                    astr = '<a title="" class="little_img" data-bigpic="' + route.routeImgList[i].bigPic + '">\n' +
                        '                        <img src="' + route.routeImgList[i].smallPic + '">\n' +
                        '                    </a>';
                }
                ddstr += astr;
            }
            ddstr += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';
            $("#dd").html(ddstr);
            //图片展示和切换代码调用
            goImg();
        });
    });
    $(function () {
        //发送请求，判断用户是否收藏过该线路
        var rid = getParameter("rid");
        $.get("route/isFavorite", {rid: rid}, function (flag) {
            if (flag) {
                //用户已经收藏过
                //<a  class="btn already" disabled="disabled">
                //设置收藏按钮的样式
                $("#favorite").addClass("already");
                $("#favorite").attr("disabled", "disabled");
                //删除按钮的点击事件
                $("#favorite").removeAttr("onclick");
            } else {
                // 用户没有收藏
            }
        });
    });

    //点击收藏按钮触发的方法
    function addFavorite() {
        var rid = getParameter("rid");
        //1. 判断用户是否登录
        $.get("user/findOne", {}, function (user) {
            if (user) {
                //用户登录了
                //添加功能
                $.get("route/addFavorite", {rid: rid}, function () {
                    //代码刷新页面
                    location.reload();
                });
            } else {
                //用户没有登录
                alert("您尚未登录，请登录");
                location.href = "http://localhost/travel/login.html";
            }
        })
    }
</script>
</body>
</html>

route_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>黑马旅游-搜索</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/search.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>
    <script>
        $(function () {
            /*var search = location.search;
            //alert(search);//?id=5
            //切割字符串，拿到第二个值
            var cid = search.split("=")[1];*/
            //获取cid的参数值
            var cid = getParameter("cid");
            //获取rname的参数值
            var rname = getParameter("rname");
            //判断rname如果不为null或者""
            if (rname) {
                //url解码
                rname = window.decodeURIComponent(rname);
            }
            //当页码加载完成后，调用load方法，发送ajax请求加载数据
            load(cid, null, rname);
        });

        function load(cid, currentPage, rname) {
            //发送ajax请求，请求route/pageQuery,传递cid
            $.get("route/pageQuery", {cid: cid, currentPage: currentPage, rname: rname}, function (pb) {
                //解析pagebean数据，展示到页面上
                //1.分页工具条数据展示
                //1.1 展示总页码和总记录数
                $("#totalPage").html(pb.totalPage);
                $("#totalCount").html(pb.totalCount);
                /*
                    <li><a href="">首页</a></li>
                    <li class="threeword"><a href="#">上一页</a></li>
                    <li class="curPage"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">8</a></li>
                    <li><a href="#">9</a></li>
                    <li><a href="#">10</a></li>
                    <li class="threeword"><a href="javascript:;">下一页</a></li>
                    <li class="threeword"><a href="javascript:;">末页</a></li>
                 */
                var lis = "";
                var fristPage = '<li onclick="javascipt:load(' + cid + ',1,\'' + rname + '\')"><a href="javascript:void(0)">首页</a></li>';
                //计算上一页的页码
                var beforeNum = pb.currentPage - 1;
                if (beforeNum <= 0) {
                    beforeNum = 1;
                }
                var beforePage = '<li  onclick="javascipt:load(' + cid + ',' + beforeNum + ',\'' + rname + '\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
                lis += fristPage;
                lis += beforePage;
                //1.2 展示分页页码
                /*
                    1.一共展示10个页码，能够达到前5后4的效果
                    2.如果前边不够5个，后边补齐10个
                    3.如果后边不足4个，前边补齐10个
                */
                // 定义开始位置begin,结束位置 end
                var begin; // 开始位置
                var end; //  结束位置
                //1.要显示10个页码
                if (pb.totalPage < 10) {
                    //总页码不够10页
                    begin = 1;
                    end = pb.totalPage;
                } else {
                    //总页码超过10页
                    begin = pb.currentPage - 5;
                    end = pb.currentPage + 4;
                    //2.如果前边不够5个，后边补齐10个
                    if (begin < 1) {
                        begin = 1;
                        end = begin + 9;
                    }
                    //3.如果后边不足4个，前边补齐10个
                    if (end > pb.totalPage) {
                        end = pb.totalPage;
                        begin = end - 9;
                    }
                }
                for (var i = begin; i <= end; i++) {
                    var li;
                    //判断当前页码是否等于i
                    if (pb.currentPage == i) {
                        li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ',\'' + rname + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                    } else {
                        //创建页码的li
                        li = '<li onclick="javascipt:load(' + cid + ',' + i + ',\'' + rname + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                    }
                    //拼接字符串
                    lis += li;
                }
                /*for (var i = 1; i <= pb.totalPage; i++) {
                    var li;
                    //判断当前页码是否等于i
                    if (pb.currentPage == i) {

                        li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';

                    } else {
                        //创建页码的li
                        li = '<li onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';
                    }
                    //拼接字符串
                    lis += li;
                }*/
                var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
                var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
                lis += nextPage;
                lis += lastPage;
                //将lis内容设置到 ul
                $("#pageNum").html(lis);
                /*
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>299</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                 */
                //2.列表数据展示
                var route_lis = "";
                for (var i = 0; i < pb.list.length; i++) {
                    //获取{rid:1,rname:"xxx"}
                    var route = pb.list[i];
                    var li = '<li>\n' +
                        '                        <div class="img"><img src="' + route.rimage + '" style="width: 299px;"></div>\n' +
                        '                        <div class="text1">\n' +
                        '                            <p>' + route.rname + '</p>\n' +
                        '                            <br/>\n' +
                        '                            <p>' + route.routeIntroduce + '</p>\n' +
                        '                        </div>\n' +
                        '                        <div class="price">\n' +
                        '                            <p class="price_num">\n' +
                        '                                <span>&yen;</span>\n' +
                        '                                <span>' + route.price + '</span>\n' +
                        '                                <span>起</span>\n' +
                        '                            </p>\n' +
                        '                            <p><a href="route_detail.html?rid=' + route.rid + '">查看详情</a></p>\n' +
                        '                        </div>\n' +
                        '                    </li>';
                    route_lis += li;
                }
                $("#route").html(route_lis);
                //定位到页面顶部
                window.scrollTo(0, 0);
            });
        }
    </script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<div class="page_one">
    <div class="contant">
        <div class="crumbs">
            <img src="images/search.png" alt="">
            <p>黑马旅行><span>搜索结果</span></p>
        </div>
        <div class="xinxi clearfix">
            <div class="left">
                <div class="header">
                    <span>商品信息</span>
                    <span class="jg">价格</span>
                </div>
                <ul id="route">
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>299</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>899</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>999</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>99</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>199</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>899</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>1199</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                        <div class="text1">
                            <p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p>
                            <br/>
                            <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>1589</span>
                                <span>起</span>
                            </p>
                            <p><a href="route_detail.html">查看详情</a></p>
                        </div>
                    </li>
                </ul>
                <div class="page_num_inf">
                    <i></i> 共
                    <span id="totalPage">12</span>页<span id="totalCount">132</span>条
                </div>
                <div class="pageNum">
                    <ul id="pageNum">
                        <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li class="curPage"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <div class="hot">HOT</div>
                    <span>热门推荐</span>
                </div>
                <ul>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--引入头部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>

不是井里没有水，而是你挖的不够深。不是成功来得慢，而是你努力的不够多。

孤单一人的时间使自己变得优秀，给来的人一个惊喜，也给自己一个好的交代。