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>\n' +
144 ' <div class="img"><img src="'+routes[i].rimage+'" alt=""></div>\n' +
145 ' <div class="text1">\n' +
146 ' <p>'+routes[i].rname+'</p>\n' +
147 ' <br/>\n' +
148 ' <p>'+routes[i].routeIntroduce+'</p>\n' +
149 ' </div>\n' +
150 ' <div class="price">\n' +
151 ' <p class="price_num">\n' +
152 ' <span>¥</span>\n' +
153 ' <span>'+routes[i].price+'</span>\n' +
154 ' <span>起</span>\n' +
155 ' </p>\n' +
156 ' <p><a href="route_detail.html?rid='+routes[i].rid+'">查看详情</a></p>\n' +
157 ' </div>\n' +
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>¥</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>¥</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>¥</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>¥</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>¥</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>¥</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>¥</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>¥</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>¥<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>¥<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>¥<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>¥<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>¥<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