文章目录

1.线路详情业务
- route_detail.html
2.线路详情收藏业务
3.spring的事务操作原理
4.我的收藏
- myfavorite.html
5.收藏排行榜
- favoriterank.html
6.上传文件
7.jdk安装
8.mysql安装
- 开机自动启动设置
- 开启远程访问
9.redis安装
- 后端模式启动
- redis停止
10.项目部署
- 安装Tomcat

1.线路详情业务

在这里插入图片描述

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>

<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<!--引入头部-->
<div id="header"></div>
    <!-- 详情 start -->   
    <div class="wrap">
        <div class="bread_box">
            <a href="/">首页</a>
            <span> &gt;</span>
            <a href="#" id="cname">国内游</a><span> &gt;</span>
            <a href="#" id="rname">全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</a>
        </div>
        <div class="prosum_box">
            <dl class="prosum_left">
                <dt id="big"><!--
                    <img alt="" class="big_img" src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
               --> </dt>
                <dd id="small">
                    <!--TODO:-->
                   <!-- <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="rname2">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</p>
                <p class="hot" id="routeIntroduce">1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                <div class="pros_other">
                    <p id="sname">经营商家  ：黑马国旅</p>
                    <p id="consphone">咨询电话 : 400-618-9090</p>
                    <p id="address">地址 ： 传智播客黑马程序员</p>
                </div>
                <div class="pros_price">
                    <p class="price"><strong id="price">¥2699.00</strong><span>起</span></p>
                    <p class="collect">
                        <!--TODO; -->
                        <a id="red" class="btn" href="javascript:;" onclick="addFavorite()"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>

                        <a  id="grey" class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>
                        <span id="count">已收藏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 -->

<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
    <!--引入头部-->
    <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>
    $(document).ready(function() {
        //焦点图效果
        //点击图片切换图片
        $('.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;
            }
        });
        //自动播放
        // var timer = setInterval("auto_play()", 5000);
    });

    //自动轮播方法
    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);
        }
    }
    </script>
</body>

</html>
<script src="js/getParameter.js"></script>
<script>
    $(function () {
        var rid = getParameter("rid");
        var param = {"rid" : rid}

        $.get("/RouteServlet?method=queryRouteDetail",param,function (result) {
            console.log(result)
            $("#cname").html(result.cname)
            $("#rname").html(result.rname)
            $("#rname2").html(result.rname)
            $("#routeIntroduce").html(result.routeIntroduce)
            $("#price").html(result.price)
            $("#count").html(`已收藏${result.count}次`)
            $("#sname").html(result.sname)
            $("#consphone").html(result.consphone)
            $("#address").html(result.address)

            //图片
            $("#big").html(`
                    <img alt="" class="big_img" src="${result.rimage}">
               `)

            var content = `<a class="up_img up_img_disable"></a>`
            $(result.list).each(function (index,element) {
                if(index > 3){
                    content += ` <a title="" class="little_img" data-bigpic="${element.bigPic}" style="display: none">
                        <img src="${element.smallPic}">
                    </a>`
                }else{
                    content += ` <a title="" class="little_img" data-bigpic="${element.bigPic}">
                        <img src="${element.smallPic}">
                    </a>`
                }
            })
            content += `<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>`
            $("#small").html(content)


            //焦点图效果
            //点击图片切换图片
            $('.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;
                }
            });
        },"json")
    })
</script>

<script>
    // 收藏按钮的显示
    $(function () {
        var rid = getParameter("rid");
        var param = {"rid":rid}
        $.get("/FavoriteServlet?method=isFavorite",param,function (result) {
            //TODO
            console.log(result)
            if(result.loginFlag && result.collectFlag){
                $("#red").hide()//红色隐藏
            }else{
                $("#grey").hide()
            }
        },"json")
    })
</script>

<script>
    function addFavorite() {
        var rid = getParameter("rid");
        var param = {"rid":rid}
        $.get("/FavoriteServlet?method=addFavorite",param,function (result) {
            //TODO
            // console.log(result)
            // debugger;
            if(result.loginFlag){
                //已登录
                if(result.saveFlag){
                    $("#red").hide()
                    $("#grey").show()
                    $("#count").html(`已收藏${result.count}次`)
                }else{
                    alert("服务器正在维护,请联系管理员!")
                }
            }else{
                //用户未登录: 跳转到登录页面
                location.href = "/login.html"
            }
        },"json")
    }
