IDEA环境--JavaWeb项目【分页功能实现】

1、前言

最近在写一些项目，遇到要使用分页功能的地方，就简单的学习了一下，在此总结一下具体实现的过程以及遇到的问题。

分页功能：当我们写一下web项目时会遇到一个页面要显示很多数据，一下子都显示出来效率会很低，也不美观。这就要用到分页，其作用也就是将数据分割成多个页面来进行显示。

2、项目介绍

这只是一个简单的Demo，目的是学习分页功能的实现。

涉及的技术：

Java基础知识，HTML, CSS, JAVASCRIPT, JQUERY，Tomcat, Servlet, JSP, Filter，Mysql

项目预览：


项目结构：

3、实现步骤

（1）打开IDEA创建一个Web项目


（2）创建一个数据库，因为只是展示分页功能，显示一个表就行了，所以创建一个表就行了。然后在随便插一些数据

数据库名：student

表名：student

（3）导包

项目中用到的jar包（zi2t）：

jstl.jar

mysql-connector-java-8.0.16.jar

standard.jar

（4）实体类设计，与student表字段对应

在bean包中创建一个student类

package com.sun.bean;

import java.util.Date;

public class Student {

    private int id;

    private int studentID;

    private String name;

    private int age;

    private String sex;

    private Date birthday;

  public int getId() {

        return id;

    }

    public void setId(int id) {

        this.id = id;

    }

    public int getStudentID() {

        return studentID;

    }

    public void setStudentID(int studentID) {

        this.studentID = studentID;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public int getAge() {

        return age;

    }

    public void setAge(int age) {

        this.age = age;

    }

    public String getSex() {

        return sex;

    }

    public void setSex(String sex) {

        this.sex = sex;

    }

    public Date getBirthday() {

        return birthday;

    }

    public void setBirthday(Date birthday) {

        this.birthday = birthday;

    }

}

（5）在Utils包下创建连接数据库的工具类

package com.sun.Utils;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.SQLException;

public class DBUtil {

    static String ip = "127.0.0.1";

    static int port = 3306;

    static String database = "student";

    static String encoding = "UTF-8";

    static String loginName = "root";

    static String password = "123456";

    static {

        try {

            Class.forName("com.mysql.cj.jdbc.Driver");

        } catch (ClassNotFoundException e) {

            e.printStackTrace();

        }

    }

    public static Connection getConnection() throws SQLException {

        String url = String.format("jdbc:mysql://%s:%d/%s?characterEncoding=%s&serverTimezone=UTC", ip, port, database, encoding);

        return DriverManager.getConnection(url, loginName, password);

    }

    public static void main(String[] args) throws SQLException {

        System.out.println(getConnection());

    }

}

（6）在Utils包下创建用于分页功能的工具类

package com.sun.Utils;

public class Page {

    int start;      // 开始数据

    int count;      // 每一页的数量

    int total;      // 总共的数据量

    public Page(int start, int count) {

        super();

        this.start = start;

        this.count = count;

    }

    public boolean isHasPreviouse(){

        if(start==0)

            return false;

        return true;

    }

    public boolean isHasNext(){

        if(start==getLast())

            return false;

        return true;

    }

    public int getTotalPage(){

        int totalPage;

        // 假设总数是50，是能够被5整除的，那么就有10页

        if (0 == total % count)

            totalPage = total /count;

            // 假设总数是51，不能够被5整除的，那么就有11页

        else

            totalPage = total / count + 1;

        if(0==totalPage)

            totalPage = 1;

        return totalPage;

    }

    public int getLast(){

        int last;

        // 假设总数是50，是能够被5整除的，那么最后一页的开始就是40

        if (0 == total % count)

            last = total - count;

            // 假设总数是51，不能够被5整除的，那么最后一页的开始就是50

        else

            last = total - total % count;

        last = last<0?0:last;

        return last;

    }

    public int getStart() {

        return start;

    }

    public void setStart(int start) {

        this.start = start;

    }

    public int getCount() {

        return count;

    }

    public void setCount(int count) {

        this.count = count;

    }

    public int getTotal() {

        return total;

    }

