English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 위치
  2. 홈페이지
  3. 경험 노트
  4. 본문

javabean servlet jsp로 페이지네이션 기능 구현 코드 분석

프론트엔드 구현은 ligerUI를 사용하여 페이징을 구현했습니다. 프레임워크를 사용하면 정말 간단합니다. 바빠서 그냥 liger의 페이징 인터페이스를 모의 구현했습니다(기능과 스타일은 무시했습니다)　

여기서는 기본적인 세 층 구조를 사용합니다+servlet+jsp 구현, 방법은 간단합니다. 모든 페이징 관련 정보를 pagebean 클래스에 입력하고, service가 이 bean을 반환하면, 페이징 쿼리가 매번 이 bean에서 정보를 찾습니다. 하지만 그 중의 세세한 문제는 복잡합니다. 예를 들어, 경계 처리(프론트엔드와 백엔드 경계 모두 처리), 드롭다운 박스 전환 후 현재 페이지를 표시해야 합니다.　

이것은 ligerUI가 구현한 페이징 스타일입니다(구현 과정은 저의 이전 블로그에 적혀 있습니다: https://ko.oldtoolbag.com/article/92850.htm)　

모의 구현 과정:　

디렉토리 구조

　

데이터베이스(미쿠셀)

　

모델 레이어import java.sql.Date;　

public class Blog {
private int id;
 private int category_id;
 private String title;
 private String content;
 private Date created_time;
 getter와 setter 메서드
　　//@Override
 public String toString() {
 return "Blog [id="
  id + category_id=" + " + category_id + "1#]", content=" + content
    + ", created_time=" + created_time + "]";
 } 
}

public class BlogPage {
 private List<Blog> pagerecord;//한 페이지 기록
 private int pageno;//현재 페이지
 private int pagenostart;//한 페이지 시작 인덱스
 private int pagesize=5;//한 페이지당 데이터 수
 private int totalrecord;//총 기록 수
 private int totalpage;//총 페이지 수
 public BlogPage(int pageno,int totalrecord){
  //pageno totalrecord 모두 기존 정보로 사용됩니다
  this.totalrecord=totalrecord;
  //총 페이지 수 계산
  totalpage=(totalrecord%pagesize==0)?totalrecord/pagesize:totalrecord/pagesize+1;
  //pageno의 경계 처리
  if(pageno<=1)
   this.pageno=1;
  else if(pageno>=totalpage)
   this.pageno=totalpage;
  else
   this.pageno=pageno;
  //계산하는 각 페이지 시작 인덱스는 각 페이지의 첫 번째 데이터의 인덱스로, 페이지네이션 쿼리에 사용됩니다
  pagenostart=(this.pageno-1)*pagesize;
 }
 public int getPagenostart() {
  return pagenostart;
 }
 public void setPagenostart(int pagenostart) {
  this.pagenostart = pagenostart;
 }
 public List<Blog> getPagerecord() {
  return pagerecord;
 }
 public void setPagerecord(List<Blog> pagerecord) {
  this.pagerecord = pagerecord;
 }
 public int getPageno() {
  return pageno;
 }
 public void setPageno(int pageno) {
  this.pageno = pageno;
 }
 public int getPagesize() {
  return pagesize;
 }
 public void setPagesize(int pagesize) {
  this.pagesize = pagesize;
 }
 public int getTotalrecord() {
  return totalrecord;
 }
 public void setTotalrecord(int totalrecord) {
  this.totalrecord = totalrecord;
 }
 public int getTotalpage() {
  return totalpage;
 }
 public void setTotalpage(int totalpage) {
  this.totalpage = totalpage;
 }
}
　

DAO layer

JDBCUtil encapsulates the JDBC connection and release operations

public class JDBCUtil {
 private static String url = "jdbc:mysql://localhost:3306/blogs_stu";
 private static String username = "root";
 private static String password = "";
 static {
  try {
   Class.forName("com.mysql.jdbc.Driver");
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
 public static Connection getConnection(){
  Connection conn;
  try {
   conn= DriverManager.getConnection(url, username, password);
   return conn;
  } catch (SQLException e) {
   e.printStackTrace();
  }
  null을 반환합니다;
 }
 public static void release(ResultSet rs,PreparedStatement ps,Connection conn){
  if(rs!=null){
   try {
    rs.close();
   } catch (SQLException e) {
    e.printStackTrace();
   }
  }
  if(ps!=null){
   try {
    ps.close();
   } catch (SQLException e) {
    e.printStackTrace();
   }
  }
  if(conn!=null){
   try {
    conn.close();
   } catch (SQLException e) {
    e.printStackTrace();
   }
  }
 }
}

public class BlogDao {
 //한 페이지의 기록, 페이지 시작 지점과 페이지 크기를 입력하여 페이지네이션을 사용합니다. 즉, limit의 두 가지 매개변수(MySQL 페이지네이션에 사용됨)
 public List<Blog> getPageRecord(int 페이지시작지점, int 페이지사이즈) {
  Connection conn = JDBCUtil.getConnection();
  PreparedStatement ps = null;
  ResultSet rs = null;
  String sql = "select * from blog limit ?,?";
  List<Blog> 리스트 = new ArrayList<Blog>();
  try {
   ps = conn.prepareStatement(sql);
   ps.setInt(1, 페이지시작지점);
   ps.setInt(2, 페이지사이즈);
   rs = ps.executeQuery();
   while (rs.next()) {
    Blog blog = new Blog();
    blog.setId(rs.getInt("id"));
    blog.setCategory_id(rs.getInt("category_id"));
    blog.setTitle(rs.getString("title"));
    blog.setContent(rs.getString("content"));
    blog.setCreated_time(rs.getDate("created_time"));
    리스트.add(blog);
   }
   리스트를 반환합니다;
  } catch (SQLException e) {
   e.printStackTrace();
  }
   JDBCUtil.release(rs, ps, conn);
  }
  null을 반환합니다;
 }
 //총 기록 수
 public int getTotal() {
  Connection conn = JDBCUtil.getConnection();
  PreparedStatement ps = null;
  ResultSet rs = null;
  try {
   ps = conn.prepareStatement("select count("*) from blog);
   rs = ps.executeQuery();
   if (rs.next()) {
    return rs.getInt(1);
   }
  } catch (SQLException e) {
   e.printStackTrace();
  }
   JDBCUtil.release(rs, ps, conn);
  }
  0을 반환합니다;
 }
}

