六、旅游线路分页展示分页展示

🍀 类别id传递

 

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

查询不同分类的旅游线路sql

Select * from tab_route where cid = ?;

页面传递cid

header.html传递cid

修改之后 抓包显示问题

CategoryServiceImpl

Set categorys = jedis.zrangeWithScores("category", 0, -1);

修改代码如下

public class CategoryServiceImpl implements CategoryService {

    private CategoryDao categoryDao = new CategoryDaoImpl();

    @Override
    public List findAll() {

        //1.从redis中查询
        //获取jedis客户端
        Jedis jedis = JedisUtil.getJedis();
        //可使用sortedset排序查询
//        Set categorys = jedis.zrange("category", 0, -1);
        Set categorys = jedis.zrangeWithScores("category", 0, -1);

        List list = null;
        //2. 判断查询的集合是否为空
        if (categorys == null || categorys.size() == 0) {
            System.out.println("从数据库查询。。。。。");
            //3. 如果为空 需要从数据库查询 
            list = categoryDao.findAll();
            //将数据存储到redis中的category的key
            for (int i = 0; i < list.size(); i++) {
                jedis.zadd("category", list.get(i).getCid(), list.get(i).getCname());
            }


        } else {
            System.out.println("从缓存中查询。。。。。");
            //4. 如果不为空 将set的数据存入list
            list = new ArrayList();
            for (Tuple tuple : categorys) {
                Category category = new Category();
                category.setCname(tuple.getElement());
                category.setCid((int) tuple.getScore());
                list.add(category);
            }
        }

        return list;
    }
}

测试效果图

🍀 分页数据展示_分析

PageBean

package cn.itcast.travel.domain;

import java.util.List;

/**
 * 分页对象
 */
public class PageBean {

    private int totalCount;//总记录数
    private int totalPage;//总页数
    private int currentPage;//当前页码
    private int pageSize;//每页显示的条数

    private List 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 getList() {
        return list;
    }

    public void setList(List list) {
        this.list = list;
    }
}

🍀 分页数据展示_代码实现_Servlet

RouteServlet

@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {

    private RouteService service = 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; //类别id
        if (cidStr != null && cidStr.length() > 0) {
            cid = Integer.parseInt(cidStr);

        }

        int currentPage = 0;//当前页面 默认为第一页
        if (currentPageStr != null && currentPageStr.length() > 0) {
            currentPage = Integer.parseInt(currentPageStr);
        } else {
            currentPage = 1;
        }

        int pageSize = 0;//每页显示条数 默认每页显示5条
        if (pageSizeStr != null && pageSizeStr.length() > 0) {
            pageSize = Integer.parseInt(pageSizeStr);
        } else {
            pageSize = 5;
        }
        //3.调用service查询PageBean对象
        PageBean pb = RouteService.pageQuery(cid, currentPage, pageSize);
        //4.将PageBean对象序列化为json 返回
        writeValue(pb, response);


    }
}

🍀 分页数据展示_代码实现_Dao

RouteDao

public interface RouteDao {
    /**
     * 根据cid查询总记录数
     */
    int findTotalCount(int cid);


    /**
     * 根据id start，PageSize查询当前页的数据集合
     */
    List findByPage(int cid,int start,int pageSize);
}

RouteDaoImpl

public class RouteDaoImpl implements RouteDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public int findTotalCount(int cid) {

        String sql = "select count(*) from tab_route where cid = ?";
        Integer integer = template.queryForObject(sql, Integer.class, cid);
        return integer;
    }

    @Override
    public List findByPage(int cid, int start, int pageSize) {

        String sql = "select * from tab_route where cid = ? limit ?,?";
        return template.query(sql, new BeanPropertyRowMapper(Route.class), cid, start, pageSize);
    }
}

🍀 分页数据展示_代码实现_Service

RouteServiceImpl

package cn.itcast.travel.service.impl;

import cn.itcast.travel.dao.RouteDao;
import cn.itcast.travel.dao.impl.RouteDaoImpl;
import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route;
import cn.itcast.travel.service.RouteService;

import java.util.List;


public class RouteServiceImpl implements RouteService {
    private RouteDao routeDao = new RouteDaoImpl();

    @Override
    public PageBean pageQuery(int cid, int currentPage, int pageSize) {

        //封装PageBean
        PageBean pb = new PageBean<>();

        //设置当前页码
        pb.setCurrentPage(currentPage);
        //设置每页显示条数
        pb.setPageSize(pageSize);

        //设置总记录数
        int totalCount = routeDao.findTotalCount(cid);
        pb.setTotalCount(totalCount);

        //设置当前每页显示的数据集合
        int start = (currentPage - 1) * pageSize;//开始的记录数
        List list = routeDao.findByPage(cid, start, pageSize);
        pb.setList(list);

        //设置总页数 = 总记录数/每页显示条数
        int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : (totalCount / pageSize) + 1;
        pb.setTotalPage(totalPage);


        return pb;
    }
}

测试效果图

http://localhost:8888/travel/route/pageQuery?cid=5

