《vue3实战》运用splice方法实现电影评价系统的查看、修改、删除功能

news2024/9/20 10:38:36


目录

前言

电影评价系统是什么?它能具有什么功能的体现?

一、splice方法的含义和作用

splice是什么?splice的作用体现在哪些方面?

二、功能实现

以下是实现查看逻辑功能的代码

以下是实现修改逻辑功能的代码 

以下是实现删除逻辑功能的代码

三、最终效果图

电影评价系统电影信息页面的查看修改删除按钮展示图:

 查看框的展现图:

修改框的展现图:

删除功能的展现图:

四、部分代码块

查看框以及修改框代码如下:

总结


前言

电影评价系统是什么?它能具有什么功能的体现?

电影评价系统是一个用于用户评价电影的应用程序或平台。其功能通常包括:

  1. 用户注册和登录:用户可以注册账号并使用登录凭据进行登录,以便参与评价和访问其他功能。(《vue3实战》前面的博客中有写如何实现跳转登录的功能)

  2. 电影列表和搜索:系统应提供一个电影列表,供用户查看,并提供搜索功能,用户可以根据电影名称、类型、演员等条件来查找电影。

  3. 电影详情页:点击电影列表中的电影后,应显示电影的详细信息,例如电影名称、导演、演员、剧情简介、上映日期等。

  4. 评价和评论:用户可以对已看过的电影进行评价和撰写评论。评价可以是一个评分(如1-10分或星级评分)或者是一个文本评论。

  5. 推荐系统:根据用户的评价历史或行为,系统可以提供个性化的电影推荐,帮助用户发现他们可能感兴趣的新电影。

  6. 社交功能:用户可以跟踪其他用户,查看他们的评价和评论,并与其他用户进行交流和讨论。

  7. 电影信息的管理:系统应提供对电影信息的管理功能,包括添加新电影、编辑电影信息、删除电影等。

  8. 用户权限管理:系统可以针对不同用户角色(如管理员、普通用户)设置不同的权限和功能访问级别。

  9. 数据统计和分析:系统可以统计和分析用户评价和行为数据,生成电影排行榜、用户偏好分析等报告和图表。


一、splice方法的含义和作用

splice是什么?splice的作用体现在哪些方面?

含义:

在JavaScript中,"splice"是一个数组方法,用于在指定索引位置修改数组,删除或添加元素。它接受多个参数,包括起始索引、删除的元素数量以及可选的要添加的新元素。

作用:

  1. 删除元素:可以通过指定起始索引和删除元素数量来删除数组中的元素。这会直接修改原数组,并返回被删除的元素组成的新数组。

  2. 添加元素:除了删除元素外,"splice"方法还可以在指定索引位置添加新的元素。通过指定起始索引、删除元素数量为0,并传递要添加的元素作为参数,可以实现在指定位置插入新元素。

  3. 替换元素:通过指定起始索引和删除元素数量,并传递要添加的新元素作为参数,可以替换数组中的元素。

二、功能实现

以下是实现查看逻辑功能的代码

 

分析:

1.首先,在 query 方法中,接收一个 id 参数,表示要查看的电影的ID。

2.然后,通过 console.log(id) 打印出传入的 id 值,用于验证传参是否正确。

3.接着,将属性 closeA 的值设为 true,这是用于控制查看框的显示与隐藏的标志。

4.接下来,通过 for 循环遍历 this.courses 数组,以查找与传入的 id 值匹配的电影项。

5.在循环中使用条件判断 if (this.courses[i].id == id) 来判断当前电影项的ID是否与传入的 id 值匹配。如果匹配成功,则将当前电影项赋值给属性 this.queryMovies

6.这样,通过调用 query 方法并传入电影的ID,可以在控制台输出 id,并根据该 id 值查找匹配的电影项,并将其赋值给属性 this.queryMovies

7.当然,最后,具体的查看功能的实现需要结合代码的其他部分,需要在模板或页面上展示查看到的电影信息。

以下是实现修改逻辑功能的代码 

 

 分析:

1.首先,在 update 方法中,接收一个 id 参数,表示要修改的电影的ID。

2.然后,将属性 closeB 的值设为 true,用于控制修改框的显示与隐藏的标志。