서비스 레이어　

public class BlogService {
 BlogDao blogDao = new BlogDao();
 //pagebean을 반환합니다. 모든 페이지 정보는 pagebean에서 찾아야 합니다.
 public BlogPage findPageRecord(int pageno) {
  int totalrecord = blogDao.getTotal();
  BlogPage blogpage = new BlogPage(pageno, totalrecord);
  List<Blog> list = blogDao.getPageRecord(blogpage.getPagenostart(),blogpage.getPagesize());
  blogpage.setPagerecord(list);
  return blogpage;
 }
}

서블릿 클래스　

@WebServlet("/BlogSplitServlet")
public class BlogSplitServlet extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("UTF-8");
  response.setContentType("text/html; charset=utf-8");
  String pagenostr=request.getParameter("pageno");
  //首次访问servletpagenostr为null，给一个初始值，即默认访问第一页
  int pageno=1;
  if(pagenostr!=null)
   pageno=Integer.parseInt(pagenostr);
  BlogService service=new BlogService();
  BlogPage blogPage=service.findPageRecord(pageno);
  request.setAttribute("blogPage", blogPage);
  request.getRequestDispatcher("/blogPage.jsp").forward(request, response);}}
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doGet(request, response);
 }
}

이렇게 모든 페이지 정보가 pagebean에 포장됩니다　

jsp 구현은 pagebean에 있는 정보를 꺼내는 것만 필요　

아래는 제 jsp 구현(빌거UI 모의)　

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<%@page import="java.util.*,model.Blog,model.BlogPage"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
 window.onload = function() {
  //select의 option이 현재 페이지에 일치하도록 보장
  select = document.getElementById("select");
  pageno = '${blogPage.pageno}';
  select.options[pageno - 1].selected = 'selected';
 }
 //select 드롭다운 목록 점프
 function selectjump() {
  var pageno = select.selectedIndex + 1;
  window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno="
    + pageno;
 }
 //text跳跃, onblur이벤트, 입력 필드가 포커스를 잃을 때 발생
 function textjump() {
  var pageno = document.getElementById("text").value;
  window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno="
    + pageno;
 }
</script>
</head>
<body>
 <%
  BlogPage blogPage = (BlogPage) request.getAttribute("blogPage");
  List<Blog> list = blogPage.getPagerecord();
  // 마지막 페이지에 빈 행을 채우기, 채우지 않으면 마지막 페이지 테이블 tr 행 수가 앞의 것과 일치하지 않아 어려워 보입니다
  if (list.size() < blogPage.getPagesize()) {
   for (int i = list.size(); i < blogPage.getPagesize(); i++)
    list.add(null);
  }
 %>
 <div style="width: 50%; height: 400px">
  <table border="1" cellspacing="0" width="100%" bgcolor="#CEF0C5">
   <tr height="40px">
    <td>id</td><td>제목</td><td>내용</td><td>생성 시간</td>
   </tr>
   <%
    for (Blog blog : list) {
     if (blog != null) {
   %>
   <tr height="50px">
    <td width="10%"><%=blog.getId()%></td>
    <td width="20%"><%=blog.getTitle()%></td>
    <td width="40%"><%=blog.getContent()%></td>
    <td width="30%"><%=blog.getCreated_time()%></td>
   </tr>
   <!-- 끝 페이지 빈 행 채우기 -->
   <%} else {%>
   <tr height="50px">
    <td width="10%"></td>
    <td width="20%"></td>
    <td width="40%"></td>
    <td width="30%"></td>
   </tr>
   <%}}%>
  </table>
  <div style="height:50px;background-color: #4B7DB3;line-height: 40px;">
    
  <!-- select下拉 목록 -->
  <select id="select">
   <%for (int i = 1; i <= blogPage.getTotalpage(); i++) {%>
   <option onclick="selectjump()"><%=i%></option>
   <%}%>
  </select> 
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=1">처음 페이지</a>
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getPageno()-1<1?blogPage.getPageno():blogPage.getPageno()-1%>">이전 페이지</a>  
  <input type="text" id="text" size="1px" value="${blogPage.pageno}" onblur="textjump()">/${blogPage.totalpage} 
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getPageno()+1>blogPage.getTotalpage()?blogPage.getPageno():blogPage.getPageno()+1%>>다음 페이지</a>
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getTotalpage()%>>마지막 페이지</a>
  <div style="float: right;">
  부터 ${blogPage.pagenostart+1}; ${blogPage.pageno==blogPage.totalpage?blogPage.totalrecord:blogPage.pagesize},
  총 ${blogPage.totalrecord} 개. 한 페이지에 ${blogPage.pagesize} 개 표시
  </div>
  </div>
 </div>
