《vue3实战》运用push()方法实现电影评价系统的添加功能


目录

前言

电影评价系统的添加功能是什么?

电影评价系统的添加功能有什么作用?

一、push()方法是什么?它有什么作用?

含义:

作用:

二、功能实现

这段是添加开始时点击按钮使添加框展示的代码部分:

这段是添加过程中结合elment plus组件实现的添加框的代码部分:

 这段是添加过程中实现添加逻辑方法的代码部分:

三、最终效果图

添加按钮所在位置效果图:

添加框效果图:

未添加用户信息时的效果图: 

添加用户信息过程中的效果图:

 添加用户信息后的效果图:

四、代码块

总结


前言

电影评价系统的添加功能是什么?

电影评价系统的添加功能是指提供给用户添加新电影评价和信息的功能,可以给用户和管理员更优质的系统体验。

电影评价系统的添加功能有什么作用?

  1. 收集用户评价:用户可以通过添加功能将他们对电影的评价添加到系统中。这样可以收集到更多的用户反馈和意见,帮助系统更准确地了解用户对电影的观感。

  2. 丰富电影评价库:通过添加功能,系统可以逐渐积累更多的电影评价,使得电影评价库更加丰富。这可以提供给用户更多的信息和参考,帮助他们做出更好的选择。

  3. 提升系统准确性:通过用户的添加,系统可以不断更新电影评价数据,从而提升系统的准确性和推荐质量。系统可以通过分析用户评价的数据,了解用户的喜好和偏好,从而做出更准确的电影推荐。

总之,添加功能在电影评价系统中起着收集用户评价、丰富评价库、提升准确性等作用,使得系统能够更好地为用户提供个性化的电影推荐服务。


一、push()方法是什么?它有什么作用?

含义:

push()方法是JavaScript数组对象的一个内置方法

作用:

1.push()用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度。

2.push()方法接受一个或多个参数,这些参数将被添加到数组的末尾。被添加的元素可以是任意类型,包括数字、字符串、对象等。

3.push()方法会修改原始数组,并返回修改后的数组的长度。

二、功能实现

这段是添加开始时点击按钮使添加框展示的代码部分:

分析 :

 将true赋值给this.closeC使添加框展现。

这段是添加过程中结合elment plus组件实现的添加框的代码部分:

分析:

1.此部分代码实现了一个添加框功能,使用了Element UI库中的<el-dialog><el-form>组件。

2.首先使用v-model="closeC"closeC变量与<el-dialog>组件的v-model指令绑定,实现了对话框的显示和隐藏控制。

3.在对话框中使用了<el-form>组件来实现添加表单的布局。label-width属性设置了表单标签的宽度为120px。

4.然后依次使用<el-form-item><el-input>组件来创建每个表单项。通过v-model指令将表单项与addForm对象的相应属性进行双向数据绑定,实现了表单数据的获取和展示。

5.最后,通过<input type="button" value="确认添加" @click="addManagerBtn">创建了一个确认添加按钮,并调用addManagerBtn方法来处理添加操作。同时,使用<button @click="closeC=false">关闭</button>创建了一个关闭按钮,点击后将关闭对话框。

综上所述,这段代码实现了一个简单的添加框功能,通过表单项和按钮与数据的绑定,实现了对表单数据的获取和提交,以及对话框的显示和隐藏。

 这段是添加过程中实现添加逻辑方法的代码部分:

分析:

  1. 首先定义了一个局部变量abb并赋值为1,用来记录新增加的管理者的id。
  2. 通过一个循环遍历this.courses数组,找到当前存在的最大id值,并将其赋给abb。这样做的目的是为了确保新添加的管理者id的唯一性。
  3. 通过JSON.parse(JSON.stringify(this.addForm))来创建一个新的对象newObj,并将this.addForm对象的值复制给它。这样做可以避免将引用类型的值进行浅拷贝,确保newObjthis.addForm是独立的。
  4. abb赋值给newObjid属性,确保newObj拥有唯一的id值。
  5. 使用this.courses.push(newObj)newObj添加到this.courses数组中,实现了管理者的添加功能。
  6. 调用queryUser()函数,更新管理者列表。
  7. this.addForm对象的属性值重置为空字符串,清空添加表单中已填写的内容。
  8. this.closeC变量赋值为false,关闭添加功能。

三、最终效果图

添加按钮所在位置效果图:

添加框效果图:

未添加用户信息时的效果图: 

添加用户信息过程中的效果图:

 添加用户信息后的效果图:

四、代码块

<button @click="addManager"style="background-color: peachpuff;border-radius:5px;width:60px;height:30px">添加</button>

<div><el-dialog v-model="closeC" title="添加信息"><div><el-form :model="addForm" label-width="120px"><el-form-item label="用户名"><el-input v-model="addForm.account" /></el-form-item><el-form-item label="姓名"><el-input v-model="addForm.username" /></el-form-item><el-form-item label="性别"><el-input v-model="addForm.sex" /></el-form-item><el-form-item label="身份证号"><el-input v-model="addForm.identity" /></el-form-item><el-form-item label="手机号"><el-input v-model="addForm.tel" /></el-form-item><el-form-item label="照片"><el-input v-model="addForm.img" /></el-form-item></el-form><input type="button" value="确认添加" @click="addManagerBtn"><button @click="closeC=false">关闭</button></div></el-dialog></div>

 addManager() {this.closeC = true},addManagerBtn() {let abb = 1for (let i = 0; i < this.courses.length; i++) {if (abb <= this.courses[i].id) {abb = this.courses[i].id + 1}}let newObj = JSON.parse(JSON.stringify(this.addForm));newObj.id = abb;this.courses.push(newObj);this.queryUser()this.addForm = {"id": "","account": "","username": "","sex": "","identity": "","tel": "","img": "","action": ""}this.closeC = false},


