JavaWeb - 黑马旅游网(7):线路搜索分页展示
程序员文章站
2022-04-03 21:16:23
...
黑马旅游网(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>¥</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
上一篇: TOP K问题的解决方案
下一篇: 硬链接和软链接学习篇