当前位置： 首页 > news >正文

项目实战：分页功能实战

news 2026/3/30 7:50:37

1、在index.html添加点击事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style/index.css"><script src="script/axios.min.js"></script><script src="script/index.js"></script><script src="script/common.js"></script>
</head>
<body><div id="div0"><div id="div_title"><p>欢迎使用水果库存系统</p><div style="float: right;border: 0px solid red;margin-right:8%;margin-bottom: 4px"><a href="add.html" style="text-decoration: none">添加新库存</a></div></div><div id="div_fruit_table"><table id="fruit_tbl"><tr><th class="w25">名称</th><th class="w25">单价</th><th class="w25">库存</th><th>操作</th></tr><!--<tr><td><a href='edit.html?fid=1'>苹果</a></td><td>5</td><td>100</td><td><img class="delImg" src="imgs/del.png" onclick='delFruit(1)'/></td></tr>--></table></div><div id="div_pagination"><input type="button" class="btn" onclick="page('first')" value="首页"/><input type="button" class="btn" onclick="page('pre')" value="上一页"/><input type="button" class="btn" onclick="page('next')" value="下一页"/><input type="button" class="btn" onclick="page('last')" value="尾页"/></div></div>
</body>
</html>

2、编写html.js

2.2、common.js

function $(key){if(key){if(key.startsWith("#")){key = key.substring(1)return document.getElementById(key)}else{let nodeList = document.getElementsByName(key)return Array.from(nodeList)}}
}
window.onload=function(){loadData();
}
let pageNo = 1;
let pageCount = 0;
function page(str) {if (str) {if (str == "first") {pageNo = 1;}else if (str == "pre") {pageNo = pageNo - 1;}else if (str == "next") {pageNo = pageNo + 1;}else if (str == "last") {pageNo = pageCount;}if (pageNo > pageCount) {pageNo=pageCount}if (pageNo <= 0) {pageNo=1}}loadData(pageNo)
}
loadData=function(pageNo=1){//pageNo这个参数有默认值，如果没有传值，则使用默认值 1axios({method: 'get',url: '/index',params: {pageNo: pageNo}}).then(response => {debuggerlet fruitList = response.data.data.listpageNo = response.data.data.pageNopageCount = response.data.data.pageCount// 此处使用的是axios，那么响应回来的数据自动就是json，// 不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)// let fruitArr = JSON.parse(fruitList)let fruitArr = fruitList;let fruitTbl = $("#fruit_tbl")//向表格中添加行之前，先删除原来的行let rows=fruitTbl.rowsfor (let i = rows.length - 1; i >= 1; i--) {fruitTbl.deleteRow(i);}for (let i = 0; i < fruitArr.length; i++) {let tr = fruitTbl.insertRow();let fnameTD = tr.insertCell();let priceTD = tr.insertCell();let fcountTD = tr.insertCell();let operTD = tr.insertCell();let fruit = fruitArr[i];//fnameTD.innerText = fruit.fnamefnameTD.innerHTML = '<a href="edit.html?fid=' + fruit.fid + '">' + fruit.fname + '</a>';priceTD.innerText = fruit.price;fcountTD.innerText = fruit.fcount;operTD.innerHTML = "<img class=\"delImg\" src=\"imgs/del.png\" onclick=\"delFruit(" + fruit.fid + ")\"/>";}});
}delFruit = function (fid) {if (window.confirm('是否确认删除？')) {axios({method: 'get',url: 'del',params:{fid: fid,}}).then(response=>{if (response.data.flag) {window.location.reload();}});}
};

 3、编写IndexServlet

package com.csdn.fruit.servlet;
import com.csdn.fruit.dao.FruitDao;
import com.csdn.fruit.dao.impl.FruitDaoImpl;
import com.csdn.fruit.dto.PageInfo;
import com.csdn.fruit.dto.Result;
import com.csdn.fruit.pojo.Fruit;
import com.csdn.fruit.util.ResponseUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/index")
public class IndexServlet extends HttpServlet {private FruitDao fruitDao = new FruitDaoImpl();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Integer pageNo = 1;String pageNoStr = req.getParameter("pageNo");if (pageNoStr != null && !"".equals(pageNoStr)) {pageNo = Integer.parseInt(pageNoStr);}List<Fruit> fruitList = fruitDao.getFruitList(pageNo, 5);//总记录条数Integer total = fruitDao.getRecordCount();//计算总页数//Integer pageSize = 5;//当前项目中，每页数据固定写死 5 条//Integer pageCount = (total + pageSize - 1) / pageSize;PageInfo<Fruit> pageInfo = new PageInfo<>(fruitList, pageNo, total);Result result = Result.OK(pageInfo);ResponseUtil.print(resp, result);}
}