3.接下来,通过 for 循环遍历 this.courses 数组,以查找与传入的 id 值匹配的电影项。

4.在循环中使用条件判断 if (this.courses[i].id == id) 来判断当前电影项的ID是否与传入的 id 值匹配。

5.如果匹配成功,则通过 JSON.parse(JSON.stringify(this.courses[i])) 将匹配到的电影项进行深拷贝,并将拷贝后的对象赋值给属性 this.updateMess。这样,this.updateMess 就保存了要修改的电影的详细信息。

6.接着,在 updateBtn 方法中,首先将 this.updateMess 对象进行深拷贝,赋值给 newsObj 对象。

7.然后,通过 for 循环遍历 this.courses 数组,以查找与 newsObj 对象具有相同ID值的电影项。

8.当找到匹配项时,使用 this.courses.splice(i, 1, newsObj) 将该电影项从 this.courses 中删除,并将 newsObj 插入到删除位置,实现了修改电影信息的功能。

9.接下来,调用了 queryUser() 方法,可能是用于重新查询电影信息并更新页面上的显示。

之后,将 this.updateMess 初始化为一个空对象,以清空修改信息。

10.最后,将属性 closeB 的值设为 false,用于控制修改框的显示与隐藏的标志。

这样,通过调用 update 方法并传入电影的ID,可以根据 id 值找到相应的电影项并将其详细信息赋值给 this.updateMess,再通过调用 updateBtn 方法,可以将修改后的电影信息应用到 this.courses 数组中,并进行相应的更新操作。

以下是实现删除逻辑功能的代码

 分析:

1.首先,在 deleteUser 方法中,接收一个 id 参数,表示要删除的电影的ID。

2.接着,通过 console.log(id) 打印出传入的 id 值,可能是用于调试或验证传入的ID是否正确。

3.然后,通过 for 循环遍历 this.courses 数组,以查找与传入的 id 值匹配的电影项。

4.在循环中使用条件判断 if (this.courses[i].id == id) 来判断当前电影项的ID是否与传入的 id 值匹配。

5.如果匹配成功,则使用 this.courses.splice(i, 1)this.courses 数组中删除该电影项。这样,就实现了删除电影的功能。

6.最后,调用了 queryUser() 方法,可能是用于重新查询电影信息并更新页面上的显示。

7.这样,通过调用 deleteUser 方法并传入电影的ID,可以根据 id 值找到相应的电影项,并在 this.courses 数组中进行删除操作,实现了删除电影的功能。

三、最终效果图

电影评价系统电影信息页面的查看修改删除按钮展示图:

 查看框的展现图:

修改框的展现图:

 

删除功能的展现图:

 

四、部分代码块

查看框以及修改框代码如下:

 <div
            style="margin-top: -400px;margin-left: 200px;border-radius:10px;position: absolute;width: 800px ;height: 400px;background-color: darkgrey"
            v-show="closeA">
          <button @click="closeA=false">关闭</button>
          <table cellspacing="0" style="width: 100%;margin: auto">
            <tr>
              <td v-for="(movie,index) in movieObjOne" :key="index" style="text-align: center">
                {{ movie }}
              </td>
              <td v-for="(movie,index) in movieObjTwo" :key="index" style="text-align: center">
                {{ movie }}
              </td>
            </tr>
            <tr>
              <td v-for="(user,index) in queryMovies" :key="index">
                {{ user }}
              </td>
            </tr>
          </table>
        </div>
        <div
            style="margin-top: -400px;margin-left: 200px;border-radius:10px;position: absolute;width: 800px ;height: 400px;background-color: darkgrey"
            v-show="closeB">
          <button @click="closeB=false">关闭</button>
          <table cellspacing="0" style="width: 100%;margin: auto">
            <tr>
              <td v-for="(movie,index) in movieObjOne" :key="index" style="text-align: center">
                {{ movie }}
              </td>
            </tr>
            <tr>
              <td>
                <input placeholder="" v-model="updateMess.id">
              </td>
              <td>
                <input placeholder="" v-model="updateMess.username">
              </td>
              <td>
                <input placeholder="" v-model="updateMess.actor">
              </td>
              <td>
                <input placeholder="" v-model="updateMess.img">
              </td>
            </tr>
            <tr>
              <td v-for="(movie,index) in movieObjTwo" :key="index" style="text-align: center">
                {{ movie }}
              </td>
            </tr>
            <tr>
              <td>
                <input placeholder="" v-model="updateMess.number">
              </td>
              <td>
                <input placeholder="" v-model="updateMess.type">
              </td>
              <td>
                <input placeholder="" v-model="updateMess.content">
              </td>
            </tr>
            <tr>
              <td>
                <input type="button" value="确认修改" @click="updateBtn">
              </td>
            </tr>
          </table>
        </div>