🍀 分页数据展示_前台代码_页码展示

需要注意的就是 只有cid = 5的时候才有数据 其他都没有数据

 效果图

 效果图

 增加首页 上一页 尾页 下一页 

 var lis = '';
            var firstPage = ' 首页';
            var beforePage = '上一页';

            lis += firstPage;
            lis += beforePage;

            for (let i = 0; i < pb.totalPage; i++) {
                //创建页码的li
                var li = ' ' + i + '';
                //拼接字符串
                lis += li;

            }
            var afterPage = '下一页';
            var lastPage = '末页';

            lis += afterPage;
            lis += lastPage;

            //将lis内容设置到ul
            $("#pageNum").html(lis);

效果图

🍀 分页数据展示_前台代码_数据展示

  var route_li = '';
            for (let i = 0; i <= pb.list.length; i++) {
                //获取{rid:1,rname:"xxx"}
                var route = pb.list[i];
                // console.log(route.rname);
                var li = ' \n' +
                    '                        \n' +
                    '                        \n' +
                    '                            
'+route.rname+'
\n' +
                    '                            
\n' +
                    '                            
'+route.routeIntroduce+'
\n' +
                    '                        \n' +
                    '                        \n' +
                    '                            
\n' +
                    '                                ¥\n' +
                    '                                '+route.price+'\n' +
                    '                                起\n' +
                    '                            
\n' +
                    '                            
查看详情
\n' +
                    '                        \n' +
                    '                    ';

                route_li += li;

            }

            $("#route").html(route_li);

        })

    });

 

 

解决方法

只需要将错误上面的那一行中i <= pb.list.length的等于号去掉就行了

// for循环中的需要小于btn.length如果是小于等于的话就会报错

测试效果图

🍀 分页数据展示_前台代码_异步加载数据

在这里点击页码 进行局部刷新跳转 需要ajax请求 

点击页码 去发送一个ajax请求 然后加载这个数据 将对应的参数 cid 

无论点击li标签还是数字都可以正常刷新页面进行数据刷新
var li = ' ' + i + '';

for (let i = 0; i < pb.totalPage; i++) {
    var li = '';
    //判断当前页码是否等于i
    if (currentPage == i) {
        li = ' ' + i + '';
    } else {
        //创建页码的li
        li = ' ' + i + '';
    }

    //拼接字符串
    lis += li;

}

测试效果图

 

 

首页 上一页 尾页 下一页

 //1.2展示分页页码
            var lis = '';
            //首页 javascript:void(0)和#的区别就是 一个是局部调转到首页 一个数刷新整个页面跳转到首页

            var firstPage = '首页';


            //计算上一页的页码
            var beforeNum = currentPage - 1;
            if (beforeNum <= 0) {
                beforeNum = 1;
            }

            var beforePage = '上一页';



--------------------------------------------------------------------------------------


 //计算下一页的页码
            var afterNum = currentPage + 1;
            var totalPageNum = pb.totalPage - 1;
            // alert(totalPageNum)
            if (afterNum > totalPageNum) {
                afterNum = totalPageNum;
            }
            var afterPage = '下一页';
            var lastPage = '末页';

两个问题

1、点击首页之后 再次点击上一页会出bug

解决 参数必须传递1 如果不传递 点击首页正常 但是点击首页之后再次点击上一次就不行了

var firstPage = '首页';

2、上一页不能正常显示 

解决 li标签中少了一个改变li宽的class属性

细节注意

//首页 javascript:void(0)和#的区别就是 一个是局部调转到首页 一个是刷新整个页面跳转到首页

🍀 分页数据展示_前台代码_页码处理

                    1.一共展示10个页码，能够达到前5后4的效果
                    2.如果前边不够5个，后边补齐10个
                    3.如果后边不足4个，前边补齐10个

 

 //1.2 展示分页页码
            /*
                1.一共展示10个页码，能够达到前5后4的效果
                2.如果前边不够5个，后边补齐10个
                3.如果后边不足4个，前边补齐10个
            */
            // 定义开始位置begin,结束位置 end
            var begin; // 开始位置
            var end;//  结束位置

            // alert(pb.totalPage)
            //1.要显示10个页码
            //总页码不够10页
            if (pb.totalPage < 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 (let i = begin; i <= end; i++) {
                var li = '';
                //判断当前页码是否等于i
                if (currentPage == i) {
                    li = ' ' + i + '';
                } else {
                    //创建页码的li
                    li = ' ' + i + '';
                }

                //拼接字符串
                lis += li;
            }


            /* for (let i = 1; i <= pb.totalPage; i++) {
                 var li = '';
                 //判断当前页码是否等于i
                 if (currentPage == i) {
                     li = ' ' + i + '';
                 } else {
                     //创建页码的li
                     li = ' ' + i + '';
                 }

                 //拼接字符串
                 lis += li;

             }*/
            //计算下一页的页码


---------------------------

Window 对象 (w3school.com.cn)

scrollTo()

把内容滚动到指定的坐标。

---

 测试效果图

 

route_list.html全部javascript代码如下