    public void setTotal(int total) {

        this.total = total;

    }

}

（7）在dao包下创建一个studentDAO类，里面有一个查询学生列表的方法。因为功能简单就只写了查询功能。

package com.sun.dao;

import com.sun.Utils.DBUtil;

import com.sun.bean.Student;

import java.sql.*;

import java.util.ArrayList;

import java.util.List;

public class StudentDao {

    public int getTotal() {

        int total = 0;

        String sql = "SELECT COUNT(*) FROM student";

        try (Connection c = DBUtil.getConnection(); Statement st = c.createStatement()) {

            ResultSet rs = st.executeQuery(sql);

            while (rs.next()) {

                total = rs.getInt(1);

            }

        } catch (SQLException e) {

            e.printStackTrace();

        }

        return total;

    }

    public List<Student> list() {

        return list(0, Short.MAX_VALUE);

    }

    public List<Student> list(int start, int count) {

        List<Student> students = new ArrayList<>();

        String sql = "SELECT * FROM student ORDER BY studentID  limit ?,?";

        try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql)) {

            ps.setInt(1, start);

            ps.setInt(2, count);

            ResultSet rs = ps.executeQuery();

            while (rs.next()) {

                Student student = new Student();

                int id = rs.getInt("id");

                int studentID = rs.getInt("studentID");

                String name = rs.getString("name");

                int age = rs.getInt("age");

                String sex = rs.getString("sex");

                Date birthday = rs.getDate("birthday");

                student.setId(id);

                student.setStudentID(studentID);

                student.setName(name);

                student.setAge(age);

                student.setSex(sex);

                student.setBirthday(birthday);

                students.add(student);

            }

            rs.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

        return students;

    }

}

（8）由于项目中设计表单 POST 方式的提交，所以我们先来编写好相关编码的过滤器，好支持中文的存取

在filter包 下编写 EncodingFilter 类：

package com.sun.filter;

import javax.servlet.*;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.xml.crypto.dsig.spec.XPathType;

import java.io.IOException;

public class EncodingFilter implements Filter {

    public void destroy() {

    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {

        HttpServletRequest request = (HttpServletRequest) req;

        HttpServletResponse response = (HttpServletResponse) resp;

        // 设置编码格式为 UTF-8

        request.setCharacterEncoding("UTF-8");

        chain.doFilter(request, response);

    }

    public void init(FilterConfig config) throws ServletException {

    }

}

（9）编写servlet对应查询功能，在servlet包下创建ListServlet：

package com.sun.servlet;

import com.sun.Utils.Page;

import com.sun.bean.Student;

import com.sun.dao.StudentDao;

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 java.io.IOException;

import java.util.List;

@WebServlet(name = "ListServlet", urlPatterns="/ListServlet")

public class ListServlet extends HttpServlet {

    private StudentDao studentDao = new StudentDao();

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

        // 获取分页参数

        int start = 0;

        int count = 5;

        try {

            start = Integer.parseInt(request.getParameter("page.start"));

            count = Integer.parseInt(request.getParameter("page.count"));

        } catch (Exception e) {

            e.printStackTrace();

        }

        Page page = new Page(start, count);

        List<Student> students = studentDao.list(page.getStart(), page.getCount());

        int total = studentDao.getTotal();

        page.setTotal(total);

        request.setAttribute("students", students);

        request.setAttribute("page", page);

        request.getRequestDispatcher("/listStudents.jsp").forward(request, response);

    }

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

        doPost(request,response);

    }

}

（10）前端页面jsp的设计

为了简化操作，引入了 JQuery 和 Bootstrap，相关js css文件在这里（zi2t ）。

在web文件夹下编写ListStudent.jsp

<%--

  Created by IntelliJ IDEA.

  User: sunshengwei-pc

  Date: 2020/3/10

  Time: 17:29

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>

<head>

    <%-- 引入JQ和Bootstrap --%>

    <script src="js/jquery-2.0.3.min.js"></script>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <script src="js/bootstrap.min.js"></script>

    <link href="css/style.css" rel="stylesheet">

    <title>学生列表</title>

    <script>

        $(function () {

            $("ul.pagination li.disabled a").click(function () {

                return false;

            });

        });

    </script>

</head>

<body>

