欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaWeb - 黑马旅游网(7):线路搜索分页展示

程序员文章站 2022-04-03 21:16:23
...

1 功能描述

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

JavaWeb - 黑马旅游网(7):线路搜索分页展示

JavaWeb - 黑马旅游网(7):线路搜索分页展示

2 功能分析

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

3 代码实现

JavaWeb - 黑马旅游网(7):线路搜索分页展示

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