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

使用vue实现分页

news 2025/12/25 8:57:42

使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页

我编写了一个简单的前端页面用来查询数据，页面一共有几个逻辑

 

 具体的效果可以看下面的演示

 

 

下面就来看一下具体的实现步骤。

首先看一下vue的代码

<script type="text/javascript">Vue.createApp({data()  {return {items : [],// 关键词keyword : "",// 是否没有数据isnull : false,// 一开始不显示上一页和下一页isshow : false,// 一共有多少条数据countInfo : 0,// 每一页显示几条数据pageSize : 10,// 当前是第几页currentPage : 1,// 一共有几页countAll : 1,code : 200}},methods: {search() {// 拿到待搜索的关键词var keyword = document.getElementById("keyword").value;console.log(keyword);this.keyword = keyword;this.currentPage = 1;var url = "http://localhost:8080/csdn/search/" + keyword + "/" + this.currentPage;console.log(url);axios.get(url).then((response) => {if(response.data.msg.count==0) {this.isnull = true;// 将原始数据置空this.items = [];// 不显示上一页下一页按钮this.isshow = false;} else {this.isnull = false;console.log(response)this.items = response.data.msg.list;this.countInfo = response.data.msg.count;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); this.isshow = true;}}).catch(function (error) {console.log(error);});},getNextPage() {if(this.currentPage == this.countAll) {this.currentPage = this.currentPage;} else {this.currentPage = this.currentPage + 1;}var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;axios.get(url).then((response) => {console.log(response)this.items = response.data.msg.list;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); }).catch(function (error) {console.log(error);});},getPrePage() {if(this.currentPage == 1) {this.currentPage = 1;} else {this.currentPage = this.currentPage - 1;}var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;axios.get(url).then((response) => {console.log(response)this.items = response.data.msg.list;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); }).catch(function (error) {console.log(error);});}},}).mount("#app");
</script>

 data()中返回了几个变量，

  • items：用来存放待展示的数据项

  • keyword：记录本次查询使用的关键词

  • isnull：表示一次查询的结果数量是否为0，用来控制没有结果的显示逻辑

  • isshow：表示是否显示上一页下一页按钮，以及显示当前页数和数据总数

  • countInfo：记录一共有多少条结果

  • pageSize：记录每页显示的数据项，目前后端固定每页展示10条数据

  • currentPage：记录当前是第几页

  • countAll：记录一共有多少页数据

  • code：后端返回的一个状态码，没什么用

一共提供了三个方法进行查询

  • search()：进行一个新的关键词的查询
  • getNextPage()：查询下一页的数据，如果已经是最后一页了，则查询当前页的结果
  • getPrePage()：查询上一页的数据，如果已经是第一页了，则查询当前页的结果

接着我们再来看一下后端返回的数据格式

上图中方框内的数据就是后端返回的数据，msg中记录的就是我们需要用到的数据，里面有交给数据项

  • count：表示数据总数，只是查询数据总数，并不会将所有的数据都返回给前端
  • list：返回当前页的数据
  • page：表示当前是第几页 

 我们具体来看一下list中数据项的内容

可以发现list中的每一项就是构成我们前端页面中一行的数据，这在vue中体现为数据的绑定，下面就来看看详细的html代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head><meta charset="UTF-8"><title>纳米搜索</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><script src="https://unpkg.com/vue@3"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head>
<body><div class="container"><!-- 先编写一个搜索栏 --><div class="row" id="app"><div class="col-md-1"></div><div class="col-md-10"><!-- 这里面有两个个部分 --><div class="row"><!--<div class="col-md-2"></div>--><div class="col-md-12"><div style="float: left; margin-top: 20px;margin-left: 20%"><h2 style="color:cornflowerblue">纳米搜索</h2></div><div style="float: left; margin-top: 20px; margin-left: 20px"><div class="form-group" style="margin-right: 20px; float: left;" ><div class="input-group" ><input type="text" class="form-control" name="keyword"  id="keyword" placeholder="请输入要搜索的关键词"></div></div><div style="float:left"><button id="search" type="button" class="btn btn-primary" v-on:click="search">搜索</button></div></div></div><!--<div class="col-md-2"></div>--></div><hr><div><div v-for="item of items"><!-- 第一行是url --><a :href="item.url" target="_blank"><div style="color: #0000cc">{{item.title}}</div></a><div style="color: #28a745">{{item.url}}</div><!-- 这一行显示文章作者 --><div style="color: #000000">文章作者：<span style="color: #000000; margin-left: 10px">{{item.nick_name}}</span></div><!-- 这一行显示标签 --><div style="color: #000000">文章标签：<span style="color: #000000; margin-left: 10px">{{item.tag}}</span></div><!-- 下面一行显示发表时间，阅读数和收藏数 --><div><div style="color: #000000">发表时间：<span style="color: #000000;margin-left: 10px">{{item.up_time}}</span></div><div style="color: #000000;float: left">阅读量：<span style="color: #000000;margin-left: 10px">{{item.read_volum}}</span></div><div style="color: #000000;float: left; margin-left: 10px">收藏量：<span style="color: #000000;margin-left: 10px">{{item.collection_volum}}</span></div></div><br><hr></div></div><!-- 当没有查询结果的时候显示 --><div v-if="isnull"><span>非常抱歉，没有您想要的结果(。・＿・。)ﾉI’m sorry~</span></div><!-- 当有数据的时候显示 --><div v-if="isshow"><div style="float:left; margin-right: 20px;" ><button type="button" class="btn btn-primary" v-on:click="getPrePage">上一页</button></div><div style="float:left; margin-right: 20px;" ><button type="button" class="btn btn-primary" v-on:click="getNextPage" >下一页</button></div><div style="float:left; margin-right: 20px; margin-top: 5px;"><span>第{{currentPage}}/{{countAll}}页</spa></div><div style="float:left; margin-right: 20px; margin-top: 5px;"><span>共有{{countInfo}}条数据</spa></div></div></div><div class="col-md-1"></div></div></div>
</body>
<script type="text/javascript">Vue.createApp({data()  {return {items : [],// 关键词keyword : "",// 是否没有数据isnull : false,// 一开始不显示上一页和下一页isshow : false,// 一共有多少条数据countInfo : 0,// 每一页显示几条数据pageSize : 10,// 当前是第几页currentPage : 1,// 一共有几页countAll : 1,code : 200}},methods: {search() {// 拿到待搜索的关键词var keyword = document.getElementById("keyword").value;console.log(keyword);this.keyword = keyword;this.currentPage = 1;var url = "http://localhost:8080/csdn/search/" + keyword + "/" + this.currentPage;console.log(url);axios.get(url).then((response) => {if(response.data.msg.count==0) {this.isnull = true;// 将原始数据置空this.items = [];// 不显示上一页下一页按钮this.isshow = false;} else {this.isnull = false;console.log(response)this.items = response.data.msg.list;this.countInfo = response.data.msg.count;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); this.isshow = true;}}).catch(function (error) {console.log(error);});},getNextPage() {if(this.currentPage == this.countAll) {this.currentPage = this.currentPage;} else {this.currentPage = this.currentPage + 1;}var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;axios.get(url).then((response) => {console.log(response)this.items = response.data.msg.list;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); }).catch(function (error) {console.log(error);});},getPrePage() {if(this.currentPage == 1) {this.currentPage = 1;} else {this.currentPage = this.currentPage - 1;}var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;axios.get(url).then((response) => {console.log(response)this.items = response.data.msg.list;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); }).catch(function (error) {console.log(error);});}},}).mount("#app");
</script></html>

使用vue编写前端动态页面真的比原生js或者jquery要方便很多，对比theamleaf也有很多好处。

我们在使用theamleaf的时候，每次提交表单都需要刷新页面，使用vue+axios进行ajax请求则不需要刷新页面，这不仅会减轻服务端的压力，而且可以带来更好的用户体验。

相关文章：

使用vue实现分页

使用vue实现分页的逻辑并不复杂&#xff0c;接收后端传输过来的数据&#xff0c;然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页 我编写了一个简单的前端页面用来查询数据&#xff0c;页面一共有几个逻辑 具体的效果可以看下面的演示 下面就来看一下具体的实…...

编程日记 2023/4/15 19:22:23

白银实时行情操作中的一些错误及其解决办法（下）

小编根据大师&#xff0c;网络上的高手以及自己的经验整理出的一些交易中典型的错误&#xff0c;投资者可以参考参考&#xff0c;有则改之无则加勉~续上文…… 问题三&#xff1a;长线获利的交易不容易坚持同时陷入盘整或亏损的交易&#xff08;特别是大仓持有的品种&#xff…...

编程日记 2023/4/15 19:17:22

Linux系统之tomcat的安装方法

Linux系统之tomcat的安装方法一、tomcat介绍1.tomcat简介2.tomcat官网二、本次环境规划三、安装jdk1.下载jdk包2.安装jdk3.检查jdk版本四、安装tomcat1.下载tomcat2.解压tomcat软件包3.设置环境变量4.查看tomcat版本五、启动tomcat1.启动tomcat服务2.检查tomcat服务状态3.访问t…...

编程日记 2023/4/15 19:12:21

段式回文。

题目描述 你会得到一个字符串 text 。你应该把它分成 k 个子字符串 (subtext1, subtext2&#xff0c;…&#xff0c; subtextk) &#xff0c;要求满足: subtexti 是 非空 字符串 所有子字符串的连接等于 text ( 即subtext1 subtext2 … subtextk text ) 对于所有 i 的有效…...

编程日记 2023/4/15 19:07:19

易点易动设备管理系统高效管理海量备品备件

纸质设备备品备件管理是企业运营中的重要环节&#xff0c;其管理效率和精度直接关系到企业的生产效率和经济效益。然而&#xff0c;传统的纸质管理方式存在诸多问题&#xff0c;如信息不透明、数据难以更新、易丢失等。为解决这些问题&#xff0c;易点易动设备管理系统应运而生…...

编程日记 2023/4/15 19:02:18

CMMI 3.0 究竟包含了哪些实践域?

CMMI 3.0中合计有31个实践域&#xff0c;涵盖了开发、服务、供应商管理、人员管理、安全、数据管理、远程交付等多个领域。本文把这31个实践域的核心内容用一句话进行了概括&#xff0c;以确保大家能够快速了解模型所涵盖的内容。CMMI 2.0有官方的中文版&#xff0c;里面有些翻…...

编程日记 2023/5/30 16:16:08

算法训练Day31: 455.分发饼干 376. 摆动序列 53. 最大子序和

文章目录分发饼干思路题解摆动序列题解最大子数组和分发饼干 CategoryDifficultyLikesDislikesContestSlugProblemIndexScorealgorithmsEasy (56.63%)6940--0 TagsCompanies 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能…...

编程日记 2023/4/15 18:52:16

ASP.NET(AJAX+JSON)实现对象调用

客户端 代码如下: <% Page Language"C#" AutoEventWireup"true" CodeFile"ASP.NETA_JAX.aspx.cs" Inherits"_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.…...

编程日记 2023/4/15 18:47:15

一次弄懂gzip模块启用和配置指令

接下来所学习的指令都来自ngx_http_gzip_module模块&#xff0c;该模块会在nginx安装的时候内置到nginx的安装环境中&#xff0c;也就是说我们可以直接使用这些指令。 1. gzip指令&#xff1a;该指令用于开启或者关闭gzip功能 注意只有该指令为打开状态&#xff0c;下面的指令才…...

编程日记 2023/5/31 11:46:25

猿辅导学员入选国家队，竞赛老师成为“最强辅助”

3月31日&#xff0c;国际数学奥林匹克竞赛&#xff08;IMO&#xff09;国家队名单正式出炉&#xff0c;猿辅导学员王淳稷、孙启傲分别以第一名和第二名的成绩位列其中&#xff0c;今年7月&#xff0c;他们将出征日本&#xff0c;代表中国参赛&#xff0c;为国争光。 自2020年以…...

编程日记 2023/5/31 12:32:26

Java面向对象

Java面向对象 静态 static static修饰静态成员变量 /**在线人数。注意&#xff1a;static修饰的成员变量&#xff1a;静态成员变量&#xff0c;只在内存中有一份&#xff0c;可以被共享*/ public static int onlineNumber 161;static静态成员方法 /**静态成员方法: 有stat…...

编程日记 2023/4/15 18:32:12

Redis —缓存常见异常

文章目录缓存雪崩解决办法缓存击穿解决办法缓存穿透缓存穿透的两种常见情况解决办法布隆过滤器工作原理缓存雪崩 大量缓存数据在同一时间过期&#xff08;失效&#xff09;或者 Redis 故障宕机时&#xff0c;如果此时有大量的用户请求&#xff0c;都无法在 Redis 中处理&#…...

编程日记 2023/4/15 18:27:10

JavaEE企业级应用开发教程——第十二章 Spring MVC数据绑定和相应（黑马程序员第二版）（SSM）

第十二章 Spring MVC数据绑定和相应 12.1 数据绑定 在 Spring MVC 中&#xff0c;当接收到客户端的请求时&#xff0c;会根据请求参数和请求头等信息&#xff0c;将参数以特定的方式转换并绑定到处理器的形参中&#xff0c;这个过程称为数据绑定。数据绑定的流程大致如下&…...

编程日记 2023/4/15 18:22:09

银行数字化转型导师坚鹏：金融数据治理、数据安全政策解读

金融数据治理、数据安全政策解读及大数据应用课程背景&#xff1a; 很多银行存在以下问题&#xff1a;不知道如何准确理解金融数据治理及数据安全相关政策不清楚金融数据治理及数据安全相关政策对银行有什么影响&#xff1f;不清楚如何有效应用金融数据治理及数据安全相关…...

编程日记 2023/4/15 18:17:08

Vue动图数据表格，根据字段是否为空，控制表格列的隐藏和显示

所在前面的话&#xff0c;我是个前端小白&#xff0c;大佬请绕行&#xff0c;可能大佬觉得很简单&#xff0c;但是我真的花了好几个小时去解决&#xff0c;所以记录一下&#xff0c;下次也可以作为参考。 我主要是以第二种方式进行修改的 开门见山 简述问题&#xff1a;大家…...

编程日记 2023/4/15 18:12:07

带你们偷瞄编程绕不开的C语言（二）

&#x1f929;&#xff1a;大家好&#xff0c;我是paperjie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 &#x1f970;&#xff1a;这里是C专栏&#xff0c;笔者用重金(时间和精力)打造&#xff0c;基础知识一网打尽&#xff0c;希望可以帮到读者们哦。 &#x1f…...

编程日记 2023/4/15 18:07:05

TCP三次握手和四次挥手

文章目录TCP三次握手TCP四次挥手TCP三次握手 序列号&#xff1a;建立连接时计算机随机生成的随机数作为初始值&#xff0c;通过SYN包传给接收端主机&#xff0c;每发送一次数据就累加一次该数据字节数的大小。用来解决网络包乱序问题。 确认应答号&#xff1a;指下一次期望收到…...

编程日记 2023/4/15 18:02:03

L1-016 查验身份证

L1-016 查验身份证 题目链接 题意 判断18位身份证号码&#xff08;17位数字&#xff0b;1位校验码&#xff09;是否合法&#xff0c;对于不合法的身份证号码进行输出&#xff0c;若全都符合&#xff0c;则输出“All passed”&#xff0c;判断是否合法的规则如下&#xff1a; …...

编程日记 2023/4/15 17:57:02

强大到让人无法想象的ChatGPT-5即将发布，上千名人士却紧急叫停

目录 【ChatGPT 5简介】 【ChatGPT 5的潜在应用】 【ChatGPT 5的潜在危险】 ChatGPT4还没有好好体验&#xff0c;比GPT4强大1000倍的ChatGPT5又即将发布&#xff01;届时将彻底改变人工智能领域&#xff0c;并改变我们现有的世界 【ChatGPT 5简介】 OpenAI计划在2023年12月发…...

编程日记 2023/4/15 17:52:00

C++中的功能 及 用法

参考资料&#xff1a; C中&的功能 及 用法 - konglingbin - 博客园 (cnblogs.com) 对于习惯使用C进行开发的朋友们&#xff0c;在看到c中出现的&符号&#xff0c;可能会犯迷糊&#xff0c;因为在C语言中这个符号表示了取地址符&#xff0c;但是在C中它却有着不同的用途…...

编程日记 2023/4/15 17:46:59

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/12/24 10:02:56

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/12/22 11:37:06

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/12/21 4:07:48

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/12/25 2:15:18

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/12/21 9:43:13

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/12/11 5:02:54

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/12/22 8:54:25