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

9.翻页器组件设计开发与应用（Vue父子组件通信）

news 来源：原创 2025/8/25 3:25:05

翻页器组件设计开发与使用

写在前面
el-pagination分页器的用法
- 用法介绍
- 实战案例
- 实现代码
Vue中的父子组件用法与通信
- 何谓父子组件
- 搭建Paginator.vue子组件
- - 组件初步搭建
  - 父组件向子组件传参通信
  - 子组件向父组件通信
- 最终代码
- - Index.vue
  - Paginator.vue
总结

欢迎加入Gerapy二次开发教程专栏！
本专栏专为新手开发者精心策划了一系列内容，旨在引领你深入探索Gerapy框架的二次迭代之旅。
本专栏将全面剖析Gerapy与Vue的源码架构，让你从内部了解它们的运作机制。
我们将分享实用的技巧，教你如何有效修复Gerapy中的异常问题，如何在现有基础上添加多样化的功能，以及如何对已有功能进行重构优化。

写在前面

读完本篇博客你可以学习到的知识：

了解Vue中el-pagination分页器的用法
了解Vue中的父子组件用法与通信

el-pagination分页器的用法

用法介绍

当数据量过多时，我们就需要使用分页分解数据了，不然影响页面美观和用户体验。Vue提供了el-pagination标签，帮我们设计好了样式，我们只要传入配置参数即可实现各种样式的分页效果。

这是Element Plus官网下的展示出来的模板效果，这里我们会使用其中一种实现分页器，更多样式和细节大家可以去看官方提供的文档：Pagination 分页

在这里插入图片描述

实战案例

这是我们想要实现的翻页器，它涵盖几种功能：

总条数
每页展示条数切换
左右翻页
跳转翻页

在这里插入图片描述

实现代码

基本上就是这些控制参数了，用法很简单，就是实际应用时需要实现动态传值，这个下面讲解。

<el-paginationclass="paginator_container":current-page="1"  // 当前页:page-size="10"  // 每页条数:page-sizes="[10, 20, 30, 50, 100]"  // 可切换的每页条数列表:size="size":disabled="disabled":background="background"layout="->,total, sizes, prev, pager, next, jumper"  // 布局样式，想要展示的样式:total="100"  // 总条数
/>

Vue中的父子组件用法与通信

何谓父子组件

其实就是在A.vue中导入并应用了B.vue时，B.vue就是A.vue的子组件了，这种常用于抽离公共代码。一般情况下子组件都是存放在components目录的，相当于公共组件。

在这里插入图片描述

如果是特定场景下使用时，也可以跟父组件一个目录，就跟任务管理专栏下的Substance.vue一样，它就是子组件。

在这里插入图片描述

搭建Paginator.vue子组件

下面我们利用实际业务来了解父子组件用法与通信

组件初步搭建

在components目录下新增Paginator.vue文件，代码如下：

在这里插入图片描述

然后在用户管理专栏导入进去，也就是account/Index.vue处导入，导入方式如下：

在这里插入图片描述

必须配好这三步才能生效，然后打包Vue代码，刷新浏览器页面，这样就初步搭建好了。

在这里插入图片描述

前面我们是写死了总条数、当前页以及每页条数，很明显这是不可能写死的，这里有两个功能需要实现：

子组件需要支持总条数、当前页以及每页条数这三个动态传参，可以给定一个默认值，最终值由父组件传值；
当我们切换每页条数或者页码时，需要实时请求接口拿到对应页码与页条数的数据，这样就需要父组件知道子组件变更了，这里要明确一点，不能在子组件实现接口请求，它是公共的。

父组件向子组件传参通信

首先需要在子组件定义它允许接收的参数及其数据类型与默认值，必须在props下定义。

在这里插入图片描述

然后我们就能直接调用这几个参数了，这里我们设置了默认值，所以父组件可以针对字段传值。

在这里插入图片描述

而父组件需要在调用子组件时设置好参数值

在这里插入图片描述

打包Vue代码，刷新浏览器页面看看效果，其实这里就已经打通了，因为我们前面在请求接口后已经把总条数结果赋值给对应参数了。

在这里插入图片描述

子组件向父组件通信

