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

使用vue实现分页

news 2026/5/16 14:52:56

使用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

从零到一：手把手带你完成DevEco Studio环境搭建与项目启动

1. 环境准备&#xff1a;从下载到安装的完整指南 第一次接触HarmonyOS开发的朋友们&#xff0c;你们好&#xff01;我是老张&#xff0c;在智能硬件行业摸爬滚打十多年&#xff0c;今天要带大家搞定DevEco Studio这个开发利器。很多人刚开始都会被环境搭建劝退&#xff0c;其实…...

编程新知 2026/5/16 14:43:18

5分钟终极指南：永久免费使用Cursor Pro功能的完整解决方案

5分钟终极指南&#xff1a;永久免费使用Cursor Pro功能的完整解决方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your…...

编程新知 2026/5/16 14:11:24

从SPL到main_loop：手把手调试i.MX6ULL的U-Boot启动全流程（附GDB实战）

从SPL到main_loop&#xff1a;手把手调试i.MX6ULL的U-Boot启动全流程&#xff08;附GDB实战&#xff09; 在嵌入式系统开发中&#xff0c;U-Boot作为最常用的Bootloader之一&#xff0c;其启动流程的理解和调试能力是开发者必须掌握的核心技能。本文将聚焦i.MX6ULL平台&#xf…...

编程新知 2026/5/16 11:54:29

怎样快速删除背景？2026年免费工具实测对比，找到最简单的抠图方法

图片背景删除已经成为日常工作中的常见需求——无论是制作证件照、电商商品图&#xff0c;还是社交媒体头像&#xff0c;都离不开一个靠谱的背景去除工具。但市面上的工具五花八门&#xff0c;从专业软件到在线应用&#xff0c;从手机App到小程序&#xff0c;到底哪个才是最简单…...

编程新知 2026/5/16 11:02:10

Coolapk-UWP 深度解析：基于MVVM架构的Windows桌面酷安客户端开发实战指南

Coolapk-UWP 深度解析&#xff1a;基于MVVM架构的Windows桌面酷安客户端开发实战指南 【免费下载链接】Coolapk-UWP 一个基于 UWP 平台的第三方酷安客户端 项目地址: https://gitcode.com/gh_mirrors/co/Coolapk-UWP 在移动应用生态日益丰富的今天&#xff0c;将移动端优…...

编程新知 2026/5/16 10:58:05

TC12.0 BMIDE实战：从零构建企业专属业务数据模型

1. 为什么企业需要定制业务数据模型 第一次接触Teamcenter的BMIDE工具时&#xff0c;我和很多技术管理员一样有个疑问&#xff1a;既然系统已经内置了标准数据模型&#xff0c;为什么还要大费周章地自定义&#xff1f;直到参与了一个汽车零部件企业的项目才真正明白。这家企业使…...

编程新知 2026/5/16 10:58:05

ENSP实战：从Console到AAA，详解交换机安全登录的进阶配置

1. 从零开始&#xff1a;认识交换机登录安全的基本面 第一次接触企业级交换机时&#xff0c;很多新手都会被各种登录方式搞得晕头转向。我刚开始做网络运维时&#xff0c;就曾经因为没设置好登录认证&#xff0c;导致测试环境的交换机被隔壁团队的同事误操作重启。今天我们就从…...

编程新知 2026/5/16 10:49:20

基于RAG与FastAPI构建AI知识库插件：从原理到实战

1. 项目概述与核心价值最近在折腾AI智能体&#xff0c;特别是给ChatGPT这类大语言模型加装“插件”或“工具”时&#xff0c;发现了一个挺有意思的项目&#xff1a;urantia-hub/urantia-papers-plugin。乍一看这个名字&#xff0c;可能很多开发者会有点懵&#xff0c;这到底是做…...

编程新知 2026/5/16 9:53:54

PX4飞控IMU频率上不去？手把手教你用MAVLink命令和SD卡配置文件，稳定提升到200Hz

PX4飞控IMU频率优化实战&#xff1a;从原理到200Hz稳定配置 引言 在无人机开发领域&#xff0c;IMU数据的高频采集对于飞行控制精度至关重要。许多开发者在使用PX4飞控时都遇到过这样的困扰&#xff1a;默认的50Hz IMU频率无法满足高动态飞行需求&#xff0c;而手动调整后要么…...

编程新知 2026/5/16 9:29:01

RK3568网关实战：如何用1TOPS NPU在智慧农业里做实时虫情监测？

RK3568网关实战&#xff1a;如何用1TOPS NPU在智慧农业里做实时虫情监测&#xff1f; 在智慧农业的浪潮中&#xff0c;虫害监测一直是困扰农户的核心问题。传统依赖人工巡查的方式不仅效率低下&#xff0c;还容易错过最佳防治时机。而基于RK3568边缘计算网关的实时虫情监测方案…...

编程新知 2026/5/16 9:29:01