通用分页（前端）-阿里云开发者社区

什么是 Eclipse debug调试？

Eclipse Debug调试是Eclipse集成开发环境（IDE）中的一种调试工具，用于帮助开发人员在开发过程中定位和修复Java程序的错误。

Eclipse Debug调试提供了以下功能：

设置断点：通过在代码的特定行上设置断点，开发人员可以指示调试器在程序执行到该行时暂停。这样可以方便地观察程序的状态和执行流程。

单步执行：开发人员可以逐行执行代码，可以单步进入方法中、单步跳过当前方法、单步跳出方法等，以深入了解代码的执行过程。

监视和修改变量：调试器提供了监视变量的功能，可以实时查看变量的值，并且还可以在调试过程中修改变量的值，以便检查和验证代码的行为。

调用堆栈查看：调试器提供了查看当前调用堆栈的功能，可以查看当前方法被哪些方法调用，定位问题出现的位置。

条件断点：除了在特定行设置断点外，还可以设置条件断点，只有当满足特定条件时，调试器才会暂停执行。

异常断点：可以设置断点来捕获并处理特定的异常，当异常发生时，程序会在断点处暂停，以便查看和调试异常情况。

多线程调试：Eclipse Debug调试器支持多线程调试，可以同时查看和跟踪多个线程的执行。

通过使用Eclipse Debug调试功能，开发人员可以更快速地定位和解决程序中的问题，提高开发效率和代码质量。同时，Eclipse提供了用户友好的调试界面和丰富的调试功能，使得调试过程更加直观和便捷。

调试是软件开发过程中非常重要的一步，它帮助开发人员快速定位和解决问题，提高代码的质量和可靠性。

eclipse中debug调试

在Eclipse中，debug调试是一种开发过程中的功能，它允许开发者逐行执行程序代码并查看程序在每个步骤中的状态，以便分析和排查问题。

具体来说，通过debug调试，你可以在程序执行过程中设置断点，暂停程序的执行，并查看变量的值、调用堆栈和执行流程，以帮助你理解代码的行为和发现错误。

以下是在Eclipse中使用debug调试的一般流程：

1. 打开Eclipse，并打开要调试的Java项目。

2. 在代码中选择一个你希望暂停执行的地方，右键单击并选择"Toggle Breakpoint"，或者直接使用快捷键Ctrl+Shift+B，设置断点。断点会显示为一个小红圆点，表示程序在执行到该行时会暂停。

3. 单击Eclipse工具栏中的调试按钮（一个绿色的虫子图标），或使用快捷键F11，开启debug模式，此时程序将在设置的断点处暂停执行。

4. 一旦程序暂停，你可以使用调试视图(Debug perspective)来查看程序的状态。例如，你可以查看和修改变量的值、检查调用堆栈、查看程序输出等。

5. 使用调试工具栏上的按钮（例如，继续执行、单步执行、步入方法、步出方法等）来控制程序的执行流程。

6. 当程序执行到下一个断点或结束时，调试会停止，你可以继续分析代码或结束调试。

在debug调试过程中，你可以使用断点、变量查看器、调试视图等工具来深入了解程序的执行过程，定位和解决代码中的问题。调试还提供了对多线程程序的支持，允许你跟踪和监控不同线程的执行。

通过debug调试，你可以更好地理解代码，减少bug的数量，提高代码质量，并加快问题的排查速度。

一.分页核心思想

分页的核心思想是将大量的数据按照固定的大小分割成多个页面（或称为页码、页数），以便在用户界面上进行展示和浏览。分页的核心目的是提供更好的用户体验和提高数据的呈现效率。

核心思想如下：

数据划分：将大量数据按照固定的大小划分成多个数据块或数据片段，每个数据块包含一定数量的数据记录。通常使用特定的算法和逻辑来计算总记录数和总页数。

页面展示：在用户界面上进行展示，通常以一页一页的形式呈现。用户可以通过上一页、下一页、指定页码等方式切换不同的页面。

导航和控制：提供用户友好的导航和分页控制元素，例如页码链接、上一页、下一页、首页、尾页等，使用户可以方便地浏览和跳转到所需的页面。

