使用前,后端写 具有分页效果的数据展示
目录
前言
效果展示图如下
思路
服务器从前端界面获得什么?
前端界面从后端服务器应该拿到什么?
使用的技术
代码
前端代码
list.jsp中该功能的实现代码
后端代码
对应的servlet 代码
实体类代码
service的实现层 实现该功能的代码
dao层 实现层 实现 从数据库分页查询代码
前言
本篇博客的核心:
- 理解如何实现具有分页的思路
- 理解对后端传递给前端的数据使用封装思想,封装成一个对象
效果展示图如下

思路
服务器从前端界面获得什么?
我们知道,当我们点击哪一页,就会给我们展示哪一页的数据
因此 我们需要获得 当前页码
- 当前页码
前端界面从后端服务器应该拿到什么?
从图中可以看到,总记录数,总页码,当前页码,页容量,展示给前端的数据
总记录数
- 需要从数据库中查一共多少条数据
总页码
- 总页码=总记录数%页容量==0 ?(总记录数/页容量 ):(总记录数/页容量+1 )
当前页码和页容量
- 当前页码,从前端直接获得
- 页容量自定义【本项目中,我在后端 代码固定 页容量为 2】
- 在这里我使用 封装思想 把这些整合成一个 Page类型的对象
展示给前端的数据
- 需要在数据库中使用分页查询
在分页查询中,获得第一个参数 值公式:(当前页码-1)*页容量
发现,在数据库中使用分页查询,表示首页的第一个参数是 0。表示第一条数据是从0开始的之后都是跳过多少条数据获得的。
如:假设 页容量是5,并且从 0 开始计数
第二页首行数据序号是5 表示跳过前5个数据到达该页
第三页首行数据序号是10表示跳过前10个数据到达该页
依此类推
使用的技术
c标签和el表达式
如果不清楚的可以看我的:
C标签和 EL表达式的在前端界面的应用-CSDN博客
代码
前端代码
list.jsp中该功能的实现代码
//list.jsp 对应的servlet是 ListByPageServlet<table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox" ></th><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><c:forEach items="${page.records}" var="user" varStatus="s"><tr><td><input type="checkbox" name="id" value="${user.id}"></td><td>${s.index}</td><td>${user.name}</td><td>${user.gender}</td><td>${user.age}</td><td>${user.address}</td><td>${user.qq}</td><td>${user.email}</td><td><a class="btn btn-default btn-sm" href="/users/checkUpdate?pageIndex=${page.pageIndex}&id=${user.id}">修改</a> <a class="btn btn-default btn-sm" href="/users/delete?pageIndex=${page.pageIndex}&id=${user.id}">删除</a></td></tr></c:forEach></table><div><nav aria-label="Page navigation"><ul class="pagination"><c:if test="${page.pageIndex>1}"><li><a href="/users/listByPage?pageIndex=${page.pageIndex-1}" aria-label="Previous"><span aria-hidden="true">«</span></a></li></c:if><c:forEach var="i" begin="1" end="${page.totalPage}" step="1"><c:choose><c:when test="${i==page.pageIndex}"><li class="active"><span>${i}</span></li></c:when><c:otherwise><li ><a href="/users/listByPage?pageIndex=${i}">${i}</a></li></c:otherwise></c:choose></c:forEach><c:if test="${page.pageIndex<page.totalPage}"><li><a href="/users/listByPage?pageIndex=${page.pageIndex+1}" aria-label="Next"><span aria-hidden="true">»</span></a></li></c:if><span style="font-size: 25px;margin-left: 5px;">共${page.count}条记录,共${page.totalPage}页</span></ul></nav></div>
后端代码
对应的servlet 代码
package fs.web;
import fs.entity.Page;
import fs.entity.Userinfo;
import fs.service.UserinfoService;
import fs.service.impl.UserinfoServiceImpl;
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;
@WebServlet("/users/listByPage")
public class ListByPageServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//从数据库中查询用户 信息//设置请求编码req.setCharacterEncoding("UTF-8");//获取请求参数int pageIndex = Integer.parseInt(req.getParameter("pageIndex"));int pageSize = 2;UserinfoService userinfoService = new UserinfoServiceImpl();Page<Userinfo> page = userinfoService.qurryByPage(pageIndex,pageSize);//设置浏览器响应编码resp.setContentType("text/html;charset=UTF-8");
// // 将数据保存到request请求域中req.setAttribute("page",page);req.getRequestDispatcher("/users/list.jsp").forward(req,resp);}}
实体类代码
package fs.entity;import java.util.List;public class Page<T> {//记录(内容),总记录数,,总页码,当前页码,页容量private Long count;private Long totalPage;private Integer pageIndex;private Integer pageSize;private List<T> records;public Long getCount() {return count;}public void setCount(Long count) {this.count = count;}public Long getTotalPage() {return count%pageSize==0?count/pageSize:(count/pageSize+1);}public Integer getPageIndex() {return pageIndex;}public void setPageIndex(Integer pageIndex) {this.pageIndex = pageIndex;}public Integer getPageSize() {return pageSize;}public void setPageSize(Integer pageSize) {this.pageSize = pageSize;}public List<T> getRecords() {return records;}public void setRecords(List<T> records) {this.records = records;}
}
service的实现层 实现该功能的代码
@Overridepublic Page<Userinfo> qurryByPage(int pageIndex, int pageSize) {UserinfoDao userinfoDao = new UserinfoDaoImpl();//查询总记录数Long count = userinfoDao.qurryCount();//查询当前页数据List<Userinfo> records = userinfoDao.qurryByPage(pageIndex, pageSize);Page<Userinfo> page = new Page<>();page.setCount(count);page.setPageIndex(pageIndex);page.setPageSize(pageSize);page.setRecords(records);return page;}
dao层 实现层 实现 从数据库分页查询代码
@Overridepublic List<Userinfo> qurryByPage(int pageIndex, int pageSize) {QueryRunner qr=new QueryRunner();Connection conn=null;String sql="select * from tb_userinfo limit ?,?";try {conn=getConnection();return qr.query(conn,sql,new BeanListHandler<Userinfo>(Userinfo.class),(pageIndex-1)*pageSize,pageSize);} catch (Exception e) {throw new RuntimeException(e);}finally {close(conn);}}
相关文章:
使用前,后端写 具有分页效果的数据展示
目录 前言 效果展示图如下 思路 服务器从前端界面获得什么? 前端界面从后端服务器应该拿到什么? 使用的技术 代码 前端代码 list.jsp中该功能的实现代码 后端代码 对应的servlet 代码 实体类代码 service的实现层 实现该功能的代码 dao层 实…...
ubuntu防火墙管理(六)——ebtables
ebtables 是一个用于管理以太网帧的防火墙工具,主要用于在数据链路层(第 2 层)过滤和控制网络流量。它类似于 iptables,但专注于以太网流量。以下是 ebtables 的基本使用方法和示例。 基本命令 ebtables 的基本命令格式如下&…...
Oracle开发和应用——常用对象(表)
6.5. 常用对象 6.5.1. 表 1)概念 表(Table),是关系库中最基本、也是最常用的数据库对象,用户的数据存储在表中,用户使用数据时可以随时通过表进行检索或操作。也可以说,表是关系库最基本、最根本的特征。我们可以通过查询系统视图来获取表的相关信息。 D:\> sqlp…...
嵌入式蓝桥杯学习8 模拟电压测量
这里本来是要讲输入捕获的知识点的,但是由于学校校赛时间比较紧,校赛没考到输入捕获,所以先写ADC模拟电压测量的知识点。这里将的是单通道阻塞式采样。 Cubemx配置 点开cubemx。 1.将PB15配置为ADC2-IN15。 2.在Analog中点击ADC2ÿ…...
FFmpeg源码中,计算CRC校验的实现
一、CRC简介 CRC(Cyclic Redundancy Check),即循环冗余校验,是一种根据网络数据包或电脑文件等数据产生简短固定位数校核码的快速算法,主要用来检测或校核数据传输或者保存后可能出现的错误。CRC利用除法及余数的原理,实现错误侦…...
Android笔记【14】结合LaunchedEffect实现计时器功能。
一、问题 cy老师第五次作业 结合LaunchedEffect实现计时器功能。要求:动态计时,每秒修改时间,计时的时间格式为“00:00:00”(小时:分钟:秒)提交源代码的文本和运行截图…...
kubectl 和 kubeconfig 基本原理
云原生学习路线导航页(持续更新中) kubernetes学习系列 快捷连接 Kubernetes架构原则和对象设计(一) 本文介绍kubectl的几个常用命令,kubconfig文件基本属性,并开启kubectl debug日志分析其背后基本原理 …...
LVGL笔录----动画
最近在搞LVGL动画内容,发现网上能参考的资源太少了。现将自己学习到的内容做个笔录,仅供自己记录,若对你有帮助,那么最好不过,共勉! 首先,我是在CodeBlock上仿真 #define PI 3.14159265359stat…...
【LeetCode热题100】BFS解决FloodFill算法
这篇博客主要记录了使用BFS解决FloodFill算法的几道题目,包括图像渲染、岛屿数量、岛屿的最大面积、被包围的区域。 class Solution {using PII pair<int, int>; public:vector<vector<int>> floodFill(vector<vector<int>>& im…...
设计模式の软件设计原则
文章目录 前言一、聚合&组合&继承&依赖1.1、继承1.2、组合1.3、聚合1.4、依赖 二、单一职责原则2.1、单一职责原则反面案例2.2、单一职责原则反面案例的改进 三、接口隔离原则3.1、接口隔离原则反面案例3.2、接口隔离原则反面案例的改进 四、依赖倒转原则4.1、依赖…...
Linux centos7 下载MySQL5.7仓库的命令
wget 是一个非常强大的命令行工具,用于从网络上下载文件。它是 Linux 和其他 Unix-like 系统中常用的工具之一。wget 命令的各个参数有着不同的含义,下面是您提供的命令 wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.onarch.r…...
CSS flex布局踩坑小记:flex-basis属性之0px与0%的差异 (赞)
原文出处:CSS flex布局踩坑小记:flex-basis属性之0px与0%的差异_flex-basis 0%-CSDN博客 讲述flex容器被撑大的原因(误用:flex-basis: 0%;)及解决方法(用:flex-basis: 0px;)...
华硕主板不能开启
正常流程: [主機板]BIOS如何設置主機板整合圖形(內顯)和獨立顯示卡同時顯示輸出 | 官方支援 | ASUS 台灣 如果开启了CSR兼容性模式,在BIOS里面,就必须关掉,才能支持多显示器,如下图显示的标识才会出现。...
室联人形机器人:家政服务任务结构化、技术要点、深入应用FPGA的控制系统框架设计(整合版)
目录: 0 引言 1 人形机器人对室内家政服务任务的结构化 1.1人形机器人在室内家政服务中的比较优势 1.1.1 人形机器人拟人性的7个维度 1.1.2 拟人性在室内家政服务工作中的比较优势 1.1.3 潜在的重要用户:宠物爱好者 1.2 居所室内环境的特征与结构…...
OpenAI 发布 o1 LLM,推出 ChatGPT Pro
OpenAI正式发布了专为复杂推理而构建的 OpenAI o1大型语言模型(LLM)。 该公司还推出了 ChatGPT Pro,这是一项每月 200 美元的套餐,包括无限制访问 OpenAI o1、o1-mini、GPT-4o 和高级语音对话。 OpenAI o1 从 9 月 12 日起在 ChatGPT 中推出预览版&…...
【MySQL】存储过程和触发器
MySQL存储过程和触发器 一、存储过程的介绍二、存储过程的相关操作2.1创建存储过程2.2查看存储过程2.4调用存储过程2.5删除存储过程 三、变量3.1系统变量3.2用户定义变量3.3局部变量 四、存储过程中的关键字4.1 if4.2参数4.3case4.4 while4.5repeat4.6 loop4.7游标4.8条件处理程…...
QT4和 QT5 槽函数连接的区别
正常连接方式 //QT4官方用列QLabel *label new QLabel;QScrollBar *scrollBar new QScrollBar;QObject::connect(scrollBar, SIGNAL(valueChanged(int)),label, SLOT(setNum(int)));//QT5官方用列QLabel *label new QLabel;QLineEdit *lineEdit new QLineEdit;QObject::c…...
使用 PyTorch 和 Horovod 来编写一个简单的分布式训练 demo
使用 PyTorch 和 Horovod 来编写一个简单的分布式训练 demo,可以帮助你理解如何在多GPU或多节点环境中高效地训练深度学习模型。Horovod 是 Uber 开发的一个用于分布式训练的框架,它支持 TensorFlow、Keras、PyTorch 等多个机器学习库。下面是一个基于 P…...
SQL复杂查询功能介绍及示例
文章目录 1. 多表连接(JOIN)功能介绍应用场景示例查询及初始表格customers 表(未查询前)orders 表(未查询前)INNER JOIN 示例LEFT JOIN 示例 2. 子查询(Subquery)功能介绍应用场景示…...
shell基础用法
shell基础知识 shell中的多行注释 :<<EOF read echo $REPLY # read不指定变量,则默认写入$REPLY EOF # :<<EOF ...EOF 多行注释,EOF可以替换为!# 等文件目录和执行目录 echo $0$0 # ./demo.sh echo $0的realpath$(realpath…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
