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

使用vue实现分页

news 2025/11/9 5:31:02

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/11/8 12:49:24

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/11/9 0:25:01

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/9/29 21:28:27

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/11/8 4:55:46

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/11/7 20:30:28

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/11/8 1:28:39

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/11/8 7:59:18