数据查询和遍历：基于用户请求，在后端通过相应的逻辑和算法计算出所需的数据块，然后进行查询和获取。每次查询返回一个固定大小的数据块，以减少网络传输和提高性能。

分页的核心思想是将大数据集分割成多个更小、可管理的数据块，以便更高效地展示和处理数据。这样可以避免一次性加载大量数据，提升性能，并减少用户浏览数据时的等待时间。同时，分页还提供了更好的导航和控制机制，使用户可以方便地浏览和跳转到不同的数据页面。

核心思想

当我们在第一次搜索的里面搜索你想要的东西的时候，后台分页拿到：bname=XXX、page=1、rows=100、pagintion=true（可传可不传，但是不分页下拉框需求时必须传入false）

我们第二次查询（下一页）只是页码进行改变：bname=XXX、page=2、rows=100、pagintion=true（可传可不传，但是不分页下拉框需求时必须传入false）

我们第三次查询（尾页）相比第二次只是页码进行改变，其他都不变：bname=XXX、page=2、rows=100、pagintion=true（可传可不传，但是不分页下拉框需求时必须传入false）

二.通用分页优化

1.PageBean的封装类代码：

package com.liao.utils;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
/**
 * 分页工具类
 * 
 */
public class PageBean {
  private int page = 1;// 页码
  private int rows = 10;// 页大小
  private int total = 0;// 总记录数
  // 上一次查询的url
  private String url;
  // 上一次查询所携带的查询条件
  private Map<String, String[]> parameterMap = new HashMap<String, String[]>();
  private boolean pagination = true;// 是否分页
  /**
   * 对pagebean进行初始化
   * 
   * @param req
   */
  public void setRequest(HttpServletRequest req) {
    // 初始化jsp页面传递过来的当前页
    this.setPage(req.getParameter("page"));
    // 初始化jsp页面传递过来的页大小
    this.setRows(req.getParameter("rows"));
    // 初始化jsp页面传递过来是否分页
    this.setPagination(req.getParameter("pagination"));
    // 保留上一次的url查询请求
    this.setUrl(req.getRequestURL().toString());
    // 保留上一次的查询条件/参数
    this.setParameterMap(req.getParameterMap());
  }
  private void setPagination(String pagination) {
    // 只有填写了false字符串，才代表不分页
    if (StringUtils.isNotBlank(pagination))
      this.setPagination(!"false".equals(pagination));
  }
  /**
   * 获得起始记录的下标
   * 
   * @return
   */
  public int getStartIndex() {
    return (this.page - 1) * this.rows;
  }
  // 上一页
  public int getPrevPage() {
    return this.page > 1 ? this.page - 1 : this.page;
  }
  // 下一页
  public int getNextPage() {
    return this.page < this.getMaxPage() ? this.page + 1 : this.page;
  }
  // 最大页
  public int getMaxPage() {
    return this.total % this.rows == 0 ? this.total / this.rows : (this.total / this.rows) + 1;
  }
  public String getUrl() {
    return url;
  }
  public void setUrl(String url) {
    this.url = url;
  }
  public Map<String, String[]> getParameterMap() {
    return parameterMap;
  }
  public void setParameterMap(Map<String, String[]> parameterMap) {
    this.parameterMap = parameterMap;
  }
  private void setRows(String rows) {
    if (StringUtils.isNotBlank(rows))
      this.setRows(Integer.valueOf(rows));
  }
  private void setPage(String page) {
    if (StringUtils.isNotBlank(page))
      this.setPage(Integer.valueOf(page));
  }
  public PageBean() {
    super();
  }
  public int getPage() {
    return page;
  }
  public void setPage(int page) {
    this.page = page;
  }
  public int getRows() {
    return rows;
  }
  public void setRows(int rows) {
    this.rows = rows;
  }
  public int getTotal() {
    return total;
  }
  public void setTotal(int total) {
    this.total = total;
  }
  public void setTotal(String total) {
    this.total = Integer.parseInt(total);
  }
  public boolean isPagination() {
    return pagination;
  }
  public void setPagination(boolean pagination) {
    this.pagination = pagination;
  }
  @Override
  public String toString() {
    return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination + "]";
  }
}