</script>

2.线路详情收藏业务

在这里插入图片描述

如下联合主键。

FavoriteServlet

package com.heima.travel.web;
import com.heima.travel.service.FavoriteService;
import com.heima.travel.service.impl.FavoriteServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(urlPatterns = "/FavoriteServlet")
public class FavoriteServlet extends BaseServlet {
    protected void isFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String rid = request.getParameter("rid");

        FavoriteService service = new FavoriteServiceImpl();
        String json = service.isFavorite(request,rid);

        response.getWriter().print(json);
    }

    //addFavorite
    protected void addFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String rid = request.getParameter("rid");

        FavoriteService service = new FavoriteServiceImpl();
        String json = service.addFavorite(request,rid);

        response.getWriter().print(json);
    }
}

FavoriteService

package com.heima.travel.service;
import javax.servlet.http.HttpServletRequest;

public interface FavoriteService {    
    String isFavorite(HttpServletRequest request, String rid); //判断收藏按钮的显示状态       
    String addFavorite(HttpServletRequest request, String rid); //收藏按钮点击事件        
    String findMyFavorite(HttpServletRequest request, String pageStr, String countStr); //我的收藏分页查询
}

FavoriteServiceImpl

package com.heima.travel.service.impl;
import com.alibaba.fastjson.JSON;
import com.heima.travel.bean.Favorite;
import com.heima.travel.bean.Route;
import com.heima.travel.bean.User;
import com.heima.travel.common.Constant;
import com.heima.travel.dao.FavoriteDao;
import com.heima.travel.dao.impl.FavoriteDaoImpl;
import com.heima.travel.service.FavoriteService;
import com.heima.travel.utils.C3p0Utils;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.datasource.DataSourceUtils;
import org.springframework.transaction.support.TransactionSynchronizationManager;
import javax.servlet.http.HttpServletRequest;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;

public class FavoriteServiceImpl implements FavoriteService {
    FavoriteDao dao = new FavoriteDaoImpl();
    @Override
    public String isFavorite(HttpServletRequest request, String rid) {
        HashMap<String, Object> map = new HashMap<>();
        //判断用户登录与否
        User user = (User) request.getSession().getAttribute(Constant.SESSION_USER);
        if(user != null){
            map.put("loginFlag",true);
            //判断用户是否收藏
            int uid = user.getUid();
            Favorite favorite = dao.findFavoriteByUidAndRid(uid,rid);
            if(favorite != null){                
                map.put("collectFlag",true); //已收藏
            }else{
                map.put("collectFlag",false);
            }
        }else{
            map.put("loginFlag",false);
        }
        return JSON.toJSONString(map);
    }

    @Override
    public String addFavorite(HttpServletRequest request, String rid) {
        HashMap<String, Object> map = new HashMap<>();
        //判断用户登录与否
        User user = (User) request.getSession().getAttribute(Constant.SESSION_USER);
        if(user != null){
            map.put("loginFlag",true);
            //将数据添加到数据库
            int uid = user.getUid();

            DataSource ds = C3p0Utils.getDataSource();
            //底层: 访问数据, 自己从ds取连接,操作完自己还
            JdbcTemplate template = new JdbcTemplate(ds);
            //将线程和(template中取出来)连接对象进行绑定
            TransactionSynchronizationManager.initSynchronization();
            // 获取上面的连接对象
            Connection conn = DataSourceUtils.getConnection(ds);
            try {
                //TODO: 1 开启事务
                conn.setAutoCommit(false);

                //1.添加收藏数据  (注意)
                dao.addFavorite(template,uid,rid);
                //TODO:
//                int i = 1/0; // 模拟数据库服务器崩溃
                //2.修改route表的count+1
                dao.updateCount(template,rid);
                //3. 查询最新数据,返回给前端
                int count = dao.findCountByRid(template,rid);

                map.put("count",count);
                map.put("saveFlag",true);
                //TODO: 2 提交事务
                conn.commit();
                
            } catch (Exception e) {// 注意: 能够捕获ArithmeticException
               //TODO: 2 回滚事务
                map.put("saveFlag",false);
                try {
                    conn.rollback();
                } catch (SQLException e1) {
                }
                
            }finally {
                //释放连接和当前线程的绑定(利于GC回收)
                TransactionSynchronizationManager.clearSynchronization();
                if(conn != null){
                    try {
                        conn.close();
                    } catch (SQLException e) {
                    }
                }
            }
        }else{
            map.put("loginFlag",false);
        }
        return JSON.toJSONString(map);
    }

