تحليل شفاف لـ javaweb bean servlet jsp لتحقيق وظيفة التصفية

前端实现用ligerUI实现分页，感觉用框架确实简单，闲着无聊，模拟着liger的分页界面实现了一遍（只要是功能，样式什么无视）　

这里用基础的三层架构+servlet+jsp实现，思路很简单，把所有分页相关信息写入到一个pagebean类里面，service返回这个bean类，每次分页查询时都从该bean里查找信息。只是其中的细节问题比较繁琐，如边界处理（前端和后台边界都要处理），下拉框跳转后要显示当前页等等　

这是ligerUI实现的分页样式（实现过程我的上一篇博客有写：https://ar.oldtoolbag.com/article/92850.htm）　

模拟实现过程：　

目录结构

　

数据库（mysql）

　

model层,一个数据库对应的model（Blog），还有一个pageBean(BlogPage)　

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 + ", title="[#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 connection and release operations of jdbc

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");
  }
   e.printStackTrace();
  }
 }
 public static Connection getConnection(){
  Connection conn;
  try {
   conn= DriverManager.getConnection(url, username, password);
   return conn;
  }
   e.printStackTrace();
  }
  return null;
 }
 public static void release(ResultSet rs,PreparedStatement ps,Connection conn){
  if(rs!=null){
   try {
    rs.close();
   }
    e.printStackTrace();
   }
  }
  if(ps!=null){
   try {
    ps.close();
   }
    e.printStackTrace();
   }
  }
  if(conn!=null){
   try {
    conn.close();
   }
    e.printStackTrace();
   }
  }
 }
}

public class BlogDao {
 //每页的记录，传入每页开始索引和每页大小用于分页，即limit的两个参数（mysql分页用limit）
 public List<Blog> getPageRecord(int pagenostart, int pagesize) {
  Connection conn = JDBCUtil.getConnection();
  PreparedStatement ps = null;
  ResultSet rs = null;
  String sql = "select * from blog limit ?,?";
  List<Blog> list = new ArrayList<Blog>();
  try {
   ps = conn.prepareStatement(sql);
   ps.setInt(1, pagenostart);
   ps.setInt(2, pagesize);
   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"));
    list.add(blog);
   }
   return list;
  }
   e.printStackTrace();
  }
   JDBCUtil.release(rs, ps, conn);
  }
  return 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();
   إذا (rs.next()) {
    return rs.getInt(1);
   }
  }
   e.printStackTrace();
  }
   JDBCUtil.release(rs, ps, conn);
  }
  return 0;
 }
}

service层　

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;
 }
}

servlet类　

@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 الخاص بي (محاكاة ligerUI)　

<%@ 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>أدخل العنوان هنا</title>
<script type="text/javascript">
 window.onload = function() {
  //لضمان أن تكون خيارات select متطابقة مع عرض الصفحة الحالية
  select = document.getElementById("select");
  pageno = '${blogPage.pageno}';
  select.options[pageno - 1].selected = 'selected';
 }
 //select dropdown list jump
 function selectjump() {
  var pageno = select.selectedIndex + 1;
  window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno="
    + pageno;
 }
 //النص التحويلي،حدث 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 في الصفحة الأخيرة لن يكون متسقًا مع الصفحات السابقة مما يجعله غير جذاب
  إذا (list.size() < blogPage.getPagesize()) {
   للدورة (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>
   <%
    للبلاگ بلاگ : قائمة_البلاغات {
     إذا (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>
   <!-- tail page blank line filling -->
   <%} 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 dropdown box -->
  <select id="select">
   <%للدورة (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>

هذا هو الشكل النهائي، تم ضبط النمط بشكل خشن، والوظيفة تشبه تمامًا التصفية الافتراضية الخاصة بلigerUI　

قم بتحويل الكود في JSP إلى علامات (JSTL، تحتاج إلى إدخال jar المطلوب) وإضافة إكمال الصفحة الأخيرة في servlet بعد ذلك　

إضافة servlet　

// إكمال الصفحة الأخيرة بالسطور الفارغة، إذا لم يكن ذلك، فإن عدد سطور جدول tr في الصفحة الأخيرة لن يكون متسقًا مع الصفحات السابقة مما يجعله غير جذاب
  List<Blog> list = blogPage.getPagerecord();
  إذا (list.size() < blogPage.getPagesize()) {
   للدورة (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>أدخل العنوان هنا</title>
<script type="text/javascript">
 //select dropdown list jump
 function selectjump() {
  var select = document.getElementById("select");
  var pageno = select.selectedIndex + 1;
  window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno="
    + pageno;
 }
 //text jump, onblur event, occurs when the input box loses focus
 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>
   <!-- tail page blank line filling -->
   <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 dropdown box -->
  <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#oldtoolbag.com (الرجاء استبدال # ب @ عند إرسال البريد الإلكتروني) لإبلاغنا، وقدم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.