常用知识碎片 分页组件的使用(arco-design组件库)

目录

分页组件使用

API

组件代码示例

使用思路：

前端示例代码

html

 script

后端示例代码

Controller

Impl

xml

总结

分页组件使用

使用Arco Design之前需要配置好搭建前端环境可以看我另外一篇文章：

手把手教你 创建Vue项目并引入Arco Design组件库

Arco Design Vue - <a-pagination> API 详细的可以可以点击此网站查看具体用法

查看源代码

API

组件代码示例

本代码是一个小项目的示例

使用思路：

  1. 首先获取好总的条数 也就是实例代码中的 --- :total="total"，对total进行属性绑定
  2. 其次获取当前页数 --- :current="currentPage"
  3. 最后就是获取每页显示多少页 --- :page-size="pageSize"
  4. 还有就是创建页面改变触发的函数 --- @change="handleChange"

前端示例代码

省略了很多代码就放了关键的分页组件代码。

html

<template><a-pagination @change="handleChange":total="total" :current="currentPage" :page-size="pageSize" show-total/>
</template>

 script

<script setup>
import {ref } from "vue";
import {useRouter} from 'vue-router'
import axios from "axios";
import {message} from "ant-design-vue";
import qs from "qs";// 查询参数响应式变量
const searchParam = ref({keyword: "",internshipMonthDuration: "",weekDay: "",educationalRequirements: "",employmentOpportunities: "",corporateLevel: "",}
)const items = ref([])
//定义变量保存分页器的当前页数
let currentPage = ref(1);
//定义变量保存分页器的每页显示多少条 这里我设置了一个每页显示8条 
let pageSize = ref(8); 
//定义变量保存数据总条目数
let total = ref();// 根据条件从后端获取数据总条数
const getRecordCount = () => {// 使用qs.stringify() 是将js对象转换为字符串let data = qs.stringify(searchParam.value);axios.get('http://localhost:8080/v1/Psearch/selectRecordCount?' + data).then((res) => {if (res.data.code === 2000) {console.log("查询的条数为 == " + res.data.data)total.value = res.data.data;} else {message.error("加载失败" + res.data.msg)}});
}// 加载数据
const loadData = () => {console.log("LoadData执行 当前查询条件searchParam.value === " + searchParam.value);getRecordCount();console.log("total === " + total.value)//定义变量保存分页器的当前页数 放入查询条件中searchParam.value.currentPage = currentPage.value;//定义变量保存分页器的每页显示多少条 放入查询条件中searchParam.value.pageSize = pageSize.value;let data = qs.stringify(searchParam.value)//分页条件查询axios.get('http://localhost:8080/v1/Psearch/selectAllRecords?' + data).then((res) => {if (res.data.code === 2000) {console.log("查询的记录为 == " + res.data.data)items.value = res.data.data;for (const element of items.value) {if (element.educationalRequirements === '10') {element.educationalRequirements = '大专';} else if (element.educationalRequirements === '20') {element.educationalRequirements = '本科';} else if (element.educationalRequirements === '30') {element.educationalRequirements = '研究生';}}} else {message.error("加载失败" + res.data.msg)}});
}//页面变化更新数据 点击指定页码时,page是指代这个指定的页码
const handleChange = (page) => {//点击其他页时候更新当前页码currentPage.value = page;
}
</script>

注意!!!!!!

必须要加这个 handleChange(page) 函数，不然即时分页了，点击指定页码 不会跳转到指定页码

const handleChange = (page) => {

//点击其他页时候更新为点击的指定页码

currentPage.value = page;

}

不设置这个函数更新当前页码，点击了不会跳转到第二页

后端示例代码

Controller

