目录

一、先查旅游分类所有内容

二、查询分页数据

三、实现后端代码

RouteServlet

RouteServiceImpl​​​​​​​

RouteService

RouteDaoImpl

RouteDao

PageBean

四、分页与数据展示

修改route_list.html

修改header.html

五、测试

一、先查旅游分类所有内容

点击了不同的分类后，将来看到的旅游线路不一样的。通过分析数据库表结构，发现，旅游线路表和分类表时一个多对一的关系

查询sql: select * from tab_route where cid=5

二、查询分页数据

查询: select * from 表 where 1=1 and cid=? and rname like ? limit ?,?

三、实现后端代码

​​​​​​​RouteServlet

package com.hotdas.travel.web.servlet;import com.hotdas.travel.domain.PageBean;
import com.hotdas.travel.domain.Route;
import com.hotdas.travel.service.RouteService;
import com.hotdas.travel.service.impl.RouteServiceImpl;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {private RouteService routeService = new RouteServiceImpl();public void queryPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException,Exception {//接收参数String currentPageStr = request.getParameter("currentPage");String cidStr = request.getParameter("cid");String pageSizeStr = request.getParameter("pageSize");System.out.println("cid="+cidStr);//有可能通过线路名称查询String rnameStr = request.getParameter("rname");System.out.println("rname="+rnameStr);//判断cidint cid =0;if(cidStr!=null && cidStr.length()>0 && !"null".equals(cidStr)){cid=Integer.parseInt(cidStr);}int currentPage=1;if(currentPageStr!=null && currentPageStr.length()>0){currentPage=Integer.parseInt(currentPageStr);}else{currentPage=1;}int pageSize = 0;if(pageSizeStr!=null && pageSizeStr.length()>0){pageSize=Integer.parseInt(pageSizeStr);}else{pageSize=5;}//调用service查询数据PageBean<Route> pageBean = routeService.queryPage(cid,currentPage,pageSize,rnameStr);writeValue(pageBean,response);}
}

​​​​​​​RouteServiceImpl​​​​​​​

package com.hotdas.travel.service.impl;import com.hotdas.travel.dao.RouteDao;
import com.hotdas.travel.dao.impl.RouteDaoImpl;
import com.hotdas.travel.domain.PageBean;
import com.hotdas.travel.domain.Route;
import com.hotdas.travel.service.RouteService;import java.util.List;public class RouteServiceImpl implements RouteService {private RouteDao routeDao = new RouteDaoImpl();@Overridepublic PageBean<Route> queryPage(int cid, int currentPage, int pageSize, String rnameStr) {PageBean<Route> pageBean =  new PageBean<>();pageBean.setCurrentPage(currentPage);pageBean.setPageSize(pageSize);//每页的记录集//先求出开始的索引int start = (currentPage-1)*pageSize;List<Route> list = routeDao.queryPageList(cid,start,pageSize,rnameStr);pageBean.setList(list);//总记录数int totalCount = routeDao.queryCount(cid,rnameStr);pageBean.setTotalCount(totalCount);//求出总页数int pageCount = totalCount% pageSize ==0 ? totalCount/pageSize : (totalCount/pageSize)+1;pageBean.setTotalPage(pageCount);return pageBean;}
}

RouteService

package com.hotdas.travel.service;import com.hotdas.travel.domain.PageBean;
import com.hotdas.travel.domain.Route;public interface RouteService {PageBean<Route> queryPage(int cid, int currentPage, int pageSize, String rnameStr);
}

RouteDaoImpl

package com.hotdas.travel.dao.impl;import com.hotdas.travel.dao.RouteDao;
import com.hotdas.travel.domain.Route;
import com.hotdas.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;import java.util.ArrayList;
import java.util.List;public class RouteDaoImpl implements RouteDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic int queryCount(int cid, String rnameStr) {//定义sqlString sql = "select count(*) from tab_route where 1=1";StringBuffer sb = new StringBuffer(sql);List params = new ArrayList();//判断cidif (cid!=0){sb.append(" and cid=? ");params.add(cid);//cid对应的值}//判断是否通过rname查询if (rnameStr!=null && rnameStr.length()>0){sb.append(" and rname like ? ");params.add("%"+rnameStr+"%");}sql = sb.toString();//执行sql返回return template.queryForObject(sql,Integer.class,params.toArray());}@Overridepublic List<Route> queryPageList(int cid, int start, int pageSize, String rnameStr) {//select * from tab_route where 1=1 cid=? and rname like ? limit ?,?;String sql = "select * from tab_route where 1=1 ";StringBuffer sb = new StringBuffer(sql);List params = new ArrayList();//判断cidif (cid!=0){sb.append(" and cid=? ");params.add(cid);//cid对应的值}//判断是否通过rname查询if (rnameStr!=null && rnameStr.length()>0){sb.append(" and rname like ? ");params.add("%"+rnameStr+"%");}//分页参数sb.append(" limit ?,? ");params.add(start);params.add(pageSize);sql=sb.toString();return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),params.toArray());}
}

RouteDao

package com.hotdas.travel.dao;import com.hotdas.travel.domain.Route;import java.util.List;public interface RouteDao {int queryCount(int cid, String rnameStr);List<Route> queryPageList(int cid, int start, int pageSize, String rnameStr);
}

PageBean

package com.hotdas.travel.domain;import java.util.List;public class PageBean<T> {private int totalCount;//总记录数private int totalPage;//总页数private int pageSize;//每页显示记录数private int currentPage; //当前页private List<T> list;//每页显示的数据集合public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {this.totalCount = totalCount;}public int getTotalPage() {return totalPage;}public void setTotalPage(int totalPage) {this.totalPage = totalPage;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}public int getCurrentPage() {return currentPage;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public List<T> getList() {return list;}public void setList(List<T> list) {this.list = list;}
}

四、分页与数据展示

修改route_list.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>卓越旅游-搜索</title><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" href="css/search.css"><script src="js/jquery-3.3.1.js"></script><script src="js/getParameter.js"></script><script>$(function () {var cid=getParameter("cid");var rname =getParameter("rname");//解码urlif (rname){rname =  window.decodeURIComponent(rname);}//通过ajax访问servlet获取数据库的数据//为了方便记录当前页load(cid,null,rname);});//通过ajax访问servlet获取数据库的数据function load(cid,currentPage,rname) {$.get("route/queryPage",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {//pb其实是pageBean的json数据,需要解释到页面中$("#totalCount").html(pb.totalCount);$("#totalPage").html(pb.totalPage);//  <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>var lis = "";var firstPage='<li><a onclick="javascript:load('+cid+',1,'+rname+');" href="javascript:void(0)">首页</a></li>';//计算上一页var beforNum = pb.currentPage-1;if (beforNum<=0){beforNum=1;}var secondePage='<li class="threeword"><a onclick="javascript:load('+cid+',beforNum,'+rname+');" href="javascript:void(0)">上一页</a></li>';lis+=firstPage;lis+=secondePage;var begin;//开始位置var end;//结束位置if (pb.totalPage<10){begin=1;end=pb.totalPage;}else{//总页数超过10页begin=pb.currentPage-5;end=pb.currentPage+4;//如果前边不够5个,后面补够10个if(begin<1){begin=1;end=begin+9;}//如果右边不够4条,前面补够10个if (end>pb.totalPage){begin=pb.totalPage-9;end=pb.totalPage;}}for(var i=begin;i<=end;i++){//判断是否是当前页if(pb.currentPage==i){li='<li class="curPage"><a onclick="javascript:load('+cid+','+i+','+rname+');" href="javascript:void(0)">'+i+'</a></li>';}else{li='<li><a onclick="javascript:load('+cid+','+i+','+rname+');" href="javascript:void(0)">'+i+'</a></li>';}//把遍历的内容拼串lis+=li;}//下一页var nextPage ='<li class="threeword"><a onclick="javascript:load('+cid+',pb.currentPage+1,'+rname+');" href="javascript:void(0)">下一页</a></li>';var lastPage ='<li><a onclick="javascript:load('+cid+',pb.totalPage,'+rname+');" href="javascript:void(0)">首页</a></li>';lis+=nextPage;lis+=lastPage;$("#pageNum").html(lis);// <li>//     <div class="img"><img src="data:images/04-search_03.jpg" alt=""></div>//         <div class="text1">//         <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>//     <br/>//     <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>//     </div>//     <div class="price">//         <p class="price_num">//         <span>&yen;</span>//     <span>1199</span>//     <span>起</span>//     </p>//     <p><a href="route_detail.html">查看详情</a></p>//     </div>//     </li>//列表的数据展示var routelis = "";for(var i=0;i<pb.list.length;i++){//{cid=1,rname=xxx}var route = pb.list[i];var li='<li>'+'<div class="img"><img src="'+route.rimage+'" alt=""></div>\n'+'<div class="text1">\n'+'<p>'+route.rname+'</p>\n'+'<br/>\n'+'<p>'+route.routeIntroduce+'</p>\n'+'</div>\n'+'<div class="price">\n'+'<p class="price_num">\n'+'<span>&yen;</span>\n'+'<span>'+route.price+'</span>\n'+'<span>起</span>\n'+'</p>\n'+'<p><a href="route_detail.html?rid='+route.rid+'">查看详情</a></p>\n'+'</div>\n'+'</li>';routelis+=li;}$("#route").html(routelis);});}</script>
</head>
<body>
<!--引入头部-->
<div id="header"></div><div class="page_one"><div class="contant"><div class="crumbs"><img src="data:images/search.png" alt=""><p>卓越旅行><span>搜索结果</span></p></div><div class="xinxi clearfix"><div class="left"><div class="header"><span>商品信息</span><span class="jg">价格</span></div><ul id="route"></ul><div class="page_num_inf"><i></i> 共<span id="totalPage"></span>页<span id="totalCount"></span>条</div><div class="pageNum"><ul id="pageNum"></ul></div></div><div class="right"><div class="top"><div class="hot">HOT</div><span>热门推荐</span></div><ul><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li></ul></div></div></div></div><!--引入头部--><div id="footer"></div><!--导入布局js，共享header和footer--><script type="text/javascript" src="js/include.js"></script>
</body></html>

修改header.html

<!-- 头部 start --><script>$(function () {$.post("user/findUser",{},function (data) {if (data.name!="undefined" && data.name!=null){var msg = "欢迎回来，"+data.name;$("#span_username").html(msg);$(".login").css("display","block");}else{$(".login").css("display","none");}});//通过ajax获取分类数据$.get("category/findAll",{},function (data) {var lis = '<li class="nav-active"><a href="index.html">首页</a></li>';//数据遍历for(var i=0;i<data.length;i++){var li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';lis +=li;}lis+='<li><a href="favoriterank.html">收藏排行榜</a></li>';//往ul标签下插入html代码块$("#category").html(lis);});});</script><header id="header"><div class="top_banner"><img src="data:images/top_banner.jpg" alt=""></div><div class="shortcut"><!-- 未登录状态  --><div class="login_out"><a href="login.html">登录</a><a href="register.html">注册</a></div><!-- 登录状态  --><div class="login" style="display:none;"><span id="span_username">欢迎回来，admin</span><a href="myfavorite.html" class="collection">我的收藏</a><a href="javascript:location.href='user/exit';">退出</a></div></div><div class="header_wrap"><div class="topbar"><div class="logo"><a href="/"><img src="data:images/logo.jpg" alt=""></a></div><div class="search"><input name="rname" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off"><a href="javascript:;" class="search-button">搜索</a></div><div class="hottel"><div class="hot_pic"><img src="data:images/hot_tel.jpg" alt=""></div><div class="hot_tel"><p class="hot_time">客服热线(9:00-6:00)</p><p class="hot_num">400-618-9090</p></div></div></div></div></header><!-- 头部 end --><!-- 首页导航 --><div class="navitem"><ul id="category" class="nav">
<!--            <li class="nav-active"><a href="index.html">首页</a></li>-->
<!--            <li><a href="route_list.html">门票</a></li>-->
<!--            <li><a href="route_list.html">酒店</a></li>-->
<!--            <li><a href="route_list.html">香港车票</a></li>-->
<!--            <li><a href="route_list.html">出境游</a></li>-->
<!--            <li><a href="route_list.html">国内游</a></li>-->
<!--            <li><a href="route_list.html">港澳游</a></li>-->
<!--            <li><a href="route_list.html">抱团定制</a></li>-->
<!--            <li><a href="route_list.html">全球自由行</a></li>-->
<!--            <li><a href="favoriterank.html">收藏排行榜</a></li>--></ul></div>

五、测试

黑马旅游网-旅游分类线路分页显示（七）相关推荐

  1. 黑马旅游网——旅游路线详情展示和旅游路线收藏功能（完结）

    旅游路线详情展示效果: 将该旅游路线的价格.商家.风景图等等详细信息展示到详情页面上: 这个功能实现起来不难,但是比较墨迹,因为这一个页面中的信息要从三张表中查询:商家信息在seller表,图片在ro ...

  2. 迷你旅游网——旅游线路用名称查询以及查看详情（完成查询条件不确定性的定义模板方式解决...）

    一. 即将完成的工作 线路名称查询(模糊查询) 查看线路详情 二.线路名称查询(模糊查询) 1.在之前的线路分页展示代码上修改部分代码来完成查询功能 查询参数的传递,类别id:cid,线路名称:rna ...

  3. 黑马旅游网学习笔记之分页展示(六)

    概述 (一)类别id传递 (二)功能分析 (三)后台代码实现 (四)前台代码实现 (一)类别id传递 数据库中的一个category对应多个route,也就是一个分类中有多个线路 查询不同分类的旅游线 ...

  4. 7. 黑马旅游网——旅游线路的名称查询

    目录 12.旅游线路名称查询 12.1 查询参数的传递 12.2 修改后台代码 12.3 修改前台代码 13.旅游线路的详情展示 12.旅游线路名称查询 12.1 查询参数的传递 在header.ht ...

  5. 我发现了一个黑马旅游网旅游线路查询的bug

    2020.5.5第一次编写  项目背景 有三种方式展示数据: 只通过category的cid属性来显示数据,也即是点击分类显示相应数据. 只通过查询(他对应变量为rname)来显示数据,也即是在首页直 ...

  6. 黑马旅游网-旅游线路详情信息功能（九）

    目录 一.分析 二.前端实现 三.后端实现 RouteServlet RouteService RouteServiceImpl RouteImgDao ​​​​​​​RouteImgDaoImpl ...

  7. 7-黑马旅游网-旅游线路收藏

    旅游线路收藏功能 分析 判断当前登录用户是否收藏过该线路 当页面加载完成后,发送ajax请求,获取用户是否收藏的标记 根据标记,展示不同的按钮样式 后台代码 RouteServlet public v ...

  8. JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】

    Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

  9. 黑马旅游网编写练习(6)--旅游线路分页展示功能

    黑马旅游网编写练习(6)–旅游线路分页展示功能 首页的目录展示功能已经完成,在进入主页后,页面会自动向服务器发送Ajax请求,从而获取目录数据,我们将其名称cname展示到页面中:接下来要实现的是分页 ...

最新文章

  1. NB-IoT与LoRa，两马领跑物联网竞赛，谁将最终胜出？
  2. JAVA实现链表中倒数第K个节点问题（《剑指offer》）
  3. Java NIO学习系列六：Java中的IO模型
  4. 如果我们预先得知未来某一刻会因为此刻的决定而失败，那是否还会继续努力？
  5. for循环中gets_Python中for循环的一些非常规操作
  6. html和css的缺点,个人缺点20个
  7. 推荐第三方SQL查询工具
  8. 视频分割修整功哪一款视频剪辑软件更好用？
  9. Linux 修改静态 IP
  10. MySQL-第六篇DML语句
  11. Flume 1.8.0 用户指南（Flume 1.8.0 User Guide）
  12. 未开启3389实现远程桌面
  13. trivy【1】漏洞扫描工具安装
  14. python 筛选 加字段_如何显示/隐藏显示在筛选中的字段，按选择分组？
  15. Vue防抖（三种方式）
  16. 【KALI使用】12搜索引擎Google、YANDEX、Maltego
  17. Big Faceless Java PDF Viewer library简介
  18. 使用第三方软件管理苹果设备
  19. Linux 系统安全与优化配置
  20. 戴尔740服务器raid型号,武汉戴尔PowerEdgeR740服务器做PERC5/Raid6RAID如何配置?经典图文教程...

热门文章

  1. LINUX 下无线网卡 rtl8821CE/rtl8723de 驱动 无法驱动解决办法
  2. Excel如何分别提取出数值整数部分和小数部分
  3. TAM: TEMPORAL ADAPTIVE MODULE FOR VIDEO RECOGNITION ∗
  4. 060031班第一次班级聚会
  5. fastai 文本分类_使用Fastai v2和多标签文本分类器检查有毒评论
  6. 吴洪声十问易名CEO金小刚:域名还有没有投资价值？
  7. 【图像处理】条形码与二维码的定位与识别
  8. 安装java的心得体会_java实训心得体会范文
  9. 硅谷最干货大会之一AI Frontiers 详解全球投资热区和5大应用趋势
  10. MATLAB积分函数integral()的使用方法