JavaWeb - 黑马旅游网（7）：线路搜索分页展示

1 功能描述

接上篇黑马旅游网（6）：旅游线路详情展示，本篇博客将分析和实现网页中的搜索栏的关键词搜索功能：用户在搜索栏中输入 关键词，点击 搜索 按钮，进而获取包含对应关键词的所有旅游线路，最后将这些旅游线路分页展示。关于分页展示功能的实现，详见：黑马旅游网（5）：旅游线路分页展示。

2 功能分析

因为最终的结果是分页展示，所以线路搜索功能可以依托于分页展示功能实现。分页搜索功能在后端的 Dao 层中需要调用两个方法：findTotalCount 和 findByPage。两个方法中均涉及到动态配置 SQL 语句。基于此，关键词搜索实质上是对数据库做一次模糊查询，那么便可以将模糊查询条件作为动态 SQL 的一部分与原有 SQL 语句拼接即可。

3 代码实现

3.1 后端

3.1.1 Servlet

RouteServlet.java

/**
 * 分页查询方法
 */
public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws IOException {
    // 1.接收客户端浏览器提交的请求参数
    String cidStr = request.getParameter("cid");                        // 类别id
    String currentPageStr = request.getParameter("currentPage");        // 当前页数
    String pageSizeStr = request.getParameter("pageSize");              // 每页显示条数
    String rname = request.getParameter("rname");                       // 搜索文本：线路名称
    // 2.处理参数
    int cid = this.parseInt(cidStr, 0);
    int currentPage = this.parseInt(currentPageStr, 1);
    int pageSize = this.parseInt(pageSizeStr, 5);
    rname = parseStr(rname);
    // 3.调用service查询PageBean对象
    PageBean<Route> routePageBean = routeService.pageQuery(cid, currentPage, pageSize, rname);
    // 4.将PageBean对象序列化json并回写客户端浏览器
    this.writeValue(routePageBean, response);
}

3.1.2 Service

RouteServiceImpl.java

/**
 * 根据旅游线路类别进行分页查询
 * @param cid 类别id
 * @param currentPage 当前页数
 * @param pageSize 每页显示条数
 * @param rname 搜索文本：线路名称
 * @return PageBean 封装对象
 */
@Override
public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize, String rname) {
    // 初始化 PageBean 封装对象
    PageBean<Route> routePageBean = new PageBean<>();
    // 计算起始记录数start，查询总记录数totalCount，计算总页数totalPage
    int start = (currentPage - 1) * pageSize;
    int totalCount = routeDao.findTotalCount(cid, rname);
    int totalPage = (totalCount % pageSize == 0) ? (totalCount / pageSize) : (totalCount / pageSize + 1);
    routePageBean.setCurrentPage(currentPage);                              // 设置当前页码
    routePageBean.setPageSize(pageSize);                                    // 设置每页显示条数
    routePageBean.setTotalPage(totalPage);                                  // 设置总页数
    routePageBean.setTotalCount(totalCount);                                // 查询并设置总记录数
    routePageBean.setList(routeDao.findByPage(cid, start, pageSize, rname));     // 查询并设置当前页显示记录
    return routePageBean;
}

3.1.3 Dao

RouteDaoImpl.java

/**
 * 根据cid查询总记录数
 */
@Override
public int findTotalCount(int cid, String rname) {
    // 1.定义sql模板
    String sql = "SELECT count(*) FROM tab_route WHERE 1 = 1 ";
    StringBuilder stringBuilder = new StringBuilder(sql);   // 字符串拼接
    ArrayList<Object> paramList = new ArrayList<>();        // sql参数列表
    // 2.判断查询参数是否有值
    if (cid != 0) {
        stringBuilder.append(" AND cid = ? ");
        paramList.add(cid);
    }
    if (rname != null && rname.length() > 0) {
        stringBuilder.append(" AND rname LIKE ? ");
        paramList.add("%"+rname+"%");   // 模糊查询
    }
    sql = stringBuilder.toString();     // 拼接sql语句
    return template.queryForObject(sql, Integer.class, paramList.toArray());
}

/**
 * 查询当前页的数据集合
 * @param cid 旅游线路类别id
 * @param start 起始条目
 * @param pageSize 每页显示条数
 * @param rname 搜索文本：线路名称
 * @return Route Bean 对象构成的List集合
 */
@Override
public List<Route> findByPage(int cid, int start, int pageSize, String rname) {
    // 1.定义sql模板
    String sql = "SELECT * FROM tab_route WHERE 1 = 1";
    StringBuilder stringBuilder = new StringBuilder(sql);   // 字符串拼接
    ArrayList<Object> paramList = new ArrayList<>();        // sql参数列表
    // 2.判断查询参数是否有值
    if (cid != 0) {
        stringBuilder.append(" AND cid = ? ");
        paramList.add(cid);
    }
    if (rname != null && rname.length() > 0) {
        stringBuilder.append(" AND rname LIKE ? ");
        paramList.add("%"+rname+"%");   // 模糊查询
    }
    // 3.补充分页条件
    stringBuilder.append(" LIMIT ? , ? ");
    paramList.add(start);
    paramList.add(pageSize);
    sql = stringBuilder.toString();     // 拼接sql语句
    return template.query(sql, new BeanPropertyRowMapper<>(Route.class), paramList.toArray())
}

3.2 前端

header.html

/**
 * 给搜索按钮绑定单机事件，获取搜索输入框中的内容
 */
$("#search-button").click(function () {
    // 获取线路名称
    let rname = $("#search-input").val();
    let cid = getParameter("cid");
    // 跳转路径 http://localhost/travel/route_list.html?cid=5，拼接rname=xxx
    location.href = "http://localhost/travel/route_list.html?cid="+ cid +"&rname=" + rname;
});

route_list.html

for(let i = 0; i < pageBean.list.length; i ++) {
    // 获取一个 Route Bean 对象
    let route = pageBean.list[i];
    let 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?rid='+ route.rid +'">查看详情</a></p>\n' +
'                        </div>\n' +
'                    </li>';
    routeLis += li;
}
$("#route").html(routeLis);

4 相关链接

项目课程链接：https://www.bilibili.com/video/BV1CE411E7h4
完整课程连接：https://www.bilibili.com/video/BV1uJ411k7wy
笔者完整项目链接：https://github.com/Abexope/ItCast-HeiMa-Travel