笔记day7
文章目录
- 1 分页功能实现
- 2 分页器的展示需要哪些数据(条件)?
- 3 自定义分页器
- 4 分页器存在问题
- 5 分页器动态展示
- 6 开发某一个商品的详情页面
1 分页功能实现
- 为什么很多项目采用分页功能,比如电商平台同时展示的数据有很多(1万+),采用分页功能。
- ElementUI是有相应的分页组件,使用起来超级简单,但是咱们前台项目目前不用【掌握自定义分页功能】。
2 分页器的展示需要哪些数据(条件)?
- 需要知道当前是第几个:pageNo字段代表当前页数。
- 需要知道每一个需要展示多少条数据:pageSize字段代表。
- 需要知道整个分页器一共有多少条数据:total字段进行代表【获取另外一种信息】。
- 需要知道分页器连续页面个数:5|7【奇数】,因为奇数对称(好看)。
-
总结:对于分页器而言,自定义的前提是需要知道四个前提条件:
- pageNo:当前第几个。
- pageSize:每一页展示多少条数据。
- total:整个分页一共要展示多少条数据。
- continues:分页连续的页码个数。
-
举例子:每一页3条数据,一共90条数据【一共是30页】。
-
举例子:每一页3条数据,一共91条数据【一共是31页】。
3 自定义分页器
- 在开发的时候先传递自己假的数据进行调试,调试成功以后再用服务器数据。
4 分页器存在问题
-
对于分页器而言,很重要的一个地方即为【算出:连续页面起始数字和结束数字】:pageNo - 2, pageNo, pageNo + 2。
-
当前是第8页(当前页永远在中间)
6 7 8 9 10
当前是第15页
13 14 15 16 17
当前是第20页
18 19 20 21 22
当前是第8页,连续页码5页
6 7 8 9 10
当前是第8页,连续页码7页
5 6 7 8 9 10 11 -
前提:分页器数字没有0,也没有负数
-
当前页第1页
1 2 3 4 5 【-1 0 1 2 3(错误)】
当前页第2页
1 2 3 4 5 【0 1 2 3 4(错误)】
当前页第31页
27 28 29 30 31 【29 30 31 32 33(错误)】
当前页第30页
27 28 29 30 31 【28 29 30 31 32(错误)】
5 分页器动态展示
- 分页器动态展示:分为上中下【中间部分】。
- v-for:数组|数字|字符串|对象。
6 开发某一个商品的详情页面
- 静态组件(详情页的组件:还没有注册为路由组件)。
- 当点击商品图片的时候,跳转到详情页面,在路由跳转的时候需要带上产品的ID给详情页面。
- 滚动行为。
- API:请求接口。
- vuex:获取产品详情信息。
- vuex还需要再新增一个模块detail。
- 需要回到大仓库中进行合并。
相关文章:
笔记day7
文章目录 1 分页功能实现2 分页器的展示需要哪些数据(条件)?3 自定义分页器4 分页器存在问题5 分页器动态展示6 开发某一个商品的详情页面 1 分页功能实现 为什么很多项目采用分页功能,比如电商平台同时展示的数据有很多…...
106,【6】 buuctf web [SUCTF 2019]CheckIn
进入靶场 文件上传 老规矩,桌面有啥传啥 过滤了<? 寻找不含<?的一句话木马 文件名 123(2).php.jpg 文件内容 GIF89a? <script language"php">eval($_GET[123]);</script> 123即密码,可凭借个人喜好更换 再上传一个文…...
基于Ubuntu2404搭建Zabbix7.2
Zabbix 搭建zabbix zabbix7.2已推出:官网 增加的新功能如下: 1.使用新的热门商品小部件全面概览指标 数据概览小部件已转换为热门项目小部件使用项目模式可以实现细粒度的项目选择利用条形图、指标和迷你图来可视化您的数据定义价值阈值以动态地可视化…...
OPENGLPG第九版学习 - 着色器基础
文章目录 2.1 着色器与OpenGL2.2 0penGL的可编程管线2.3 OpenGL着色语言GLSL概述2.3.1 使用GLSL构建着色器变量的声明变量的作用域变量的初始化构造函数 、 类型转换聚合类型访问向量和矩阵中的元素结构体数组多维数组 2.3.2 存储限制符const 存储限制符in 存储限制符out 存储限…...
Android 使用ExpandableListView时,需要注意哪些细节
1. 布局属性设置 尺寸属性 宽度和高度:要合理设置 android:layout_width 和 android:layout_height 属性。如果设置为 match_parent,它会填满父容器;设置为 wrap_content,则会根据内容自动调整大小。例如,若想让 Exp…...
redis简介及应用
文章目录 1.redis简介2.安装配置2.1 单机部署2.2 配置 3 主从部署4 哨兵部署5.集群部署6.客户端工具 1.redis简介 某些网站出现的问题,如12306、淘宝等… 2.安装配置 2.1 单机部署 安装gcc、关闭防火墙、关闭selinux等 #安装gcc yum -y install gcc #关闭防火墙…...
Electron使用WebAssembly实现CRC-8 MAXIM校验
Electron使用WebAssembly实现CRC-8 MAXIM校验 将C/C语言代码,经由WebAssembly编译为库函数,可以在JS语言环境进行调用。这里介绍在Electron工具环境使用WebAssembly调用CRC-8 MAXIM格式校验的方式。 CRC-8 MAXIM校验函数WebAssembly源文件 C语言实现C…...
人工智能赋能企业系统架构设计:以ERP与CRM系统为例
一、引言 1.1 研究背景与意义 在数字化时代,信息技术飞速发展,人工智能(Artificial Intelligence, AI)作为一项具有变革性的技术,正深刻地影响着各个领域。近年来,AI 在技术上取得了显著突破,…...
NacosRce到docker逃逸实战
NacosRce到docker逃逸实战 1、Nacos Derby Rce打入内存马 这个漏洞的原理大家应该都知道, 2.3.2 < Nacos < 2.4.0版本默认derby接口未授权访问,攻击者可利用未授权访问执行SQL语句加载构造恶意的JAR包导致出现远程代码执行漏洞。 在日常的漏洞挖…...
Linux:文件系统(软硬链接)
目录 inode ext2文件系统 Block Group 超级块(Super Block) GDT(Group Descriptor Table) 块位图(Block Bitmap) inode位图(Inode Bitmap) i节点表(inode Tabl…...
在Spring Cloud中将Redis共用到Common模块
前言 在分布式系统中,共用组件的设计可以极大地提升代码复用性和维护性。Spring Cloud中将Redis共用到一个公共模块(common模块)是一个常见的设计实践,这样可以让多个微服务共享相同的Redis配置和操作逻辑。本文将详细介绍如何在…...
如何解决 Vue 应用中的内存泄漏
如何解决 Vue 应用中的内存泄漏 如何解决 Vue 应用中的内存泄漏常见的内存泄漏原因1. 组件生命周期管理不善2. 闭包引起的引用3. 数据订阅与发布系统4. 第三方库的内存泄漏5. 路由缓存和组件实例堆积排查内存泄漏的工具1. **Chrome DevTools**2. **Firefox Developer Tools**3.…...
什么是物理地址,什么是虚拟地址?
摘要 什么是物理地址,什么是虚拟地址? 如果处理器没有MMU或未启用,CPU执行单元发出的内存地址直接传到芯片引脚上,被内存芯片接受,这称为物理地址(Physical Addraress) 如果处理器启用了MMU&a…...
find 和 filter 都是 JavaScript 数组的常用方法
find 和 filter 都是 JavaScript 数组的常用方法,用来查找符合条件的元素,但它们有一些关键的区别: 1. find 方法 返回值:find 方法返回数组中 第一个符合条件的元素,如果没有找到符合条件的元素,返回 un…...
MVC、MVP和MVVM模式
MVC模式中,视图和模型之间直接交互,而MVP模式下,视图与模型通过Presenter进行通信,MVVM则采用双向绑定,减少手动同步视图和模型的工作。每种模式都有其优缺点,适合不同规模和类型的项目。 ### MVVM 与 MVP…...
基于RTOS的STM32游戏机
1.游戏机的主要功能 所有游戏都来着B站JL单片机博主开源 这款游戏机具备存档与继续游戏功能,允许玩家在任何时候退出当前游戏并保存进度,以便日后随时并继续之前的冒险。不仅如此,游戏机还支持多任务处理,玩家可以在退出当前游戏…...
【CPP】CPP经典面试题
文章目录 引言1. C 基础1.1 C 中的 const 关键字1.2 C 中的 static 关键字 2. 内存管理2.1 C 中的 new 和 delete2.2 内存泄漏 3. 面向对象编程3.1 继承和多态3.2 多重继承 4. 模板和泛型编程4.1 函数模板4.2 类模板 5. STL 和标准库5.1 容器5.2 迭代器 6. 高级特性6.1 移动语义…...
WPF基础03——InitializeComponent()函数解释
总述 InitializeComponent(),是MainWindow中的构造函数,实际写项目过程中,多多少少都会碰到该函数报错的情况,现在对InitializeComponent()做一些理解和说明。 在 WPF 中,XAML 文件和代码后台…...
如何在自己mac电脑上私有化部署deep seek
在 Mac 电脑上私有化部署 DeepSeek 的步骤如下: 1. 环境准备 安装 Homebrew(如果尚未安装): Homebrew 是 macOS 上的包管理工具,用于安装依赖。 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com…...
iOS 老项目适配 #Preview 预览功能
前言 iOS 开发者 最憋屈的就是UI 布局慢,一直以来没有实时预览功能,虽然swiftUI 早就支持了,但是目前主流还是使用UIKit在布局,iOS 17 苹果推出了 #Preview 可以支持UIKit 实时预览,但是仅仅是 iOS 17,老项目怎么办呢?于是就有了这篇 老项目适配 #Preview 预览 的文章,…...
三步突破抖音音乐批量下载难题:douyin-downloader全功能技术指南
三步突破抖音音乐批量下载难题:douyin-downloader全功能技术指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作领域,背景音乐是提升作品感染力的关键元素。然而&…...
QT加载动画卡顿?试试用QMovie+多线程优化你的等待提示框性能
QT加载动画性能优化实战:用QMovie与多线程打造流畅等待体验 当用户点击一个需要长时间处理的按钮时,那个旋转的小圆圈突然卡住不动了——这是许多QT开发者都遇到过的尴尬场景。更糟的是,整个界面随之冻结,用户只能无奈地看着无响应…...
PHP 数组 vs SPL 数据结构:队列与栈场景下的性能对决
PHP 数组 vs SPL 数据结构:队列与栈场景下的性能对决在 PHP 开发中,我们常常面临一个经典的选择:是使用灵活的原生数组(Array)模拟队列/栈,还是使用标准库(SPL)提供的 SplQueue 和 S…...
COMSOL 探索岩石力学多场景:损伤、压裂、试验与模拟
COMSOL岩石损伤、水力压裂、三轴试验 岩石在膨胀剂的膨胀作用下的损伤; 相场法与水力压裂(6个模型); 不固结不排水三轴试验; 二维钻孔封孔效果模拟。在岩石力学领域,COMSOL 如同一个强大的实验室,让我们能够对复杂的岩…...
Wan2.2-T2V-A5B提示词怎么写?新手快速出效果的实用指南
Wan2.2-T2V-A5B提示词怎么写?新手快速出效果的实用指南 1. 认识Wan2.2-T2V-A5B视频生成模型 Wan2.2-T2V-A5B是一款由通义万相开源的轻量级文本到视频生成模型,拥有50亿参数规模。虽然它生成的视频分辨率是480P,但在时序连贯性和运动推理能力…...
Label Studio实战:如何为NLP项目自定义标注模板(含模板代码分享)
Label Studio实战:如何为NLP项目自定义标注模板(含模板代码分享) 在自然语言处理项目中,数据标注的质量往往直接决定模型性能的上限。Label Studio作为当前最主流的开源标注工具之一,其灵活的自定义模板功能让NLP工程师…...
EMI滤波器选型指南:从共模与差模噪声到实际应用场景
1. EMI滤波器的核心作用与选型挑战 刚入行那会儿,我负责的第一个电源项目就栽在了EMI测试上。设备一上电,测试仪器的曲线就像心电图发作似的疯狂跳动。当时 mentor 只说了一句:"去查查共模和差模的区别"。这句话成了我后来十年硬件…...
B端拓客号码核验:困局审视、技术革新与行业前行,氪迹科技法人股东号码核验系统,阶梯式价格
在B端拓客的全流程中,有效触达企业核心决策层是实现合作转化的关键,而法人、股东、董监高等群体的联系方式,則是搭建这一沟通链路的核心基础。号码核验作为拓客工作的前置核心环节,其筛选质量与效率,直接决定着拓客投入…...
基于PSO算法的海陆空多栖无人机路径规划探索
PSO算法,空中机器人路径规划,无人机路径规划 海陆空多栖环境路径规划,考虑海洋和大气中的能源消耗不同,还原环境特性,粒子群PSO算法在如今科技飞速发展的时代,无人机的应用场景越发广泛,从简单的…...
OpenClaw备份策略:GLM-4.7-Flash智能管理本地与云端存储
OpenClaw备份策略:GLM-4.7-Flash智能管理本地与云端存储 1. 为什么需要智能备份方案 上周我的移动硬盘突然罢工,导致三个月的项目文档全部丢失。这次惨痛经历让我意识到:传统备份方式已经无法满足现代工作需求。手动备份不仅耗时耗力&#…...
