基于JavaWeb的旅游项目--搜索分页功能

---

---

1、搜索功能—界面展示

2、搜索与分页的后台代码

（1）用户输入路线名称关键字，后台将数据返回给前台
（2）前台使用分页显示
（3）分页工具条
（4）分页列表

RouteServiceTest.java

(src\main\test\service)

public class TestRouteService {
    
    
    @Test
    public void test01() {
    
    
        //创建业务对象
        RouteService routeService = new RouteService();
        //所有的分类
        //业务方法
        //不可返回结果使用List<Route>
        //分页中需要有，总记录数，每页记录数，总页数，当前页
        PageBean pageBean = routeService.search("长沙", 1, 20);
        //显示
        System.out.println(pageBean);
    }

PageBean.java(src\mian\java\domain)

public class PageBean {
    
    
    //总记录数
    private  int totalCount;
    //每页记录数
    private int pageSize;
    //总页数
    private  int totalPage;
    //当前页
    private  int currentPage;
    //当前页的数据
    private List<Route> list;
    }

Route.java(src\mian\java\domain)

//旅游路线
public class Route {
    
    
    private int rid;//线路id，必输
    private String rname;//线路名称，必输
    private double price;//价格，必输
    private String routeIntroduce;//线路介绍
    private String rflag;   //是否上架，必输，0代表没有上架，1代表是上架
    private String rdate;   //上架时间
    private String isThemeTour;//是否主题旅游，必输，0代表不是，1代表是
    private int count;//收藏数量
    private int cid;//所属分类，必输
    private String rimage;//缩略图
    private int sid;//所属商家
    private String sourceId;//抓取数据的来源id

RouteService.java

(src\main\java\service)

public class RouteService {
    
    
    public PageBean search(String keyword, int currentPage, int pageSize) {
    
    
        //创建分页数据对象
        PageBean pb = new PageBean();
        //设置每当前页号
        pb.setCurrentPage(currentPage);//**1
        //设置每页记录数
        pb.setPageSize(pageSize);//**2
        //设置总记录数
        RouteDao routeDao = MySessionUtils2.getMapper(RouteDao.class);
        //name
        int totalCount = routeDao.findCountByName("%" + keyword + "%");
        //设置总记录数
        pb.setTotalCount(totalCount);//**3


        //设置总页数，每页最多20条
        //整数相除只保留整数，记得加一
        int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : totalCount / pageSize + 1;
        //得到总页数
        pb.setTotalPage(totalPage);//**4
        //设置list集合
        int start = (currentPage - 1) * pageSize;
        List<Route> list = routeDao.findPageByName("%" + keyword + "%", start, pageSize);
        //得到集合
        pb.setList(list);
        return pb;
    }

RouteDao.java

(src\main\java\dao)

public interface RouteDao {
    
    
    //根据关键字查找所有的路线
    //select * from tab_route where rname like "%长沙%"
    int findCountByName(String keyword);

    //根据关键字查找所有的路线并进行分组
    //select * from tab_route where rname like '%长沙%' limit 0,20
    List<Route> findPageByName(String keyword,int start ,int pageSize);
}

RouteDao.xml(src\main\resources)

<select id="findCountByName" parameterType="string" resultType="int">
        select count(*) from tab_route where rname like #{keyword};
    </select>

<!--    //select * from tab_route where rname like '%长沙%' limit 0,20-->
<!--    List<Route> findPageByName(String keyword,int start ,int pageSize);-->
    <select id="findPageByName" resultType="route">
        select * from tab_route where rname like #{arg0} limit #{arg1},#{arg2};
    </select>

SqlMapConfig.xml

<!--   一个mapper标签可以指定一个映射文件-->
   <mappers>
        <mapper resource="UserDao.xml"/>
        <mapper resource="CategoryDao.xml"/>
        <mapper resource="RouteDao.xml"/>

RouteServlet.java

(src\main\java\web\servlet)

@WebServlet("/routeServlet")
public class RouteServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    

        //接收请求，获取参数
        String keyword = request.getParameter("keyword");
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        int currentPage = 1;
        if (currentPageStr != null && currentPageStr.length() > 0) {
    
    
            //"11"  "你好"
            try {
    
    
                currentPage = Integer.parseInt(currentPageStr);//11
            } catch (Exception e) {
    
    
                e.printStackTrace();
            }
        }