<div class="listDIV">

    <table class="table table-striped table-bordered table-hover table-condensed">

        <caption>学生列表 - 共${page.total}人</caption>

        <thead>

        <tr class="success">

            <th>学号</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

            <th>出生日期</th>

        </tr>

        </thead>

        <tbody>

        <c:forEach items="${students}" var="s" varStatus="status">

            <tr>

                <td>${s.studentID}</td>

                <td>${s.name}</td>

                <td>${s.age}</td>

                <td>${s.sex}</td>

                <td>${s.birthday}</td>

            </tr>

        </c:forEach>

        </tbody>

    </table>

</div>

<nav class="pageDIV">

    <ul class="pagination">

        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>

            <a href="?page.start=0">

                <span>首页</span>

            </a>

        </li>

        <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>

            <a href="?page.start=${page.start-page.count}">

                <span>上一页</span>

            </a>

        </li>

        <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">

            <c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">

                <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>

                    <a

                            href="?page.start=${status.index*page.count}"

                            <c:if test="${status.index*page.count==page.start}">class="current"</c:if>

                    >${status.count}</a>

                </li>

            </c:if>

        </c:forEach>

        <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>

            <a href="?page.start=${page.start+page.count}">

                <span>下一页</span>

            </a>

        </li>

        <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>

            <a href="?page.start=${page.last}">

                <span>尾页</span>

            </a>

        </li>

    </ul>

</nav>

</body>

</html>


（11）启动Tomcat，在浏览器地址栏输入：http://localhost:8080/ListServlet

4、总结

（1）访问servlet时404：我用的是注解扫描servlet，刚开始是这样写的@WebServlet(name = “ListServlet”)，怎么也访问不到，加上 urlPatterns="/ListServlet"就可以访问到了。当然也可以不用注解的方式，但是要在web.xml中配置：

  <filter><!-- 过滤器配置-->

        <filter-name>EncodingFilter</filter-name>

        <filter-class>com.sun.filter.EncodingFilter</filter-class><!--全路径 从根包开始一直到类名-->

    </filter>

    <filter-mapping>

        <filter-name>EncodingFilter</filter-name>

        <url-pattern>/ *</url-pattern> <!--*即为过滤所有-->

    </filter-mapping>

    <servlet><!--servlet类路径配置-->

        <servlet-name>ListServlet</servlet-name>

        <servlet-class>com.sun.servlet.ListServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>ListServlet</servlet-name>

        <url-pattern>/ListServlet</url-pattern>

    </servlet-mapping>

    <welcome-file-list><!--默认首页地址-->

        <welcome-file>index.jsp</welcome-file>

    </welcome-file-list>

（2）可以访问servlet后，又访问不到jsp文件。原来我犯了一个低级错误，也是刚学web项目时容易犯的错误：不应该把页面写在WEB-INF文件夹下，因为在这个文件夹下不能直接访问。

（3）连接数据库时报错，时区的问题在url中加上&serverTimezone=UTC就可以了。

想要项目全部源码的童鞋们可以发邮件给我啦,有什么问题欢迎在评论区留言。

Email：15638186609@163.com

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,793评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,567评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,342评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,825评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,814评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,680评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,033评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,687评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,175评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,419评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,020评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2赞 343

推荐阅读更多精彩内容

  • Java面试
    一. Java基础部分.................................................
    wy_sure阅读 3,789评论 0赞 11
  • JAVA面试题集收藏大放送
    小编费力收集：给你想要的面试集合 1.C++或Java中的异常处理机制的简单原理和应用。 当JAVA程序违反了JA...
    八爷君阅读 4,573评论 1赞 114
  • jsp总结(经典)
    JSP总结（经典） day1 JSP 定义： 1)Java Server Page, Java EE 组件，本...
    java日记阅读 3,409评论 0赞 13
  • JAVA笔试题之算法与编程
    Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言。Java 技术具有卓越的通用性、高效性、平台移植性和...
    Java小辰阅读 968评论 0赞 5
  • 五大常用算法二(贪心,分治)
    贪心算法 贪心算法总是作出在当前看来最好的选择。也就是说贪心算法并不从整体最优考虑，它所作出的选择只是在某种意义上...
    fredal阅读 9,202评论 3赞 52