• 黑马旅游网 ajax+html在前端实现页标签个数控制

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>黑马旅游-搜索</title>
  9     <link rel="stylesheet" type="text/css" href="css/common.css">
 10     <link rel="stylesheet" href="css/search.css">
 11     <style>
 12         #pageBar>li{
 13             cursor: pointer;
 14         }
 15     </style>
 16     <script src="js/jquery-3.3.1.js"></script>
 17     <script src="js/getParameter.js"></script>
 18     <script>
 19         $(function () {
 20            /*
 21             分类
 22             */
 23             let cid = getParameter("cid");
 24             //加载时根据cid查询
 25             queryPage(cid);
 26         });
 27 
 28         function queryPage(cid, currentPage){
 29             $.get("route/queryPage",{cid: cid, currentPage: currentPage}, function (pb) {
 30                 /*
 31                     显示分页条，首页上一页页码下一页末页，总页总条
 32                  */
 33                 // <li class="threeword"><a href="#">上一页</a></li>
 34                 //     <li><a href="">首页</a></li>
 35                 //     <li class="threeword"><a href="#">上一页</a></li>
 36                 //     <li><a href="#">1</a></li>
 37                 //     <li><a href="#">2</a></li>
 38                 //     <li><a href="#">3</a></li>
 39                 //     <li><a href="#">4</a></li>
 40                 //     <li><a href="#">5</a></li>
 41                 //     <li><a href="#">6</a></li>
 42                 //     <li><a href="#">7</a></li>
 43                 //     <li><a href="#">8</a></li>
 44                 //     <li><a href="#">9</a></li>
 45                 //     <li><a href="#">10</a></li>
 46                 //     <li class="threeword"><a href="javascript:;">下一页</a></li>
 47                 //     <li class="threeword"><a href="javascript:;">末页</a></li>
 48 
 49                 // alert(JSON.stringify(pb));
 50                 //总条
 51                 $("#totalCount").html(pb.totalCount);
 52                 //总页
 53                 $("#totalPage").html(pb.totalPage);
 54 
 55                 // var lis;//必须初始化，不然与字符串相加，会将undefined加进去
 56                 var lis = "";
 57 
 58                 if(pb.totalPage != 0 && pb.currentPage != 1){//总页数不为0，并且当前页不是第1页，则显示首页上一页
 59                     //首页
 60                     var firstPage = '<li onclick="queryPage('+cid+', '+1+');"><a href="javascript: void(0);">首页</a></li>';
 61                     lis += firstPage;
 62 
 63                     //上一页
 64                     var prePage = '<li onclick="queryPage('+cid+', '+ (pb.currentPage - 1) +');" class="threeword"><a href="javascript: void(0);">上一页</a></li>';
 65                     lis += prePage;
 66                 }
 67 
 68                 //页标签个数控制 pageLinkCount, inLeft, leftOff, rightOff, startPage, endPage
 69                 var pageLinkCount = 5;//显示页标签个数
 70                 var inLeft = false;//当页标签为偶数时，当前页居左还是居右
 71 
 72                 var leftOff;
 73                 var rightOff;
 74                 // if(pageLinkCount % 2 != 0){
 75                 //     //奇数个页标签
 76                 //     leftOff = rightOff = pageLinkCount / 2;
 77                 // }else{
 78                 //     //偶数个页标签
 79                 //     if(inLeft){
 80                 //         leftOff = pageLinkCount / 2 - 1;
 81                 //         rightOff = pageLinkCount / 2;
 82                 //     }else{
 83                 //         leftOff = pageLinkCount / 2;
 84                 //         rightOff = pageLinkCount / 2 + 1;
 85                 //     }
 86                 // }
 87 
 88                 leftOff = rightOff = Math.floor(pageLinkCount / 2);
 89                 if(pageLinkCount % 2 == 0){
 90                     inLeft ? leftOff-- : rightOff--;
 91                 }
 92 
 93                 var startPage;
 94                 var endPage;
 95                 if(pb.totalPage < pageLinkCount){
 96                     //总页数小于页标签数
 97                     startPage = 1;
 98                     endPage = pb.totalPage;
 99                 }else{
100                     //总页数大于页标签数
101                     startPage = pb.currentPage - leftOff;
102                     endPage = pb.currentPage + rightOff;
103 
104                     if(startPage < 1){
105                         startPage = 1;
106                         endPage = pageLinkCount;
107                     }
108 
109                     if(endPage > pb.totalPage){
110                         endPage = pb.totalPage;
111                         startPage = pb.totalPage - pageLinkCount + 1;
112                     }
113                 }
114 
115 
116                 //页码
117                 for (let i = startPage; i <= endPage; i++) {
118                     if(i == pb.currentPage){
119                         lis += '<li class="curPage" onclick="queryPage('+cid+', '+i+' );"><a href="javascript:void(0);">'+i+'</a></li>';
120                     }else{
121                         lis += '<li onclick="queryPage('+cid+', '+i+' );"><a href="javascript:void(0);">'+i+'</a></li>';
122                     }
123                 }
124 
125                 if(pb.totalPage != 0 && pb.currentPage != pb.totalPage){
126                     //下一页
127                     var nextPage = '<li onclick="queryPage('+cid+', '+(pb.currentPage + 1)+' );" class="threeword"><a href="javascript: void(0);">下一页</a></li>';
128                     lis += nextPage;
129                     //末页
130                     var lastPage = '<li onclick="queryPage('+cid+', '+pb.totalPage+' );"><a href="javascript: void(0);">末页</a></li>';
131                     lis += lastPage;
132                 }
133 
134                 $("#pageBar").html(lis);
135 
136                 /*
137                     显示分页数据
138                  */
139                 var routes = pb.list;
140                 var routeLis = "";
141                 if(routes){
142                     for (let i = 0; i < routes.length; i++) {
143                         routeLis += '<li>
' +
144                             '    <div class="img"><img src="'+routes[i].rimage+'" alt=""></div>
' +
145                             '    <div class="text1">
' +
146                             '        <p>'+routes[i].rname+'</p>
' +
147                             '        <br/>
' +
148                             '        <p>'+routes[i].routeIntroduce+'</p>
' +
149                             '    </div>
' +
150                             '    <div class="price">
' +
151                             '        <p class="price_num">
' +
152                             '            <span>&yen;</span>
' +
153                             '            <span>'+routes[i].price+'</span>
' +
154                             '            <span>起</span>
' +
155                             '        </p>
' +
156                             '        <p><a href="route_detail.html?rid='+routes[i].rid+'">查看详情</a></p>
' +
157                             '    </div>
' +
158                             '</li>'
159                     }
160                 }
161                 $("#routeUL").html(routeLis);
162 
163                 //滚动到顶部
164                 // window.scrollTo(0, 0);
165             });
166         }
167 
168 function getQuery() {
169     let search = location.search;
170     // alert(search);
171 
172     //没有查询参数
173     let i = search.indexOf("?");
174     if( i == -1){
175         return {};
176     };
177 
178     //去除问号
179     search = search.substring(i + 1);
180 
181     //得到参数
182     let result = {};
183     let items = search.split("&");
184     for(let item of items){
185         let split = item.split("=");
186         // alert(split[0]);
187         // alert(split[1]);
188         if(split[0]){
189             result[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
190         }
191     }
192     return result;
193 }
194 
195 function getQueryStringArgs(){
196     var qs=location.search.length ? location.search.substring(1) : "";
197     var args={};
198     var items=qs.length ? qs.split("&") : [];
199     var item=null,
200         name=null,
201         value=null,
202         len=items.length;
203     for(var i=0;i<len;i++){
204         item=items[i].split("=");
205         if(item[0].length){
206             name=decodeURIComponent(item[0]);
207             value=decodeURIComponent(item[1]);
208             args[name]=value;
209         }
210     }
211     return args;
212 }
213 
214 function getQueryArgs(){
215     let qs=location.search.length ? location.search.substring(1) : "";
216     let args={};
217     let items=qs.length ? qs.split("&") : [];
218 
219     for(let item of items){
220         let pair=item.split("=");
221         if(pair[0].length){
222             args[decodeURIComponent(pair[0])]= decodeURIComponent(pair[1]);
223         }
224     }
225     return args;
226 }
227     </script>
228 </head>
229 <body>
230 <!--引入头部-->
231 <div id="header"></div>
232     <div class="page_one">
233         <div class="contant">
234             <div class="crumbs">
235                 <img src="images/search.png" alt="">
236                 <p>黑马旅行><span>搜索结果</span></p>
237             </div>
238             <div class="xinxi clearfix">
239                 <div class="left">
240                     <div class="header">
241                         <span>商品信息</span>
242                         <span class="jg">价格</span>
243                     </div>
244                     <ul id="routeUL">
245                         <li>
246                             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
247                             <div class="text1">
248                                 <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
249                                 <br/>
250                                 <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
251                             </div>
252                             <div class="price">
253                                 <p class="price_num">
254                                     <span>&yen;</span>
255                                     <span>299</span>
256                                     <span>起</span>
257                                 </p>
258                                 <p><a href="route_detail.html">查看详情</a></p>
259                             </div>
260                         </li>
261                         <li>
262                             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
263                             <div class="text1">
264                                 <p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p>
265                                 <br/>
266                                 <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
267                             </div>
268                             <div class="price">
269                                 <p class="price_num">
270                                     <span>&yen;</span>
271                                     <span>899</span>
272                                     <span>起</span>
273                                 </p>
274                                 <p><a href="route_detail.html">查看详情</a></p>
275                             </div>
276                         </li>
277                         <li>
278                             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
279                             <div class="text1">
280                                 <p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p>
281                                 <br/>
282                                 <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
283                             </div>
284                             <div class="price">
285                                 <p class="price_num">
286                                     <span>&yen;</span>
287                                     <span>999</span>
288                                     <span>起</span>
289                                 </p>
290                                 <p><a href="route_detail.html">查看详情</a></p>
291                             </div>
292                         </li>
293                         <li>
294                             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
295                             <div class="text1">
296                                 <p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p>
297                                 <br/>
298                                 <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
299                             </div>
300                             <div class="price">
301                                 <p class="price_num">
302                                     <span>&yen;</span>
303                                     <span>99</span>
304                                     <span>起</span>
305                                 </p>
306                                 <p><a href="route_detail.html">查看详情</a></p>
307                             </div>
308                         </li>
309                         <li>
310                             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
311                             <div class="text1">
312                                 <p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p>
313                                 <br/>
314                                 <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
315                             </div>
316                             <div class="price">
317                                 <p class="price_num">
318                                     <span>&yen;</span>
319                                     <span>199</span>
320                                     <span>起</span>
321                                 </p>
322                                 <p><a href="route_detail.html">查看详情</a></p>
323                             </div>
324                         </li>
325                         <li>
326                             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
327                             <div class="text1">
328                                 <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
329                                 <br/>
330                                 <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
331                             </div>
332                             <div class="price">
333                                 <p class="price_num">
334                                     <span>&yen;</span>
335                                     <span>899</span>
336                                     <span>起</span>
337                                 </p>
338                                 <p><a href="route_detail.html">查看详情</a></p>
339                             </div>
340                         </li>
341                         <li>
342                             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
343                             <div class="text1">
344                                 <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
345                                 <br/>
346                                 <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
347                             </div>
348                             <div class="price">
349                                 <p class="price_num">
350                                     <span>&yen;</span>
351                                     <span>1199</span>
352                                     <span>起</span>
353                                 </p>
354                                 <p><a href="route_detail.html">查看详情</a></p>
355                             </div>
356                         </li>
357                         <li>
358                             <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
359                             <div class="text1">
360                                 <p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p>
361                                 <br/>
362                                 <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
363                             </div>
364                             <div class="price">
365                                 <p class="price_num">
366                                     <span>&yen;</span>
367                                     <span>1589</span>
368                                     <span>起</span>
369                                 </p>
370                                 <p><a href="route_detail.html">查看详情</a></p>
371                             </div>
372                         </li>
373                     </ul>
374                     <div class="page_num_inf">
375                         <i></i> 共
376                         <span id="totalPage">12</span>页<span id="totalCount">132</span>条
377                     </div>
378                     <div class="pageNum">
379                         <ul id="pageBar">
380                             <!--<li><a href="">首页</a></li>-->
381                             <!--<li class="threeword"><a href="#">上一页</a></li>-->
382                             <!--<li><a href="#">1</a></li>-->
383                             <!--<li><a href="#">2</a></li>-->
384                             <!--<li><a href="#">3</a></li>-->
385                             <!--<li><a href="#">4</a></li>-->
386                             <!--<li><a href="#">5</a></li>-->
387                             <!--<li><a href="#">6</a></li>-->
388                             <!--<li><a href="#">7</a></li>-->
389                             <!--<li><a href="#">8</a></li>-->
390                             <!--<li><a href="#">9</a></li>-->
391                             <!--<li><a href="#">10</a></li>-->
392                             <!--<li class="threeword"><a href="javascript:;">下一页</a></li>-->
393                             <!--<li class="threeword"><a href="javascript:;">末页</a></li>-->
394                         </ul>
395                     </div>
396                 </div>
397                 <div class="right">
398                     <div class="top">
399                         <div class="hot">HOT</div>
400                         <span>热门推荐</span>
401                     </div>
402                     <ul>
403                         <li>
404                             <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
405                             <div class="right">
406                                 <p>清远新银盏温泉度假村酒店/自由行套...</p>
407                                 <p>网付价<span>&yen;<span>899</span>起</span>
408                                 </p>
409                             </div>
410                         </li>
411                         <li>
412                             <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
413                             <div class="right">
414                                 <p>清远新银盏温泉度假村酒店/自由行套...</p>
415                                 <p>网付价<span>&yen;<span>899</span>起</span>
416                                 </p>
417                             </div>
418                         </li>
419                         <li>
420                             <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
421                             <div class="right">
422                                 <p>清远新银盏温泉度假村酒店/自由行套...</p>
423                                 <p>网付价<span>&yen;<span>899</span>起</span>
424                                 </p>
425                             </div>
426                         </li>
427                         <li>
428                             <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
429                             <div class="right">
430                                 <p>清远新银盏温泉度假村酒店/自由行套...</p>
431                                 <p>网付价<span>&yen;<span>899</span>起</span>
432                                 </p>
433                             </div>
434                         </li>
435                         <li>
436                             <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
437                             <div class="right">
438                                 <p>清远新银盏温泉度假村酒店/自由行套...</p>
439                                 <p>网付价<span>&yen;<span>899</span>起</span>
440                                 </p>
441                             </div>
442                         </li>
443                     </ul>
444                 </div>
445             </div>
446         </div>
447     </div>
448 
449     <!--引入头部-->
450 <div id="footer"></div>
451 <!--导入布局js，共享header和footer-->
452 <script type="text/javascript" src="js/include.js"></script>
453 </body>
454 
455 </html>
    route_list.html
     1 package cn.itcast.travel.web.servlet;
 2 
 3 import cn.itcast.travel.domain.PageBean;
 4 import cn.itcast.travel.domain.Route;
 5 import cn.itcast.travel.service.RouteService;
 6 import cn.itcast.travel.service.impl.RouteServiceImpl;
 7 
 8 import javax.servlet.ServletException;
 9 import javax.servlet.annotation.WebServlet;
10 import javax.servlet.http.HttpServlet;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13 import java.io.IOException;
14 import java.util.List;
15 
16 @WebServlet("/route/queryPage")
17 public class RouteServlet extends BaseServlet {
18     RouteService routeService = new RouteServiceImpl();
19 
20     public void queryPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
21         //获取参数
22         String cid = request.getParameter("cid");
23         String currentPage = request.getParameter("currentPage");
24         String pageSize = request.getParameter("pageSize");
25 
26         //调用业务，查询
27         PageBean<Route> routePageBean = routeService.queryPage(currentPage, pageSize, cid);
28 
29         //响应数据
30         writeValue(routePageBean, response);
31     }
32 
33 }
    RouteServlet
     1 package cn.itcast.travel.web.servlet;
 2 
 3 import com.fasterxml.jackson.databind.ObjectMapper;
 4 
 5 import javax.servlet.ServletException;
 6 import javax.servlet.annotation.WebServlet;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 import java.io.IOException;
