书城项目—图书分页

news2024/12/26 11:34:32

图书分页

1. 分页模块的分析

在这里插入图片描述

2. 分页模型Page的抽取

public class Page<T> {
public static final Integer PAGE_SIZE = 4;
// 当前页码
private Integer pageNo;
// 总页码
private Integer pageTotal;
// 当前页显示数量
private Integer pageSize = PAGE_SIZE;
// 总记录数
private Integer pageTotalCount;
// 当前页数据
private List<T> items;

3. 分页的初步实现

bookDao代码

@Override
//获取总记录数
public Integer queryForPageTotalCount() {
String sql = "select count(*) from t_book";
Number count = (Number) queryForSingleValue(sql);
return count.intValue();
}
//获取
@Override
public List<Book> queryForPageItems(int begin, int pageSize) {
String sql = "select `id` , `name` , `author` , `price` , `sales` , `stock` , `img_path` imgPath
from t_book limit ?,?";
return queryForList(Book.class,sql,begin,pageSize);
}

bookService代码

@Override
public Page<Book> page(int pageNo, int pageSize) {
Page<Book> page = new Page<Book>();
// 设置当前页码
page.setPageNo(pageNo);
// 设置每页显示的数量
page.setPageSize(pageSize);
// 求总记录数
Integer pageTotalCount = bookDao.queryForPageTotalCount();
// 设置总记录
page.setPageTotalCount(pageTotalCount);
// 求总页码
Integer pageTotal = pageTotalCount / pageSize;
if (pageTotalCount % pageSize > 0) {
pageTotal+=1;
}
// 设置总页码
page.setPageTotal(pageTotal);
// 求当前页数据的开始索引
int begin = (page.getPageNo() - 1) * pageSize;
// 求当前页数据
List<Book> items = bookDao.queryForPageItems(begin,pageSize);
// 设置当前页数据
page.setItems(items);
return page;
}

bookServlet代码

protected void page(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
//1 获取请求的参数 pageNo 和 pageSize
int pageNo = WebUtils.parseInt(req.getParameter("pageNo"), 1);
int pageSize = WebUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
//2 调用 BookService.page(pageNo,pageSize):Page 对象
Page<Book> page = bookService.page(pageNo,pageSize);
//3 保存 Page 对象到 Request 域中
req.setAttribute("page",page);
//4 请求转发到 pages/manager/book_manager.jsp 页面
req.getRequestDispatcher("/pages/manager/book_manager.jsp").forward(req,resp);

WebUtils

    /**
     * 把Map中的值注入到对应的JavaBean属性中。
     * @param value
     * @param bean
     */
    public static <T> T copyParamToBean( Map value , T bean ){
        try {
            System.out.println("注入之前:" + bean);
            /**
             * 把所有请求的参数都注入到user对象中
             */
            BeanUtils.populate(bean, value);
            System.out.println("注入之后:" + bean);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return bean;
    }

    /**
     * 将字符串转换成为int类型的数据
     * @param strInt
     * @param defaultValue
     * @return
     */
    public static int parseInt(String strInt,int defaultValue) {
        if (strInt != null) {
            try {
                return Integer.parseInt(strInt);
            } catch (Exception e) {
                e.printStackTrace();
            }

        }
        return defaultValue;
    }

manager_menu.jsp 中【图书管理】请求地址的修改
~~~
book_manager.jsp 修改:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理</title>
<%-- 静态包含 base 标签、css 样式、jQuery 文件 --%>
<%@ include file="/pages/common/head.jsp"%>
<script type="text/javascript">
$(function () {
// 给删除的 a 标签绑定单击事件,用于删除的确认提示操作
$("a.deleteClass").click(function () {
// 在事件的 function 函数中,有一个 this 对象。这个 this 对象,是当前正在响应事件的 dom 对象。
/**
* confirm 是确认提示框函数
* 参数是它的提示内容
* 它有两个按钮,一个确认,一个是取消。
* 返回 true 表示点击了,确认,返回 false 表示点击取消。
*/
return confirm("你确定要删除【" + $(this).parent().parent().find("td:first").text() + "】?");
// return false// 阻止元素的默认行为===不提交请求
});
});
</script>
</head>
<body>
<div id="header">
<img class="logo_img" alt="" src="../../static/img/logo.gif" >
<span class="wel_word">图书管理系统</span>
<%-- 静态包含 manager 管理模块的菜单 --%>
<%@include file="/pages/common/manager_menu.jsp"%>
</div>
<div id="main">
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>作者</td>
<td>销量</td>
<td>库存</td>
<td colspan="2">操作</td>
</tr>
<c:forEach items="${requestScope.page.items}" var="book">
<tr>
<td>${book.name}</td>
<td>${book.price}</td>
<td>${book.author}</td>
<td>${book.sales}</td>
<td>${book.stock}</td>
<td><a href="manager/bookServlet?action=getBook&id=${book.id}">修改</a></td>
<td><a class="deleteClass" href="manager/bookServlet?action=delete&id=${book.id}">删
除</a></td>
</tr>
</c:forEach>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="pages/manager/book_edit.jsp">添加图书</a></td>
</tr>
</table>
<div id="page_nav">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">3</a>
【${ requestScope.page.pageNo }】
<a href="#">5</a>
<a href="#">下一页</a>
<a href="#">末页</a>
共${ requestScope.page.pageTotal }页,${ requestScope.page.pageTotalCount }条记录
到第<input value="4" name="pn" id="pn_input"/><input type="button" value="确定">
</div>
</div>
<%--静态包含页脚内容--%>
<%@include file="/pages/common/footer.jsp"%>
</body>
</html>

4. 首页、上一页、下一页、末页实现

<div id="page_nav">
<%--大于首页,才显示--%>
<c:if test="${requestScope.page.pageNo > 1}">
<a href="manager/bookServlet?action=page&pageNo=1">首页</a>
<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一页</a>
</c:if>
<a href="#">3</a>
【${ requestScope.page.pageNo }】
<a href="#">5</a>
<%-- 如果已经 是最后一页,则不显示下一页,末页 --%>
<c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下一页</a>
<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageTotal}">末页</a>
</c:if>
共${ requestScope.page.pageTotal }页,${ requestScope.page.pageTotalCount }条记录
到第<input value="4" name="pn" id="pn_input"/><input type="button" value="确定">
</div>

5. 分页模块中跳转到指定页数功能实现

<div id="page_nav">
<%--大于首页,才显示--%>
<c:if test="${requestScope.page.pageNo > 1}">
<a href="manager/bookServlet?action=page&pageNo=1">首页</a>
<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一页</a>
</c:if>
<a href="#">3</a>
【${ requestScope.page.pageNo }】
<a href="#">5</a>
<%-- 如果已经 是最后一页,则不显示下一页,末页 --%>
<c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下一页</a>
<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageTotal}">末页</a>
</c:if>
共${ requestScope.page.pageTotal }页,${ requestScope.page.pageTotalCount }条记录
到第<input value="${param.pageNo}" name="pn" id="pn_input"/><input id="searchPageBtn" type="button" value="确定">
<script type="text/javascript">
$(function () {
// 跳到指定的页码
$("#searchPageBtn").click(function () {
var pageNo = $("#pn_input").val();
<%--var pageTotal = ${requestScope.page.pageTotal};--%>
<%--alert(pageTotal);--%>
// javaScript 语言中提供了一个 location 地址栏对象
// 它有一个属性叫 href.它可以获取浏览器地址栏中的地址
// href 属性可读,可写
location.href = "${pageScope.basePath}manager/bookServlet?action=page&pageNo=" +
pageNo;
});
});
</script>
</div>

Page 对象中的修改:

public void setPageNo(Integer pageNo) {
/* 数据边界的有效检查 */
if (pageNo < 1) {
pageNo = 1;
}
if (pageNo > pageTotal) {
pageNo = pageTotal;
}
this.pageNo = pageNo;
}

BookService 中 page 方法的修改:、

@Override
public Page<Book> page(int pageNo, int pageSize) {
Page<Book> page = new Page<Book>();
// 设置每页显示的数量
page.setPageSize(pageSize);
// 求总记录数
Integer pageTotalCount = bookDao.queryForPageTotalCount();
// 设置总记录数
page.setPageTotalCount(pageTotalCount);
// 求总页码
Integer pageTotal = pageTotalCount / pageSize;
if (pageTotalCount % pageSize > 0) {
pageTotal+=1;
}
// 设置总页码
page.setPageTotal(pageTotal);
// 设置当前页码
page.setPageNo(pageNo);
// 求当前页数据的开始索引
int begin = (page.getPageNo() - 1) * pageSize;
// 求当前页数据
List<Book> items = bookDao.queryForPageItems(begin,pageSize);
// 设置当前页数据
page.setItems(items);
return page;
}

6.分页模块中,页码 1,2,【3】,4,5 的显示,要显示 5 个页码,并且页码可以点击跳转。

在这里插入图片描述
在这里插入图片描述

<%--页码输出的开始--%>
<c:choose>
<%--情况 1:如果总页码小于等于 5 的情况,页码的范围是:1-总页码--%>
<c:when test="${ requestScope.page.pageTotal <= 5 }">
<c:set var="begin" value="1"/>
<c:set var="end" value="${requestScope.page.pageTotal}"/>
</c:when>
<%--情况 2:总页码大于 5 的情况--%>
<c:when test="${requestScope.page.pageTotal > 5}">
<c:choose>
<%--小情况 1:当前页码为前面 3 个:123 的情况,页码范围是:1-5.--%>
<c:when test="${requestScope.page.pageNo <= 3}">
<c:set var="begin" value="1"/>
<c:set var="end" value="5"/>
</c:when>
<%--小情况 2:当前页码为最后 3 个,8910,页码范围是:总页码减 4 - 总页码--%>
<c:when test="${requestScope.page.pageNo > requestScope.page.pageTotal-3}">
<c:set var="begin" value="${requestScope.page.pageTotal-4}"/>
<c:set var="end" value="${requestScope.page.pageTotal}"/>
</c:when>
<%--小情况 34567,页码范围是:当前页码减 2 - 当前页码加 2--%>
<c:otherwise>
<c:set var="begin" value="${requestScope.page.pageNo-2}"/>
<c:set var="end" value="${requestScope.page.pageNo+2}"/>
</c:otherwise>
</c:choose>
</c:when>
</c:choose>
<c:forEach begin="${begin}" end="${end}" var="i">
<c:if test="${i == requestScope.page.pageNo}">
【${i}</c:if>
<c:if test="${i != requestScope.page.pageNo}">
<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
</c:if>
</c:forEach>
<%--页码输出的结束--%>

7. 分页条的抽取

7.1 抽取分页条中请求地址为Url变量

7.2 在page对象中添加URL属性

/**
* Page 是分页的模型对象
* @param <T> 是具体的模块的 javaBean 类
*/
public class Page<T> {
public static final Integer PAGE_SIZE = 4;
// 当前页码
private Integer pageNo;
// 总页码
private Integer
// 当前页显示数量
private Integer pageSize = PAGE_SIZE;
// 总记录数
private Integer pageTotalCount;
// 当前页数据
private List<T> items;
// 分页条的请求地址
private String url;

7.2 在Servlet程序的page分页方法中设置url的分页请求地址

在这里插入图片描述

7.3 修改分页条中请求地址为 url 变量输出,并抽取一个单独的 jsp 页面

<%--分页条的开始--%>
<div id="page_nav">
<%--大于首页,才显示--%>
<c:if test="${requestScope.page.pageNo > 1}">
<a href="${ requestScope.page.url }&pageNo=1">首页</a>
<a href="${ requestScope.page.url }&pageNo=${requestScope.page.pageNo-1}">上一页</a>
</c:if>
<%--页码输出的开始--%>
<c:choose>
<%--情况 1:如果总页码小于等于 5 的情况,页码的范围是:1-总页码--%>
<c:when test="${ requestScope.page.pageTotal <= 5 }">
<c:set var="begin" value="1"/>
<c:set var="end" value="${requestScope.page.pageTotal}"/>
</c:when>
<%--情况 2:总页码大于 5 的情况--%>
<c:when test="${requestScope.page.pageTotal > 5}">
<c:choose>
<%--小情况 1:当前页码为前面 3 个:123 的情况,页码范围是:1-5.--%>
<c:when test="${requestScope.page.pageNo <= 3}">
<c:set var="begin" value="1"/>
<c:set var="end" value="5"/>
</c:when>
<%--小情况 2:当前页码为最后 3 个,8910,页码范围是:总页码减 4 - 总页码--%>
<c:when test="${requestScope.page.pageNo > requestScope.page.pageTotal-3}">
<c:set var="begin" value="${requestScope.page.pageTotal-4}"/>
<c:set var="end" value="${requestScope.page.pageTotal}"/>
</c:when>
<%--小情况 34567,页码范围是:当前页码减 2 - 当前页码加 2--%>
<c:otherwise>
<c:set var="begin" value="${requestScope.page.pageNo-2}"/>
<c:set var="end" value="${requestScope.page.pageNo+2}"/>
</c:otherwise>
</c:choose>
</c:when>
</c:choose>
<c:forEach begin="${begin}" end="${end}" var="i">
<c:if test="${i == requestScope.page.pageNo}">
【${i}</c:if>
<c:if test="${i != requestScope.page.pageNo}">
<a href="${ requestScope.page.url }&pageNo=${i}">${i}</a>
</c:if>
</c:forEach>
<%--页码输出的结束--%>
<%-- 如果已经 是最后一页,则不显示下一页,末页 --%>
<c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
<a href="${ requestScope.page.url }&pageNo=${requestScope.page.pageNo+1}">下一页</a>
<a href="${ requestScope.page.url }&pageNo=${requestScope.page.pageTotal}">末页</a>
</c:if>
共${ requestScope.page.pageTotal }页,${ requestScope.page.pageTotalCount }条记录
到第<input value="${param.pageNo}" name="pn" id="pn_input"/><input id="searchPageBtn" type="button" value="确定">
<script type="text/javascript">
$(function () {
// 跳到指定的页码
$("#searchPageBtn").click(function () {
var pageNo = $("#pn_input").val();
<%--var pageTotal = ${requestScope.page.pageTotal};--%>
<%--alert(pageTotal);--%>
// javaScript 语言中提供了一个 location 地址栏对象
// 它有一个属性叫 href.它可以获取浏览器地址栏中的地址
// href 属性可读,可写
location.href = "${pageScope.basePath}${ requestScope.page.url }&pageNo=" + pageNo;
});
});
</script>
</div>
<%--分页条的结束--%>

