devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【7.精选分类】

作者：运维做开发 | 2024-08-04 02:31:00

赞

踩

【7.精选分类】

精选旅游

人气旅游→收藏次数最高

最新旅游→日期最新

主题旅游→主题关键字相同

在首页将精选的内容动态展示的实现

分析

首页中的精选包含“人气旅游”、“最新旅游”、“主题旅游”三个部分

index.html

//页面加载完成,发送ajax请求

根据点击不同分类展示不同内容

人气旅游→收藏次数最高（count）

最新旅游→日期最新（rdate）

主题旅游→主题关键字相同（theme）

index.html

改写前

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>黑马旅游网</title>
  9.     <!-- Bootstrap -->
  10.     <link href="css/bootstrap.min.css" rel="stylesheet">
  11.     <link rel="stylesheet" type="text/css" href="css/common.css">
  12.     <link rel="stylesheet" type="text/css" href="css/index.css">
  13.  
  14.    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  15.     <script src="js/jquery-3.3.1.js"></script>
  16.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  17.     <script src="js/bootstrap.min.js"></script>
  18.     <!--导入布局js，共享header和footer-->
  19.     <script type="text/javascript" src="js/include.js"></script>
  20.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  21.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  22.     <!--[if lt IE 9]>
  23.       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  24.       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  25.     <![endif]-->
  26. </head>
  27. <body>
  28.    <!--引入头部-->
  29.     <div id="header"></div>
  30.     <!-- banner start-->
  31.     <section id="banner">
  32.         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
  33.             <!-- Indicators -->
  34.             <ol class="carousel-indicators">
  35.                 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  36.                 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  37.                 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  38.             </ol>
  39.             <!-- Wrapper for slides -->
  40.             <div class="carousel-inner" role="listbox">
  41.                 <div class="item active">
  42.                     <img src="images/banner_1.jpg" alt="">
  43.                 </div>
  44.                 <div class="item">
  45.                     <img src="images/banner_2.jpg" alt="">
  46.                 </div>
  47.                 <div class="item">
  48.                     <img src="images/banner_3.jpg" alt="">
  49.                 </div>
  50.             </div>
  51.             <!-- Controls -->
  52.             <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  53.              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  54.              <span class="sr-only">Previous</span>
  55.            </a>
  56.             <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  57.              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  58.              <span class="sr-only">Next</span>
  59.            </a>
  60.         </div>
  61.     </section>
  62.     <!-- banner end-->
  63.     <!-- 旅游 start-->
  64.     <section id="content">
  65.          <!-- 黑马精选start-->
  66.         <section class="hemai_jx">
  67.             <div class="jx_top">
  68.                 <div class="jx_tit">
  69.                     <img src="images/icon_5.jpg" alt="">
  70.                     <span>黑马精选</span>
  71.                 </div>
  72.                 <!-- Nav tabs -->
  73.                 <ul class="jx_tabs" role="tablist">
  74.                     <li role="presentation" class="active">
  75.                         <a  id="popular" href="#popularity" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a>
  76.                         <span></span>
  77.                          </li>
  78.                     <li role="presentation">
  79.                         <a id="new" href="#newest" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a>
  80.                         <span></span>
  81.                        </li>
  82.                     <li role="presentation">
  83.                         <a id="themes" href="#theme" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a>
  84.                         <span></span>
  85.                     </li>
  86.                 </ul>
  87.             </div>
  88.             <div class="jx_content">
  89.                 <!-- Tab panes -->
  90.                 <div class="tab-content">
  91.                     <div role="tabpanel" class="tab-pane active" id="popularity">
  92.                         <div class="row">
  93.                             <div class="col-md-3">
  94.                                 <a href="javascript:;">
  95.                                     <img src="images/jiangxuan_4.jpg" alt="">
  96.                                     <div class="has_border">
  97.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  98.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  99.                                     </div>
  100.                                 </a>
  101.                             </div>
  102.                             <div class="col-md-3">
  103.                                 <a href="javascript:;">
  104.                                     <img src="images/jiangxuan_4.jpg" alt="">
  105.                                     <div class="has_border">
  106.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  107.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  108.                                     </div>
  109.                                 </a>
  110.                             </div>
  111.                             <div class="col-md-3">
  112.                                 <a href="javascript:;">
  113.                                     <img src="images/jiangxuan_4.jpg" alt="">
  114.                                     <div class="has_border">
  115.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  116.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  117.                                     </div>
  118.                                 </a>
  119.                             </div>
  120.                             <div class="col-md-3">
  121.                                 <a href="javascript:;">
  122.                                     <img src="images/jiangxuan_4.jpg" alt="">
  123.                                     <div class="has_border">
  124.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  125.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  126.                                     </div>
  127.                                 </a>
  128.                             </div>
  129.                         </div>
  130.                     </div>
  131.                     <div role="tabpanel" class="tab-pane" id="newest">
  132.                         <div class="row">
  133.                             <div class="col-md-3">
  134.                                 <a href="javascript:;">
  135.                                     <img src="images/jiangxuan_1.jpg" alt="">
  136.                                     <div class="has_border">
  137.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  138.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  139.                                     </div>
  140.                                 </a>
  141.                             </div>
  142.                             <div class="col-md-3">
  143.                                 <a href="javascript:;">
  144.                                     <img src="images/jiangxuan_1.jpg" alt="">
  145.                                     <div class="has_border">
  146.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  147.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  148.                                     </div>
  149.                                 </a>
  150.                             </div>
  151.                             <div class="col-md-3">
  152.                                 <a href="javascript:;">
  153.                                     <img src="images/jiangxuan_1.jpg" alt="">
  154.                                     <div class="has_border">
  155.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  156.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  157.                                     </div>
  158.                                 </a>
  159.                             </div>
  160.                             <div class="col-md-3">
  161.                                 <a href="javascript:;">
  162.                                     <img src="images/jiangxuan_1.jpg" alt="">
  163.                                     <div class="has_border">
  164.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  165.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  166.                                     </div>
  167.                                 </a>
  168.                             </div>
  169.                         </div>
  170.                     </div>
  171.                     <div role="tabpanel" class="tab-pane" id="theme">
  172.                         <div class="row">
  173.                             <div class="col-md-3">
  174.                                 <a href="javascript:;">
  175.                                     <img src="images/jiangxuan_2.jpg" alt="">
  176.                                     <div class="has_border">
  177.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  178.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  179.                                     </div>
  180.                                 </a>
  181.                             </div>
  182.                             <div class="col-md-3">
  183.                                 <a href="javascript:;">
  184.                                     <img src="images/jiangxuan_2.jpg" alt="">
  185.                                     <div class="has_border">
  186.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  187.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  188.                                     </div>
  189.                                 </a>
  190.                             </div>
  191.                             <div class="col-md-3">
  192.                                 <a href="javascript:;">
  193.                                     <img src="images/jiangxuan_2.jpg" alt="">
  194.                                     <div class="has_border">
  195.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  196.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  197.                                     </div>
  198.                                 </a>
  199.                             </div>
  200.                             <div class="col-md-3">
  201.                                 <a href="javascript:;">
  202.                                     <img src="images/jiangxuan_2.jpg" alt="">
  203.                                     <div class="has_border">
  204.                                         <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  205.                                         <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  206.                                     </div>
  207.                                 </a>
  208.                             </div>
  209.                         </div>
  210.                     </div>
  211.                 </div>
  212.             </div>
  213.         </section>
  214.         <!-- 黑马精选end-->
  215.         <!-- 国内游 start-->
  216.         <section class="hemai_jx">
  217.             <div class="jx_top">
  218.                 <div class="jx_tit">
  219.                     <img src="images/icon_6.jpg" alt="">
  220.                     <span>国内游</span>
  221.                 </div>
  222.             </div>
  223.             <div class="heima_gn">
  224.                 <div class="guonei_l">
  225.                     <img src="images/guonei_1.jpg" alt="">
  226.                 </div>
  227.                 <div class="guone_r">
  228.                     <div class="row">
  229.                         <div class="col-md-4">
  230.                             <a href="route_detail.html">
  231.                         <img src="images/jiangxuan_4.jpg" alt="">
  232.                         <div class="has_border">
  233.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  234.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  235.                         </div>
  236.                      </a>
  237.                         </div>
  238.                         <div class="col-md-4">
  239.                             <a href="route_detail.html">
  240.                         <img src="images/jiangxuan_4.jpg" alt="">
  241.                         <div class="has_border">
  242.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  243.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  244.                         </div>
  245.                      </a>
  246.                         </div>
  247.                         <div class="col-md-4">
  248.                             <a href="route_detail.html">
  249.                         <img src="images/jiangxuan_4.jpg" alt="">
  250.                         <div class="has_border">
  251.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  252.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  253.                         </div>
  254.                      </a>
  255.                         </div>
  256.                         <div class="col-md-4">
  257.                             <a href="route_detail.html">
  258.                         <img src="images/jiangxuan_4.jpg" alt="">
  259.                         <div class="has_border">
  260.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  261.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  262.                         </div>
  263.                      </a>
  264.                         </div>
  265.                         <div class="col-md-4">
  266.                             <a href="route_detail.html">
  267.                            <img src="images/jiangxuan_4.jpg" alt="">
  268.                         <div class="has_border">
  269.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  270.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  271.                         </div>
  272.                      </a>
  273.                         </div>
  274.                         <div class="col-md-4">
  275.                             <a href="route_detail.html">
  276.                         <img src="images/jiangxuan_4.jpg" alt="">
  277.                         <div class="has_border">
  278.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  279.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  280.                         </div>
  281.                      </a>
  282.                         </div>
  283.                     </div>
  284.                 </div>
  285.             </div>
  286.         </section>
  287.         <!-- 国内游 end-->
  288.         <!-- 境外游 start-->
  289.         <section class="hemai_jx">
  290.             <div class="jx_top">
  291.                 <div class="jx_tit">
  292.                     <img src="images/icon_7.jpg" alt="">
  293.                     <span>境外游</span>
  294.                 </div>
  295.             </div>
  296.             <div class="heima_gn">
  297.                 <div class="guonei_l">
  298.                     <img src="images/jiangwai_1.jpg" alt="">
  299.                 </div>
  300.                 <div class="guone_r">
  301.                     <div class="row">
  302.                         <div class="col-md-4">
  303.                             <a href="route_detail.html">
  304.                         <img src="images/jiangxuan_4.jpg" alt="">
  305.                         <div class="has_border">
  306.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  307.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  308.                         </div>
  309.                      </a>
  310.                         </div>
  311.                         <div class="col-md-4">
  312.                             <a href="route_detail.html">
  313.                         <img src="images/jiangxuan_4.jpg" alt="">
  314.                         <div class="has_border">
  315.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  316.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  317.                         </div>
  318.                      </a>
  319.                         </div>
  320.                         <div class="col-md-4">
  321.                             <a href="route_detail.html">
  322.                         <img src="images/jiangxuan_4.jpg" alt="">
  323.                         <div class="has_border">
  324.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  325.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  326.                         </div>
  327.                      </a>
  328.                         </div>
  329.                         <div class="col-md-4">
  330.                             <a href="route_detail.html">
  331.                         <img src="images/jiangxuan_4.jpg" alt="">
  332.                         <div class="has_border">
  333.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  334.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  335.                         </div>
  336.                      </a>
  337.                         </div>
  338.                         <div class="col-md-4">
  339.                             <a href="route_detail.html">
  340.                            <img src="images/jiangxuan_4.jpg" alt="">
  341.                         <div class="has_border">
  342.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  343.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  344.                         </div>
  345.                      </a>
  346.                         </div>
  347.                         <div class="col-md-4">
  348.                             <a href="route_detail.html">
  349.                         <img src="images/jiangxuan_4.jpg" alt="">
  350.                         <div class="has_border">
  351.                            <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
  352.                            <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
  353.                         </div>
  354.                      </a>
  355.                         </div>
  356.                     </div>
  357.                 </div>
  358.             </div>
  359.         </section>
  360.         <!-- 境外游 end-->
  361.     </section>
  362.     <!-- 旅游 end-->
  363.    <!--导入底部-->
  364.     <div id="footer"></div>
  365.  
  366. <script>
  367.     //点击"我的收藏"按钮触发的方法
  368.    /* function myFavorite(){
  369.         var rid = getParameter("rid");
  370.         //1. 判断用户是否登录
  371.         $.get("user/findOne",{},function (user) {
  372.             if(user){
  373.                 //用户登录了
  374.                 //添加功能
  375.                 $.get("route/addFavorite",{rid:rid},function () {
  376.                     //代码刷新页面
  377.                     location.reload();
  378.                 });
  380.             }else{
  381.                 //用户没有登录
  382.                 alert("您尚未登录，请登录");
  383.                 location.href="http://localhost/travel/login.html";
  384.             }
  385.         })
  386.     }*/
  387.  
  388. </script>
  389.  
  390.  
  391. </body>
  392. </html>