相关文章：

项目实战：分页功能实战

1、在index.html添加点击事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><link rel"stylesheet" href"style/index.css"><script src"scr…...

编程日记 2023/11/5 2:05:22

AI人工智能大模型应用如何落地？

人工智能大模型是近年来人工智能领域的一项重要技术突破&#xff0c;其具备强大的计算能力和学习能力&#xff0c;能够处理大规模的数据和复杂的任务。 然而&#xff0c;要将人工智能大模型应用落地并实现实际价值&#xff0c;还需要克服一些挑战和问题。 首先&#xff0c;人…...

编程日记 2023/11/5 2:04:19

【优选算法系列】第一节.栈的简介（1047. 删除字符串中的所有相邻重复项和844. 比较含退格的字符串）

文章目录 前言一、删除字符串中的所有相邻重复项和 1.1 题目描述 1.2 题目解析 1.2.1 算法原理 1.2.2 代码编写二、比较含退格的字符串 2.1 题目描述 2.2 题目解析 2.2.1 算法原理 2.2.2 代码编写总结 前言 …...

编程日记 2023/11/5 2:03:18

PostgreSQL逻辑管理结构

1.数据库逻辑结构介绍 2.数据库基本操作 2.1 创建数据库 CREATE DATABASE name [ [ WITH ] [ OWNER [] user_name ] [ TEMPLATE [] template ] [ ENCODING [] encoding ] [ LC_COLLATE [] lc_collate ] [ LC_CTYPE [] lc_ctype ] [ TABLESPACE [] tablespace ] [ CONNECTION L…...

编程日记 2023/11/5 2:02:16

高匿IP有什么作用

在互联网的蓬勃发展中&#xff0c;IP地址作为网络通信的基础&#xff0c;一直扮演着举足轻重的角色。而在诸多IP地址中&#xff0c;高匿IP地址则是一种特殊类型&#xff0c;其作用和价值在某些特定场合下尤为突出。那么&#xff0c;高匿IP地址究竟有哪些用处呢&#xff1f; 首先…...

编程日记 2023/11/5 2:01:16

Ubuntu Linux 23.10安装manimgl

1. 简介&#xff1a;manimgl是使用Python语言开发数学动画的一个库。用来创建数学动画。版本有很多&#xff0c;今天介绍manimgl&#xff0c;他要依赖OpenGL库。 2. 打开Shell命令行&#xff0c;连接上互联网。先安装opengl。 Shell>>> sudo apt install l…...

编程日记 2023/11/5 2:00:13

modesim verilog仿真验证基本流程（新建工程方式）

文章目录 环境搭建一、在modelsim里创建一个新的工程二、新建verilog设计文件及仿真激励文件三、仿真结果本文演示如何使用modelsim新建工程进行功能仿真。 环境搭建 本文中采用的modelsim版本如下： modelsim altera 10.3d一、在modelsim里创建一个新的工程 打开modelsim软…...

编程日记 2023/11/5 1:59:11

SpringBoot+AOP+自定义注解，优雅实现日志记录

文章目录 前言准备阶段1、数据库日志表2、自定义注解编写3、AOP切面类编写4、业务层4.1、Service 层&#xff1a;4.2 Service 实现层&#xff1a; 5、测试 前言 首先我们看下传统记录日志的方式是什么样的&#xff1a; DeleteMapping("/deleteUserById/{userId}") …...

编程日记 2023/11/5 1:58:10

多式联运路径优化问题：基于拓扑排序的遗传算法染色体编码

一、什么是拓扑排序 在图论中&#xff0c;拓扑排序&#xff08;Topological Sorting&#xff09;是一个有向无环图&#xff08;DAG, Directed Acyclic Graph&#xff09;的所有顶点的线性序列。且该序列必须满足下面两个条件&#xff1a; 每个顶点出现且只出现一次。若存在一…...

编程日记 2023/11/5 1:53:03

Go 方法集合与选择receiver类型

Go 方法集合与选择receiver类型 文章目录 Go 方法集合与选择receiver类型一、receiver 参数类型对 Go 方法的影响二、选择 receiver 参数类型原则2.1 选择 receiver 参数类型的第一个原则2.2 选择 receiver 参数类型的第二个原则 三、方法集合&#xff08;Method Set&#xff0…...

编程日记 2023/11/5 1:52:02

Unity AudioClip和PCM音频数据的转化

1 PCM音频数据转化AudioClip 假设PCM音频当前是16Khz采样率&#xff0c;16bit数据 byte[] pcmBytesnew byte[10240];float[] floatClipData new float[audioBytes.Length/2];for (int i 0; i < audioBytes.Length; i2){ floatData[i / 2] (short)((audioBytes[i 1] <…...

编程日记 2023/11/5 1:51:01

linux配置vlan后网络不通

如果在Linux上配置了VLAN&#xff0c;但网络不通&#xff0c;这可能是由于多种原因导致的。以下是一些可能的原因和解决方法&#xff1a; 检查物理连接&#xff1a;首先&#xff0c;确保VLAN支持的物理网络连接正常。确保网络电缆连接正确&#xff0c;交换机端口配置正确&#…...

编程日记 2023/11/5 1:50:00

GORM：在Go中轻松管理数据库

GORM综合介绍 - Go对象关系映射库 在现代软件开发中&#xff0c;高效的数据库管理对于构建强大的应用程序至关重要。GORM是Go开发人员寻求与数据库进行交互的简化方式的宝贵工具。GORM是Go对象关系映射的缩写&#xff0c;它为Go的面向对象世界与数据库的关系世界之间提供了桥梁…...

编程日记 2023/11/5 1:46:55

Ubuntu18.04 下PCL的卸载与安装

目录 一、卸载有问题的PCL1.7 二、编译&&安装PCL1.8.1 2.1、安装PCL依赖 2.2、编译VTK 2.3、编译PCL源码 三、 总结 写这篇博客时&#xff0c;本文方法已经在笔记本Ubuntu和VM虚拟机成功安装PCL1.8.1&#xff0c;并且通过测试。　下文方法同样适用于ubuntu18.04。…...

编程日记 2023/11/5 1:44:52

SMTP邮件发送图片-如何在github中存储图片并访问

之前写了一篇文章 Go&#xff1a;实现SMTP邮件发送订阅功能&#xff08;包含163邮箱、163企业邮箱、谷歌gmail邮箱&#xff09;&#xff0c;实现了通过邮箱服务来发送邮件&#xff0c;但都是文字内容&#xff0c;要是想实现邮件发送图片&#xff0c;就需要将图片放到公网可访问…...

编程日记 2023/11/5 1:43:51

2023年软件系统架构师论文【回忆版】

2023年11月5日&#xff0c;全国计算机等级下半年考试&#xff0c;北京市软件架构师考试其中有个考点在首都经济贸易大学丰台校区&#xff09;&#xff0c;地址&#xff1a;北京市丰台区花乡张家路口121号&#xff08;北门入校&#xff09; 注意&#xff1a;机考的考试时间有所变…...

编程日记 2023/11/5 1:41:49

【使用python实现文件视频格式的转换】

1.视频格式转换有哪些常用方法&#xff1f; 视频格式转换的常用方法有以下几种&#xff1a; 使用专业的视频转换软件&#xff1a;这些软件可以支持多种视频格式之间的转换&#xff0c;如Adobe Premiere Pro、Final Cut Pro等。使用在线视频转换工具&#xff1a;有许多在线视频…...

编程日记 2023/11/5 1:39:48

新媒体运营的营销方案

一、目标客户群体 新媒体运营是通过社交媒体、短视频、直播等方式将信息快速传播出去&#xff0c;因此&#xff0c;适合的目标客户群体应该是年轻人群体&#xff0c;包括大学生、职场青年、年轻家庭等。 二、营销策略 1、社交媒体营销策略 借助社交媒体平台&#xff0c;建立企…...

编程日记 2023/11/5 1:38:46

Flutter 05 组件状态、生命周期、数据传递（共享）、Key

一、Android界面渲染流程UI树与FlutterUI树的设计思路对比 二、Widget组件生命周期详解 1、Widget组件生命周期 和其他的视图框架比如android的Activity一样&#xff0c;flutter中的视图Widget也存在生命周期&#xff0c;生命周期的回调函数体现在了State上面。组件State的生命…...

编程日记 2023/11/5 1:37:46

2.Vue3项目（二）：vue项目创建，项目必需的基础依赖配置，项目集成各种第三方依赖

目录 一、环境配置 1.下载node.js 2.pnpm的配置 二、创建项目 1.先创建好项目文件夹...

编程日记 2023/11/5 1:36:44

ViGEmBus虚拟控制器驱动深度应用指南：从技术原理到场景落地

ViGEmBus虚拟控制器驱动深度应用指南&#xff1a;从技术原理到场景落地 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 一、价值定位&#xff1a;重新定义虚…...

编程新知 2026/3/30 7:00:56

OpenClaw二次开发指南：修改Qwen3-VL:30B的飞书交互协议

OpenClaw二次开发指南&#xff1a;修改Qwen3-VL:30B的飞书交互协议 1. 为什么需要定制飞书交互协议 去年11月第一次尝试用OpenClaw对接飞书时&#xff0c;我遇到了一个典型问题&#xff1a;标准协议下发送的Markdown消息在Qwen3-VL:30B多轮对话中频繁出现格式错乱。这个30B参…...

编程新知 2026/3/30 6:10:44

系统移植-STM32MP1_TF-A概述

文章目录 1 设备安全2 TF-A简介3 ARMv7和ARMv8权限等级3.1 ARMv7-A工作模式3.2 ARMv8工作模式 4 TF-A不同启动阶段4.1 bl14.2 bl24.3 bl314.4 bl324.5 bl33 5 STM32MP1中的TF-A5.1 STM32MP1_TF-A框架5.1.1 STM32MP1下的bl15.1.2 STM32MP1下的bl25.1.3 STM32MP1下的bl325.1.4 ST…...

编程新知 2026/3/30 5:04:04

泛微E9 OA流程表单右上角加按钮？用Ecode 5分钟搞定（附完整代码）

泛微E9流程表单5分钟极速加装功能按钮实战指南 每次接到"明天就要上线"的需求时&#xff0c;IT部门的咖啡机总是格外忙碌。上周三下午4点&#xff0c;我正收拾背包准备下班&#xff0c;业务部门的小王火急火燎地冲进办公室&#xff1a;"老师&#xff01;采购流程…...

编程新知 2026/3/30 4:49:58

数据清洗提速37倍的秘密：Polars 2.0中arrow2内核的零拷贝cast、predicate pushdown与pl.scan_parquet深度调优

第一章&#xff1a;Polars 2.0 大规模数据清洗技巧 面试题汇总Polars 2.0 引入了更严格的惰性执行模型、增强的字符串处理 API 以及对空值语义的统一规范&#xff0c;使其在面试中成为高频考察对象。高频考点聚焦于内存效率、链式操作健壮性及跨类型转换的边界处理。高效处理缺…...

编程新知 2026/3/30 3:49:13

Windows系统OpenClaw避坑指南：nanobot镜像部署常见报错解决

Windows系统OpenClaw避坑指南&#xff1a;nanobot镜像部署常见报错解决 1. 为什么选择nanobot镜像部署OpenClaw 去年我在尝试将OpenClaw接入本地大模型时&#xff0c;被复杂的依赖关系和GPU配置折磨得够呛。直到发现星图平台的nanobot镜像——这个预装了Qwen3-4B-Instruct模型…...

编程新知 2026/3/30 3:47:11

5大核心功能解析：MAA_Punish如何实现《战双帕弥什》全自动游戏体验

5大核心功能解析&#xff1a;MAA_Punish如何实现《战双帕弥什》全自动游戏体验 【免费下载链接】MAA_Punish 战双帕弥什每日任务自动化 | Assistant For Punishing Gray Raven 项目地址: https://gitcode.com/gh_mirrors/ma/MAA_Punish MAA_Punish是一款专为《战双帕弥什…...

编程新知 2026/3/30 3:39:04

SPI总线抽象架构设计与实现

## 1. SPI总线抽象架构设计### 1.1 设计目标与架构分层 SPI总线抽象设计主要解决三个核心问题&#xff1a; 1. 总线与设备解耦&#xff1a;通过分层设计实现硬件无关性 2. 快速切换硬件/模拟SPI&#xff1a;统一接口规范支持多种实现方式 3. 跨平台移植性&#xff1a;核心逻辑与…...

编程新知 2026/3/30 2:22:32

Landsat 9 数据预处理第一步：在ENVI里正确加载影像的保姆级指南（含MTL文件处理）

Landsat 9数据预处理全流程&#xff1a;从ENVI加载到分析就绪的完整指南 当第一次拿到Landsat 9数据时&#xff0c;很多遥感新手会卡在最基础的数据加载环节。这就像拿到一把高级门锁的钥匙&#xff0c;却因为不知道正确的插入角度而无法开启后续分析的大门。本文将带你系统掌…...

编程新知 2026/3/30 2:02:27

告别模糊深度图：用CREStereo的级联循环网络，搞定手机双摄的立体匹配难题

手机双摄立体匹配的工程突围&#xff1a;CREStereo如何重塑深度图细节 当你在智能手机上使用人像模式时&#xff0c;是否注意到头发丝边缘总会出现不自然的虚化断裂&#xff1f;这种"深度图模糊综合征"正是移动端立体匹配面临的典型挑战。不同于工业级双目摄像头&…...

编程新知 2026/3/30 1:17:59