        int pageSize = 20;
        if (pageSizeStr != null && pageSizeStr.length() > 0) {
    
    
            //"30"  "你好"
            try {
    
    
                pageSize = Integer.parseInt(pageSizeStr);//11
            } catch (Exception e) {
    
    
                e.printStackTrace();
            }
        }
        //处理参数
        RouteService routeService = new RouteService();
        //PageBean pb =  routeService.search("长沙",1,20);
        PageBean pb =  routeService.search(keyword,currentPage,pageSize);

        //响应浏览器
        ResponseInfo info = new ResponseInfo();
        info.setCode(200);
        info.setData(pb);
        String json = new ObjectMapper().writeValueAsString(info);
        response.getWriter().println(json);
    }
}

MyBatis的多参数传递

• （1）Mybatis 支持 多参数传递
• （2）Dao方法
  List findPage(String cid, int start, int pageSize);
• （3）映射文件配置
  可使用参数出现的顺序号码引用参数
• （4）示例
  第一个参数用arg0或param1表示
  第二个参数用arg1或param2表示
  arg从0开始计数，param从1开始计数
  
  

3、搜索与分页的前台代码

header.jsp 编写搜索框架事件

 <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       // 定义一个函数将搜索输入框的值进行获取
       function searchRequest() {
    
    
           //获取输入框的值
           var keyword = $("#searchInput").val()
           //判断  如果不为空，就发给显示页面
           if (keyword != null && keyword.length > 0) {
    
    
               //将keyword传给搜索结果页面
               window.location = 'http://localhost:8080/lvyou_war_exploded/search_result.jsp?keyword='+keyword
           }else{
    
    
               //为空，提示用户，搜索词不能为空
               alert('搜索词不能为空')
           }

       }
   </script>

search_result.jsp 编写

获取搜索关键字

• （1）在header.jsp页面通过jq获取搜索框的搜索词，然后通过 url?k=v如 url?keyword=长沙传给search_result.jsp页面
• （2）在sarch_result.jsp页面通过location.search要获取地址上的参数keyword的值
• （3）location.search 获取请求地址的参数，如?keywrod=长沙
  http://localhost:8080/lvyou_war_exploded/sarch_result.jsp?keywrod=长沙
• （4）调用ajax发送请求，接收返回的json数据
• （5）一个在线json工具网站：http://www.bejson.com/
• （6）前端字符串使用单引号，避免产生更多反斜杠

拼接也使用单引用 ‘+num+’

  //页面加载完成
        $(function () {
    
    
            //http://localhost:8080/lvyou_war_exploded/search_result.jsp?keyword=长沙
            //location表示整个地址  location.search指 ?keyword=长沙
            //另外，浏览器会对地址栏的中文进行url编码 ?keyword=%E9%95%BF%E6%B2%99 
            // split执行之后返回[?keyword,%E9%95%BF%E6%B2%99]
            var array = location.search.split('=')
            //长沙  -》 %E9%95%BF%E6%B2%99
            var keyword = array[1]
            //解码
            keyword = decodeURI(keyword)
            //加载数据
            load(keyword,1,20)
        })

location.search 获取header.jsp发送过来的参数
url编码与解码
keyword=window.decodeURI(keyword)
decodeURI(keyword)将%E9%95%BF%E6%B2%99 解码成长沙

发送请求获取json

 function load( keyword, currentPage, pageSize) {
    
    
            //http://localhost:8080/lvyou_war_exploded/routeServlet?keyword=%E9%95%BF%E6%B2%99&currentPage=1&pageSize=20
            $.get('routeServlet', {
    
    keyword: keyword, currentPage: currentPage, pageSize: pageSize},
                function (data) {
    
    
                    if (data.code == 200) {
    
    
                        var pb = data.data;
                        //显示列表数据
                        showList(pb)
                        //显示分页工具条数据
                        showTool(pb, keyword, currentPage, pageSize)
                    }
                }, "json");
        }

显示旅游路线的集合

     function showList(pb) {
    
    
            //在哪里显示
            //$("#route_list")
            var lis = ''
            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;height: 169px" 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">查看详情</a></p>\n' +
                    '                        </div>\n' +
                    '                    </li>'
                //拼接
                lis += li
            }
            $("#route_list").html(lis)
        }

分页工具栏的显示与点击事件

