概述

(一)类别id传递
(二)功能分析
(三)后台代码实现
(四)前台代码实现

(一)类别id传递

数据库中的一个category对应多个route，也就是一个分类中有多个线路
查询不同分类的旅游线路sql

select * from tab_route where cid = ?;

需求分析：网页点击不同的分类，就会传递不同的cid
header.html传递cid：

redis方法改写
之前redis用zrange方法查询，只能查询element（即存入的字符串）
现在需要改用zrangeWithScores方法，把分数（即cid）也查询出来

    /*** 查询所有** @return*/@Overridepublic List<Category> findAll() {//1.从redis中查询//1.1获取jedis客户端Jedis jedis = JedisUtil.getJedis();//1.2使用sortedset排序查询//Set<String> categorys = jedis.zrange("category", 0, -1);//0到-1,查询全部//1.3查询sortedset中的分数(cid)和值(cname)Set<Tuple> categorys = jedis.zrangeWithScores("category", 0, -1);//2.判断查询的集合是否为空List<Category> cs = null;if (categorys == null || categorys.size() == 0) {//3.如果为空，需要从数据库查询，再将数据存入redisSystem.out.println("从数据库查询。。。");//3.1从数据库查询cs = categoryDao.findAll();//3.2将集合数据存储到redis中的名为“category”的keyfor (int i = 0; i < cs.size(); i++) {jedis.zadd("category", cs.get(i).getCid(), cs.get(i).getCname());}} else {//4.如果不为空，将set数据存入list（因为我们返回要求的格式是list）System.out.println("从redis中查询。。。");cs = new ArrayList<Category>();for (Tuple tuple : categorys) {Category category = new Category();category.setCname(tuple.getElement());category.setCid((int) tuple.getScore());cs.add(category);}}return cs;//无论有无缓存，都要返回cs}
}

route_list.html：
获取cid

    <script>$(function () {var search = location.search;var cid = search.split("=")[1];});</script>

(二)功能分析

(三)后台代码实现

PageBean：

package cn.itcast.travel.domain;import java.util.List;/*** 分页对象*/
public class PageBean<T> {private int totalCount;//总记录数private int totalPage;//总页数private int currentPage;//当前页码private int pageSize;//每页显示的条数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 getCurrentPage() {return currentPage;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}public List<T> getList() {return list;}public void setList(List<T> list) {this.list = list;}
}

RouteServlet：