总结

总的来说,"splice"方法是一个用于修改数组的强大方法,它可以删除、添加和替换数组中的元素。通过灵活使用不同的参数,可以实现对数组的灵活操作。

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第 4 章 链表(2)(单链表面试题)

单链表面试题(新浪、百度、腾讯) 单链表的常见面试题有如下: 1.求单链表中有效节点的个数 /*** 单链表*/ public class SingleLinkedListDemo {public static void main(String[] args) {//进行测试//先创建节点HeroNode hero1 new HeroNode(1, "宋江", "及时…

Oracle数据库后悔药之数据回退

在使用plsql工具&#xff0c;对表数据进行操作后&#xff0c;提交了事务&#xff0c;发现数据更新或者删除错了&#xff0c;这时候还是有方法可以把数据回退的&#xff0c;下面进行操作。 对emp表数据进行操作&#xff0c;更新前数据如下所示&#xff1a; 现在对SAL字段进行更…

一文详解多模态认知智能

多模态认知智能是AI人工智能当前发展的主流趋势之一&#xff0c;其核心是以多模态知识的获取&#xff0c;表示与推理为主要内容的跨模态知识工程与认知智能&#xff0c;也是为了更好的处理多模态的数据&#xff0c;需要融合多种感知模态和智能处理技术。 01 多模态认知智能&am…

Vue--进度条

挺有意思的&#xff0c;大家可以玩一玩儿&#xff1a; 前端代码如下&#xff1a;可以直接运行的代码。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content&qu…

【项目】BlogTest(Web自动化)

个人博客Web自动化 一、项目背景二、项目功能三、测试计划功能测试自动化测试 一、项目背景 个人 博客系统采用前后端的方法来实现&#xff0c;同时使用了SpringBoot、MySQL、Ajax等相关技术&#xff0c;同时部署到云服务器上。前端主要有四个 页面构成&#xff1a;登录页、列…

Mac上传项目源代码到GitHub的修改更新

Mac上传项目源代码到GitHub的修改更新 最近在学习把代码上传到github&#xff0c;不得不说&#xff0c;真的还挺方便 这是一个关于怎样更新项目代码的教程。 首先&#xff0c;在本地终端命令行打开至项目文件下第一步&#xff1a;查看当前的git仓库状态&#xff0c;可以使用git…

个人博客自动化测试

BlogWebAutoTest 前言一、脑图二、编写代码三、代码测试结果 前言 1.针对个人博客进行测试&#xff0c;个人博客主要有四个页面构成&#xff1a;登录页、列表页、详情页和编辑页&#xff0c;主要功能包括&#xff1a;登录、写博客、删除博客、修改博客、查看详情以及注销等功能…

java面向对象——继承以及super关键字

继承的概念 1. 被继承的类称为父类&#xff08;超类&#xff09;&#xff0c;继承父类的类都称为子类&#xff08;派生类&#xff09; 2. 继承是指一个对象直接使用另一个对象的属性和方法&#xff0c;但是能继承非私有的属性和方法&#xff1b;(1) 构造方法不能被继承。(2) 但…

关于查看处理端口号和进程[linux]

查看端口号 lsof -i:端口号如果-bash: lsof: 未找到命令那我们可以执行yum install lsof 删除端口号进程 一般我们都会使用kill命令 kill -l#列出所有可用信号1 (HUP)&#xff1a;重新加载进程。9 (KILL)&#xff1a;杀死一个进程。15 (TERM)&#xff1a;正常停止一个进程。 …

代码随想录算法训练营day31 | 贪心问题:455. 分发饼干,53. 最大子数组和

目录 455. 分发饼干 ​​​​​​376. 摆动序列 53. 最大子数组和 455. 分发饼干 类型&#xff1a;贪心 难度&#xff1a;medium 思路&#xff1a; 记得先排序&#xff0c;用饼干去满足小孩。 代码&#xff1a; class Solution {public int findContentChildren(int[] g…

从零开始 Spring Cloud 12:Sentinel

从零开始 Spring Cloud 12&#xff1a;Sentinel 1.初识 Sentinel 1.1雪崩问题 1.1.1什么是雪崩问题 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微服务。 如图&#xff0c;如果服务提供者I发生了故障&#xff0c;当前的应用的部分…

YOLOv5改进系列(22)——替换主干网络之MobileViTv1(一种轻量级的、通用的移动设备 ViT)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制

Linux 一个简单的多线程程序

一个简单的多线程程序 编写一个简单的多线程程序 代码如下&#xff1a; 运行结果&#xff1a; 出现这样的运行结果是因为主函数直接就运行完了&#xff0c;直接5次循环就结束了&#xff0c;线程函数还没有来得及执行&#xff0c;整个进程就已经结束了。因为主函数退出之后系统…

MySQL卸载-Linux版

MySQL卸载-Linux版 停止MySQL服务 systemctl stop mysqld 查询MySQL的安装文件 rpm -qa | grep -i mysql 卸载上述查询出来的所有的MySQL安装包 rpm -e mysql-community-client-plugins-8.0.26-1.el7.x86_64 --nodeps ​ rpm -e mysql-community-server-8.0.26-1.el7.x86_64 -…

磁盘满了怎么办?实用小技巧,做不做测试都非常好用!

♥ 前 言 工作了多年的测试&#xff0c;应该多少都会遇到磁盘空间不够的情况&#xff0c;比方你现在正在用的测试环境&#xff0c;因为要测试&#xff0c;所以&#xff0c;项目一直启动&#xff0c;那么就会一直在写日志&#xff0c;如果不定期清理日志&#xff0c;随着时间…

第一百三十三天学习记录:数据结构与算法基础:串、数组和广义表(串Ⅱ)(王卓教学视频)

注&#xff1a;在之前学习C语言的时候&#xff0c;了解过这一块。其中对KMP算法进行了自学&#xff0c;前面的学习记录也有提到过。这一次根据视频教学再系统性的学习学习一次。 串的模式匹配算法 KMP算法

漏洞指北-VulFocus靶场专栏-初级01

漏洞指北-VulFocus靶场专栏-初级 初级001 &#x1f338;海洋CMS代码执行&#xff08;CNVD-2020-22721&#x1f338;step1&#xff1a;进入后台页面 账号密码&#xff1a;admin amdinstep2&#xff1a;点击系统&#xff0c;点击后台IP安全设置,关闭step3 启动burpsuite&#xff…

Yolo算法与ChatGPT互通,这功能是真的强大!

点击蓝字 关注我们 关注并星标 从此不迷路 计算机视觉研究院 公众号ID&#xff5c;计算机视觉研究院 学习群&#xff5c;扫码在主页获取加入方式 参考地址&#xff1a;https://github.com/ultralytics/ultralytics 计算机视觉研究院专栏 Column of Computer Vision Institute 现…

深入浅出解析Stable Diffusion XL完整核心基础知识 | 【算法兵器谱】

Rocky Ding 公众号&#xff1a;WeThinkIn 写在前面 【算法兵器谱】栏目专注分享AI行业中的前沿/经典/必备的模型&论文&#xff0c;并对具备划时代意义的模型&论文进行全方位系统的解析&#xff0c;比如Rocky之前出品的爆款文章Make YOLO Great Again系列。也欢迎大家提…

计网第三章(数据链路层)(三)

一、点对点协议PPP 在第一篇里有提到数据链路层的信道分为两种&#xff1a;点对点信道和广播信道。 PPP协议就属于点对点信道上的协议。 如果对前面数据链路层的三个基本问题了解的比较透彻&#xff0c;那么这一块很多东西都很好理解。 从考试的角度来讲&#xff0c;PPP协议…