【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询(二)——前端el-pagination实现

系列文章

【Springboot】基于注解式开发Springboot-Vue3整合Mybatis-plus实现分页查询—后端实现

文章目录

  • 系列文章
  • 系统版本
  • 实现功能
  • 实现思路
  • 后端传入的数据格式
  • 前端el-table
  • 封装axois接口
  • 引入Element-plus的el-pagination分页组件
  • Axois 获取后台数据


系统版本

后端: Springboot 2.7、 Mybatis-plus
数据库:MySQL 8.0
前端:Vue3、Axois 1.6.0 、Vite 4.5.0、Element-Plus、Router-v4

实现功能

上文文主要从后端,借助Mybatis-plus提供的方法,实现分页功能。url中需要传入当前页,和每页显示多少条数据。本文将结合Element-plus的el-pagination组件,调用后台数据,实现分页效果。下面演示一个功能,比如分页查询订单(Orders)记录。读者可以根据自己的实体类,自行修改。

实现思路

先编写一个获取后台返回IPage类型的数据的axois,获取到数据后,用户在前端进行选择每页选择多少页或者选择具体的页数的时候,重新触发获取数据的api.
在这里插入图片描述

后端传入的数据格式

后端传回来的数据实际上长这样,当前页,总页数,每页展示多少数据,其实都有,前台只需要拿到这些参数值即可:
在这里插入图片描述

前端el-table

    <el-table :data="orderlist.data" style="width: 90%"><el-table-column sortable prop="orderId" label="订单编号" width="200" /><el-table-column sortable prop="checkIn" label="入住时间" width="200" /><el-table-column sortable prop="checkOut" label="离房时间" width="200" /><el-table-column prop="clientName" label="姓名" width="100" /><el-table-column prop="clientSex" label="性别" width="100" /><el-table-column prop="clientCard" label="身份证号" width="200" /><el-table-column prop="clientPhone" label="联系方式" width="150" /><el-table-column label="房型" prop="roomType" width="200" /><el-table-column prop="" label="操作" width="120"><template #default><el-button link type="primary" size="small" @click="handleClick">详情</el-button><el-button link type="primary" size="small">编辑</el-button></template></el-table-column></el-table>

封装axois接口

在项目src目录下,另建一个文件夹/request,里面创建api.js,内容是创建axois实例,简单封装axois.

import axios from "axios";
const api = axios.create({ baseURL: "http://localhost:8081", timeout: 10000 ,headers:{"Content-Type":"application/json;charset=UTF-8"}
});

引入Element-plus的el-pagination分页组件

官网:Element-plus-elpagination

下面的currentPagetotalPage,pageSize 都是接收后端IPage类型的返回数据字段。

  • total参数用来显示,一共有多少条数据。
  • :page-sizes由数组构成,里面的可选值代表每页可以选择多少条数据。
  • current-page代表当前选中的页面页码;
  • page-size:用来获取后端传来的页面数量。

通过ref 使用 reactive 来实现响应式,获取到后台数据后,这些字段的数据将会被后端传入数据覆盖掉,获得真正的页面大小,当前页等参数。

const currentPage = ref(1);
const pageSize = ref(5);
const totalPage = ref(20);

我们要定义方法:handleSizeChanged 和方法 handleCurrentChange,当用户点击切换页码或切换每页展示的数据时,能够做出响应。我这里设计的方法是,用户执行上述操作时,通过方法返回用户具体切换成第几页,或者选择数据每页多少条,然后存入orderlist中,用其内部字段来接收。

      <el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[2, 4, 5, 8, 10]"layout="total, sizes, prev, pager, next, jumper":total="totalPage"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>

我们通过orderlist方法,将后台传来的总页数、当前页、每页展示多少条数据,存储起来

const currentPage = ref(1);
const pageSize = ref(5);
const totalPage = ref(20);
// const pageSize = ref(5);
let orderlist = new reactive({//分页后的考试信息current: 1, //当前页total: null, //记录条数size: 5, //每页条数data: [],
});

handleCurrentChange 和 handleSizeChanged 方法如下:

const handleSizeChange = (val) => {orderlist.size = val;console.log("调用页面大小监控函数,传参如下:");console.log("orderlist.current===   " + orderlist.current);console.log("orderlist.size ===== " + orderlist.size);getdata();
};
const handleCurrentChange = (val) => {orderlist.current = val;console.log("调用当前页面监控函数,传参如下:");console.log("orderlist.current===   " + orderlist.current);console.log("orderlist.size ===== " + orderlist.size);getdata();
};

