《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.rhkb.cn/news/122339.html

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

相关文章

用户端APP自动化测试_L2

目录&#xff1a; appium server 环境安装capability 进阶用法元素定位工具高级定位技巧-xpath 定位高级定位技巧-css 定位与原生定位特殊控件 toast 识别显式等待高级使用高级控件交互方法设备交互api模拟器控制雪球财经app股票详情功能点自动化测试实战 1.appium server 环…

Podman安装与使用

1.Podman简介 Podman是一个无守护进程的容器引擎&#xff0c;用于在Linux系统上开发、管理和运行OCI容器。 Podman的主要功能包括&#xff1a; 创建和管理容器&#xff1a;Podman可以创建、启动、停止和删除容器&#xff0c;以及管理容器的生命周期。容器镜像管理&#xff1…

WSL中为Ubuntu和Debian设置固定IP的终极指南

文章目录 **WSL中为Ubuntu和Debian设置固定IP的终极指南****引言/背景****1. 传统方法****2. 新方法:添加指定IP而不是更改IP****结论**WSL中为Ubuntu和Debian设置固定IP的终极指南 引言/背景 随着WSL(Windows Subsystem for Linux)的普及,越来越多的开发者开始在Windows…

77 # koa 中间件的应用

调用 next() 表示执行下一个中间件 const Koa require("koa");const app new Koa();app.use(async (ctx, next) > {console.log(1);next();console.log(2); });app.use(async (ctx, next) > {console.log(3);next();console.log(4); });app.use(async (ctx,…

说说 TCP的粘包、拆包

分析&回答 拆包和粘包是在socket编程中经常出现的情况&#xff0c; 在socket通讯过程中&#xff0c;如果通讯的一端一次性连续发送多条数据包&#xff0c;tcp协议会将多个数据包打包成一个tcp报文发送出去&#xff0c;这就是所谓的粘包。如果通讯的一端发送的数据包超过一…

MRI多任务技术及应用

目录 一、定量心血管磁共振成像&#xff08;CMR&#xff09;的改进方法二、磁共振多任务三、磁共振多任务的成像框架四、磁共振多任务的图像模型和采样和重建策略五、利用MR多任务进行快速三维稳态CEST(ss-CEST)成像5.1 利用MR多任务进行快速三维稳态CEST(ss-CEST)成像介绍5.2 …

【数据结构】链表

【数据结构】 链表 1.链表的概念及结构 链表是一种物理存储单元上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点&#xff08;链表中每一个元素称为结点&#xff09;组成&#xff0c;结点可以在运行时动态生成。…

C# void 关键字学习

C#中void关键字是System.Void的别名&#xff1b; 可以将 void 用作方法&#xff08;或本地函数&#xff09;的返回类型来指定该方法不返回值&#xff1b; 如果C&#xff03;方法中没有参数&#xff0c;则不能将void用作参数&#xff1b;这是与C语言不同的&#xff0c;C语言有…

rk3568 SDK的buildroot添加package

开发源码工程 首先进入<SDK>/app 目录下&#xff0c;在该目录下创建一个名为“mypackage”的文件夹。 在 mypackage 目录下创建一个.c 源文件 main.c&#xff0c;以及一个 Makefile 文件。 大家可以自己在 main.c 源文件中编写一个简单的测试代码&#xff0c;譬如打印一…

设计模式-建造者(生成器)模式

文章目录 简介建造者模式的核心概念产品&#xff08;Product&#xff09;建造者&#xff08;Builder&#xff09;指挥者&#xff08;Director&#xff09;建造者模式与其他设计模式的关系工厂模式和建造者模式uml对比 建造者模式的实现步骤建造者模式的应用场景spring中应用 建…

RabbtiMQ的安装与使用

一、安装Erlang与Rabbitmq 安装教程本教程是在centos8下试验的&#xff0c;其实linux系统的都差不多RabbitMQ官方&#xff1a;Messaging that just works — RabbitMQRabbitMQ是开源AMQP实现&#xff0c;服务器端用Erlang语言编写&#xff0c;Python、Ruby、 NET、Java、JMS、c…

软件架构之前后端分离架构服务器端高并发演进之路

软件架构之前后端分离架构&服务器端高并发演进之路 前后端分离架构从业务角度从质量属性从性能角度 服务器端关于不同并发量的演进之路1. 单体架构2. 第一次演进&#xff1a;应用服务器和数据库服务器分开部署3. 第二次演进&#xff1a;引入本地缓存和分部署缓存4. 第三次演…

录屏没有声音?录制声音,3招教你搞定

在录制屏幕内容时&#xff0c;声音是不可或缺的要素之一&#xff0c;可以有效地增强录制视频的表现力和传达效果。然而&#xff0c;有时候可能会遇到录屏没有声音的情况&#xff0c;这可能会让录制的视频失去一部分重要信息。本文将为您介绍录屏录声音的3种方法&#xff0c;帮助…

nios里面打开eclipse遇到Unresolved inclusion: “system.h“等问题

问题&#xff1a;在Nios中打开软核部分代码时&#xff0c;遇到一堆Unresolved inclusion: "system.h"等问题报错 原因&#xff1a;bsp文件和软核没关联&#xff0c;导致找不到头文件地址&#xff0c;关联一下就好 解决步骤&#xff1a; 右键bsp文件&#xff0c;点击…

肖sir__设计测试用例方法之等价类02_(黑盒测试)

设计测试用例方法之等价类02_&#xff08;黑盒测试&#xff09; 一、掌握常用的设计方法: 黑盒测试方法&#xff1a;等价类、边界值&#xff0c;状态迁移法、场景法、判定表、因果图、正交表&#xff0c;&#xff08;7种&#xff09; 经验测试方法&#xff1a;错误推测法、异常…

[数据集][目标检测]裸土识别裸土未覆盖目标检测数据集VOC格式857张2类别

数据集格式&#xff1a;Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件&#xff0c;仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数)&#xff1a;857 标注数量(xml文件个数)&#xff1a;857 标注类别数&#xff1a;2 标注类别名称:["luotu","n…

数学建模:相关性分析

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 数学建模&#xff1a;相关性分析 文章目录 数学建模&#xff1a;相关性分析相关性分析两变量的相关分析PearsonSpearmanKendall tua-b 双变量关系强度测量的指标相关系数的性质代码实现example偏相关分析 相…

尚硅谷SpringMVC (9-13)

九、HttpMessageConverter HttpMessageConverter &#xff0c;报文信息转换器&#xff0c;将请求报文转换为 Java 对象&#xff0c;或将 Java 对象转换为响应报文 HttpMessageConverter提供了两个注解和两个类型&#xff1a; RequestBody &#xff0c; ResponseBody &#xff…

使用Docker安装和部署RabbitMQ

&#x1f680; 1 拉取RabbitMQ Docker镜像 首先&#xff0c;使用Docker命令从Docker Hub拉取RabbitMQ官方镜像。打开终端并运行以下命令&#xff1a; docker pull rabbitmq&#x1f680; 2 创建RabbitMQ容器 一旦镜像下载完成&#xff0c;使用以下命令创建RabbitMQ容器&…

linux复习笔记01(小滴课堂)

1.安装CentOs7系统 点击下一步在自定义硬件中&#xff1a; 我们可以删除我们不使用的&#xff0c;后续如果需要再加上即可。 然后我们就可以开启这台虚拟机了。 我们可以进行下载cetos7. 这里选择简体中文就可以。 时间的设置。 可以开启下网络。 在这里选择设置root密码&#…