黑马旅游网分页查询分析（下）

需求

1. 在原有的分页查询的基础上增加条件查询
2. 输入旅游标题条件进行数据库的模糊搜索
3. 将匹配的搜索结果以分页的形式再展现出
   

分析

问题：

1. 既然都是分页查询，哪能不能在分页查询的基础上进行改进？

回答：可以。

系统设计步骤

1. 既然通过旅游标题进行查询，则需要将标题信息传入后台数据库
   为搜索按钮添加点击事件，向服务器发送请求参数

        //搜索按钮的点击事件
        $("#search-button").click(function () {
            var rname = $("#search_input").val();
            var cid = getParameter("cid");
            location.href="http://192.168.0.101/travel/route_list.html?cid="+cid+"&rname="+rname;
        })

在原有的cid上面再次添加rname参数。

2. servlet获取到rname后需要解决字符乱码问题

        //获取搜索条件
        String rname = request.getParameter("rname");
        if(rname != null){
            rname = new String(rname.getBytes("iso-8859-1"), "UTF-8");
        }

在将rname传递到经过处理后的（添加查询添加rname）service层处理

//3.调用service查询
        RouteService service = new RouteServiceImpl();
        PageBean pageBean = service.pageQuery(currentPage, pageSize, cid,rname);
        writeValue(pageBean,response);

3. service层其余的逻辑代码没有变化，仍然是创建PageBean对象并返回，变化的是与dao层进行对接的函数

        //3.查询dao层数据，将返回数据再次设置进pageBean
        int totalCount = dao.finTotalCount(cid,rname);  //携带rname
        pageBean.setTotalCount(totalCount);
        int start = (currentPage -1 ) * pageSize; //开始每页查询的索引
        List<Route> list = dao.pageList(cid, start, pageSize,rname);  //携带rname
        pageBean.setList(list);

4. dao层代码核心部分

    public int finTotalCount(int cid, String rname) {
        //String sql = "select count(*) from tab_route where cid=?";
        //Integer integer = jdbcTemplate.queryForObject(sql, Integer.class, cid);
        //自定义sql模板
        String sql = "select count(*) from tab_route where 1=1";
        StringBuffer sb = new StringBuffer(sql);
        List params  = new ArrayList();   //存储条件
        if(cid > 0){   //排除非法传入cid和cid为null（首页访问搜索）的情况
            sb.append(" and cid = ?");
            params .add(cid);
        }
        if(rname != null && rname.length()>0){
            sb.append(" and rname like ? ");
            params .add("%"+rname+"%");
        }
         sql = sb.toString();
        return jdbcTemplate.queryForObject(sql, Integer.class, params .toArray());
    }

 /**
     * 查询每页显示的集合
     * @param cid
     * @param start
     * @param pageSize
     * @return
     */
    @Override
    public List<Route> pageList(int cid, int start, int pageSize, String rname) {
        String sql = "select * from tab_route where 1=1";
        StringBuffer sb = new StringBuffer(sql);
        List params = new ArrayList();
        if(cid != 0 ){
            sb.append(" and cid=? ");
            params.add(cid);
        }
        if(rname != null && rname.length() > 0){
            sb.append(" and rname like ? ");
            params.add("%"+rname+"%");
        }
        sb.append(" limit ?,? ");
        sql = sb.toString();
        params.add(start);
        params.add(pageSize);

        return jdbcTemplate.query(sql, new BeanPropertyRowMapper<Route>(Route.class), params.toArray());
    }

这里面需要注意的是参数装载list集合时要按照pageList方法的参数顺序进行装载。

5. 前台的展示部分
   在原有的请求参数上添加rname参数

$(function () {
            var cid = getParameter("cid");
            var rname = getParameter("rname");
            if(rname){
                rname = window.decodeURIComponent(rname);
            }
            load(cid,null,rname);
        });

传递到ajax的请求参数上，最后将服务器返回pb中的数据重新渲染前端界面。：

    function load(cid,currentPage,rname) {
            $.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
                //设置总页码也总记录数
                $("#totalCount").html(pb.totalCount);
                $("#totalPage").html(pb.totalPage);
                var li = '<li onclick="load('+cid+','+1+',\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';
                var before = pb.currentPage-1;
                if(before <= 0){
                    before = 1;
                }
                li+='<li onclick="load('+cid+','+before+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
                //将后台返回的pb对象展示到前台
                //1.2 展示分页页码
                /*
                    1.一共展示10个页码，能够达到前5后4的效果
                    2.如果前边不够5个，后边补齐10个
                    3.如果后边不足4个，前边补齐10个
                */
                var begin,end; //定义开始和结束位置
                if(pb.totalPage < 10){
                    //总页数不够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 = end-9;
                        end = pb.totalPage;
                    }
                }

                for (var i = begin; i <= end; i++){
                    if(pb.currentPage == i){
                        li += '<li  class="curPage" onclick="load('+cid+','+i+',\''+rname+'\')" class="threeword"><a href="javascript:void(0);">'+i+'</a></li>';
                    }else{
                        li += '<li onclick="load('+cid+','+i+',\''+rname+'\')" class="threeword"><a href="javascript:void(0);">'+i+'</a></li>';
                    }
                }

                var next = pb.currentPage +1;
                var last = pb.totalPage;
                if(next > last){
                    next = pb.totalPage;
                }
                li+='<li onclick="load('+cid+','+next+',\''+rname+'\')" class="threeword"><a href="javascript:void(0);">下一页</a></li>';
                li+='<li onclick="load('+cid+','+last+',\''+rname+'\')" class="threeword"><a href="javascript:void(0);">末页</a></li>';
                $("#pageNum").html(li);

                //更新list到前台
                var route_list = "";
                for(var i=0; i < pb.list.length;i++){
                    var route = pb.list[i];
                    var li = '<li>\n' +
                        '                    <div class="img"><img style="width: 299px" src='+route.rimage+'></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_list += li;
                }
                $("#pageContent").html(route_list);
                window.scrollTo(0,0);  //滚动到顶部

            })
        }