Axois 获取后台数据

使用反单引号拼接请求url参数,反单引号拼接参数用法如下:
详见
Vue-Router编程式导航

// 我们可以手动建立 url,但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo

本项目中编写获取axois方法:

const getdata = () => {api.get(`/getpage/${orderlist.current}/${orderlist.size}`).then(function (res) {if (res.status === 200) {//更新数据的总页数totalPage.value = res.data.total;console.log("总页数:" + totalPage.value);orderlist.data = res.data.records;} else {ElMessage.error("数据请求失败!");console.log(res);}}).catch(function (e) {ElMessage.error("请求出错");console.log(e);});
};
getdata(); //调用数据初始化方法。

说明:Vue3生命周期中没有 created() 方法,以前在Vue2中写在created()的初始化方法,可以直接写在<script setup> 下。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【架构】后端项目经典分层架构介绍

文章目录 前言分层架构项目实践示例项目结构 其他知识 前言 开发后端项目时&#xff0c;我们最常见的一种架构模式就是分层架构 。 所谓的分层架构&#xff0c;就是把系统自上而下分为多个不同的层&#xff0c;每一层都有特定的功能和职责&#xff0c;且只和自己的直接上层与…

iOS移动应用安全加固:保护您的App免受恶意攻击的重要步骤

目录 iOS移动应用安全加固&#xff1a;保护您的App免受恶意攻击的重要步骤 摘要 引言 一、APP加固的概念 二、APP加固方案的比较 三、保护iOS应用的安全 四、总结 参考资料 摘要 本文介绍了移动应用程序&#xff08;App&#xff09;加固的概念和流程&#xff0c;以及市…

计算机基础知识48

web应用程序 # Django框架是一款专门用来开发web应用的框架 # Web应用程序是一种可以通过浏览器访问的应用程序, B/S架构 案例&#xff1a;淘宝网、京东网... # 应用程序有两种模式: C/S&#xff1a;客户端/服务器端程序&#xff0c;这类程序一般独立运行 B/S&#xff1…

[vuex] unknown mutation type: SET_SOURCE

项目中使用了vuex&#xff0c;并且以模块的形式分好之后。在调用的时候出现了以上问题 /*当我们commit的时候要注意要加上模块的名字 user是模块名称&#xff0c;SET_SOURCE是user模块中定义的方法 正确写法&#xff1a;*/ this.$store.commit("user/SET_SOURCE", th…

Servlet作业小练习

一.题目 利用JavaBean实现用户类&#xff0c;包含姓名、性别、爱好&#xff0c;爱好需要用多选框 实现表单1进行获取数据&#xff0c;表单2显示获取结果。 利用Servlet实现逻辑代码 二.实现效果 三.具体实现 1.User实体类 package com.hjj.pojo;/*** author:嘉佳 Date:20…

sql注入学习笔记

sql注入原理 掌握sql注入漏洞的原理掌握sql注入漏洞的分类 万能用户名 777 or 11 #原句 select userid from cms_users where username ".$username." and password".md5 ( $password ) ."输入过后为 select userid from cms_users where username …

STM32两轮平衡小车原理详解(开源)

一、引言 关于STM32两轮平衡车的设计&#xff0c;我想在读者阅读本文之前应该已经有所了解&#xff0c;所以本文的重点是代码的分享和分析。至于具体的原理&#xff0c;我觉得读者不必阅读长篇大论的文章&#xff0c;只需按照本文分享的代码自己亲手制作一辆平衡车&#xff0c…

【使用教程】在Ubuntu下PMM60系列一体化伺服电机通过PDO跑循环同步位置模式详解

本教程将指导您在Ubuntu操作系统下使用PDO来配置和控制PMM60系列一体化伺服电机以实现循环同步位置模式。我们将介绍必要的步骤和命令&#xff0c;以确保您能够成功地配置和控制PMM系列一体化伺服电机。 一、准备工作 在正式介绍之前还需要一些准备工作&#xff1a;1.装有lin…

基本数据类型小题两道

根据公式计算A地区教师任教年薪&#xff0c;统计键盘输入的字符串中数字个数&#xff0c;按字典序输出。 (笔记模板由python脚本于2023年11月10日 18:05:18创建&#xff0c;本篇笔记适合熟悉python列表、元、字符串等基本数据类型的coder翻阅) 【学习的细节是欢悦的历程】 Pyth…

安全框架SpringSecurity-1(认证入门数据库授权)

一、Spring Security ①&#xff1a;什么是Spring Security Spring Security是一个能够为基于Spring的企业应用系统提供声明式&#xff08;注解&#xff09;的安全访问控制解决方案的安全框架。它提供了一组可以在Spring应用上下文中配置的Bean&#xff0c;充分利用了Spring …

ArcGIS:如何迭代Shp文件所有要素并分别导出为Shp文件?

01 前言 尝试用IDL实现&#xff0c;奈何又涉及新的类IDLffShape&#xff0c;觉得实在没有必要学习的必要&#xff0c;毕竟不是搞开发&#xff0c;只是做做数据处理&#xff0c;没必要拿IDL不擅长的且底层的东西自己造轮子。 这里想到使用Python去解决&#xff0c;gdal太久没用…

在gitlab中的使用kaniko打造流水线

文章目录 kaniko工具介绍环境说明系统版本组件版本组件部署参考链接 部署harbor下载解压、创建相关目录配置部署 gitlab集成harbor集成项目ci配置最终结果 kaniko工具介绍 kaniko 是一种从容器或 Kubernetes 集群内的 Dockerfile 构建容器镜像的工具。 kaniko 解决了使用 Doc…

国际阿里云:无法访问ECS实例中的服务的排查方法!!!

操作场景 无法访问ECS实例中的服务可能有以下原因&#xff1a; 可能原因 排查方案 ECS实例的安全组未开放相应端口 检查ECS实例安全组规则 ECS实例中&#xff0c;该服务未启动/开启或服务对应端口未被监听 检查服务状态及端口监听状态 ECS实例内防火墙设置错误 检查ECS…

ChatGPT付费创作系统V2.4.9独立版 +WEB端+ H5端 + 小程序端系统测试安装教程

播资源提供的GPT付费体验系统最新版系统是一款基于ThinkPHP框架开发的AI问答小程序&#xff0c;是基于国外很火的ChatGPT进行开发的Ai智能问答小程序。当前全民热议ChatGPT&#xff0c;流量超级大&#xff0c;引流不要太简单&#xff01;一键下单即可拥有自己的GPT&#xff01;…

linux入门---信号量

目录标题 为什么会有信号量信号量的概念信号量的接口和操作什么是环形队列单消费者生产者环形队列的模拟实现准备工作构造函数和析构函数push函数的模拟实现pop函数的模拟实现RingQueue完整代码测试代码 多生产多消费的环形队列 为什么会有信号量 在上一篇文章当中我们写过这么…

如何让VirtualBox系统使用Ubuntu主机的USB

如何让VirtualBox系统使用Ubuntu主机的USB 当通过 VirtualBox 尝试不同的操作系统时&#xff0c;访问虚拟机中的 USB 驱动器来传输数据非常有用。 安装Guest Additions 自行百度安装Guest Additions的方法&#xff0c;最终的效果如下&#xff1a; 将用户添加到 vboxusers 组…

Radius是什么意思? 安当加密

Radius是什么意思&#xff1f; RADIUS&#xff08;Remote Authentication Dial In User Service&#xff09;是一种远程用户拨号认证系统&#xff0c;它由RFC 2865和RFC 2866定义&#xff0c;是应用最广泛的AAA&#xff08;Authentication、Authorization、Accounting&#xf…

Unity 跑酷游戏全部脚本(完结)

脚本1 触发器脚本 这个脚本是主角身上的脚本&#xff0c;用于检测是否碰到其他触发器&#xff0c;并做出对应的行为 using System.Collections; using System.Collections.Generic; using UnityEngine; public class ColliidisonTrigger : MonoBehaviour { //触发检测 …

linux之IPC

linux之IPC 什么是IPC共享内存(shm)ftokshmgetshmatshmdtshmctl 消息队列msggetmsgrcvmsgsndmsgctl 旗语(信号量)semgetsemctlsemopsem三级标题三级标题 ipc命令守护进程查看守护进程 什么是IPC IPC: Inter(内核) Process(进程) Communicton&#xff08;通信&#xff09; 共享内…

挑战100天 AI In LeetCode Day08(热题+面试经典150题)

挑战100天 AI In LeetCode Day08&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-102.1 题目2.2 题解 三、面试经典 150 题-103.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…