《vue3实战》在created生命周期中运用slice()方法结合element plus组件实现电影评价系统的分页


目录

前言

电影评价系统的分页是什么?它具体的作用体现在哪些方面?

一、slice的含义、语法和作用以及created的作用

slice是什么?slice有什么语法?slice的作用体现在哪些方面?

created生命周期的作用:

二、功能实现

以下是在created生命周期的代码和分析:

以下是结合Element plus组件的代码和分析:

三、最终效果图

第一页图:

第二页图:

最后一页图:

四、代码部分(可复制粘贴)

总结


前言

电影评价系统的分页是什么?它具体的作用体现在哪些方面?

含义:

电影评价系统的分页是指将大量的电影评价数据分成多个页面展示,以便用户可以分批次查看和浏览。分页通常通过一页显示多少条数据和提供翻页功能来实现。

作用:

  1. 提高用户体验:当电影评价数据非常庞大时,一次性展示全部数据会导致页面加载缓慢,给用户造成不良体验。通过分页功能,用户可以在不同页面中按需加载和浏览数据,提高整体的用户体验。

  2. 加载时间优化:分页功能将大量的电影评价数据划分成多个页面,每次只加载当前页面的数据,减少了页面加载的数据量,加快了页面加载速度。

  3. 方便筛选和浏览:分页功能使用户可以根据自己的需求,便捷地筛选和浏览电影评价数据。用户可以翻页浏览更多数据,或者跳转到指定页面查看特定范围的数据。

  4. 易于导航:分页功能提供翻页按钮和页码输入框等导航元素,用户可以直观地进行页面导航,快速切换到所需页面。

  5. 数据量控制和性能优化:通过分页功能,可以控制每页显示的数据量,避免一次性加载过多数据而导致系统性能下降,从而保持系统的稳定性和响应性。


一、slice的含义、语法和作用以及created的作用

slice是什么?slice有什么语法?slice的作用体现在哪些方面?

含义:

slice是JavaScript中常用的数组方法之一。它用于创建一个新的数组,其中包含从原始数组中指定位置开始(包括该位置)到结束位置(不包括该位置)的所有元素。

语法:

array.slice(start, end)

其中,start表示开始位置的索引,end表示结束位置的索引(不包括该索引),两个参数均为可选参数。如果不提供start参数,默认从0位置开始;如果不提供end参数,默认到原始数组的末尾。该方法不会修改原始数组,而是返回一个新的数组。

作用:

  1. 提取数组中指定范围的元素,并生成一个新的子数组。
  2. 对数组进行分割,以便进行部分操作或逻辑处理,同时不改变原始数组的结构。
  3. 根据特定条件获取数组的子集。
  4. 对数组的浅拷贝,即创建一个与原始数组相同的新数组。

created生命周期的作用:

created生命周期的作用是在Vue实例创建完成后,可以进行一些初始化的操作,例如数据的请求、监听事件、对数据的处理等。在created生命周期中,Vue实例已经完成了数据观测(data observer)和编译(compile),但是还未进行DOM的挂载(mount),因此无法访问到DOM元素。

在created生命周期中,我们可以进行以下操作:

  1. 初始化数据:在created生命周期中,可以对数据进行初始化操作,例如从服务器获取数据并赋值给data中的某个属性。
  2. 事件监听:在created生命周期中,可以通过on方法监听事件,然后在其他地方通过on方法监听事件,然后在其他地方通过emit方法触发事件。这样可以实现组件之间的通信。
  3. 处理异步操作:在created生命周期中,可以执行一些异步操作,例如请求数据或启动定时器。需要注意的是,如果是异步操作,需要使用Promise或async/await来处理异步回调。
  4. 第三方库的初始化:在created生命周期中,可以初始化一些第三方库,例如初始化地图、图表等插件。
  5. 发送请求:在created生命周期中,可以发送网络请求获取数据,并将数据赋值给data中的某个属性。

二、功能实现

以下是在created生命周期的代码和分析:

分析: 

在created生命周期钩子中,首先将总数据条数赋值给total变量,然后根据用户选择的页面数和每页显示的数据条数,计算出当前页面显示的数据范围,并将这部分数据赋值给pageMess变量。
具体的分页逻辑如下:
1.首先将总数据条数赋值给total变量,用于计算分页的总页数。
2.通过用户选择的页面数和每页显示的数据条数,计算出要显示的数据范围:
使用userPage(表示用户所在的页码)和pageSize(表示每页显示的数据条数)来计算出当前页3面显示的数据的起始位置和结束位置。 
3.起始位置计算公式为 start = (userPage - 1) * pageSize。 
4.结束位置计算公式为 end = userPage * pageSize。

以下是结合Element plus组件的代码和分析:

分析:

1.v-model:current-page=“userForm.page.userPage”:将当前页数与 userForm.page.userPage 进行双向绑定,即当用户改变页数时,userForm.page.userPage 的值也会随之改变。

