黑马程序员技术交流社区

标题: 分页 [打印本页]

作者: 王zy 时间: 2019-9-16 15:12
标题: 分页

3.分页实现思路
*************************************************************
完成过程中重点注意事项

*************************************************************
1.前台页面字符串的拼接(最重要!!!!,刚开始接触特别容易出错,开发会天天写)
2.分页的逻辑(前台/后台)
前台要注意数据传递的参数和请求的方式(get/post) 开发几乎都用post
后台要注意数据的封装和json的返回格式(content-type)
3.pageBean的封装思想和数据来源以及数据的作用
4.必须要多练,这样方便分析框架对应源码实现思路

*************************************************************
分类分页显示必要条件

*************************************************************
1,要知道数据来源(cid从什么地方获取,为什么要用cid)
2,如何跨html进行数据传递

*************************************************************
前台页面业务逻辑

*************************************************************
1.ajax异步发起分页请求
2.发请求时需要提供 cid/currentPage/pageSize 3个参数 ,注意 cid是根据需求决定 currentPage/pageSize是必要条件
3.在ajax成功回调中对分页数据进行显示(重点在字符串拼接)
$.get("route/pageQuery",{cid:cid},function (pb) {
$("#totalPage").html(pb.totalPage); //显示总页数
$("#totalCount").html(pb.totalCount); //显示总数据量

//拼接页码字符串
var lis = "";
var fristPage = '<li><a href="javascript:void(0)">首页</a></li>';
var beforePage = '<li class="threeword"><a href="javascript:void(0)">上一页</a></li>';
lis += fristPage;
lis += beforePage;
for (var i = 0; i <= pb.totalPage ; i++) {
var li;
//创建页码的li
li = '<li><a href="javascript:void(0)">'+i+'</a></li>';
lis += li;
}
var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
lis += nextPage;
lis += lastPage;
$("#pageNum").html(lis);
});
}

*************************************************************
后台页面业务逻辑

*************************************************************
web层
1.接收cid/currentPage/pageSize参数
2.对参数进行处理对数据做非空和默认值的处理
3.调用service的方法获取pageBean对象
4.把pageBean对象转成json返回浏览器
public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接受参数
String currentPageStr = request.getParameter("currentPage");
String pageSizeStr = request.getParameter("pageSize");
String cidStr = request.getParameter("cid");

int cid = 0;//类别id
//2.处理参数
if(cidStr != null && cidStr.length() > 0){
cid = Integer.parseInt(cidStr);
}
int currentPage = 0;//当前页码，如果不传递，则默认为第一页
if(currentPageStr != null && currentPageStr.length() > 0){
currentPage = Integer.parseInt(currentPageStr);
}else{
currentPage = 1;
}

int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录
if(pageSizeStr != null && pageSizeStr.length() > 0){
pageSize = Integer.parseInt(pageSizeStr);
}else{
pageSize = 5;
}

//3. 调用service查询PageBean对象
PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);

//4. 将pageBean对象序列化为json，返回
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),pb);

}

*************************************************************
service层

*************************************************************
封装PageBean对象
public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {
//封装PageBean
PageBean<Route> pb = new PageBean<Route>();
//设置当前页码
pb.setCurrentPage(currentPage);
//设置每页显示条数
pb.setPageSize(pageSize);

//设置总记录数
int totalCount = routeDao.findTotalCount(cid);
pb.setTotalCount(totalCount);
//设置当前页显示的数据集合
int start = (currentPage - 1) * pageSize;//开始的记录数
List<Route> list = routeDao.findByPage(cid,start,pageSize);
pb.setList(list);

//设置总页数 = 总记录数/每页显示条数
int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;
pb.setTotalPage(totalPage);
return pb;
}

*************************************************************
dao层

*************************************************************
查询具体分页对应数据
String sql = "select * from tab_route where cid = ? limit ? , ?";
template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),cid,start,pageSize);

查询总数据个数
String sql = "select count(*) from tab_route where cid = ?";
template.queryForObject(sql,Integer.class,cid);

*************************************************************

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2