总结

       总的来说,添加功能在电影评价系统中起着收集用户评价、丰富评价库、提升准确性等作用,使得系统能够更好地为用户提供个性化的电影推荐服务。

       在本文中,push()方法是JavaScript数组对象的一个内置方法,它用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度。

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

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

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

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

相关文章

阿里云服务器退款政策及退款流程解析

阿里云服务器如何退款&#xff1f;云服务器在哪申请退款&#xff1f;在用户中心订单管理中的退订管理中退款&#xff0c;阿里云百科分享阿里云服务器退款流程&#xff0c;包括申请退款入口、云服务器退款限制条件、退款多久到账等详细说明&#xff1a; 目录 阿里云服务器退款…

应用在汽车新风系统中消毒杀菌的UVC灯珠

在病毒、细菌的传播可以说是一个让人敏感而恐惧的事情。而对于车内较小的空间&#xff0c;乘坐人员流动性大&#xff0c;更容易残留细菌病毒。车内缺少通风&#xff0c;残留的污垢垃圾也会滋生细菌&#xff0c;加快细菌的繁殖。所以对于车内消毒就自然不容忽视。 那么问题又来…

Vue + Element UI 前端篇(十):动态加载菜单

Vue Element UI 实现权限管理系统 前端篇&#xff08;十&#xff09;&#xff1a;动态加载菜单 动态加载菜单 之前我们的导航树都是写死在页面里的&#xff0c;而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模…

高忆管理:证券账户国债逆回购怎么操作?

国债逆回购的本质就是一种短期贷款&#xff0c;个人经过国债回购商场把自己的资金借出去&#xff0c;取得固定的利息收益&#xff0c;那么&#xff0c;证券账户国债逆回购怎样操作&#xff1f;怎样在股票账户上买国债逆回购&#xff1f;下面高忆管理为我们准备了相关内容&#…

论文阅读_扩散模型_DM

英文名称: Deep Unsupervised Learning using Nonequilibrium Thermodynamics 中文名称: 使用非平衡热力学原理的深度无监督学习 论文地址: http://arxiv.org/abs/1503.03585 代码地址: https://github.com/Sohl-Dickstein/Diffusion-Probabilistic-Models 时间: 2015-11-18 作…

发光太阳聚光器的蒙特卡洛光线追踪研究(Matlab代码实现)

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

Github 下载指定文件夹(git sparse-checkout)

比如要下载这里的 data_utils 步骤 1、新建空文件夹&#xff0c;并进入新建的空文件夹。 2、git init 初始化 3、git remote add origin 添加远程仓库 4、git config core.sparsecheckout true 允许稀疏检出 5、git sparse-checkout set 设置需要拉取的文件夹&#xff08;可…

【Python】pytorch,CUDA是否可用,查看显卡显存剩余容量

CUDA可用&#xff0c;共有 1 个GPU设备可用。 当前使用的GPU设备索引&#xff1a;0 当前使用的GPU设备名称&#xff1a;NVIDIA T1000 GPU显存总量&#xff1a;4.00 GB 已使用的GPU显存&#xff1a;0.00 GB 剩余GPU显存&#xff1a;4.00 GB PyTorch版本&#xff1a;1.10.1cu102 …

本地开机启动jar

1&#xff1a;首先有个可运行的jar包 本地以ruiyi代码为例打包 2&#xff1a;编写bat命令---命名为.bat即可 echo off java -jar D:\everyDay\test\RuoYi\target\RuoYi.jar 3&#xff1a;设置为开机自启动启动 快捷键winr----输入shell:startup---打开启动文档夹 把bat文件复…

IntelliJ IDEA创建Web项目并使用Web服务器----Tomcat

&#x1f3c6;IntelliJ IDEA创建Web项目并使用Web服务器----Tomcat 以下是本篇文章正文内容&#xff0c;下面案例可供参考&#xff08;提示&#xff1a;本篇文章属于原创&#xff0c;请转发或者引用时注明出处。&#xff09;&#xff0c;大家记得支持一下&#xff01;&#xff…

SpringMVC执行流程

SpringMVC执行流程 SpringMVC常用组件 组件名称来源作用DispatcherServlet(前端控制器)不需要工程师开发&#xff0c;由框架提供同一处理请求和响应&#xff0c;整个流程控制的中心&#xff0c;由它调用其他组件处理用户的请求。HandlerMapping(处理器映射器)不需要工程师开发…

ChatGPT追祖寻宗:GPT-1论文要点解读

论文地址&#xff1a;《Improving Language Understanding by Generative Pre-Training》 最近一直忙着打比赛&#xff0c;好久没更文了。这两天突然想再回顾一下GPT-1和GPT-2的论文&#xff0c; 于是花时间又整理了一下&#xff0c;也作为一个记录~话不多说&#xff0c;让我们…