2.v-model:page-size=“userForm.page.pageSize”:将每页显示的数量与 userForm.page.pageSize 进行双向绑定,即当用户改变每页显示的数量时,userForm.page.pageSize 的值也会随之改变。

3.:small=“true”:设置分页组件为小型样式,显示更紧凑的界面。

4.:background=“true”:将分页组件的背景颜色设置为透明。

5.layout=“prev, pager, next, jumper”:设置分页组件的布局,包括前一页按钮(prev)、页码(pager)、后一页按钮(next)和跳转到指定页的输入框(jumper)。

6.:total=“total”:设置总记录数,用于计算总页数。

通过以上配置,该分页组件就可以实现根据用户操作切换页码和每页显示数量的功能,并且可以显示合适的分页样式。

三、最终效果图

第一页图:

第二页图:

最后一页图:

 

四、代码部分(可复制粘贴)

<div><div class="demo-pagination-block" style="margin-top: -30px"><div class="demonstration"></div><el-paginationv-model:current-page="userForm.page.userPage"v-model:page-size="userForm.page.pageSize":small="true":background="true"layout="prev, pager, next, jumper":total="total"/></div>

 created() {this.total = this.courses.lengthlet start = (this.userForm.page.userPage - 1) * this.userForm.page.pageSize;let end = (this.userForm.page.userPage * this.userForm.page.pageSize);this.pageMess = this.courses.slice(start, end);},

总结

    总的来说,分页功能可以提高用户体验,减少加载时间,方便用户浏览和筛选电影评价数据。

    在电影评价系统中,分页功能可以根据数据库中的电影数据总量,以及每页显示的电影数量,计算出总共需要多少个页面。用户可以通过点击上一页、下一页、首页、末页或者手动输入页码等方式进行页面切换。每个页面上显示的电影评价信息包括电影名称、评分、评论内容等。

    这篇博客展现了电影评价系统的分页功能,以后还会给大家展现更多关于电影评价系统的其他功能的实现,感谢大家多多支持!

    希望这篇博客能给各位朋友们带来帮助,最后请来过的朋友们留下你们宝贵的三连以及关注,感谢你们!

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

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

相关文章

K8S cluster with multi-masters on Azure VM

拓扑参考&#xff1a; 在 Azure VM 实例上部署 KubeSphere 基础模板 需要修改 IP 地址和 VM Image的可以在模板中修改。 {"$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#","contentVersion": &q…

云计算存储类型

一、共享存储模式 NAS: ①一种专门用于存储和共享文件的设备&#xff0c;它通过网络连接到计算机或其他设备&#xff0c; 提供了一个中心化的存储解决方案 ②存储网络使用IP网络 &#xff0c;数据存储共享基于文件 ③本质上为:NFS和CIFS文件共享服务器 ④提供的不是一个磁盘块…

python使用 flask+vue 制作前后端分离图书信息管理系统

目录标题 前言制作前后端分离图书信息管理系统的思路&#xff1a;素材代码效果展示 后端部分接口部分前端部分尾语 前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 哈喽兄弟们&#xff0c;今天咱们来用Python实现一个前后端分离的图书信息管理系统。 制作前后端分离图书信…

【IEEE会议】2023年第三届IEEE数字化社会与智能系统国际学术会议(DSInS 2023)

2023年第三届IEEE数字化社会与智能系统国际学术会议&#xff08;DSInS 2023) 2023 3rd International Conference on Digital Society and Intelligent Systems 由西南交通大学主办&#xff0c;悉尼科技大学、四川大学、中南大学社会计算研究中心、西南财经大学、武汉理工大学…

React 18 用 State 响应输入

参考文章 用 State 响应输入 React 控制 UI 的方式是声明式的。不必直接控制 UI 的各个部分&#xff0c;只需要声明组件可以处于的不同状态&#xff0c;并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。 声明式 UI 与命令式 UI 的比较 当设计 UI 交互时…

《存储IO路径》专题:数据魔法师DMA

初识DMA 大家好,今天我要给大家介绍一位在计算机世界中不可或缺的魔法师——DMA(Direct Memory Access)。让我们一起揭开这位魔法师的神秘面纱,看看它是如何让数据在内存之间自由穿梭的。 DMA这位魔法师可是大有来头。在现代计算机系统中,CPU、内存和各种设备之间需要进…

线性代数的学习和整理4: 求逆矩阵的多种方法汇总

目录 原始问题&#xff1a;如何求逆矩阵&#xff1f; 1 EXCEL里&#xff0c;直接可以用黑盒表内公式 minverse() 数组公式求A- 2 非线性代数方法&#xff1a;解方程组的方法 3 增广矩阵的方法 4 用行列式的方法计算&#xff08;未验证&#xff09; 5 A-1/|A|*A* &…

redis持久化机制 事务详解

