JavaEE + BootStrap 实现分页逻辑

2021-12-08 21:46:15 浏览数 (1)

Java EE BootStrap 实现简单分页逻辑

  • 一、项目准备
  • 二、数据库准备
  • 三、视图界面编写
  • 四、后台处理
    • 4.1 封装 BaseDao
    • 4.2 对应的学生实体类
    • 4.3 分页后台逻辑 GetAllServlet
  • 五、运行效果

一、项目准备

  1. 准备一张单表,以学生为例,需要如下列,id,sname,sage,sgender
  2. index.jsp 用于跳转页面,second.jsp 用于显示分页查询的数据
  3. getAllServlet 用于查询分页数据,并返回给前端

二、数据库准备

我使用的 mysql 数据库,数据库版本是 5.7,然后插入一些随机数据用于测试使用,因为要用到分页查询,所以我们使用 sql 中的 limit 关键字指定查询的页数 select * from student limit ?,?

下面是数据库中所有的测试数据

三、视图界面编写

  1. index.jsp 该界面仅仅是作为一个中转界面,用于对后端的 Servlet 发送一个请求
代码语言:javascript复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Titletitle>
head>
<body>
	
    <a href="GetAllServlet?pageNo=1">学生数据a>
body>
html>
  1. second.jsp 数据显示的界面
代码语言:javascript复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>学生页面分页实现title>
    <jsp:include page="base.jsp"/> 
head>
<body>
<div class="container">
    <table class="table table-striped table-bordered text-center table-hover table-condensed" style="margin-top: 20px;">
        <thead>
        <tr>
            <td>学号td>
            <td>姓名td>
            <td>年龄td>
            <td>班级td>
        tr>
        thead>
        <tbody>
        
        <c:forEach var="list" items="${list}">
            <tr>
                <td>${list.getStuId()}td>
                <td>${list.getStuName()}td>
                <td>${list.getStuAge()}td>
                <td>${list.getClassz()}td>
            tr>
        c:forEach>
        tbody>
    table>
    
    <nav style="align-content: center">
        <ul id="pagination" class="pagination">
            <c:choose>
                <c:when test="${pageNo>1}">
                    <li class="page-item"><a class="page-link" href="GetAllServlet?pageNo=${pageNo-1}">上一页a>li>
                c:when>
                <c:otherwise>
                    <li class="page-item disabled"><a class="page-link" href="#">上一页a>li>
                c:otherwise>
            c:choose>
                      
                    <li class="page-item">"><%=1%>a>li>
                      
                     <li class="page-item disabled"><a class="page-link" href="#">...a>li>
                       
                    <li class="page-item"><a class="page-link" href="GetAllServlet?pageNo=${pageCount}">${pageCount}a>li>
                      
            <c:choose>
                <c:when test="${pageNo">
                    <li class="page-item"><a class="page-link" href="GetAllServlet?pageNo=${pageNo 1 }">下一页a>li>
                c:when>
                <c:otherwise>
                    <li class="page-item disabled"><a class="page-link" href="#">下一页a>li>
                c:otherwise>
            c:choose>
        ul>
    nav>
div>
body>
html>

四、后台处理

4.1 封装 BaseDao

代码语言:javascript复制
import java.sql.*;

public class BaseDao {
    private String Driver = "com.mysql.jdbc.Driver";
    private static final String URL = "jdbc:mysql://localhost:3306/studentmanagementsystem?useUnicode=true&characterEncoding=utf8";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "root";
    private Connection con = null;

    // 获取连接
    public PreparedStatement getConnect(String sql) throws SQLException {
        PreparedStatement ps = null;

        try {
            Class.forName(Driver);
            con = DriverManager.getConnection(URL,USERNAME,PASSWORD);
            ps = con.prepareStatement(sql);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ps;
    }

    // 关闭连接
    public void closed(PreparedStatement ps, ResultSet set) throws SQLException {
        if (ps!=null) {
            ps.close();
        }
        if (set!=null) {
            set.close();
        }
        if (con!=null) {
            con.close();
        }
    }

}

4.2 对应的学生实体类

和数据库中的 student 表的列一一对应

代码语言:javascript复制
public class Student {
    private String stuId;
    private String stuName;
    private int stuAge;
    private String classz; // 学生所在 年级 班级

    public Student(String stuId, String stuName, int stuAge, String classz) {
        this.stuId = stuId;
        this.stuName = stuName;
        this.stuAge = stuAge;
        this.classz = classz.toString();
    }
	// getter setter 省略
}

4.3 分页后台逻辑 GetAllServlet

这里接收一个前端穿过来的 pageNo,默认传值为 1,,这里面还有几个特殊的参数要特别说明一下

  1. pageNo 代表查询第几列数据
  2. pageSize:每页要展示多少条数据,也就是 limit ?,? 中的第二个值(固定值)
  3. count:代表数据库中总记录数,这个是需要我们在数据库中 查询总共有多少条记录(select count(*) from student)
  4. pageCount: 当前页面要展示的数据的条数
代码语言:javascript复制
import cn.gorit.entity.Student;
import cn.gorit.util.BaseDao;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.swing.text.Style;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

// 分页显示数据
@WebServlet("/GetAllServlet")
public class GetAllServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        // 封装 BaseDao,简化 JDBC 操作
        BaseDao db = new BaseDao();
        HttpSession session = request.getSession();
        int pageNo = 1; // 默认给一个 pagNo 为 1
        String str = request.getParameter("pageNo");
        str.replace(""", "");
        System.out.println(str);
        if (str != null) {
            pageNo = Integer.valueOf(str);
        }

        int pageSize = 5; // 每页固定的展示数目
        int count = 0; // 求出最大条数
        try {
            PreparedStatement ps = db.getConnect("select count(*) from student");
            ResultSet rs = ps.executeQuery();
            if (rs.next()) {
                count = rs.getInt(1);
            }
            db.closed(ps,rs);
        } catch (SQLException e) {
            e.printStackTrace();
        }

//        System.out.println(count);

        //每页显示的条数
        int pageCount = 0;
        if (count%pageSize == 0) {
            pageCount = count/pageSize;

        } else {
            pageCount = count/pageSize 1;

        }
        
        PreparedStatement ps = null;
        ResultSet rs = null;
        ArrayList<Student> list = new ArrayList<Student>(); // 将学生信息存储到 列表中
        try {
            ps = db.getConnect("select * from student limit ?,?");
            ps.setInt(1,pageSize*(pageNo-1));
            ps.setInt(2,pageSize);
            rs = ps.executeQuery();
            while (rs.next()) {
                list.add(new Student(rs.getString(1),rs.getString(2),rs.getInt(3),rs.getString(4)));
            }
            db.closed(ps,rs);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        session.setAttribute("pageNo",pageNo);
        session.setAttribute("pageCount",pageCount);
        session.setAttribute("list",list);
        response.sendRedirect("second.jsp");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

五、运行效果

第一页

第三页

0 人点赞