11 import java.lang.reflect.InvocationTargetException;
12 import java.lang.reflect.Method;
13 
14 //@WebServlet("/*")
15 public class BaseServlet extends HttpServlet {
16     @Override
17     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
18         //获取uri
19         String uri = request.getRequestURI();
20         System.out.println(uri);
21 
22         //获取方法名称
23         String methodName = uri.substring(uri.lastIndexOf("/") + 1);
24         System.out.println(methodName);
25 
26         //反射调用方法
27         try {
28             Method method = this.getClass().getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
29             method.invoke(this, request,response);
30         } catch (NoSuchMethodException e) {
31             e.printStackTrace();
32         } catch (IllegalAccessException e) {
33             e.printStackTrace();
34         } catch (InvocationTargetException e) {
35             e.printStackTrace();
36         }
37     }
38 
39     void writeValue(Object obj, HttpServletResponse response) throws IOException {
40         response.setContentType("application/json;charset=utf-8");
41         new ObjectMapper().writeValue(response.getOutputStream(), obj);
42     }
43 
44     String writeValueAsString(Object obj) throws IOException {
45         return new ObjectMapper().writeValueAsString(obj);
46     }
47 }
    BaseServlet
     1 package cn.itcast.travel.service.impl;
 2 
 3 import cn.itcast.travel.dao.RouteDao;
 4 import cn.itcast.travel.dao.impl.RouteDaoImpl;
 5 import cn.itcast.travel.domain.PageBean;
 6 import cn.itcast.travel.domain.Route;
 7 import cn.itcast.travel.service.RouteService;
 8 import cn.itcast.travel.util.Constants;
 9 