目录 前言&#xff1a; 持久化机制 RDB&#xff08;Redis DataBase&#xff09; 手动触发 save bgsave 自动触发 RDB特点 AOF&#xff08;append only file&#xff09; 缓冲区刷新策略 重写机制 aof重写流程 混合持久化 事务 事务操作命令 WATCH WATCH实现原…

【Hello Algorithm】堆和堆排序

本篇博客简介&#xff1a; 讲解堆和堆排序相关算法 堆和堆排序 堆堆的概念堆的性质堆的表示形式堆的增加删除堆的最大值 堆排序堆排序思路时间复杂度为N的建堆方法已知一个近乎有序的数组 使用最佳排序方法排序 堆 堆的概念 这里注意&#xff01;&#xff01;&#xff01; 这…

UG\NX二次开发 使用BlockUI设计对话框时,如何设置默认的开发语言?

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,C\C++,Qt-CSDN博客 简介: NX二次开发使用BlockUI设计对话框时,如何设置默认的代码语言? 效果: 方法: 依次打开“文件”->“实用工具”->“用户默认设置”->“用户界面”->“操作记录”->“…

【WSN无线传感器网络恶意节点】使用 MATLAB 进行无线传感器网络部署研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

React 全栈体系(三)

第二章 React面向组件编程 四、组件三大核心属性3: refs与事件处理 1. 效果 需求: 自定义组件, 功能说明如下: 点击按钮, 提示第一个输入框中的值当第2个输入框失去焦点时, 提示这个输入框中的值 2. 理解 组件内的标签可以定义ref属性来标识自己 3. 编码 3.1 字符串形式…

Gradle 如何配置全局 mavenCentral()

我们都知道 Gradle 会使用 Maven 的中央仓库。 在 Gradle 的配置文件中&#xff0c;通常有一个 mavenCentral() 如果我们想把 mavenCentral() 的仓库地址全局替换掉别的仓库地址的话。 我们可以在 C:\Users\yhu\.gradle 目录下创建一个 init.gradle 文件。 文件中的代码为&a…

中国移动秋招攻略,网申测评和面试

中国移动秋招简介 按照往年的惯例来看&#xff0c;移动会在每年的8月份发布相关秋招信息&#xff0c;紧接着考生并进行网申&#xff0c;面试的时间跨度也非常的长&#xff0c;大概是9~12月份。整个招聘流程&#xff0c;包括投递简历网申&#xff0c;笔试测评&#xff0c;面试录…

在项目中快速搭建机器学习的流程

在软件开发领域&#xff0c;机器学习框架发挥着关键作用&#xff0c;为开发人员提供强大的人工智能工具、库和算法&#xff0c;以有效地利用机器学习的潜力。从本质上讲&#xff0c;机器学习使计算机能够从数据中学习并做出预测或决策&#xff0c;而无需明确编程。 机器学习框…

idea 对JavaScript进行debug调试

文章目录 1.新增 JavaScript Debug 配置2.配置访问地址3.访问url. 打断点测试 前言 : 工作中接手别人的前端代码没有注释&#xff0c;看浏览器的network或者console切来切去&#xff0c;很麻烦&#xff0c;可以试试idea自带的javscript debug功能。 1.新增 JavaScript Debug 配…

芯科科技推出专为Amazon Sidewalk优化的全新片上系统和开发工具,加速Sidewalk网络采用

芯科科技为Sidewalk开发提供专家级支持 中国&#xff0c;北京 - 2023年8月22日 – 致力于以安全、智能无线连接技术&#xff0c;建立更互联世界的全球领导厂商Silicon Labs&#xff08;亦称“芯科科技”&#xff0c;NASDAQ&#xff1a;SLAB&#xff09;今日在其一年一度的第四…

微信支付

文档地址&#xff1a;https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter9_1 封装的工具类 package com.qf.fmall.utils;import cn.hutool.core.util.XmlUtil; import cn.hutool.http.HttpRequest; import org.apache.shiro.crypto.hash.Md5Hash;import java.util.…

情人节特别篇:用c++弹奏音乐“海阔天空”与“孤勇者”

W...Y的主页 &#x1f495; 代码库分享 &#x1f60a; 目录 孤勇者 海阔天空 今天是2023年8月22日七夕情人节&#xff0c;但是对我来说就是再普通不过的日子。我相信有很多人期待这一天的到来&#xff0c;和自己的对象出去享受快乐时光。但是我只有一个人独孤的度过短暂的时…

freertos之任务调度算法

介绍 所谓调度算法&#xff0c;就是怎么确定哪个就绪态的任务可以切换为运行状态。 通过配置文件FreeRTOSConfig.h的三个配置项来配置调度算法&#xff1a;configUSE_PREEMPTION &#xff08;是否抢占&#xff09; configUSE_TIME_SLICING &#xff08;是否轮转&#xff09; c…