[Java48] Travel Case: Collection

Article Directory


1. Spring's transaction operation principle

Dirty read: The most intolerable, the data being edited is read. Non-repeatable reading and phantom reading: some think it is a problem, some think it is not a problem. Oracle solves dirty reads by default, and mysql solves non-repeatable reads by default.

Insert picture description here


Insert picture description here

2. My collection

Insert picture description here

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>
Insert picture description here

3. Favorites ranking

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>
Insert picture description here


Insert picture description here