</body>
</html>

이제 마지막 모습입니다. 스타일은 대략적으로 조정했고, 기능은 ligerUI 기본 페이징과 동일합니다　

JSP에 있는 코드를 태그( JSTL, 필요한 jar 패키지를 포함)로 변경하고 JSP의 마지막 페이지 채우기를 서블릿에 두고　

서블릿에 추가　

// 마지막 페이지에 빈 행을 채우기, 채우지 않으면 마지막 페이지 테이블 tr 행 수가 앞의 것과 일치하지 않아 어려워 보입니다
  List<Blog> list = blogPage.getPagerecord();
  if (list.size() < blogPage.getPagesize()) {
   for (int i = list.size(); i < blogPage.getPagesize(); i++)
    list.add(null);
  }
  blogPage.setPagerecord(list);

jsp 페이지　

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<%@page import="java.util.*,model.Blog,model.BlogPage"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript">
 //select 드롭다운 목록 점프
 function selectjump() {
  var select = document.getElementById("select");
  var pageno = select.selectedIndex + 1;
  window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno="
    + pageno;
 }
 //text 점프, onblur 이벤트, 입력 상자가 포커스를 잃을 때 발생
 function textjump() {
  var pageno = document.getElementById("text").value;
  window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno="
    + pageno;
 }
</script>
</head>
<body>
 <div style="width: 50%; height: 400px">
  <table border="1" cellspacing="0" width="100%" bgcolor="#CEF0C5">
   <tr height="40px">
    <td>id</td><td>제목</td><td>내용</td><td>생성 시간</td>
   </tr>
   <c:forEach items="${blogPage.pagerecord}" var="c" varStatus="vs">
   <c:if test="${c!=null}">
      <tr height="50px">
    <td width="10%">${c.id}</td>
    <td width="20%">${c.title}</td>
    <td width="40%">${c.content}</td>
    <td width="30%">${c.created_time}</td>
   </tr>
   </c:if>
   <!-- 끝 페이지 빈 행 채우기 -->
   <c:if test="${c==null}">
   <tr height="50px">
    <td width="10%"></td>
    <td width="20%"></td>
    <td width="40%"></td>
    <td width="30%"></td>
   </tr>
   </c:if>
   </c:forEach>
  </table>
  <div style="height:50px;background-color: #4B7DB3;line-height: 40px;">
    
  <!-- select下拉 목록 -->
  <select id="select">
  <c:forEach begin="1" end="${blogPage.totalpage}" var="i">
  <option value="${i}" onclick="selectjump()" ${blogPage.pageno==i?'selected="selected"':''}>${i}</option>
  </c:forEach>
  </select> 
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=1">처음 페이지</a>
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=${blogPage.pageno-1<1?blogPage.pageno:blogPage.pageno-1}">이전 페이지</a>  
  <input type="text" id="text" size="1px" value="${blogPage.pageno}" onblur="textjump()">/${blogPage.totalpage} 
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=${blogPage.pageno+1>${blogPage.totalpage?blogPage.pageno:blogPage.pageno+1}">다음 페이지</a>
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=${blogPage.totalpage}">마지막 페이지</a>
  <div style="float: right;">
  부터 ${blogPage.pagenostart+1}; ${blogPage.pageno==blogPage.totalpage?blogPage.totalrecord:blogPage.pagesize},
  총 ${blogPage.totalrecord} 개. 한 페이지에 ${blogPage.pagesize} 개 표시
  </div>
  </div>
 </div>
</body>
</html>

　실제 사용 시 필요에 따라 jsp 페이지를 작성할 수 있지만, 백엔드 코드는 일반적입니다　


이것이 본 문서의 전부입니다. 여러분의 학습에 도움이 되길 바라며, 더 많은 지원과 응원을 부탁드립니다. 노래教程에 대한 지원을 많이 해 주세요.

고지사항: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 자체적으로 업로드한 내용입니다. 이 사이트는 저작권을 소유하지 않으며, 인공적으로 편집되지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용을 발견하시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보내는 이메일에서 #을 @으로 변경하십시오. 신고하시고 관련 증거를 제공하시면, 사실이 확인되면 이 사이트는 즉시 저작권 침해 내용을 삭제합니다.

기본 튜토리얼
추천해드립니다