    @Override
    public String findMyFavorite(HttpServletRequest request, String pageStr, String countStr) {
        int page = Integer.parseInt(pageStr);
        int count = Integer.parseInt(countStr);

        int offset = (page-1) * count;
        //TODO: 要判断用户是否登录吗?
        // 测试 : 白盒(懂代码)  黑盒(不懂代码)
        User user = (User) request.getSession().getAttribute(Constant.SESSION_USER);
        List<Route> list = dao.findMyFavoriteByPage(user.getUid(), offset,count);
        return JSON.toJSONString(list);
    }
}

Constant

package com.heima.travel.common;
// 常量一般在开发中都要分门别类的管理
public interface Constant {    
    String SESSION_USER = "user";  //常量
}

FavoriteDaoImpl

package com.heima.travel.dao.impl;
import com.heima.travel.bean.Favorite;
import com.heima.travel.bean.Route;
import com.heima.travel.dao.FavoriteDao;
import com.heima.travel.utils.C3p0Utils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class FavoriteDaoImpl implements FavoriteDao {
    JdbcTemplate template = C3p0Utils.getTemplate(); // 取出来的连接不是跟线程绑定
    @Override
    public Favorite findFavoriteByUidAndRid(int uid, String rid) {
        String sql = "select * from tab_favorite where rid = ? and uid = ?";

        Favorite favorite = null;
        try {
            favorite = template.queryForObject(sql, new BeanPropertyRowMapper<>(Favorite.class), rid, uid);
        } catch (DataAccessException e) {

        }
        return favorite;
    }
    //此template是局部变量, 上面template是全局变量
    @Override
    public void addFavorite(JdbcTemplate t, int uid, String rid) {
        String sql = "insert into tab_favorite values(?,?,?)";
        Date date = new Date();
        // time (date, timestamp)
        t.update(sql,rid,date,uid);
    }

    @Override
    public void updateCount(JdbcTemplate t, String rid) {
        String sql = "update tab_route set count=count+1 where rid = ?";
        t.update(sql,rid);
    }

    @Override
    public int findCountByRid(JdbcTemplate t, String rid) {
        String sql = "select count from tab_route where rid = ?";
        int count = 0;
        try {
            count = t.queryForObject(sql, Integer.class, rid);
        } catch (DataAccessException e) {
        }
        return count;
    }

    @Override
    public List<Route> findMyFavoriteByPage(int uid, int offset, int count) {

       String sql = "select tbr.* from tab_route tbr,tab_favorite tbf" +
               " where tbr.rid = tbf.rid and tbf.uid = ?" +
               " limit ?,?";
        List<Route> list = template.query(sql, new BeanPropertyRowMapper<>(Route.class), uid, offset, count);

//        List<Route> list = new ArrayList<>();
//        Route route = null;
//        try {
//            route = template.queryForObject(sql, new BeanPropertyRowMapper<>(Route.class), uid, offset, count);
//        } catch (DataAccessException e) {
//            e.printStackTrace();
//        }
//        list.add(route);
        return list;
    }
}

3.spring的事务操作原理

脏读：最不可容忍，读到正在编辑中数据。不可重复读和幻读：有的认为是问题，有的认为不是问题。oracle默认解决脏读，mysql默认解决不可重复读。
在这里插入图片描述

4.我的收藏

在这里插入图片描述

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>

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111-->
    <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>
                    </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>

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
    $(function () {
        getMyFavorite(1,12);

    })

    function getMyFavorite(page,count) {
        // debugger; //确定: 函数没问题
        var param = {"page" : page, "count" : count}
        $.get("/FavoriteServlet?method=myFavorite",param,function (result) {
            // console.log(result)
            var content = ""
            $(result).each(function (index,element) {
                content +=  `<div class="col-md-3">
                                    <a href="route_detail.html?rid=${element.rid}">
                                        <img src="${element.rimage}" alt="">
                                        <div class="has_border">
                                            <h3>${element.rname}</h3>
                                            <div class="price">网付价<em>￥</em><strong>${element.price}</strong><em>起</em></div>
                                        </div>
                                    </a>
                                </div>`
            })

            $("#home .row").html(content)
        },"json")
    }