这里需要用到this.$emit，它能实现子组件向父组件通信，调用时第一参数需要指明event name，也就是父组件要接收对应的事件才能通信。el-pagination提供了size-change和current-change两个参数用来触发页数大小和页码变更事件，用法如下：

在这里插入图片描述

然后父组件也要定义方法来接收事件

在这里插入图片描述

打包Vue代码，刷新浏览器页面看看效果，这样就完成了。

在这里插入图片描述

最终代码

Index.vue

<template><div class="panel"><panel-title :title="$lang.objects.accounts"><!--新增按钮实现--><router-link :to="{ name: 'accountCreate' }" tag="span"><el-button size="mini" type="success"><i class="fa fa-plus"></i>{{ $lang.buttons.create }}</el-button></router-link></panel-title><div class="panel-body"><!--遍历accounts--><el-tablev-loading="loading":data="accounts":element-loading-text="$lang.messages.loading":empty-text="$lang.messages.noData":style="{ width: '100%;' }"><!--各字段呈现实现--><el-table-column:label="$lang.columns.username"align="center"prop="username"min-width="30%"></el-table-column><el-table-column:label="$lang.columns.email"align="center"prop="email"min-width="30%"></el-table-column><el-table-column :label="$lang.columns.is_superuser" align="center" min-width="30%"><template slot-scope="props"><span v-if="props.row.is_superuser"><el-button icon="el-icon-check" round size="mini" type="primary"></el-button></span><span v-else><el-button icon="el-icon-close" round size="mini" type="primary"></el-button></span></template></el-table-column><el-table-column :label="$lang.columns.is_staff" align="center" min-width="30%"><template slot-scope="props"><span v-if="props.row.is_staff"><el-button icon="el-icon-check" round size="mini" type="primary"></el-button></span><span v-else><el-button icon="el-icon-close" round size="mini" type="primary"></el-button></span></template></el-table-column><el-table-column :label="$lang.columns.is_active" align="center" min-width="30%"><template slot-scope="props"><span v-if="props.row.is_active"><el-button icon="el-icon-check" round size="mini" type="primary"></el-button></span><span v-else><el-button icon="el-icon-close" round size="mini" type="primary"></el-button></span></template></el-table-column><el-table-column:label="$lang.columns.date_joined"align="center"prop="date_joined"min-width="30%"></el-table-column><el-table-column:label="$lang.columns.last_login"align="center"prop="last_login"min-width="30%"></el-table-column><!--isSupperUserLogin标识超级管理员身份--><el-table-column v-if="isSupperUserLogin" :label="$lang.columns.operations" align="center" min-width="50%"><template slot-scope="props"><router-link :to="{ name: 'accountEdit', params: { id: props.row.id } }" tag="span"><!--指定列跳转编辑页--><el-button size="mini" type="info"><i class="fa fa-edit"></i>{{ $lang.buttons.edit }}</el-button></router-link><!--指定列删除--><el-button size="mini" type="danger" @click="onSingleDelete(props.row.id)"><i class="fa fa-remove"></i>{{ $lang.buttons.delete }}</el-button></template></el-table-column></el-table></div><paginator:current_page="currentPage":page_size="pageSize":total_count="totalCount"@size-change-sent="handleSizeChange"@current-change-sent="handleCurrentChange"></paginator></div>
</template>
<script type="text/javascript">
import PanelTitle from "../../components/PanelTitle";
import Paginator from "../../components/Paginator";export default {data() {return {accounts: [],  // 用户数据列表loading: true,  // 加载中isSupperUserLogin: true,  // 是否是超级管理员身份totalCount: 0,  // 用户数据总数currentPage: 1,  // 当前页码pageSize: 10,  // 页数};},components: {PanelTitle,Paginator,},created() {// 页面创建时请求数据this.getAccountData(this.currentPage, this.pageSize);},methods: {// 请求用户数据getAccountData(current_page, page_size) {this.loading = true;this.$http.get(this.$store.state.url.account.list, {'params': {pageSize: page_size,currentPage: current_page,}}).then(({data: data}) => {this.accounts = data['rows'];this.totalCount = data['count'];this.isSupperUserLogin = data['is_superuser'];this.loading = false;}).catch(() => {this.loading = false;});},// 删除指定用户deleteAccount(id) {this.$http.post(this.formatString(this.$store.state.url.account.remove, {id: id,})).then(() => {this.$message.success(this.$store.getters.$lang.messages.successDelete);this.loading = false;this.getAccountData(this.currentPage, this.pageSize);}).catch(() => {this.$message.error(this.$store.getters.$lang.messages.errorDelete);this.loading = false;});},// 提交删除用户onSingleDelete(id) {this.$confirm(this.$store.getters.$lang.messages.confirm,this.$store.getters.$lang.buttons.confirm,{confirmButtonText: this.$store.getters.$lang.buttons.yes,cancelButtonText: this.$store.getters.$lang.buttons.no,type: "warning",}).then(() => {this.deleteAccount(id);});},handleSizeChange(val) {this.pageSize = val;this.getAccountData(this.currentPage, this.pageSize);},handleCurrentChange(val) {this.currentPage = val;this.getAccountData(this.currentPage, this.pageSize);},},
};
</script>

Paginator.vue

<template><el-paginationclass="paginator_container":current-page="current_page":page-size="page_size":page-sizes="[10, 20, 30, 50, 100]":size="size":disabled="disabled":background="background"layout="->,total, sizes, prev, pager, next, jumper":total="total_count"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>
</template>
<script>
export default {name: "Paginator",props: {total_count: {type: Number,default: 10,},current_page: {type: Number,default: 1,},page_size: {type: Number,default: 10,},},data() {return {}},methods: {handleSizeChange(val) {this.$emit('size-change-sent', val);},handleCurrentChange(val) {this.$emit('current-change-sent', val);},},
}
</script><style>.paginator_container {padding-bottom: 30px;padding-right: 30px;
}</style>

总结

到这里我们就掌握了组件开发了，其实到这里大家已经有能力按照自己的想法去二次开发了，加油，各位~

9.翻页器组件设计开发与应用（Vue父子组件通信）

翻页器组件设计开发与使用写在前面el-pagination分页器的用法用法介绍实战案例实现代码 Vue中的父子组件用法与通信何谓父子组件搭建Paginator.vue子组件组件初步搭建父组件向子组件传参通信子组件向父组件通信最终代码Index.vuePaginator.vue 总结欢迎加入Gerapy二次开发教…...

编程日记 2025/8/25 3:25:05

MyBatis-Flex关联查询

MyBatis-Flex关联查询在 MyBatis-Flex 中，我们内置了 3 种方案，帮助用户进行关联查询，比如一对多、一对一、多对一、多对多等场景，他们分别是： 方案1：Relations 注解方案2：Field Query方案3…...

编程日记 2025/8/25 0:49:18

Lucene.Net 分词器选择指南：盘古分词 vs 结巴分词

文章目录前言一、核心特性对比二、典型场景推荐1. 选择盘古分词的场景2. 选择结巴分词的场景三、关键指标实测对比1. 分词质量测试（F1值）2. 性能测试（单线程） 四、如何选择？决策树五、进阶优化建议1. 盘古分词优化方…...

编程日记 2025/8/25 3:25:04

YOLOv11实战电力设备缺陷检测

本文采用YOLOv11作为核心算法框架，结合PyQt5构建用户界面，使用Python3进行开发。YOLOv11以其高效的实时检测能力，在多个目标检测任务中展现出卓越性能。本研究针对电力设备缺陷数据集进行训练和优化，该数据集包含丰富的电力设备缺…...

编程日记 2025/8/25 3:22:53

LINUX 5 vim cat zip unzip

dd u撤销 ctrlr取消撤销 q!刚才的操作不做保存刚才是编辑模式现在是可视化模式多行注释...

编程日记 2025/8/19 23:40:21

Redis的常见命令

Redis的常见命令官方命令文档：https://redis.io/docs/latest/commands/ 文章目录 Redis的常见命令Redis数据结构介绍Redis通用命令1.String类型2.Hash类型3.List类型List类型的常见命令：利用List结构实现：栈、队列、阻塞队列： 4.…...

编程日记 2025/8/25 3:25:05

LeetCode第131题_分割回文串

LeetCode 第131题：分割回文串题目描述给你一个字符串 s，请你将 s 分割成一些子串，使每个子串都是回文串。返回 s 所有可能的分割方案。回文串是正着读和反着读都一样的字符串。难度中等题目链接点击在LeetCode中查看题目示…...

编程日记 2025/8/20 18:05:22

网络钓鱼攻击的威胁和执法部门的作用（第一部分）

在当今的数字世界中，网络犯罪分子不断开发新技术来利用个人、企业和政府机构。最普遍和最具破坏性的网络犯罪形式之一是网络钓鱼——一种社会工程手段，用于欺骗人们提供敏感信息，例如登录凭据、财务数据和个人详细信息。随着网络钓鱼攻击…...

编程日记 2025/8/23 16:08:01

用Scala玩转Flink：从零构建实时处理系统

大家好！欢迎来到 Flink 的奇妙世界！如果你正对实时数据处理充满好奇，或者已经厌倦了传统批处理的漫长等待，那么你找对地方了。本系列文章将带你使用优雅的 Scala 语言，一步步掌握强大的流处理引擎——Apache Flink。今…...

编程日记 2025/8/25 3:22:54

【LeetCode】算法详解#3 ---最大子数组和

1.题目介绍给定一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。子数组是数组中的一个连续部分。 1 < nums.length < 105-104 < nums[i] < 104 2.解决思路要求出…...

编程日记 2025/8/19 21:24:37

基于Python的心衰疾病数据可视化分析系统

【Python】基于Python的心衰疾病数据可视化分析系统 （完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介本项目基于Python开发，重点针对5000条心衰疾病患者的数据进行可视化分析&#…...

编程日记 2025/8/25 3:23:45

为了清理数据，往往需要删除一些分区简单查看当前分区附件 --创建测试表 -- drop table test_part purge;CREATE TABLE test_part (sales_id NUMBER,sale_date DATE,amount NUMBER ) PARTITION BY RANGE (sale_date) INTERVAL (INTERVAL 1 MONTH) -- 每个月创建…...

编程日记 2025/8/21 9:08:44

Android Compose入门和基本使用

文章目录一、Jetpack Compose 介绍Jetpack Compose是什么Composable 函数命令式和声明式UI组合和继承二、状态管理什么是状态Stateremember状态提升三、自定义布局Layout ModifierLayout Composable固有特性测量使用内置组件固有特性测量自定义固有特性测量四、项目中使用J…...

编程日记 2025/8/24 1:48:57

xLua的Lua调用C#的2，3，4

使用Lua在Unity中创建游戏对象，组件： 相关代码如下： Lua --Lua实例化类 --C# Npc objnew Npc() --通过调用构造函数创建对象 local objCS.Npc() obj.HP100 print(obj.HP) local obj1CS.Npc("admin") print(obj1.Name)--表方法希…...

编程日记 2025/8/20 1:19:24

使用 Python 连接 PostgreSQL 数据库，从 `mimic - III` 数据库中筛选数据并导出特定的数据图表

要使用 Python 连接 PostgreSQL 数据库，从 mimic - III 数据库中筛选数据并导出特定的数据图表，你可以按照以下步骤操作： 安装所需的库：psycopg2 用于连接 PostgreSQL 数据库，pandas 用于数据处理，matplot…...

编程日记 2025/8/19 8:40:42

算法刷题记录——LeetCode篇(2.6) [第151~160题](持续更新)

更新时间：2025-04-06 算法题解目录汇总：算法刷题记录——题解目录汇总技术博客总目录：计算机技术系列博客——目录页优先整理热门100及面试150，不定期持续更新，欢迎关注！ 152. 乘积最大子数组给你一个…...

编程日记 2025/8/21 18:09:24

Dijkstra求最短路径问题（优先队列优化模板java）

首先 1. 主类定义与全局变量 public class Main {static int N 100010; // 最大节点数static int INF Integer.MAX_VALUE; // 无穷大static ArrayList<Pair>[] G new ArrayList[N]; // 邻接表存储图static int[] dis new int[N]; // 存储每个节点的最短…...

编程日记 2025/8/23 1:26:54

【软件测试】性能测试 —— 基础概念篇

🥰🥰🥰来都来了，不妨点个关注叭！ 👉博客主页：欢迎各位大佬!👈 本期内容主要介绍性能测试相关知识，首先我们需要了解性能测试是什么，本期内容主要介绍性能测试…...

编程日记 2025/8/20 8:16:12

Jmeter脚本使用要点记录

一，使用Bean shell获取请求响应的数据 byte[] result prev.getResponseData(); String str new String(result); System.out.println(str);其中，prev是jmeter的内置变量，直接使用即可。二，不同的流程中传参数 vars.put(&quo…...

编程日记 2025/8/25 3:25:03

HTML5

HTML5是对HTML标准的第5次修订 HTML是超文本标记语言的简称，是为【网页创建和其它可在网页浏览器中所看到信息】而设计的一种标记性语言。 H5优点：跨平台使用将互联网语义化，更好地被人类与机器所理解降低了对浏览器的依赖，更好地…...

编程日记 2025/8/19 10:20:37

算法—博弈问题

1.博弈问题 1.前提:每一步都是最优解的情况下，先手的那个人已经确定了胜负用dp数组记录每一步操作后的结果，如果下一步会出现必输结果，那么说明执行这步操作的人必胜，因为必输结果的下一步操作后都是必胜的结果，所以在…...

编程日记 2025/8/21 19:07:49

vector模拟实现（2）

1.构造函数 2.拷贝构造我们利用push_back和reserve来实现拷贝构造。 3.迭代器的实现由于底层是一段连续的空间，所以我们选择用指针来实现迭代器。 4.swap 这里的swap函数是有两种方法，一种是开辟一段新的空间，然后memcpy来把原来的数据拷…...

编程日记 2025/8/25 3:24:24

【嵌入式系统设计师】知识点：第3章嵌入式硬件设计

提示：“软考通关秘籍” 专栏围绕软考展开，全面涵盖了如嵌入式系统设计师、数据库系统工程师、信息系统管理工程师等多个软考方向的知识点。从计算机体系结构、存储系统等基础知识，到程序语言概述、算法、数据库技术（包括关系数据库、非关系型数据库、SQL 语言、数据仓库等）…...

编程日记 2025/8/21 8:10:33

输入框输入数字且保持精度

在项目中如果涉及到金额等需要数字输入且保持精度的情况下，由于输入框是可以随意输入文本的，所以一般情况下可能需要监听输入框的change事件，然后通过正则表达式去替换掉不匹配的文本部分。由于每次文本改变都会被监听，包括替换…...

编程日记 2025/8/25 3:25:03

Vue3中的Inject用法全解析

大家好呀～今天给大家带来一个超级实用的Vue3技巧：如何使用inject进行组件间的通信！如果你对组件间的数据传递、事件触发感兴趣，那一定不要错过这篇文章哦！话不多说，直接开整～ 🌟 什么…...

编程日记 2025/8/25 3:22:19

FPGA同步复位、异步复位、异步复位同步释放仿真

FPGA同步复位、异步复位、异步复位同步释放仿真 xilinx VIVADO仿真行为仿真综合后功能仿真，综合后时序仿真实现后功能仿真，实现后时序仿真目录前言一、同步复位二、异步复位三、异步复位同步释放总结前言本文将详细介绍FPGA同步复位、异…...

编程日记 2025/8/25 3:22:55

深度解析需求分析：理论、流程与实践

深度解析需求分析：理论、流程与实践一、需求分析的目标（一）准确捕捉用户诉求（二）为开发提供清晰指引二、需求分析流程（一）需求获取（二）需求整理（三&#xf…...

编程日记 2025/8/22 5:12:27

QT学习笔记4--事件

1. 鼠标事件 1.1 鼠标按下 QObject中的mousePressEvent()方法在子类中重写该方法，就可以处理鼠标按下 void myLabel::mousePressEvent(QMouseEvent *ev) {if (ev->button() Qt::LeftButton) {QString str QString("mouse press x %1, y %2").…...

编程日记 2025/8/23 5:01:09

AnimateCC基础教学：json数据结构的测试

一.核心代码: const user1String {"name": "张三", "age": 30, "gender": "男"}; const user1Obj JSON.parse(user1String); console.log("测试1:", user1Obj.name, user1Obj.age, user1Obj.gender);/*const u…...

编程日记 2025/8/25 3:22:52

针对Qwen-Agent框架的源码阅读与解析：FnCallAgent与ReActChat篇

在《针对Qwen-Agent框架的Function Call及ReAct的源码阅读与解析：Agent基类篇》中，我们已经了解了Agent基类的大体实现。这里我们就再详细学习一下FnCallAgent类和ReActChat的实现思路，从而对Agent的两条主流技术路径有更深刻的了解。同时&am…...

编程日记 2025/8/21 4:35:50

在docker中安装RocketMQ

第一步你需要有镜像包，这个2023年的时候docker就不能用pull拉取镜像了，需要你自己找第二步我用的是FinalShell,用别的可视化界面也用， 在你自己平时放镜像包的地方创建一个叫rocketmq的文件夹，放入镜像包后，创建一个…...

编程日记 2025/8/20 1:19:26

Spring Boot + Kafka 消息队列从零到落地

背景依赖 <dependency> <groupId>org.springframework.kafka</groupId> <artifactId>spring-kafka</artifactId> <version>2.8.1</version> </dependency> 发送消息 //示例： private final KafkaTemplate<St…...

编程日记 2025/8/20 10:49:15

《打破语言壁垒：bilingual_book_maker 让外文阅读更轻松》

在寻找心仪的外文电子书时，常常会因语言障碍而感到困扰。虽然可以将文本逐段复制到在线翻译工具中，但这一过程不仅繁琐，还会打断阅读的连贯性，让人难以沉浸其中。为了克服这一难题，我一直在寻找一种既能保留原文&#…...

编程日记 2025/8/18 0:36:12

JCR一区文章，壮丽细尾鹩莺算法Superb Fairy-wren Optimization-附Matlab免费代码

本文提出了一种新颖的基于群体智能的元启发式优化算法——壮丽细尾鹩优化算法（SFOA）,SFOA从精湛的神仙莺的生活习性中汲取灵感。融合了精湛的神仙莺群体中幼鸟的发育、繁殖后鸟类喂养幼鸟的行为以及它们躲避捕食者的策略。通过模拟幼鸟生长、繁殖和摄食阶…...

编程日记 2025/8/21 15:23:05

Kafka 如何实现 Exactly Once

Kafka 中实现 Exactly Once Semantics（EOS，精确一次语义），是为了确保： 每条消息被处理一次且仅一次，既不会丢失，也不会重复消费。这是一种在分布式消息系统中非常难实现的语义。Kafka 从 0.11 …...

编程日记 2025/8/20 12:35:43

在K8S中，内置的污点主要有哪些？

在Kubernetes (K8S)中，内置的污点（Taints）主要用于自动化的节点亲和性和反亲和性管理。当集群中的节点出现某种问题或满足特定条件时，kubelet会自动给这些节点添加内置污点。以下是一些常见的内置污点： node.kubernete…...

编程日记 2025/8/24 2:05:06

AI大模型：（二）2.1 从零训练自己的大模型概述

目录 1. 分词器训练 1.1 分词器概述 1.2 训练简述 2.预训练 2.1 预训练概述 2.2 预训练过程简介 3.微调训练 3.1 微调训练概述 3.2 微调过程简介 4.人类对齐 4.1 人类对齐概述 4.2 人类对齐训练过程简介近年来，大语言模型（LLM）如GPT-4、Claude、LLaMA等…...

编程日记 2025/8/24 1:47:09

电动垂直起降飞行器（eVTOL）

电动垂直起降飞行器（eVTOL）的详细介绍，涵盖定义、技术路径、应用场景、市场前景及政策支持等核心内容： 一、定义与核心特性 eVTOL（Electric Vertical Take-off and Landing）即电动垂直起降飞行器&#xf…...

编程日记 2025/8/23 10:46:31

LM Studio本地部署大模型

现在的AI可谓是火的一塌糊涂, 看到使用LM Studio部署本地模型非常的方便, 于是我也想在自己的本地试试 LM Studio 简介 LM Studio 是一款专为本地运行大型语言模型（LLMs）设计的桌面应用程序，支持 Windows 和 macOS 系统。它允许用户在个人电…...

编程日记 2025/8/24 9:12:04

PyTorch 深度学习 || 6. Transformer | Ch6.1 Transformer 框架

1. Transformer 框架...

编程日记 2025/8/17 22:30:54

SLAM文献之-SLAMesh: Real-time LiDAR Simultaneous Localization and Meshing

SLAMesh 是一种基于 LiDAR 的实时同步定位与建图（SLAM）算法，其核心创新点在于将定位与稠密三维网格重建相结合，通过动态构建和优化多边形网格（Mesh）来实现高精度定位与环境建模。以下是其算法原理的详细解析…...

编程日记 2025/8/24 6:52:23

[Python] 位置相关的贪心算法-刷题+思路讲解版

位置贪心-题目目录例题1 - 香蕉商人编程实现输入描述输出描述思路AC代码例题2 - 分糖果编程实现输入描述输入样例输出样例思路AC代码例题4 - 分糖果II编程实现输入描述输出描述输入样例思路AC代码例题3 - 分糖果III编程实现输入描述输出描述输入样例输出样例思路AC代码例题…...

编程日记 2025/8/21 5:11:55

练习题：125

目录 Python题目题目题目分析需求理解关键知识点实现思路分析代码实现代码解释导入 random 模块： 指定范围： 生成随机整数： 输出结果： 运行思路结束语 Python题目题目生成一个指定范围内的随机整数。 …...

编程日记 2025/8/22 9:50:43

实战设计模式之迭代器模式

概述与上一篇介绍的解释器模式一样，迭代器模式也是一种行为设计模式。它提供了一种方法来顺序访问一个聚合对象中的各个元素，而无需暴露该对象的内部表示。简而言之，迭代器模式允许我们遍历集合数据结构中的元素，而不必了解这些集…...

编程日记 2025/8/21 16:17:11

Spring-AOP详解(AOP概念，原理，动态代理，静态代理)

目录什么是AOP：Spring AOP核心概念需要先引入AOP依赖：1.切点(Pointcut)：2.连接点：3.通知(Advice)：4.切面： 通知类型：Around:环绕通知，此注解标注的通知方法在目标方法前&#xff0c…...

编程日记 2025/8/21 16:17:45

【dify应用】将新榜排行数据免费保存到飞书表格

新榜中导出数据是收费的，如何免费导出呢接口分析切换分类排行，数据是在这个接口中请求的参数： {"rankType":1,"rankDate":"2025-04-05","type":["财富"],"size":25,"…...

编程日记 2025/8/23 15:23:33

【Linux】线程池详解及基本实现

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/8/21 20:36:48

基于论文的大模型应用：基于SmartETL的arXiv论文数据接入与预处理（一）

1. 背景 arXiv简介（参考DeepSeek大模型生成内容）： arXiv（发音同“archive”，/ˈɑːrkaɪv/）是一个开放的学术预印本平台，主要用于研究人员分享和获取尚未正式发表或已完成投稿的学术论文。创…...

编程日记 2025/8/20 4:37:13

Leetcode 3508. Implement Router

Leetcode 3508. Implement Router 1. 解题思路2. 代码实现题目链接：3508. Implement Router 1. 解题思路这一题就是按照题意写作一下对应的函数即可。我们需要注意的是，这里，定义的类当中需要包含以下一些内容： 一个所有i…...

编程日记 2025/8/23 20:52:30

Nmap全脚本使用指南！NSE脚本全详细教程！Kali Linux教程！（六）

脚本类别 discovery（发现） sip-methods 已演示过。这里不再演示。 436. smb-enum-domains 尝试枚举系统上的域及其策略。这通常需要凭据，但 Windows 2000 除外。除了实际域之外，通常还会显示“内置”域。Windows 在域列表中返…...

编程日记 2025/8/20 7:45:58

翻页器组件设计开发与使用

写在前面

el-pagination分页器的用法

用法介绍

实战案例

实现代码

Vue中的父子组件用法与通信

何谓父子组件

搭建Paginator.vue子组件

组件初步搭建

父组件向子组件传参通信

子组件向父组件通信

最终代码

Index.vue

Paginator.vue

总结

相关文章：