@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {private RouteService routeService = new RouteServiceImpl();/*** 分页查询** @param request* @param response* @throws ServletException* @throws IOException*/public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.接受参数String currentPageStr = request.getParameter("currentPage");String pageSizeStr = request.getParameter("pageSize");String cidStr = request.getParameter("cid");//2.处理参数int cid = 0;//类别的idif (cidStr != null && cidStr.length() > 0) {cid = Integer.parseInt(cidStr);}int currentPage = 0;//当前页码if (cidStr != null && cidStr.length() > 0) {currentPage = Integer.parseInt(currentPageStr);} else {currentPage = 1;//如果不传递，则默认为第一页}int pageSize = 0;//每页显示条数if (cidStr != null && cidStr.length() > 0) {pageSize = Integer.parseInt(pageSizeStr);} else {pageSize = 5;//如果不传递，则默认一页显示5条记录}//3. 调用service查询PageBean对象PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);//4. 将pageBean对象序列化为json，返回writeValue(pb, response);}}

RouteServiceImpl：

public class RouteServiceImpl implements RouteService {private RouteDao routeDao = new RouteDaoImpl();/*** 分页查询* 根据cid,start,pageSize查询当前页的数据集合* start为查询结果的索引值(默认从0开始)* pageSize为查询结果返回的数量** @param cid* @param currentPage* @param pageSize* @return*/@Overridepublic PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {//封装PageBeanPageBean<Route> pb = new PageBean<Route>();//设置当前页码pb.setCurrentPage(currentPage);//设置每页显示条数pb.setPageSize(pageSize);//设置总记录数int totalCount = routeDao.findTotalCount(cid);pb.setTotalCount(totalCount);//设置当前页显示的数据集合int start = (currentPage - 1) * pageSize;//开始的记录数（已知当前处于第几页，一页显示多少条）  公式：（当前页码 - 1）* 每页显示的记录数List<Route> list = routeDao.findByPage(cid, start, pageSize);pb.setList(list);//设置总页数（总页数 = 总记录数 / 每页显示条数）注意判断能否除得尽，如果除不尽就加1int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : (totalCount / pageSize) + 1;pb.setTotalPage(totalPage);return pb;}
}

RouteDaoImpl：

public class RouteDaoImpl implements RouteDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 根据cid查询总记录数** @param cid* @return*/@Overridepublic int findTotalCount(int cid) {String sql = "select count(*) from tab_route where cid = ?";return template.queryForObject(sql, Integer.class, cid);}/*** 根据cid,start,pageSize查询当前页的数据集合* start为查询结果的索引值(默认从0开始)* pageSize为查询结果返回的数量** @param cid* @param start* @param pageSize* @return*/@Overridepublic List<Route> findByPage(int cid, int start, int pageSize) {String sql = "select * from tab_route where cid = ? limit ? , ? ";return template.query(sql, new BeanPropertyRowMapper<Route>(Route.class),cid,start,pageSize);}
}

效果：
只传递cid，其他均为默认值

(四)前台代码实现

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>$(function () {var search = location.search;//alert(search);//?id=5// 切割字符串，拿到第二个值var cid = search.split("=")[1];//当页码加载完成后，调用load方法，发送ajax请求加载数据load(cid);});function load(cid ,currentPage){//发送ajax请求，请求route/pageQuery,传递cid$.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb) {//解析pagebean数据，展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$("#totalPage").html(pb.totalPage);$("#totalCount").html(pb.totalCount);/*<li><a href="">首页</a></li><li class="threeword"><a href="#">上一页</a></li><li class="curPage"><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 fristPage = '<li οnclick="javascipt:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';//计算上一页的页码var beforeNum =  pb.currentPage - 1;if(beforeNum <= 0){beforeNum = 1;}var beforePage = '<li  οnclick="javascipt:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';lis += fristPage;lis += beforePage;//1.2 展示分页页码/*1.一共展示10个页码，能够达到前5后4的效果2.如果前边不够5个，后边补齐10个3.如果后边不足4个，前边补齐10个*/// 定义开始位置begin,结束位置 endvar begin; // 开始位置var end ; //  结束位置//1.要显示10个页码if(pb.totalPage < 10){//总页码不够10页begin = 1;end = pb.totalPage;}else{//总页码超过10页begin = pb.currentPage - 5 ;end = pb.currentPage + 4 ;//2.如果前边不够5个，后边补齐10个if(begin < 1){begin = 1;end = begin + 9;}//3.如果后边不足4个，前边补齐10个if(end > pb.totalPage){end = pb.totalPage;begin = end - 9 ;}}for (var i = begin; i <= end ; i++) {var li;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}else{//创建页码的lili = '<li οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}/* for (var i = 1; i <= pb.totalPage ; i++) {var li;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}else{//创建页码的lili = '<li οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}*/var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';lis += nextPage;lis += lastPage;//将lis内容设置到 ul$("#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>299</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li>*///2.列表数据展示var route_lis = "";for (var i = 0; i < pb.list.length; i++) {//获取{rid:1,rname:"xxx"}var route = pb.list[i];var li = '<li>\n' +'                        <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></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">查看详情</a></p>\n' +'                        </div>\n' +'                    </li>';route_lis += li;}$("#route").html(route_lis);//定位到页面顶部window.scrollTo(0,0);});}</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"><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>299</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>899</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>999</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>99</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>199</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><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>899</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><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><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>1589</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li></ul><div class="page_num_inf"><i></i> 共<span id="totalPage">12</span>页<span id="totalCount">132</span>条</div><div class="pageNum"><ul id="pageNum"><li><a href="">首页</a></li><li class="threeword"><a href="#">上一页</a></li><li class="curPage"><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></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>

黑马旅游网学习笔记之分页展示(六)相关推荐

JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记05【分类数据展示功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记08【旅游线路详情】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记02【注册功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记01【准备工作】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记10【项目代码】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

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

概述

(一)类别id传递

(二)功能分析

(三)后台代码实现

(四)前台代码实现

黑马旅游网学习笔记之分页展示(六)相关推荐

最新文章

热门文章