typora-copy-images-to: img
day05-黑马旅游第5天
学习目标
-[ ] 能够完成收藏排行榜多条件分页查询
课程回顾
第一章 分页查看收藏排行榜页面
1.1 案例需求
用户点击头部导航“收藏排行榜”进入favoriterank.html页面，显示目前所有旅游线路数据按照收藏数量降序的排行榜数据，并且在每条旅游线路需要显示排行第多少位和被收藏了多少次。
1.2 实现效果
点击导航“收藏排行榜”连接显示排行榜分页数据效果
1.3 实现分析
1.4 实现步骤
- favoriterank.html代码，收藏排行榜页面加载完成时提交异步请求到RouteServlet获取旅游线路收藏排行榜
分页数据，并在回调函数里面将获取的数据更新到页面上。更新数据时注意排行数字显示的判断，只有第一
页排行在第1、第2的数字样式特殊，其他数字样式一样。还有就是排行榜第一页数字是1~8，第二页数字应是
9~16,其他的也依次类推。 - RouteServlet.java代码，旅游线路处理前端请求，获取前端传递过来的curPage查询第几页，并调用旅游线路
业务类RouteService获取分页PageBean数据 - RouteService.java代码，旅游线路业务类通过实例PageBean，并封装当前页、每页大小、总记录数和当前
页数据获得PageBean并进行返回。其中总记录数和当前页数据列表是调用旅游线路数据访问类RouteDao获
取。 - RouteDao.java代码，旅游旅游数据访问类获取总记录数和当前页数据列表，当前页数据列表注意要根据收藏
数量降序获取。
1.5 实现代码
步骤1：favoriterank.html代码
删除原来的死数据，并给ul添加id属性。
页面加载完成之后，发送请求加载收藏排行榜数据。
<script>
//页面加载完成后 加载收藏排行榜数据
$(function () {
getFavoriteRangeData(1,8);
});
//加载收藏排行榜数据
function getFavoriteRangeData(pageNum,pageSize) {
//根据路线被收藏的次数 加载路线排行榜
$.get("routeServlet?methodName=getFavoriteRangePageData",{pageNum:pageNum,pageSize:pageSize},function (result) {
console.log(result);
},"json")
};
</script>
步骤2：RouteServlet.java代码
/**
* 加载收藏排行榜分页数据
* @param request
* @param response
* @throws Exception
*/
public void getFavoriteRangePageData(HttpServletRequest request,HttpServletResponse response)throws Exception {
//1.获取请求数据
String strPageNum = request.getParameter("pageNum");
String strPageSize = request.getParameter("pageSize");
//分页查询
String jsonString = routeService.pageQueryOrderByCountDesc(strPageNum, strPageSize);
response.getWriter().println(jsonString);
}
步骤3：RouteService.java代码
String pageQueryOrderByCountDesc(String strPageNum, String strPageSize);
【实现类】RouteServiceImpl.java
/**
* 查询收藏排行榜
* @param strPageNum
* @param strPageSize
* @return
*/
public String pageQueryOrderByCountDesc(String strPageNum, String strPageSize) {
//2.处理数据
int pageNum=1;
int pageSize = 8;
if (StringUtils.isNotBlank(strPageNum)) {
pageNum = Integer.valueOf(strPageNum);
}
if (StringUtils.isNotBlank(strPageSize)) {
pageSize = Integer.valueOf(strPageSize);
}
//计算起始记录数
int startCount = (pageNum - 1) * pageSize;
//查询分页数据
List<Route> routeList = routeDao.pageQueryOrderbyCountDesc(startCount, pageSize);
//查询总记录数
int totalCount = routeDao.queryTotalCount();
//封装分页数据
int totalPage = totalCount%pageSize==0?totalCount/pageSize:totalCount/pageSize+1;
int prePage = pageNum==1?1:pageNum-1;
int nextPage = pageNum==totalPage?totalPage:pageNum+1;
//3.响应数据
Map<String, Object> result = new HashMap<>();
result.put("data", routeList);
result.put("totalCount", totalCount);
result.put("totalPage", totalPage);
result.put("prePage", prePage);
result.put("nextPage", nextPage);
String jsonString = JSON.toJSONString(result);
return jsonString;
}
步骤4：RouteDao.java代码
List<Route> pageQueryOrderbyCountDesc(int startCount, int pageSize);
int queryTotalCount();
步骤5：RouteDaoImpl.java代码
/**
* 查询旅游线路总记录数
* @return
*/
@Override
public int queryTotalCount() {
String sql = "SELECT COUNT(*) FROM tab_route";
try {
return jdbcTemplate.queryForObject(sql,Integer.class);
} catch (DataAccessException e) {
return 0;
}
}
/**
* 查询分页数据
* @param startCount
* @param pageSize
* @return
*/
@Override
public List<Route> pageQueryOrderbyCountDesc(int startCount, int pageSize) {
String sql = "SELECT * FROM tab_route ORDER BY count DESC LIMIT ?,?";
return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), startCount, pageSize);
}
步骤6：favoriterank.html解析数据
<script>
//页面加载完成后 加载收藏排行榜数据
$(function () {
getFavoriteRangeData(1,8);
});
//加载收藏排行榜数据
function getFavoriteRangeData(pageNum,pageSize) {
//根据路线被收藏的次数 加载路线排行榜
$.get("routeServlet?methodName=getFavoriteRangePageData",{pageNum:pageNum,pageSize:pageSize},function (result) {
//填充收藏列表数据
var routeListHtml = "";
if(result.data) {
var routeList = result.data;
var startCount = (pageNum-1)*8+1;
for (var i=0;i<routeList.length;i++) {
var numLine = "";
if(startCount == 1){
numLine = '<span class="num one">'+(startCount++)+'</span>\n' ;
}else if (startCount == 2) {
numLine = '<span class="num two">'+(startCount++)+'</span>\n' ;
}else{
numLine = '<span class="num">'+(startCount++)+'</span>\n' ;
}
routeListHtml+=' <li>\n' +numLine+
'<a href="route_detail.html?rid='+routeList[i].rid+'"><img src='+routeList[i].rimage+' alt=""></a>\n' +
'<h4><a href="route_detail.html?rid='+routeList[i].rid+'">'+routeList[i].rname+'</a></h4>\n' +
'<p>\n' +
'<b class="price">¥<span>'+routeList[i].price+'</span>起</b>\n' +
'<span class="shouchang">已收藏'+routeList[i].count+'次</span>\n' +
'</p>\n' +
'</li>'
}
}
$("#favoriteRangeList").html(routeListHtml);
//加载分页条
var pageLine = '<li><a href="javascript:;" οnclick="getFavoriteRangeData(1)">首页</a></li>' +
'<li class="threeword"><a οnclick="getFavoriteRangeData('+result.prePage+')" href="javascript:;">上一页</a></li>';
//计算分页条起始分页按钮：
var begin;
var end;
var begin = pageNum-5;
var end = pageNum+4;
var totalPage = result.totalPage;
if(totalPage<10) {
begin = 1;
end = totalPage;
}else{
if(begin<0) {
begin = 1;
end = 10;
}
if(end>totalPage) {
end = totalPage;
begin = totalPage-9;
}
}
for(var i=begin;i<=end;i++) {
if(i == pageNum) {
pageLine += '<li class="curPage"><a href="javascript:;" οnclick="getFavoriteRangeData('+i+')">'+i+'</a></li>';
}else{
pageLine += '<li><a href="javascript:;" οnclick="getFavoriteRangeData('+i+')">'+i+'</a></li>';
}
}
pageLine += '<li class="threeword"><a href="javascript:;" οnclick="getFavoriteRangeData('+result.nextPage+')">下一页</a></li>\n' +
'<li class="threeword"><a href="javascript:;" οnclick="getFavoriteRangeData('+result.totalPage+')">末页</a></li>';
$("#favoriteRangePageLine").html(pageLine);
},"json")
};
</script>
第二章 收藏排行榜多条件分页搜索
2.1 需求分析
在收藏排行榜页面上根据“线路名称”和“金额范围”条件点击“搜索”按钮进行过滤收藏排行榜数据并显示，显示后的数据依然具有分页功能。
2.2 实现效果
点击“搜索”进行多条件过滤默认查询第1页数据效果
2.3 实现分析
2.4 实现步骤
- favoriterank.html代码，收藏排行榜页面点击“搜索”按钮提交多条件（旅游线路名称、最小金额、最大金额等
条件）过滤查询排行榜分页数据，默认web后端返回的数据是符合过滤要求的第1页数据，用户通过点击分页
信息中第2页（或者其它页）依然是获取多条件过滤结果中的第2页数据，也就是点击分页信息请求数据也要
提交查询的多条件（旅游线路名称、最小金额、最大金额等条件）数据进行过滤查询排行榜分页数据。所以
提交请求由两部分组成，点击搜索按钮请求和分页信息请求。点击搜索按钮是通过表单元素里面的数据得到
多条件值，再发送异步请求web后端RouteServlet数据，通过回调函数将web后端返回的数据更新到页面上，
页同时将多条件数据拼接到分页请求的url上；分页信息请求favoriterank.html页面的url以get有刷新的提交
请求方式传递多条件数据，当用户点击分页信息的时候，web后端返回favoriterank.html，浏览器刷新页面
（此时地址栏具有分页信息请求的多条件拼接数据），在页面加载完成js事件时获得地址栏的多条件数据，再
提交异步多条件查询请求给到RouteServlet。 - RouteServlet.java代码，旅游线路处理前端排行榜多条件过滤请求，获取过滤多条件（旅游线路名称、、最
小金额、最大金额等条件）封装到Map中，此Map取名为conditionMap。servlet调用旅游线路业务类
RouteService获取分页类PageBean方法需要传递conditonMap参数，传递到下一层进行过滤数据。 - RouteService.java代码，旅游线路业务类获取分页PageBean的方法中调用旅游线路数据访问类RouteDao获
取总记录数据方法和获取当前页数据列表方法增加conditionMap参数，传递到下一层进行过滤数据。 - RouteDao.java代码，旅游线路数据访问类获取总记录数和当前页数据列表实现对conditionMap条件数据进
行过滤。
2.5 代码实现
步骤1：favoriterank.html代码
在原分页查看收藏排行榜页面基础上进行修改：增加3个查询条件。
给搜索条件框添加id标记，给搜索按钮绑定单击事件。
点击查询：
【代码】
<div class="shaixuan">
<span>线路名称</span>
<input id="searchName" type="text">
<span>金额</span>
<input id="startPrice" type="text">~<input id="endPrice" type="text">
<button onclick="getFavoriteRangeData(1,8);">搜索</button>
</div>
<script>
//页面加载完成后 加载收藏排行榜数据
$(function () {
getFavoriteRangeData(1,8);
});
//加载收藏排行榜数据
function getFavoriteRangeData(pageNum,pageSize) {
//获取搜索关键字
var rname = $("#searchName").val();
var startPrice = $("#startPrice").val();
var endPrice = $("#endPrice").val();
//根据路线被收藏的次数 加载路线排行榜
$.get("routeServlet?methodName=getFavoriteRangePageData",{pageNum:pageNum,pageSize:pageSize,rname:rname,startPrice:startPrice,endPrice:endPrice},function (result) {
//填充收藏列表数据
var routeListHtml = "";
if(result.data) {
var routeList = result.data;
var startCount = (pageNum-1)*8+1;
for (var i=0;i<routeList.length;i++) {
var numLine = "";
if(startCount == 1){
numLine = '<span class="num one">'+(startCount++)+'</span>\n' ;
}else if (startCount == 2) {
numLine = '<span class="num two">'+(startCount++)+'</span>\n' ;
}else{
numLine = '<span class="num">'+(startCount++)+'</span>\n' ;
}
routeListHtml+=' <li>\n' +numLine+
'<a href="route_detail.html?rid='+routeList[i].rid+'"><img src='+routeList[i].rimage+' alt=""></a>\n' +
'<h4><a href="route_detail.html?rid='+routeList[i].rid+'">'+routeList[i].rname+'</a></h4>\n' +
'<p>\n' +
'<b class="price">¥<span>'+routeList[i].price+'</span>起</b>\n' +
'<span class="shouchang">已收藏'+routeList[i].count+'次</span>\n' +
'</p>\n' +
'</li>'
}
}
$("#favoriteRangeList").html(routeListHtml);
//加载分页条
var pageLine = '<li><a href="javascript:;" οnclick="getFavoriteRangeData(1)">首页</a></li>' +
'<li class="threeword"><a οnclick="getFavoriteRangeData('+result.prePage+')" href="javascript:;">上一页</a></li>';
//计算分页条起始分页按钮：
var begin;
var end;
var begin = pageNum-5;
var end = pageNum+4;
var totalPage = result.totalPage;
if(totalPage<10) {
begin = 1;
end = totalPage;
}else{
if(begin<0) {
begin = 1;
end = 10;
}
if(end>totalPage) {
end = totalPage;
begin = totalPage-9;
}
}
for(var i=begin;i<=end;i++) {
if(i == pageNum) {
pageLine += '<li class="curPage"><a href="javascript:;" οnclick="getFavoriteRangeData('+i+')">'+i+'</a></li>';
}else{
pageLine += '<li><a href="javascript:;" οnclick="getFavoriteRangeData('+i+')">'+i+'</a></li>';
}
}
pageLine += '<li class="threeword"><a href="javascript:;" οnclick="getFavoriteRangeData('+result.nextPage+')">下一页</a></li>\n' +
'<li class="threeword"><a href="javascript:;" οnclick="getFavoriteRangeData('+result.totalPage+')">末页</a></li>';
$("#favoriteRangePageLine").html(pageLine);
},"json")
};
</script>
步骤2：RouteServlet.java获取参数
在RouteServlet.java中获取查询条件参数
/**
* 加载收藏排行榜分页数据
* @param request
* @param response
* @throws Exception
*/
public void getFavoriteRangePageData(HttpServletRequest request,HttpServletResponse response)throws Exception {
//1.获取请求数据
String strPageNum = request.getParameter("pageNum");
String strPageSize = request.getParameter("pageSize");
//获取搜索条件数据并封装到Map<String,Object>中
Map<String,String> conditionMap = new HashMap<String,String>();
conditionMap.put("rname",request.getParameter("rname"));//封装旅游线路名称搜索条件
conditionMap.put("startPrice",request.getParameter("startPrice"));//封装最小金额搜索条
conditionMap.put("endPrice",request.getParameter("endPrice"));//封装最大金额搜索条件
//分页查询
String jsonString = routeService.pageQueryOrderByCountDesc(strPageNum, strPageSize,conditionMap);
response.getWriter().println(jsonString);
}
步骤3：RouteService.java传递参数
String pageQueryOrderByCountDesc(String strPageNum, String strPageSize, Map<String,String> condationMap);
【实现类】RouteServiceImpl.java
/**
* 查询收藏排行榜
* @param strPageNum
* @param strPageSize
* @return
*/
public String pageQueryOrderByCountDesc(String strPageNum, String strPageSize, Map<String,String> condationMap) {
//2.处理数据
int pageNum=1;
int pageSize = 8;
if (StringUtils.isNotBlank(strPageNum)) {
pageNum = Integer.valueOf(strPageNum);
}
if (StringUtils.isNotBlank(strPageSize)) {
pageSize = Integer.valueOf(strPageSize);
}
//计算起始记录数
int startCount = (pageNum - 1) * pageSize;
//查询分页数据
List<Route> routeList = routeDao.pageQueryOrderbyCountDesc(startCount, pageSize,condationMap);
//查询总记录数
int totalCount = routeDao.queryTotalCount(condationMap);
//封装分页数据
int totalPage = totalCount%pageSize==0?totalCount/pageSize:totalCount/pageSize+1;
int prePage = pageNum==1?1:pageNum-1;
int nextPage = pageNum==totalPage?totalPage:pageNum+1;
//3.响应数据
Map<String, Object> result = new HashMap<>();
result.put("data", routeList);
result.put("totalCount", totalCount);
result.put("totalPage", totalPage);
result.put("prePage", prePage);
result.put("nextPage", nextPage);
String jsonString = JSON.toJSONString(result);
return jsonString;
}
步骤4：RouteDao.java
int queryTotalCount(Map<String,String> condationMap);
List<Route> pageQueryOrderbyCountDesc(int startCount, int pageSize, Map<String,String> condationMap);
步骤5：RouteDaoImpl.java
/**
* 查询旅游线路总记录数
* @return
* @param conditionMap
*/
@Override
public int queryTotalCount(Map<String, String> conditionMap) {
StringBuilder sb = new StringBuilder("SELECT COUNT(*) FROM tab_route WHERE rflag=1 ");
//定义动态参数列表
List<Object> params = new ArrayList<>();
//拼接条件
String rname = conditionMap.get("rname");
String startPrice = conditionMap.get("startPrice");
String endPrice = conditionMap.get("endPrice");
if (StringUtils.isNotBlank(rname)) {
sb.append(" AND rname like ? ");
params.add("%" + rname.trim() + "%");
}
if (StringUtils.isNotBlank(startPrice)) {
sb.append(" AND price >= ?");
params.add(startPrice);
}
if (StringUtils.isNotBlank(endPrice)) {
sb.append(" AND price <= ?");
params.add(endPrice);
}
String sql = sb.toString();
try {
System.out.println(sql);
System.out.println(params);
return jdbcTemplate.queryForObject(sql,Integer.class,params.toArray());
} catch (DataAccessException e) {
return 0;
}
}
/**
* 查询分页数据
* @param startCount
* @param pageSize
* @param conditionMap
* @return
*/
@Override
public List<Route> pageQueryOrderbyCountDesc(int startCount, int pageSize, Map<String, String> conditionMap) {
StringBuilder sb = new StringBuilder("SELECT * FROM tab_route WHERE rflag=1 ");
//封装查询参数
List<Object> params = new ArrayList<>();
//拼接条件
String rname = conditionMap.get("rname");
String startPrice = conditionMap.get("startPrice");
String endPrice = conditionMap.get("endPrice");
if (StringUtils.isNotBlank(rname)) {
sb.append(" AND rname like ? ");
params.add("%" + rname.trim() + "%");
}
if (StringUtils.isNotBlank(startPrice)) {
sb.append(" AND price >= ?");
params.add(startPrice);
}
if (StringUtils.isNotBlank(endPrice)) {
sb.append(" AND price <= ?");
params.add(endPrice);
}
sb.append(" ORDER BY count DESC LIMIT ?,? ");
params.add(startCount);
params.add(pageSize);
String sql = sb.toString();
System.out.println(sql);
System.out.println(params);
return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class),params.toArray());
}
第三章 今日作业
- 能够完成收藏排行榜查询；
- 能够完成多条件收藏排行榜分页查询；
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