</script>

在这里插入图片描述

5.收藏排行榜

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>

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111-->
    <body>
    <!--引入头部-->
    <div id="header"></div>
        <div class="contant">
            <div class="shaixuan">
                <span>线路名称</span>
                <input type="text" id="kd">
                <span>金额</span>
                <input type="text" id="lowPrice">~<input type="text" id="highPrice">
                <button onclick="getRank(1,8)">搜索</button>
            </div>
            <div class="list clearfix">
                <ul id="list"><!--
                    <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="javascript:;" οnclick="getRank(1,8)">1</a></li>
                    <li><a href="javascript:;" οnclick="getRank(2,8)">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>

<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
    //TODO:
    $(function () {
        getRank(1,8);
    })
    function getRank(page,count) {
        //TODO:
        var kd = $("#kd").val();
        var lowPrice = $("#lowPrice").val();
        var highPrice = $("#highPrice").val();

        var param = {"page" : page,"count" : count,"kd" : kd,"lowPrice" : lowPrice,"highPrice" : highPrice}
        $.get("/RouteServlet?method=getRank",param,function (result) {
            console.log(result)
            //TODO: 按钮

            var begin = 1;
            var end = result.pageCount;
            if(result.pageCount > 10){
                begin = page - 5;
                end = page + 4;
                if(begin < 1){
                    begin = 1;
                    end  = 10
                }
                if(end > result.pageCount){
                    begin = result.pageCount - 9
                    end = result.pageCount
                }
            }
            var btnContent = ""
            for (var i = begin; i <= end; i ++) {
                if(i == page){
                    btnContent += `<li style="background-color: yellow">
                                <a href="javascript:;" οnclick="getRank(${i},8)">${i}</a>
                            </li>`
                }else{
                    btnContent += `<li>
                                <a href="javascript:;" οnclick="getRank(${i},8)">${i}</a>
                            </li>`
                }


            }
            $(".pageNum ul").html(btnContent)


            var content = ""
            $(result.list).each(function (index,element) {
               /* index : 当前遍历的索引
                page=1, start=1
                page=2, start=9
                page=3, start=17
                */
               var start = (page-1) * count + 1 + index;
               if(start == 1){
                   content += ` <li>
                        <span class="num one">${start}</span>
                        <a href="route_detail.html?rid=${element.rid}"><img src="${element.rimage}" alt=""></a>
                        <h4><a href="route_detail.html?rid=${element.rid}">${element.rname}</a></h4>
                        <p>
                            <b class="price">&yen;<span>${element.price}</span>起</b>
                            <span class="shouchang">已收藏${element.count}次</span>
                        </p>
                    </li>`
               }else if(start == 2){
                   content += ` <li>
                        <span class="num two">${start}</span>
                        <a href="route_detail.html?rid=${element.rid}"><img src="${element.rimage}" alt=""></a>
                        <h4><a href="route_detail.html?rid=${element.rid}">${element.rname}</a></h4>
                        <p>
                            <b class="price">&yen;<span>${element.price}</span>起</b>
                            <span class="shouchang">已收藏${element.count}次</span>
                        </p>
                    </li>`
               }else{
                   content += ` <li>
                        <span class="num">${start}</span>
                        <a href="route_detail.html?rid=${element.rid}"><img src="${element.rimage}" alt=""></a>
                        <h4><a href="route_detail.html?rid=${element.rid}">${element.rname}</a></h4>
                        <p>
                            <b class="price">&yen;<span>${element.price}</span>起</b>
                            <span class="shouchang">已收藏${element.count}次</span>
                        </p>
                    </li>`
               }
            })
            $("#list").html(content)
        },"json")
    }
</script>

<script>
/*    function search() {
        var kd = $("#kd").val();
        var lowPrice = $("#lowPrice").val();
        var highPrice = $("#highPrice").val();

        getRank()
    }*/
</script>

在这里插入图片描述

6.上传文件

maven是开发工具，在开发环境就可以。
在这里插入图片描述

7.jdk安装

在这里插入图片描述

先卸载open-jdk

java -version
rpm -qa | grep java

rpm -e --nodeps java-1.7.0-openjdk-1.7.0.45-2.4.3.3.el6.x86_64
rpm -e --nodeps java-1.6.0-openjdk-1.6.0.0-1.66.1.13.0.el6.x86_64