首先index.html中的标签添加id

【问题】人气旅游不显示&选中格式也错位了

【原因】选中发现“人气旅游”是存在的，只是字体颜色和背景色都是白色所以看不见

index.html

改之前

  1. <div class="jx_tit">
  2.         <img src="images/icon_5.jpg" alt="">
  3.         <span>黑马精选</span>
  4.     </div>
  5.     <!-- Nav tabs -->
  6.     <ul class="jx_tabs" role="tablist">
  7.         <li role="presentation" class="active">
  8.             <span></span>
  9.             <a href="#popularity" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a>
  10.         </li>
  11.         <li role="presentation">
  12.             <span></span>
  13.             <a href="#newest" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a>
  14.         </li>
  15.         <li role="presentation">
  16.             <span></span>
  17.             <a href="#theme" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a>
  18.         </li>
  19.     </ul>
  20. </div>

改之后

  1. <div class="jx_tit">
  2.         <img src="images/icon_5.jpg" alt="">
  3.         <span>黑马精选</span>
  4.     </div>
  5.     <!-- Nav tabs -->
  6.     <ul class="jx_tabs" role="tablist">
  7.         <li role="presentation" class="active">
  8.             <a href="#popularity" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a>
  9.             <span></span>
  10.              </li>
  11.         <li role="presentation">
  12.             <a href="#newest" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a>
  13.             <span></span>
  14.            </li>
  15.         <li role="presentation">
  16.             <a href="#theme" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a>
  17.             <span></span>
  18.         </li>
  19.     </ul>
  20. </div>

修改之后即可

【出现报错】

前端是404，找不到/travel/css/bootstrap.min.css.map

解决方法见：http://t.csdn.cn/dockY

导入了/travel/css/bootstrap.min.css，但是一直404，找不到/travel/css/bootstrap.min.css.map，找不到对应的路径（真没有.map这个文件啊），怪哉！

后台报的是testWhileIdle is true, validationQuery not set

浏览器访问Maven项目时报testWhileIdle is true, validationQuery not set

原因：

开启空闲检测，但是没有设置对应的检测语句

解决方法

在druid配置文件加上

  1. #如果指定,则查询必须是一个SQL SELECT并且必须返回至少一行记录 
  2.  validation-query: select 1

好像没什么用￣□￣｜｜

【出现问题】人气旅游分页没有内容展示

【原因】RouteDaoImpl中查询语句返回有误，

更正一下

前端页面展示

【问题】但是一看，最新旅游和主题旅游还是写死的界面

【出现原因】index.html中id选择器没有对应id

加上以后运行结果：

成了鸭，好耶！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/925842
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号