2. 自定义page标签描述文件

<?xml version="1.0" encoding="UTF-8" ?>
<taglib xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
    version="2.1">
  <description>JSTL 1.1 core library</description>
  <display-name>JSTL core</display-name>
  <tlib-version>1.1</tlib-version>
  <short-name>z</short-name>
  <uri>http://jsp.veryedu.cn</uri>
 <tag>
        <name>page</name>
        <tag-class>com.liao.tag.PageTag</tag-class>
        <body-content>JSP</body-content>
        <attribute>
            <name>pageBean</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
    </tag>
</taglib>

3. Page助手类

package com.liao.tag;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.BodyTagSupport;
import com.liao.utils.PageBean;
/**
 * @author Cloud.Jun
 * @com.CloudJun.entity
 * @PageTag(说明):标签帮助类
 */
public class PageTag extends BodyTagSupport {
    private PageBean pageBean;
    public PageBean getPageBean() {
        return pageBean;
    }
    public void setPageBean(PageBean pageBean) {
        this.pageBean = pageBean;
    }
    @Override
    public int doStartTag() throws JspException {
        JspWriter out = pageContext.getOut();
        try {
            out.print(toHTML());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return SKIP_BODY;
    }
    private String toHTML() {
        StringBuilder sb = new StringBuilder();
//        这里拼接的是一个上一次发送的请求以及携带的参数，唯一改变的就是页码
        sb.append("<form id='pageBeanForm' action='"+pageBean.getUrl()+"' method='post'>");
//        sb.append("<input type='hidden' name='methodName' value='list'>");
        sb.append("<input type='hidden' name='page'>");
//        重要设置拼接操作，将上一次请求参数携带到下一次
        Map<String, String[]> paMap = pageBean.getParameterMap();
        if(paMap !=null && paMap.size()>0){
            Set<Map.Entry<String, String[]>> entrySet = paMap.entrySet();
            for (Map.Entry<String, String[]> entry : entrySet) {
                for (String val : entry.getValue()) {
                    if(!"page".equals(entry.getKey())){
                        sb.append("<input type='hidden' name='"+entry.getKey()+"' value='"+val+"'>");
                    }
                }
            }
        }
        sb.append("</form>");
        int page = pageBean.getPage();
        int max = pageBean.getMaxPage();
        int before = page > 4 ? 4 : page-1;
        int after = 10 - 1 - before;
        after = page+after > max ? max-page : after;
//        disabled
        boolean startFlag = page == 1;
        boolean endFlag = max == page;
//        拼接分页条
        sb.append("<ul class='pagination'>");
        sb.append("<li class='page-item "+(startFlag ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage(1)'>首页</a></li>");
        sb.append("<li class='page-item "+(startFlag ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage("+pageBean.getPrevPage()+")'>&lt;</a></li>");
//        代表了当前页的前4页
        for (int i = before; i > 0 ; i--) {
            sb.append("<li class='page-item'><a class='page-link' href='javascript:gotoPage("+(page-i)+")'>"+(page-i)+"</a></li>");
        }
        sb.append("<li class='page-item active'><a class='page-link' href='javascript:gotoPage("+pageBean.getPage()+")'>"+pageBean.getPage()+"</a></li>");
//        代表了当前页的后5页
        for (int i = 1; i <= after; i++) {
            sb.append("<li class='page-item'><a class='page-link' href='javascript:gotoPage("+(page+i)+")'>"+(page+i)+"</a></li>");
        }
        sb.append("<li class='page-item "+(endFlag ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage("+pageBean.getNextPage()+")'>&gt;</a></li>");
        sb.append("<li class='page-item "+(endFlag ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage("+pageBean.getMaxPage()+")'>尾页</a></li>");
        sb.append("<li class='page-item go-input'><b>到第</b><input class='page-link' type='text' id='skipPage' name='' /><b>页</b></li>");
        sb.append("<li class='page-item go'><a class='page-link' href='javascript:skipPage()'>确定</a></li>");
        sb.append("<li class='page-item'><b>共"+pageBean.getTotal()+"条</b></li>");
        sb.append("</ul>");
//        拼接分页的js代码
        sb.append("<script type='text/javascript'>");
        sb.append("function gotoPage(page) {");
        sb.append("document.getElementById('pageBeanForm').page.value = page;");
        sb.append("document.getElementById('pageBeanForm').submit();");
        sb.append("}");
        sb.append("function skipPage() {");
        sb.append("var page = document.getElementById('skipPage').value;");
        sb.append("if (!page || isNaN(page) || parseInt(page) < 1 || parseInt(page) > "+max+") {");
        sb.append("alert('请输入1~N的数字');");
        sb.append("return;");
        sb.append("}");
        sb.append("gotoPage(page);");
        sb.append("}");
        sb.append("</script>");
        return sb.toString();
    }
}

4.BookServlet类

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://jsp.veryedu.cn" prefix="z"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
  href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
  rel="stylesheet">
<script
  src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<title>书籍列表</title>
<style type="text/css">
.page-item input {
  padding: 0;
  width: 40px;
  height: 100%;
  text-align: center;
  margin: 0 6px;
}
.page-item input, .page-item b {
  line-height: 38px;
  float: left;
  font-weight: 400;
}
.page-item.go-input {
  margin: 0 10px;
}
</style>
</head>
<body>
  ${pageBean }
  <form class="form-inline"
    action="${pageContext.request.contextPath }/book.do" method="post">
    <div class="form-group mb-2">
      <input type="text" class="form-control-plaintext" name="bname"
        placeholder="请输入书籍名称">
    </div>
    <button type="submit" class="btn btn-primary mb-2">查询</button>
  </form>
  <table class="table table-striped bg-success">
    <thead>
      <tr>
        <th scope="col">书籍ID</th>
        <th scope="col">书籍名</th>
        <th scope="col">价格</th>
      </tr>
    </thead>
    <tbody>
    <c:forEach items="${books }" var="b">
      <tr>
        <td>${b.bid }</td>
        <td>${b.bname }</td>
        <td>${b.price }</td>
      </tr>
    </c:forEach>
    </tbody>
  </table>
  <z:page pageBean="${pageBean }"></z:page>
</body>
</html>

5.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://jsp.veryedu.cn" prefix="z"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
  href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
  rel="stylesheet">
<script
  src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<title>书籍列表</title>
<style type="text/css">
.page-item input {
  padding: 0;
  width: 40px;
  height: 100%;
  text-align: center;
  margin: 0 6px;
}
.page-item input, .page-item b {
  line-height: 38px;
  float: left;
  font-weight: 400;
}
.page-item.go-input {
  margin: 0 10px;
}
</style>
</head>
<body>
  ${pageBean }
  <form class="form-inline"
    action="${pageContext.request.contextPath }/book.do" method="post">
    <div class="form-group mb-2">
      <input type="text" class="form-control-plaintext" name="bname"
        placeholder="请输入书籍名称">
    </div>
    <button type="submit" class="btn btn-primary mb-2">查询</button>
  </form>
  <table class="table table-striped bg-success">
    <thead>
      <tr>
        <th scope="col">书籍ID</th>
        <th scope="col">书籍名</th>
        <th scope="col">价格</th>
      </tr>
    </thead>
    <tbody>
    <c:forEach items="${books }" var="b">
      <tr>
        <td>${b.bid }</td>
        <td>${b.bname }</td>
        <td>${b.price }</td>
      </tr>
    </c:forEach>
    </tbody>
  </table>
  <z:page pageBean="${pageBean }"></z:page>
</body>
</html>

通用分页（前端）

什么是 Eclipse debug调试？

eclipse中debug调试

一.分页核心思想

核心思想

二.通用分页优化

1.PageBean的封装类代码：

2. 自定义page标签描述文件

3. Page助手类

4.BookServlet类

5.jsp页面

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

通用分页（前端）

什么是 Eclipse debug调试？

eclipse中debug调试

一.分页核心思想

核心思想

二.通用分页优化

1.PageBean的封装类代码：

2. 自定义page标签描述文件

3. Page助手类

4.BookServlet类

5.jsp页面

热门文章

最新文章

相关课程

相关电子书

相关实验场景