  1. 首页价格搜索
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/380511.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数字映射:数字孪生技术的应用场景及作用

对于许多行业来说&#xff0c;数字孪生技术是未来。数字孪生定义数字孪生不仅仅是某物的副本或克隆&#xff0c;它是对象或系统的动态实时表示。数字孪生是一种虚拟模型&#xff0c;旨在准确反映物理对象。是物理对象、流程、服务或环境的数字表示&#xff0c;其行为和外观与现…

SCI 写作-Latex中算法排版

目录: 一、核心内容二、五个实例三、缩进控制一、核心内容 Latex 写作SCI中,经过会遇到算法的排版,以下给出5个实例。需要的宏包: \usepackage{algorithm} \usepackage{algorithmic} 二、五个实例 多角度介绍 algorithmic,algorithm 在算法排版中的使用。 (1)例1 \…

【Java基础】Java Lambda表达式详解

Lambda 表达式&#xff0c;即函数式编程是 JDK8 的一个新特性&#xff0c;也被称为闭包&#xff0c;Lambda表达式允许把函数作为一个方法的参数&#xff0c;即行为参数化&#xff0c;函数作为参数传递进方法中。Lambda表达式可以取代大部分的匿名内部类&#xff0c;写出更优雅的…

前端开发规范,你真的了解吗?一起来学习一下前端开发规范,让你的代码高级起来!

代码规范 1 编码风格规范 1.1 使用ES6风格编码源码 定义变量使用let ,定义常量使用const 使用export &#xff0c;import 模块化 1.2 组件 props 原子化 提供默认值 使用 type 属性校验类型 使用 props 之前先检查该 prop 是否存在 1.3 避免 this.$parent 1.4 谨慎使用 …

文献阅读(46)——MPViT

文献阅读&#xff08;46&#xff09;——MPViT 文章目录文献阅读&#xff08;46&#xff09;——MPViTMPViT先验知识/知识拓展文章结构文章结果1. ImageNet 分类2. 物体检测和实例分割3. 语义分割方法1. MPViT architecture2. MS-Patch Embed Block3. MP-Transformer Block ![在…

【超级超级无敌好用的三个实用网站,用完就走,尽显渣男本色】

今天我来给大家分享超级超级无敌好用的三个实用网站&#xff0c;用完就走&#xff0c;尽显渣男本色&#xff0c;如果你觉得有帮助&#xff0c;点了赞吧&#xff0c;创作不易&#xff0c;关注再走&#xff0c;后续更精彩。 一. tinywow 首先我们推荐的是国外一款在线实用网站工…

面试题CSS篇(一)

目录 一、flex布局 1、基本概念 2、容器属性 &#xff08;1&#xff09;flex-direction 决定主轴的方向&#xff08;即项目的排列方向&#xff09; &#xff08;2&#xff09; flex-wrap &#xff08;3&#xff09;flex-flow &#xff08;4&#xff09;justify-content…

【ECNU】3633. 双人旋转赛车(C++)

目录 题目 输入格式 输出格式 样例 提示 思路 代码 题目 单点时限: 2.0 sec 内存限制: 1024 MB oxx 和 Xiejiadong 在玩一个双人旋转赛车的小游戏。 他们将进行一些比赛。每局比赛必须按顺序进行&#xff0c;胜者会得到该局对应的分数 xi。 由于 oxx 技艺不精&#…

PMP®考试抽中审查提供的材料

PMP审查流程&#xff1a;属于第一类的申请者&#xff08;学士学位或同等学位及以上&#xff09;1&#xff0e; 核实学士学位或同等学位2&#xff0e; 核实项目管理经验3&#xff0e; 核实35小时的项目管理教育属于第二类的申请者&#xff08;高中、大专或同等学历&#xff09;1…

解决httprunner3.x上$符号无法当成普通符号用的方法

前言 由于要测试的api中会涉及$符号的传递, 要求其放在参数中当一个普通符号使用, 但由于httprunner框架处理逻辑, 会将如$coe当成一个变量, 从而报错找不到该变量的值 现象 接口某参数为: coeConfig$coal$08d99cca03a84d1d9e9a49b4534bb598运行时框架会抛出异常: 分析 研读框…

iphone系统崩溃数据能恢复吗?教你三招方法

最近有些苹果用户反应自己手机的屏幕无法滑动&#xff0c;桌面上APP也无法点开&#xff0c;想要关机重启下试试&#xff0c;可是&#xff0c;连关机都关不了&#xff0c;甚至连Siri都罢工了。苹果手机系统崩溃&#xff0c;出现黑屏、白屏、无限重启之类的故障&#xff0c;导致手…

rtthread 线程

创建动态线程最简单代码 #include <rtthread.h>//包含头文件static rt_thread_t thread1 RT_NULL; //创建线程控制块指针&#xff0c;指向空static void thread1_entry(void *parameter)//线程入口&#xff08;干什么&#xff09; {rt_kprintf("do something"…

ChatGPT 爆火,社交应用如何 Get 新技能

风浪越大&#xff0c;鱼越贵。关注【融云全球互联网通信云】了解更多 现在&#xff0c;最大的浪无疑属于 ChatGPT&#xff0c;一款以对话方式进行交互的语言模型。 通过创新业务打下江山的商业传奇们&#xff0c;都怕跟丢了这波浪潮而成为“上一代人”。所以&#xff0c;我们…

[文件操作] File 类的用法和 InputStream, OutputStream 的用法

能吃是不是件幸福的事呢 文章目录前言1. 文件的相关定义2. 文件类型3. Java对文件系统的操作3.1 对文件的基础操作3.2 读文件3.3 写文件前言 从这章开始,我们就开始学文件操作相关的知识了~ 1. 文件的相关定义 1.文件的定义可以从狭义和广义两个方面解释. 狭义: 指硬盘上的文…

Redis学习笔记:缓存运用常见问题

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育 目录1、数据一致性的问题1.1、新增数据一致性的问题1.2、修改/删除一致性问题1.2.1、操作分析1.2.1、总结和再深入2、缓存穿透&#xff0c;缓存击穿和缓存雪崩2.1、缓存穿透&#xff08;查不到&#xff09;2.1.1、…

从功能到自动化,熬夜3天整理出这一份2000字学习指南~

学习自动化这个想法&#xff0c;其实自己在心里已经琢磨了很久&#xff0c;就是一直没付诸实践&#xff0c;觉得现在手工测试已经能满足当前的工作需要&#xff0c;不想浪费时间去学习新的东西&#xff0c;有点时间还不如刷刷视频、看看小说等。 第一次有学习Selenium的冲动是…

【Bio】碳水化合物 carbohydrate 和糖蛋白 glycoprotein

文章目录碳水化合物 carbohydrate单糖 monosaccharides戊糖 pentose己糖 hexose双糖 disaccharide寡糖 oligosaccharide 和多糖 polysaccharide糖蛋白 glycoproteinRef碳水化合物 carbohydrate 碳水化合物 (carbohydrate)&#xff0c;也是糖类&#xff0c;指的是一系列多羟基 …

pwnlab通关流程

pwnlab通关 关于文件包含&#xff0c;环境变量劫持的一个靶场 信息收集 靶机ip&#xff1a;192.168.112.133 开放端口 根据开放的端口信息决定从80web端口入手 目录信息 在images和upload路径存在目录遍历&#xff0c;config.php被渲染无法查看&#xff0c;upload.php需…

C++实现文本界面英语词典

C实现文本界面英语词典 C实现文本界面的英语词典&#xff0c;能在Dev-C运行。提供两种方案&#xff1a;一是简单仅查词功能&#xff1b;二是具有查词、添加、删除功能&#xff0c;具有选择菜单&#xff0c;值得一提的是&#xff0c;本程序对用户输入菜单选项序号做了检测&#…

Zabbix“专家坐诊”第183期问答汇总

问题一 Q&#xff1a;老师&#xff0c;请问一下zabbix采集的数据怎么过滤&#xff0c;获取数据是nottime20:30 notafter3&#xff0c;怎么过滤出netafter3 &#xff1f;谢谢。 A&#xff1a;过滤器设置如下图。 问题二 Q&#xff1a;大佬&#xff0c;请问一下被管节点部署了…