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

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

首页的目录展示功能已经完成，在进入主页后，页面会自动向服务器发送Ajax请求，从而获取目录数据，我们将其名称cname展示到页面中；接下来要实现的是分页展示功能

分析
在点击了某一个目录后，需要展示该目录下的资源到页面中。由于前端展示是html页面，所以只能使用异步请求来获取数据，首先观察目录表与分页展示表在数据库中的关系，如下图所示。

然后分析展示过程：当用户点击某一目录后，我们需要发送一个Ajax请求给服务器，请求中需要包含该目录对应的cid；通过该目录的cid，服务器查询与之关联的另一个目录，称作tab_route表；将该表中位于此目录下的数据获取出来，并以json形式返回给客户端，客户端完成展示。由于在展示过程中还涉及到分页功能，所以数据的交互分析结果图如下所示：

在目录中加入类别cid的传递

前面编写的目录展示只保存了cname，并未保存cid，所以修改Category的service层代码，加入cid的保存。修改后的代码如下：

     /**
     * 查询数据库中tab_category，查询成功返回list集合
     * 使用redis缓存进行优化
     * @return
     */
    @Override
    public List<Category> findTab() {
   

        // 定义一个set集合，存放redis中集合
        //Set<String> categorys = null;
        Set<Tuple> categorys = null;
        // 定义一个list集合，存放数据库中集合
        List<Category> list = null;

        // 查询缓存中是否存在category
        //categorys = jedis.zrange("category",0,-1);
        // 查询redis中的分数cid和值cname
        categorys = jedis.zrangeWithScores("category",0,-1);
        if(categorys == null || categorys.size() == 0){
   
            // redis中不存在
            System.out.println("redis中不存在Category，从数据库中查询...");
            // 调用dao层方法查询数据
            list = dao.findTab();

            // 将查询的结果存到redis中，key为category
            for (Category category : list) {
   
                jedis.zadd("category",category.getCid(),category.getCname());
            }
        }else{
   
            // redis中存在
            System.out.println("redis中存在Category，从redis中查询...");

            // 将redis中的set集合转换为list集合
            list = new ArrayList<Category>();
            for (Tuple tuple : categorys) {
   
                Category category = new Category();
                category.setCid((int) tuple.getScore());
                category.setCname(tuple.getElement());

                list.add(category);
            }
        }

        return list;
    }

修改前端cid的传递

此时服务器响应回来的数据中已经包含了cid，我们接下来需要在点击响应的目录后，将cid信息进行传递，只需要在header.html的获取分类目录请求中加入cid即可：

    // 获取分类目录请求
    $.post("category/findTab",{
   },function (data) {
   

        // data格式：[{"cid":8,"cname":"全球自由行"},{"cid":5,"cname":"国内游"},{},{},{}]
        var list = '<li class="nav-active"><a href="index.html">首页</a></li>';
        var li;
        // 遍历集合
        for (var i=0;i<data.length; i++){
   
            // 拼接目录，并加入每个目录对应的cid传递
            li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';
            list+=li;
        }
        list+='<li><a href="favoriterank.html">收藏排行榜</a></li>';
        // 将list字符串，显示到ul标签中
        $("#category").html(list);
    });

路由线路的分页展示

当在主页点击了分类目录后，会跳转到route_list.html页面，并且传递该目录对应的cid，所以可以在route_list.html页面中加入Ajax请求，当页面加载完成后，便向服务器发送请求，将服务器响应的json数据添加到页面中。

首先完成请求route_list.html页面的cid的获取：

    // 在入口函数中加入一下代码来获取cid
     // 根据请求当前资源的路径获取cid
    // 请求路径 http://localhost/travel/route_list.html?cid=7
    var cid = location.search.split("=")[1];

至此我们完成了cid数据的获取，前面具体的展示功能暂时先不做；先完成后台的数据查询与响应，关于数据的交互在前的分析过程中已经给出了说明，所以开始从dao层，逐次向servlet层编写后台代码。
首先创建一个PageBean实体类，用来存放响应的数据。主要包含上述列出的所有变量，并添加get与set方法形成。具体代码如下:

    /**
     * 分页展示数据的实体类
     */
    public class PageBean<T>