学习记录-mybatis+vue+elementUi实现分页查询(前端部分)

news2024/11/20 12:21:17

前端这一块最方便的莫过于是element已经提供好了 接口,三个最关键的接口这里首先解决第一个,总数。

在这里插入图片描述

//总记录数
      totalCount:100,

在这里插入图片描述

我直接在data中将其先初始化为100,之后直接在响应中设置,这是从后端查询到的值,不需要任何参数。

其次来解决当前页以及页面大小的问题,这里要做的主要工作是:将定位数据给后端,后端将值传到前端来,传到前端来用什么来展示呢?直接展示到表单里面去。
在这里插入图片描述
然后就是最后一个问题,怎么将定位数据动态的传送给后端呢?
element其实早就给你准备好了
在这里插入图片描述
这以上两个方法中,第一个已经给我们动态获取到了当前页面的大小,第二个函数也帮我们拿到了当前所在页的索引。我需要做的就是将这两个值,传给后台。


①首先我定义两个变量,并进行初始化一下,之后就让他们动态地代表定位数据。
在这里插入图片描述


②其次就是给他们动态绑定数据,可以看到,每一次切换之后都会重新进行查询数据。
在这里插入图片描述


③把值传回去。这里采用了字符串拼接地方式进行传值。
在这里插入图片描述

小结一下

这里的动作其实非常简单,甚至只是简单逻辑。根本无需一篇博文去进行记录,但是初次接触的时候真的感觉非常复杂,等到动手做完并且记录分析完毕之后却感觉非常简单,可能也不能这么说,凡事都有一个过程,这可能就是量变到质变的结果。继续学习,才能知道了解到更到!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/112146.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华为被迫开源,从认知到落地SpringBoot企业级实战手册(完整版)

前言 本手册重在引导读者进入真实的项目开发体验,围绕Spring Boot技术栈全面展开,兼顾相关技术的知识拓展,由浅入深,步步为营,使读者既能学习基础知识,又能掌握. 一定的开发技巧。本书的目标是让读者拥有一…

图文详解 (Kubernetes)K8S 和 容器中的退出状态码含义和原因及解决方法

图文详解 (Kubernetes)K8S 和 容器中的退出状态码含义和原因及解决方法。 什么是容器退出码 当容器终止时,容器引擎使用退出码来报告容器终止的原因。如果您是 Kubernetes 用户,容器故障是 pod 异常最常见的原因之一,了解容器退出码可以帮助您在排查时找到 pod 故障的根本…

Hadoop3.3.4最新版本安装分布式集群部署

Index of /dist/hadoop/commonhttps://archive.apache.org/dist/hadoop/common 集群规划: 注意: NameNode和SecondaryNameNode不要安装在同一台服务器ResourceManager也很消耗内存,不要和NameNode、SecondaryNameNode配置在同一台机器上。 …

PHP 变量

变量是用于存储信息的"容器"&#xff1a; 实例 <?php $x5; $y6; $z$x$y; echo $z; ?> 运行实例 与代数类似 x5 y6 zxy 在代数中&#xff0c;我们使用字母&#xff08;如 x&#xff09;&#xff0c;并给它赋值&#xff08;如 5&#xff09;。 从上面的…

echarts的grid——图表的位置配置

首先还是先认识grid&#xff0c;要弄清楚grid是哪一块区域&#xff0c;这就牵扯到对echarts图表元素的基本认识。为此&#xff0c;我做了一个总结&#xff0c;如图所示&#xff1a; 数学里的笛卡尔坐标系分为直角坐标系 和斜坐标系。而grid只适用于直角坐标系&#xff01; 我们…

分布式理论之分布式互斥

写在前面 本文一起看下分布式理论中的分布式互斥&#xff08;distributed mutual[ˈmjutʃuəl] exclusion&#xff09;问题&#xff0c;以及解决该问题相关算法。 1&#xff1a;什么是分布式互斥 我们先看下什么是临界资源&#xff08;critical resource&#xff09;&#…

如何提高苹果商店ASA广告的展示份额

众所周知&#xff0c;APP获得曝光后&#xff0c;才会有用户的点击率和下载&#xff0c;接下来柚鸥ASO会告诉大家&#xff0c;如何在保障ROI&#xff08;是指投入成本跟获得的收益的比值&#xff09;的情况下&#xff0c;为ASA获得最大的展示份额。 CPM是指通过商家付费&#x…

【nowcoder】笔试强训Day2

目录 一、选择题 二、编程题 2.1排序子序列 2.2倒置字符串 一、选择题 1.A 派生出子类 B &#xff0c; B 派生出子类 C &#xff0c;并且在 java 源代码有如下声明&#xff1a; 1. A a0new A(); 2. A a1new B(); 3. A a2new C(); 问以下哪个说法是正确的&#xff08;&…