@RestController
@RequestMapping("/v1/Psearch/")
@Slf4j
public class PracticeSearchController {@Autowiredprivate PracticeSearchService practiceSearchService;@GetMapping("selectRecordCount")public JsonResult selectRecordCount(PracticeSearchRecordsParam practiceSearchRecordsParam){log.info("前端传入搜索参数：{}",practiceSearchRecordsParam);Integer count = practiceSearchService.selectRecordCount(practiceSearchRecordsParam);log.info("后端返回搜索记录的总条数为:{}",count);return JsonResult.ok(count);}@GetMapping("selectAllRecords")public JsonResult selectAllRecords(PracticeSearchListParam practiceSearchListParam){log.info("前端传入搜索参数：{}",practiceSearchListParam);List<PracticeSearchVO> recordsList = practiceSearchService.selectAllRecords(practiceSearchListParam);return JsonResult.ok(recordsList);}}

Impl

@Slf4j
@Service
public class PracticeSearchServiceImpl implements PracticeSearchService {@Autowiredprivate PracticeSearchMapper practiceSearchMapper;/*** 根据查询参数获取实践搜索记录的数量。** @param param 实践搜索的参数对象，用于指定查询条件。* @return 返回实践搜索记录的总数。*/@Overridepublic Integer selectRecordCount(PracticeSearchRecordsParam param) {// 调用实践搜索Mapper接口，根据参数查询实践搜索记录的数量List<PracticeSearchVO> list = practiceSearchMapper.selectRecordCount(param);// 记录查询到的记录数，用于日志记录和问题排查log.info("查询记录数 === " + list.size());// 返回查询到的记录数return list.size();}/*** 根据实践搜索参数查询所有记录。** @param practiceSearchListParam 实践搜索列表参数，包含分页和过滤条件。* @return 返回符合条件的实践搜索结果列表。*/@Overridepublic List<PracticeSearchVO> selectAllRecords(PracticeSearchListParam practiceSearchListParam) {// 获取分页大小Integer pageSize = practiceSearchListParam.getPageSize();// 获取当前页码Integer currentPage = practiceSearchListParam.getCurrentPage();// 计算数据库查询的起始位置，以实现分页查询 (前端传过来的页码是从第一页开始的所以currentPage要减 1,数据库分页是从第 0 页开始)currentPage = (currentPage - 1) * (pageSize - 1);// 更新当前页码，用于后续的分页处理practiceSearchListParam.setCurrentPage(currentPage);// 日志记录查询的分页信息log.info("pageSize === {} currentPage === {}", pageSize, currentPage);// 调用Mapper查询所有符合条件的记录List<PracticeSearchVO> list = practiceSearchMapper.selectAllRecords(practiceSearchListParam);// 日志记录查询结果log.info("查询到的所有记录 === {}", list);// 返回查询结果return list;}
}

xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.tedu.search.mapper.PracticeSearchMapper"><select id="selectRecordCount" resultType="cn.tedu.search.pojo.vo.PracticeSearchVO">SELECT r.title_name,r.corporate_name,r.corporate_level,r.photo_show,p.salary,p.welfare,p.job_detail,p.educational_requirements,p.employment_opportunities,c.cover_photo,c.company_sizeFROM recruitment_information rINNER JOIN position_detail p ON r.id = p.recruitment_information_idINNER JOIN company c ON r.company_id = c.idWHERE p.job_type = '实习'<if test="keyword != null and keyword != ''">AND (r.title_name LIKE CONCAT('%', #{keyword}, '%')OR r.corporate_name LIKE CONCAT('%', #{keyword}, '%')OR p.job_detail LIKE CONCAT('%', #{keyword}, '%'))</if><if test="internshipMonthDuration != null and internshipMonthDuration != ''">AND p.internship_month_duration = #{internshipMonthDuration}</if><if test="educationalRequirements != null and educationalRequirements != ''">AND p.educational_requirements = #{educationalRequirements}</if><if test="employmentOpportunities != null and employmentOpportunities != ''">AND p.employment_opportunities = #{employmentOpportunities}</if><if test="corporateLevel != null and corporateLevel != ''">AND r.corporate_level = #{corporateLevel}</if><if test="weekDay != null">AND p.week_day = #{weekDay}</if></select><select id="selectAllRecords" resultType="cn.tedu.search.pojo.vo.PracticeSearchVO">SELECT r.title_name,r.corporate_name,r.corporate_level,r.photo_show,p.salary,p.welfare,p.job_detail,p.educational_requirements,p.employment_opportunities,c.cover_photo,c.company_sizeFROM recruitment_information rINNER JOIN position_detail p ON r.id = p.recruitment_information_idINNER JOIN company c ON r.company_id = c.idWHERE p.job_type = '实习'<if test="keyword != null and keyword != ''">AND (r.title_name LIKE CONCAT('%', #{keyword}, '%')OR r.corporate_name LIKE CONCAT('%', #{keyword}, '%')OR p.job_detail LIKE CONCAT('%', #{keyword}, '%'))</if><if test="internshipMonthDuration != null and internshipMonthDuration != ''">AND p.internship_month_duration = #{internshipMonthDuration}</if><if test="educationalRequirements != null and educationalRequirements != ''">AND p.educational_requirements = #{educationalRequirements}</if><if test="employmentOpportunities != null and employmentOpportunities != ''">AND p.employment_opportunities = #{employmentOpportunities}</if><if test="corporateLevel != null and corporateLevel != ''">AND r.corporate_level = #{corporateLevel}</if><if test="weekDay != null">AND p.week_day = #{weekDay}</if>LIMIT #{currentPage},#{pageSize}</select>
</mapper>

注：

使用分页 SQL：

假设 每页显示10条数据

查询第一页的10条记录

select * user limit 0 10 (查询第1条到第10条)

or

select * user limit 10 (查询第1条到第10条)

查询第二页的10条记录

select * user limit 10 10 (查询第11条到第20条)

limit 后面两个参数的具体含义：

LIMIT #{currentPage},#{pageSize}


limit （当前页数）* 每页显示的条数(起始数据条数), 每页最大显示的记录数(从起始数据的下一条开始的偏移量)

在MyBatis中LIMIT之后的语句不允许的变量不允许进行算数运算，会报错。

如：

LIMIT (#{currentPage}-1)*#{pageSize},#{pageSize}; // 错误

LIMIT ${(currentPage-1)*pageSize},${pageSize}; （正确）

总结

  1. 确定好需要显示的条数(total)。
  2. 当前页数(currentPage),可以指定好默认是第0页，本文示例代码是从第1页开始。
  3. 每页显示多少条记录(pageSize ) --- 一开始就要定义不然页面加载数据时候就要报错。
  4. 创建好页面变化时触发的函数 handleChange()，更新点击后的页码。

演示一下最终效果啦！！！

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

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

相关文章

生存人数00

生存人数00

题目链接 生存人数 题目描述 注意点 假设所有人都出生于 1900 年至 2000 年&#xff08;含 1900 和 2000 &#xff09;之间birth[i] < death[i]如果有多个年份生存人数相同且均为最大值&#xff0c;输出其中最小的年份 解答思路 初始想到的是遍历birth&#xff0c;更新…
阅读更多...
B2B领域的客户裂变策略：打造行业内的共赢生态

B2B领域的客户裂变策略：打造行业内的共赢生态

在日益竞争激烈的B2B市场中&#xff0c;客户裂变作为一种高效的增长策略&#xff0c;不仅能够帮助企业快速扩大客户基础&#xff0c;还能促进行业内资源共享与合作&#xff0c;共同构建一个健康、可持续的共赢生态。本文将探讨B2B领域实施客户裂变策略的关键要素&#xff0c;以…
阅读更多...
无障碍全免费上手智能体：Autogen Studio结合Deepseek Coder打造一款AI旅游规划师

无障碍全免费上手智能体：Autogen Studio结合Deepseek Coder打造一款AI旅游规划师

本文的唯一目的是通过打造一款AI旅游规划师&#xff0c;通俗易懂、深入浅出的讲清楚AI应用的大方向-智能体-的原理。 无需科学上网&#xff0c;无需付费API&#xff0c;无需编程能力&#xff0c;一小时即可部署、搭建一款复杂的、多代理交互的AI智能体-旅游规划师&#xff0c;…
阅读更多...
【深度学习】PyTorch深度学习笔记02-线性模型

【深度学习】PyTorch深度学习笔记02-线性模型

1. 监督学习 2. 数据集的划分 3. 平均平方误差MSE 4. 线性模型Linear Model - y x * w 用穷举法确定线性模型的参数 import numpy as np import matplotlib.pyplot as pltx_data [1.0, 2.0, 3.0] y_data [2.0, 4.0, 6.0]def forward(x):return x * wdef loss(x, y):y_pred…
阅读更多...
java入门1.5.0

java入门1.5.0

前言&#xff1a; 在java入门1.4.0中&#xff0c;我们快速构建了一个基于Maven管理的Spring boot3项目&#xff0c;对基本文件结构有了初步的认知&#xff0c;创建了git仓库 正片: 看山是山&#xff0c;看山不是山&#xff0c;看山还是山&#xff0c;下面两段代码很好了验证这…
阅读更多...
vue3项目中浏览器打开本地文档或者下载本地应用的方法（2024-07-11）

vue3项目中浏览器打开本地文档或者下载本地应用的方法（2024-07-11）

在public文件夹下面加入预览的文件【操作说明文档】。 此文件夹不会压缩并且路径不变&#xff0c;所以是最佳的存放文件的位置。 代码&#xff1a; <template><n-icon title"操作文档" style"cursor: pointer;margin-right: 10px;" size"2…
阅读更多...
MATLAB中使用HDL Coder生成HDL代码时的报错整理

MATLAB中使用HDL Coder生成HDL代码时的报错整理

Delay balancing unsuccessful because an extra 4 cycles of latency introduced by optimizations in the feedback loop cannot be offset using design delays for the loop latency budget. 产生原因 由于时序考虑&#xff0c;在每个模块的输出端添加了1到2级的输入输出流…
阅读更多...
深圳比创达｜EMC与EMI测试整改：打造电磁“绿色”产品的必经之路4

深圳比创达｜EMC与EMI测试整改：打造电磁“绿色”产品的必经之路4

深圳比创达&#xff5c;EMC与EMI测试整改&#xff1a;打造电磁“绿色”产品的必经之路 随着电子技术的飞速发展&#xff0c;电子设备在日常生活和工业生产中的应用越来越广泛。然而&#xff0c;这些设备在运行时产生的电磁辐射&#xff08;EMI&#xff09;和对外界电磁干扰的敏…
阅读更多...
java基础复习

java基础复习

初识 JDK&#xff08;开发包&#xff09; JRK&#xff08;运行环境&#xff09; 解释型语言 数据类型&#xff1a; 基本数据类型&#xff1a;byte short int(默认) long float double(默认) char boolean 引用数据类型&#xff1a;类 接口 数组 扩展&#xff1a; BigDecimal…
阅读更多...
从人工巡检到智能预警：视频AI智能监控技术在水库/河湖/水利防汛抗洪中的应用

从人工巡检到智能预警：视频AI智能监控技术在水库/河湖/水利防汛抗洪中的应用

一、背景需求分析 近日&#xff0c;我国多省市遭遇连日暴雨&#xff0c;导致水库、湖泊、河道等水域水位暴涨&#xff0c;城市内涝频发。随着夏季汛期的到来&#xff0c;降雨天气频繁&#xff0c;水利安全管理面临严峻挑战。为保障水库安全、预防和减少洪涝灾害&#xff0c;采…
阅读更多...
MVC分页

MVC分页

public ActionResult Index(int ? page){IPagedList<EF.ACCOUNT> userPagedList;using (EF.eMISENT content new EF.eMISENT()){第几页int pageNumber page ?? 1;每页数据条数&#xff0c;这个可以放在配置文件中int pageSize 10;//var infoslist.C660List.OrderBy(…
阅读更多...
7.11 cf div3 A

7.11 cf div3 A

Problem - A - Codeforces 题目概述 求最少问题数量&#xff0c;以确保能举办m轮比赛&#xff0c;每轮包含一个难度级别为 ‘A’ 到 ‘G’ 的问题。 ac代码 #include<bits/stdc.h> typedef long long ll;#define IOS ios::sync_with_stdio(0),cin.tie(0),cout.tie(0) …
阅读更多...
最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 1.28.2 版本）

最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 1.28.2 版本）

资源列表 操作系统配置主机名IP所需插件CentOS 7.92C4Gk8s-master192.168.60.143flannel-cni-plugin、flannel、coredns、etcd、kube-apiserver、kube-controller-manager、kube-proxy、 kube-scheduler 、containerd、pause 、crictlCentOS 7.92C4Gk8s-node01192.168.60.144f…
阅读更多...
Nodejs 第八十六章（部署pm2)

Nodejs 第八十六章（部署pm2)

Node.js如何部署? 如果要部署Nodejs项目&#xff0c;第一点肯定是需要有台服务器&#xff0c;第二点需要一个部署工具这里使用pm2 PM2 PM2 是一个非常流行的 Node.js 进程管理工具&#xff0c;用于在生产环境中运行和监控 Node.js 应用程序。它提供了多种功能&#xff0c;帮…
阅读更多...
自建邮局服务器相比云邮箱有哪些优势特性？

自建邮局服务器相比云邮箱有哪些优势特性？

自建邮局服务器如何配置&#xff1f;搭建自建邮局服务器的技术&#xff1f; 尽管云邮箱服务提供了便捷和低成本的解决方案&#xff0c;自建邮局服务器依然具有许多独特的优势和特性&#xff0c;吸引了众多企业和组织。AokSend将深入探讨自建邮局服务器相比云邮箱的主要优势。 …
阅读更多...
BigMarket-基础层持久化数据库

BigMarket-基础层持久化数据库

需求 工程对接数据库 图例 结构说明 app-主要用于启动&#xff0c;没有业务逻辑 domain-业务逻辑&#xff0c;如积分的兑换&#xff0c;抽奖&#xff0c; infrastructure-基础层&#xff0c;技术支持&#xff0c;数据服务数据持久化&#xff1a;MySQL&#xff0c;redis&am…
阅读更多...
「51媒体」能否提供一份成功邀约媒体的技巧？

「51媒体」能否提供一份成功邀约媒体的技巧？

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传加速季&#xff0c;100万补贴享不停&#xff0c;一手媒体资源&#xff0c;全国100城线下落地执行。详情请联系胡老师。 成功邀约媒体的技巧涉及多个方面&#xff0c;包括了解媒体…
阅读更多...
hyperworks软件许可优化解决方案

hyperworks软件许可优化解决方案

Hyperworks软件介绍 Altair 仿真驱动设计改变了产品开发&#xff0c;使工程师能够减少设计迭代和原型测试。提升科学计算能力扩大了应用分析的机会&#xff0c;使大型设计研究能够在限定的项目时间完成。现在&#xff0c;人工智能在工程领域的应用再次改变了产品开发。基于物理…
阅读更多...
从源码到上线：互联网医院系统与医疗陪诊APP的开发全程解析

从源码到上线：互联网医院系统与医疗陪诊APP的开发全程解析

今天&#xff0c;笔者将详细解析从源码到上线的整个开发过程&#xff0c;帮助读者了解如何构建一个功能完善、用户体验良好的互联网医院系统与医疗陪诊APP。 一、项目启动与需求分析 1、需求分析 对于互联网医院系统&#xff0c;需求通常包括预约挂号、在线问诊、电子处方、…
阅读更多...
Figma中文网？比Figma更懂你的神秘网站！

Figma中文网？比Figma更懂你的神秘网站！

Figma奠定了在线UI设计工具的基本形式&#xff0c;许多国内设计师都在使用Figma。在本文中&#xff0c;我们将解密国内大型设计师使用的Figma灵魂合作伙伴&#xff0c;被称为Figma中文网络的即时设计资源社区。Figma中文网络UI设计工具的魅力是什么&#xff1f;让我们一起看看吧…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023