• （1）为什么要使用onClick="javascript:函数名()"
  如果鼠标左键点击这句所在的标签 , 将触发函数名()

• （2）为什么要使用href=”javascript:void(0);”
  href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。

• （3）img宽度调整

<div class="img"><img src="'+route.rimage+'" style="width: 299px"></div>

• （4）当前页按钮高亮 class="curPage"
• （5）下一页，上一页按钮宽度class="threeword"
• （6）引号转义 “ 或者 ’ 都需要在前面添加一个

οnclick="javascript:load(梅州,1,2) //抛出异常
οnclick="javascript:load(‘梅州’,1,2) //非变量
οnclick="javascript:load(’’+keyword+’’,1,2) //变量情况

 function showTool(pb, keyword, currentPage, pageSize) {
    
    
            //只需要将pageBean里面的3个整数
            $("#totalPage").html(pb.totalPage)
            $("#totalCount").html(pb.totalCount)

            var lis = ''
            //拼接第一，二按钮
            lis += '<li><a href="javascript:load(\'' + keyword + '\',1,' + pageSize + ')">首页</a></li>'

            var min = currentPage - 1;
            if (min < 1) {
    
    
                min = 1
            }

            lis += '<li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + min + ',' + pageSize + ')">上一页</a></li>'

            for (var i = 1; i <= pb.totalPage; i++) {
    
    
                if (i == pb.currentPage) {
    
     //高亮
                    lis += ' <li class="curPage"><a href="javascript:load(\'' + keyword + '\',' + i + ',' + pageSize + ')">' + i + '</a></li>'
                } else {
    
    
                    lis += ' <li><a href="javascript:load(\'' + keyword + '\',' + i + ',' + pageSize + ')">' + i + '</a></li>'
                }

            }
            //拼接倒数一，二按钮
            var max = currentPage + 1;
            if (max > pb.totalPage) {
    
    
                max = pb.totalPage
            }

            lis += ' <li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + max + ',' + pageSize + ')">下一页</a></li>'
            lis += '<li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + pb.totalPage + ',' + pageSize + ')">末页</a></li>'

            //显示在pageNum
            $("#pageNum").html(lis)
        }
    </script>

工具条的优化

function showTool(pb, keyword, currentPage, pageSize) {
    
    
            //只需要将pageBean里面的3个整数
            $("#totalPage").html(pb.totalPage)
            $("#totalCount").html(pb.totalCount)

            var lis = ''
            //拼接第一，二按钮
            lis += '<li><a href="javascript:load(\'' + keyword + '\',1,' + pageSize + ')">首页</a></li>'

            var min = currentPage - 1;
            if (min < 1) {
    
    
                min = 1
            }

            lis += '<li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + min + ',' + pageSize + ')">上一页</a></li>'

            var start = 0
            var end = 0
            //判断当前的页数是否有10页
            if (pb.totalPage < 10) {
    
    
                start = 1;
                end = pb.totalPage
            } else {
    
    
                //当前有10页
                //如果当前页号是8 ，开始是3，结束是12
                start = currentPage - 5;
                end = currentPage + 4
                //越界判断  start有可能出现小于，end有可能出现大于pb.totalPage
                if (start < 1) {
    
    
                    start = 1;  //1
                    end = start + 9; //10
                }

                if (end > pb.totalPage) {
    
    
                    end = pb.totalPage  //26
                    start = end - 9 //17
                }
            }

            for (var i = start; i <= end; i++) {
    
    
                if (i == pb.currentPage) {
    
     //高亮
                    lis += ' <li class="curPage"><a href="javascript:load(\'' + keyword + '\',' + i + ',' + pageSize + ')">' + i + '</a></li>'
                } else {
    
    
                    lis += ' <li><a href="javascript:load(\'' + keyword + '\',' + i + ',' + pageSize + ')">' + i + '</a></li>'
                }

            }
            //拼接倒数一，二按钮
            var max = currentPage + 1;
            if (max > pb.totalPage) {
    
    
                max = pb.totalPage
            }

            lis += ' <li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + max + ',' + pageSize + ')">下一页</a></li>'
            lis += '<li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + pb.totalPage + ',' + pageSize + ')">末页</a></li>'

            //显示在pageNum
            $("#pageNum").html(lis)

            //模仿百度，将页面滚动到顶部
            window.scrollTo(0, 0)
        }
    </script>