开始安装：
mkdir /usr/local/src/java
rz 上传jdk tar包
tar -zxvf jdk-8u181-linux-x64.tar.gz

配置环境变量：
1. vi /etc/profile

2. 在末尾行添加
	#set java environment
	JAVA_HOME=/usr/local/src/jdk/jdk1.8.0_181	CLASSPATH=.:$JAVA_HOME/lib.tools.jar
	PATH=$JAVA_HOME/bin:$PATH
	export JAVA_HOME CLASSPATH PATH
	
保存退出：
3. source /etc/profile  使更改的配置立即生效
4. java -version  查看JDK版本信息，如果显示出java version "1.8.0_181"证明成功

8.mysql安装

第一步：检测是否已经安装了mysql
命令：rpm -qa | grep mysql   

如果已经安装了，将其卸载，如：

rpm -e --nodeps  mysql-libs-5.1.71-1.el6.x86_64

第二步：解压
命令：tar -xvf MySQL-5.6.34-1.rhel5.x86_64.rpm-bundle.tar

第三步：安装MySQL的服务端
命令：rpm -ivh MySQL-server-5.6.34-1.rhel5.x86_64.rpm

第四步：安装MySQL的客户端
命令：rpm -ivh MySQL-client-5.6.34-1.rhel5.x86_64.rpm

第五步：查看MySQL服务运行状态
命令：service mysql status
 
第五步：启动MySQL服务
命令：service mysql start

在这里插入图片描述

注意：这个密码是不安全的，所有需要修改初始密码为明文root。
1、	使用密码登录mysql账号：mysql -uroot -p
2、	修改root密码：SET PASSWORD = PASSWORD('root');

开机自动启动设置

加入到系统服务：
chkconfig --add mysql
自动启动：
chkconfig mysql on
查询列表：
chkconfig

说明：都没关闭（off）时是没有自动启动。

在这里插入图片描述

开启远程访问

登录：mysql -uroot -proot

设置远程访问（使用root密码）：
grant all privileges on *.* to 'root' @'%' identified by 'root'; 
flush privileges;

exit退出mysql，在centos环境下打开3306防火墙
/sbin/iptables -I INPUT -p tcp --dport 3306 -j ACCEPT
/etc/rc.d/init.d/iptables save
/etc/init.d/iptables status

9.redis安装

redis是C语言开发，建议在linux上运行，本教程使用Centos6.5作为安装环境。
	安装redis需要先将官网下载的源码进行编译，编译依赖gcc环境，如果没有gcc环境，需要连外网安装gcc，安装命令如下：
yum install gcc-c++     注意：yum命令需要在联外网的情况下执行

 解压源码
   tar -zxvf redis-3.0.0.tar.gz  
 进入解压后的目录进行编译
	cd /usr/local/src/redis-3.0.0
	make
 安装到指定目录,如 /usr/local/src/redis
	cd /usr/local/src/redis-3.0.0 
	make PREFIX=/usr/local/src/redis install

cp /usr/local/src/redis-3.0.0/redis.conf  /usr/local/src/redis/bin

在这里插入图片描述

后端模式启动

修改redis.conf配置文件， daemonize yes 以后端模式启动。

执行如下命令启动redis：
cd /usr/local/src/redis/bin
./redis-server ./redis.conf

redis默认使用6379端口。
在这里插入图片描述

redis停止

强行终止Redis进程可能会导致redis持久化数据丢失。正确停止Redis的方式应该是向Redis发送SHUTDOWN命令，方法为：

cd /usr/local/src/redis/bin
./redis-cli shutdown
在这里插入图片描述

10.项目部署

安装Tomcat

tomcat只要解压就可以使用。

1、上传apache-tomcat-7.0.57.tar.gz
2、解压：tar -xvf apache-tomcat-7.0.57.tar.gz
3、启动tomcat：
进入到tomcat的bin目录
./startup.sh 或者 sh startup.sh
4、查看日志：
tail -f …/logs/catalina.out
5、查看效果 http://192.168.56.106:8080/

将war包移动到webapp路径下并点击startup.bat启动tomcat，idea关闭没问题。
在这里插入图片描述
所有servlet改为如下，则浏览器不需要加heima-tra…，但要每一个都改，麻烦。

如下删除原来webapp下war包，将war包重新命名再复制进来，重启tomcat多出ROOT文件夹。