10 import java.util.List;
11 
12 public class RouteServiceImpl implements RouteService {
13     RouteDao routeDao = new RouteDaoImpl();
14     @Override
15     public PageBean<Route> queryPage(String currentPageStr, String pageSizeStr, String cid) {
16         PageBean<Route> pb = new PageBean<>();
17 
18         int currentPage = 1;
19         if(currentPageStr != null && currentPageStr.length() > 0){
20             currentPage = Integer.parseInt(currentPageStr);
21         }
22 
23         int pageSize = Constants.DEFAULT_PAGESIZE;
24         if(pageSizeStr != null && pageSizeStr.length() > 0){
25             pageSize = Integer.parseInt(pageSizeStr);
26         }
27 
28         //当前页，页大小
29         pb.setCurrentPage(currentPage);
30         pb.setPageSize(pageSize);
31 
32         //查询总记录数
33         int totalCount = routeDao.findTotalCount(cid);
34         if(totalCount == 0){
35             //无记录
36             pb.setTotalCount(0);
37             pb.setTotalPage(0);
38             pb.setList(null);
39             return pb;
40         }
41         pb.setTotalCount(totalCount);
42 
43         //总页数
44         pb.setTotalPage((int) Math.ceil(1.0 * totalCount / pageSize));
45 
46         //页数据
47         List<Route> routeList = routeDao.findByPage((currentPage - 1) * pageSize, pageSize, cid);
48         pb.setList(routeList);
49 
50         return pb;
51     }
52 }
    RouteServiceImpl
     1 package cn.itcast.travel.service;
 2 
 3 import cn.itcast.travel.domain.PageBean;
 4 import cn.itcast.travel.domain.Route;
 5 
 6 import java.util.List;
 7 
 8 public interface RouteService {
 9 
10     /**
11      * 查询分页，某分类
12      * @param currentPage
13      * @param pageSize
14      * @param cid
15      * @return
16      */
17     PageBean<Route> queryPage(String currentPage, String pageSize, String cid);
18 }
    RouteService
     1 package cn.itcast.travel.dao;
 2 
 3 import cn.itcast.travel.domain.Route;
 4 
 5 import java.util.List;
 6 
 7 public interface RouteDao {
 8     /**
 9      * 按分类查询总条数
10      * @param cid 分类id
11      * @return
12      */
13     int findTotalCount(String cid);
14 
15 
16     List<Route> findByPage(int start, int size, String cid);
17 }
    RouteDao
     1 package cn.itcast.travel.dao.impl;
 2 
 3 import cn.itcast.travel.dao.RouteDao;
 4 import cn.itcast.travel.domain.Route;
 5 import cn.itcast.travel.util.JDBCUtils;
 6 import org.springframework.jdbc.core.BeanPropertyRowMapper;
 7 import org.springframework.jdbc.core.JdbcTemplate;
 8 
 9 import java.util.List;
10 
11 public class RouteDaoImpl implements RouteDao {
12     JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDataSource());
13 
14     @Override
15     public int findTotalCount(String cid) {
16         String sql = "select count(*) from tab_route where cid=? ";
17         return jdbcTemplate.queryForObject(sql, Integer.class, cid);
18     }
19 
20     @Override
21     public List<Route> findByPage(int start, int size, String cid) {
22         String sql = "select * from tab_route where cid=? limit ?,? ";
23         return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), cid, start, size);
24     }
25 }
    RouteDaoImpl
  • 相关阅读:
    程序员通过什么渠道接外包项目
    中小型软件项目开发一般流程建议
    DevExpress GridControl功能总结
    页面UI注意事项，你在乎吗？
    加密，解密
    本地化（国际化）
    AutoLayout(自动布局)
    UItableView与UICollectionView
    分享iOS开发常用（三方类库，工具，高仿APP，实用网站，技术干货）
    NSPredicate
  • 原文地址：https://www.cnblogs.com/mozq/p/10914749.html
Copyright © 2020-2023  润新知