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

news2024/11/26 16:21:57


目录

前言

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

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

一、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 = 1
      for (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.coloradmin.cn/o/978561.html

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

相关文章

私募证券基金动态-23年8月报

成交量&#xff1a;8月日均8,252.00亿元 8月A股两市日均成交8,252.00亿元&#xff0c;环比下降12.23%、同比下降18.11%。8月整体23个交易日&#xff0c;仅有3个交易日单日成交金额过万亿&#xff0c;且成交量起伏较大&#xff0c;单日成交金额最低仅有6805.32亿元&#xff08;…

C# 实现电子签名

本项目基于Emgu.CV&#xff08;C#下OpenCv的封装&#xff09;开发的&#xff0c;编译器最新版Vs2022&#xff0c;编译环境x86 直接看效果图 1.主页面 2.我们先看手写的方式&#xff1a; 点击确认就到主界面&#xff0c;如下 &#xff1a; 点击自动适配-&#xff0c;再点击生成…

windows安装向量数据库milvus

本文介绍windows下安装milvus的方法。 一.Docker安装 1.1docker下载 首先到Docker官网上下载docker:Docker中文网 官网 1.2.安装前前期准备 先使用管理员权限打开windows powershell 然后在powershell里面输入下面那命令&#xff0c;启用“适用于 Linux 的 Windows 子系统”…

JMeter压力测试入门教程

Apache JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试&#xff0c;它最初被设计用于Web应用测试但后来扩展到其他测试领域。 它可以用于测试静态和动态资源例如静态文件、Java小服务程序、CGI脚本、Java 对象、数据库&#xff0c; FTP服务器, 等等。J…

JavaScript中的深拷贝和浅拷贝

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 浅拷贝&#xff08;Shallow Copy&#xff09;&#xff1a;⭐深拷贝&#xff08;Deep Copy&#xff09;&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带…

数据结构day7栈-顺序栈的实现

用指针比用数组好&#xff0c;这样用户可以自己指定空间的大小&#xff0c;有参与感。 全部代码: main.c #include <stdio.h> #include <string.h> #include "sqstack.h"int main(int argc, char *argv[]) {sqstack *s;int i;s stack_create(100);if(…

数据结构 - 单链表

文章目录 目录 文章目录 一、什么是链表? 线性表: 顺序表: 二、链表的分类和实现 分类: 实现: 1.创建节点类 2.创建单链表 1.addTail(尾增) 2.删除节点值为key的第一个节点 3.插入节点(在指定位置) 4.获取链表长度 总结 前言 大家好,这篇博客给大家讲一下什么是…

《代码随想录》刷题笔记——数组篇【java实现】

*二分查找 题目链接 https://leetcode.cn/problems/binary-search/ 左闭右闭区间实现 时间复杂度&#xff1a;O(log n)空间复杂度&#xff1a;O(1) /*** 左闭右闭写法** param nums* param target* return*/ public static int search1(int[] nums, int target) {if (nums…

关于工信部发布的app备案以及小程序备案流程

一、相关政策 通知&#xff1a;https://beian.miit.gov.cn/#/Integrated/lawStatute 腾讯备案&#xff1a;网站备案 首次备案-网站备案-文档中心-腾讯云 阿里备案&#xff1a;网站备案_ICP备案_备案迁移_备案-阿里云 二、遇到的问题 APP备案 安卓获取平台公钥方法&#xf…

Vue + Element UI 前端篇(九):接口格式定义

接口请求格式定义 前台显示需要后台数据&#xff0c;我们这里先把前后端交互接口定义好&#xff0c;没有后台的时候&#xff0c;也方便用mock模拟。 接口定义遵循几个规范&#xff1a; 1. 接口按功能模块划分。 系统登录&#xff1a;登录相关接口 用户管理&#xff1a;用户…

Redis-1.4-过期策略

1 设置带过期时间的 key # 时间复杂度&#xff1a;O&#xff08;1&#xff09;&#xff0c;最常用方式 expire key seconds# 字符串独有方式 setex(String key, int seconds, String value)除了string独有设置过期时间的方法&#xff0c;其他类型都需依靠expire方法设置时间&a…

说说MySQL回表查询与覆盖索引

分析&回答 什么是回表查询&#xff1f; 通俗的讲就是&#xff0c;如果索引的列在 select 所需获得的列中&#xff08;因为在 mysql 中索引是根据索引列的值进行排序的&#xff0c;所以索引节点中存在该列中的部分值&#xff09;或者根据一次索引查询就能获得记录就不需要…

【Linux】Qt Remote之Remote开发环境搭建填坑小记

总体思路 基于WSL2&#xff08;Ubuntu 22.04 LTS&#xff09;原子Alpha开发板进行Qt开发实验&#xff0c;基于Win11通过vscode remote到WSL2&#xff0c;再基于WSL2通过Qt 交叉编译&#xff0c;并通过sshrsync远程到开发板&#xff0c;构建起开发工具链。 Step1 基于Win11通过…

Mock接口测试

什么是mock? 测试桩&#xff0c;模拟被测对象的返回&#xff0c;用于测试 通常意义的mock指的就是mock server, 模拟服务端返回的接口数据&#xff0c;用于前端开发&#xff0c;第三方接口联调 为什么要mock? 1. 解决依赖问题&#xff1a;当我们测试一个接口或者功能模块…

Python Opencv实践 - 轮廓特征(最小外接圆,椭圆拟合)

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/stars.PNG") plt.imshow(img[:,:,::-1])#轮廓检测 img_gray cv.cvtColor(img, cv.COLOR_BGR2GRAY) ret,thresh cv.threshold(img_gray, 127, 255, 0) contou…

Unity汉化一个插件 制作插件汉化工具

我是编程一个菜鸟&#xff0c;英语又不好&#xff0c;有的插件非常牛&#xff01;我想学一学&#xff0c;页面全是英文&#xff0c;完全不知所措&#xff0c;我该怎么办啊...尝试在Unity中汉化一个插件 效果&#xff1a; 思路&#xff1a; 如何在Unity中把一个自己喜欢的插件…

Flutter 最优秀动画库「完全商业化」,Rive 2 你全面了解过吗?

说到 rive &#xff0c;非 Flutter 开发者可能会感觉比较陌生&#xff0c;而做过 Flutter 开发的可能对 rive 会有所耳闻&#xff0c;因为 rive 在一开始叫 flare &#xff0c;是 2dimensions 公司的开源动画产品&#xff0c;在发布之初由于和 Flutter 团队有深入合作&#xff…

golang获取prometheus数据(prometheus/client_golang包)

文章目录 1. 创建链接1.1 语法1.2 完整示例 2. 简单查询2.1 语法2.2 完整示例 3. 范围值查询3.1 语法3.2 完整示例 【附官方示例】 1. 创建链接 1.1 语法 语法 func NewClient(cfg Config) (Client, error)结构体 type Config struct {Address stringClient *ht…

16-数据结构-图的存储结构

简介&#xff1a;主要为图的顺序存储和链式存储。其中顺序存储即邻接矩阵的画法以及代码&#xff0c;邻接矩阵又分为有权图和无权图&#xff0c;区别就是有数据的地方填权值&#xff0c;无数据的地方可以填0或者∞&#xff0c;而有权图和无权图&#xff0c;又细分为有向图和无向…

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

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