19. 【gRPC系列学习】拦截器Interceptor

无论客户端还是服务端在远程调用前后执行一些通用逻辑,例如Gin框架,实现日志、监控、认证、Recover等通用逻辑,gRPC也提供这样的机制。 拦截器分为:一元拦截器、流拦截器,这两种拦截器在客户端、服务端都可以使用。拦截器的执行流程如图:其中InHandlerx与outHandlerx是同…

1 月 25 日见|Flutter Forward 活动日程表正式发布!

2023 年 1 月 25 日 (正月初四)&#xff0c;我们将在肯尼亚首都内罗毕举办 Flutter Forward 大会&#xff0c;并同时开启线上直播。本次活动将为展示最新的 Flutter 技术更新&#xff0c;包括一个主题演讲以及多个技术演讲和线上问答&#xff0c;全方位展示 Flutter 如何推动 U…

B+树 [数据结构与算法][Java]

B树 B树是B树的一种变形 我们通过一颗四阶B树来理解认识一下B树:(如下:) 我们其实从图上就可以看出B树和B树是有很多不同之处的 比如我们的B树中将叶子结点层的所有结点使用一个链表串联了起来B树中对于非叶子结点都是只是存储的索引(指针), 并没有存储关键字, 所以我们最终查…

离散数学数理逻辑部分

前言 本文创作的起因是&#xff0c;经历了离散数学的学习&#xff0c;深感学习离散之艰辛。所以产生了写一些内容帮助大家期末复习。虽然在csdn发表本文&#xff0c;有些不太合适&#xff0c;但是还是相信本文的质量和内容&#xff0c;可以给正在学习离散数学的大学生提供一些…

vscode使用shift+alt+f格式化html文件时不生效

关于vscode配置相关文章&#xff08;方便作者之后复习&#xff09;: VScode如何在敲代码时自动导入包怎么在VScode中写代码模板【以创建express模板为例】如何根据项目的eslint去配置vscode的setting 1-1 下载Beautify插件 该插件已停止维护&#xff0c;输入下载其他插件 1-2 在…

【Linux】进程概念(上)

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《学会Linux》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;冯诺依曼体…

1754. 构造字典序最大的合并字符串

摘要 1754. 构造字典序最大的合并字符串 一 贪心算法分析 题目要求合并两个字符串 word1 与 word2&#xff0c;且要求合并后的字符串字典序最大。首先需要观察一下合并的选择规律&#xff0c;假设当前需要从 word1​ 的第 i 个字符和 word2​ 的第 j个字符选择一个字符加入到…

24. 【gRPC系列学习】gRPC安全认证-TLS认证

TLS认证是gRPC比较常见的方式,利用PKI体系,生成客户端证书、服务端证书、以及CA证书,在交互期间进行身份验证,经秘钥协商后,以对称秘钥进行加密通信,保证数据隐私。Basic、Jwt都是要自实现,TLS是官方支持,操作简单。 1. TLS原理 双向认证简单来讲:服务端验证客户端证书…

前端小知识:返回浏览器上一页(back、go、referrer)

官方文档&#xff08;document.referrer&#xff09;&#xff1a; https://developer.mozilla.org/zh-CN/docs/Web/API/Document/referrer   官方文档&#xff08;history.back&#xff09; https://developer.mozilla.org/zh-CN/docs/Web/API/History/back   官方文档&#…

DaVinci:曲线之 HSL 曲线

调色页面&#xff1a;曲线Color&#xff1a;CurvesH 指的是色相 Hue&#xff0c;S 指的是饱和度 Saturation&#xff0c;L 指的是亮度 Luminance。DaVinci Resolve 的曲线调板中&#xff0c;除了自定义曲线&#xff0c;还提供了六种基于色相、饱和度或亮度的调节曲线&#xff0…

Akka 进阶(二)Mailbox 邮箱

目录一 默认邮箱配置二 内置邮箱三 自定义邮箱四 配置邮箱五 RequiresMessageQueue接口Actor中的邮箱是一个队列结构&#xff0c;所有发送过来的消息都会在该队列进行排队&#xff0c;在默认情况下&#xff0c;它遵循先进先出&#xff08;FIFO&#xff09;的模式&#xff0c;假…

如何将ppt图片压缩?统一压缩ppt图片的简单方法

日常生活中经常需要用到ppt&#xff0c;一份PPT少则十几页多则上百页&#xff0c;就很容易造成PPT过大不易传送的情况&#xff0c;其实我们可以先把ppt图片压缩&#xff08;图片压缩到指定大小 图片压缩大小至指定kb以下-压缩图&#xff09;之后再制作成ppt文件&#xff0c;那么…