《vue3实战》通过indexOf方法实现电影评价系统的模糊查询功能

简介: 《vue3实战》通过indexOf方法实现电影评价系统的模糊查询功能

前言

电影评价系统的模糊查询是什么?它的作用体现在哪些方面?

电影评价系统的模糊查询是一种查询方法,用于在用户输入的关键词中进行模糊匹配,而不仅仅是精确匹配。这种查询方法可以查找到与关键词相关的结果,即使关键词的拼写或格式有所不同。

模糊查询的作用体现在以下方面:

  1. 提高用户体验:模糊查询可以更好地满足用户的搜索需求,即使用户输入的关键词存在一定的拼写错误或格式差异,也能够找到相关的结果。这样可以提高用户对系统的满意度,并减少他们需要进行多次尝试的次数。
  2. 扩展搜索结果:模糊查询可以使系统返回更全面的搜索结果。通常来说,精确匹配可能会忽略一部分相关的内容,而模糊查询可以找到更多满足用户要求的结果,包括拼写相似或格式近似的内容。
  3. 对应多样性需求:不同用户对于搜索结果的要求可能存在一定的差异。一些用户可能更关注特定类型的电影,而另一些用户可能更注重演员、导演等相关信息。通过模糊查询,系统能够根据用户输入的关键词,提供更加符合他们需求的搜索结果。
  4. 灵活匹配多种场景:在电影评价系统中,用户可能输入的关键词包括电影名称、演员、导演、电影类型等。模糊查询可以在这些不同的场景下,根据用户输入的关键词进行模糊匹配,找到与之相关的电影评价。

一、indexOf是什么?indexOf有什么作用?

含义:

indexOf是一个JavaScript数组的方法,用于在数组中查找指定元素的索引。

作用:
  1. 查找元素:indexOf可以用来判断数组中是否存在某个元素。如果指定元素存在于数组中,则返回第一次出现的索引;如果不存在,则返回-1。
  2. 根据索引操作数组:知道元素在数组中的索引,我们可以使用这个索引来访问、修改和删除数组中的元素。
  3. 判断元素是否唯一:由于indexOf只返回第一次出现的索引,可以通过它来判断一个元素在数组中是否是唯一的。

二、功能实现

这段是查询过程中过滤筛选功能的代码部分:

分析:

  1. 如果this.userForm.userName不为空且this.userForm.sex不为空:
  • 通过user.username.indexOf(this.userForm.userName) >= 0判断用户的用户名是否包含了this.userForm.userName,如果是则返回true,否则返回false。
  • 通过user.sex.indexOf(this.userForm.sex) >= 0判断用户的性别是否包含了this.userForm.sex,如果是则返回true,否则返回false。
  • 只有当用户名和性别都满足条件时,才返回true。
  1. 如果this.userForm.userName不为空且this.userForm.sex为空:
  • 通过user.username.indexOf(this.userForm.userName) >= 0判断用户的用户名是否包含了this.userForm.userName,如果是则返回true,否则返回false。
  • 只有当用户名满足条件时,才返回true。
  1. 如果this.userForm.userName为空且this.userForm.sex不为空:
  • 通过user.sex.indexOf(this.userForm.sex) >= 0判断用户的性别是否包含了this.userForm.sex,如果是则返回true,否则返回false。
  • 只有当性别满足条件时,才返回true。
  1. 如果this.userForm.userName为空且this.userForm.sex为空:
  • 直接返回true,表示不对用户名和性别进行筛选。

          因此,这段代码的功能是根据用户输入的条件对用户进行筛选,可以根据用户名和性别分别进行筛选,也可以只根据其中一个条件进行筛选,同时也支持不设定任何筛选条件。

这段是查询用户和性别功能的代码部分:

         

分析:

  1. 通过this.courses.filter(this.filterRule)使用filterRule函数对this.courses数组进行筛选,得到符合条件的用户数据,并赋值给this.newCourses数组。
  2. 通过this.newCourses.length获取this.newCourses数组的长度,即符合条件的用户数量,并将其赋值给this.total变量。
  3. 根据用户输入的分页参数,计算出当前页显示的用户数据的起始索引和结束索引,并赋值给startend变量。
  4. 通过this.newCourses.slice(start, end)startend为范围,获取this.newCourses数组中对应范围的用户数据,并将其赋值给this.pageMess变量。

       因此,这段代码的功能是根据用户输入的筛选条件,对this.courses数组中的用户数据进行筛选,并根据分页参数获取对应页码的用户数据,最终将符合条件的用户数据赋值给this.pageMess变量,并更新this.total变量以反映符合条件的用户总数量。

三、最终效果图

查询输入框所在图:

输入姓名羊和性别男模糊查询后的效果图:

输入姓名羊和性别女模糊查询后的效果图:

单独输入姓名狼模糊查询后的效果图:

四、代码块

 <div style="margin-left: 150px;margin-top: 0px">
                  <span><input type="text" placeholder="请输入姓名" v-model="userForm.userName"></span>
                  <span><input type="text" placeholder="请输入性别" v-model="userForm.sex"></span>
                  <button @click="queryUser()"
                          style="background-color: #1989fa;border-radius:5px;width:60px;height:30px">
                    查询
                  </button>
</div>
 
  mounted() {
 
    this.$watch('userForm.page.userPage', function () {
      if (this.userForm.userName == "" && this.userForm.sex == "") {
        if (this.userForm.page.userPage > Math.ceil(this.courses.length / this.userForm.page.pageSize) || this.userForm.page.userPage < 0) {
          this.userForm.page.userPage = 1;
        }
        let 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);
      } else if (this.userForm.userName != "" && this.userForm.sex == "") {
        if (this.userForm.page.userPage > Math.ceil(this.newCourses.length / this.userForm.page.pageSize) || this.userForm.page.userPage < 0) {
          this.userForm.page.userPage = 1;
        }
        let start = (this.userForm.page.userPage - 1) * this.userForm.page.pageSize;
        let end = (this.userForm.page.userPage * this.userForm.page.pageSize);
        this.pageMess = this.newCourses.slice(start, end);
      } else if (this.userForm.userName == "" && this.userForm.sex != "") {
        if (this.userForm.page.userPage > Math.ceil(this.newCourses.length / this.userForm.page.pageSize) || this.userForm.page.userPage < 0) {
          this.userForm.page.userPage = 1;
 
        }
        let start = (this.userForm.page.userPage - 1) * this.userForm.page.pageSize;
        let end = (this.userForm.page.userPage * this.userForm.page.pageSize);
        this.pageMess = this.newCourses.slice(start, end);
      } else if (this.userForm.userName != "" && this.userForm.sex != "") {
        if (this.userForm.page.userPage > Math.ceil(this.newCourses.length / this.userForm.page.pageSize) || this.userForm.page.userPage < 0) {
          this.userForm.page.userPage = 1;
        }
        // let start = (this.userForm.page.userPage - 1) * this.userForm.page.pageSize;
        // let end = (this.userForm.page.userPage * this.userForm.page.pageSize);
        // this.pageMess = this.newCourses.slice(start, end);
        let start = (this.userForm.page.userPage - 1) * this.userForm.page.pageSize;
        let end = (this.userForm.page.userPage * this.userForm.page.pageSize);
        this.pageMess = this.newCourses.slice(start, end);
      }
    })
  },
  methods: {
    filterRule(user) {
      if (!(!this.userForm.userName) && this.userForm.sex != "") {
        return user.username.indexOf(this.userForm.userName) >= 0
            && user.sex.indexOf(this.userForm.sex) >= 0;
      } else if (!(!this.userForm.userName) && this.userForm.sex.length == 0) {
        return user.username.indexOf(this.userForm.userName) >= 0
      } else if (this.userForm.userName.length == 0 && !(!this.userForm.sex)) {
        return user.sex.indexOf(this.userForm.sex) >= 0
      } else {
        return true
      }
    },
    queryUser() {
      // this.newCourses = this.courses.filter(this.filterRule)
      this.newCourses = this.courses.filter(this.filterRule)
      this.total = this.newCourses.length
      // debugger
      let start = (this.userForm.page.userPage - 1) * this.userForm.page.pageSize;
      let end = (this.userForm.page.userPage * this.userForm.page.pageSize);
      this.pageMess = this.newCourses.slice(start, end);//[0,5)
    },


总结

       总的来说,模糊查询可以提高用户搜索的准确性和满意度,并增加搜索结果的完整性和多样性。它能够更好地满足用户在电影评价系统中的搜索需求。

      总之,indexOf是一个用于查找数组中指定元素索引的方法,可以方便地对数组进行操作和判断。

相关文章
|
开发工具 Android开发 数据安全/隐私保护
Cocos Creator Android 平台 Facebook 原生登录(一)
Cocos Creator Android 平台 Facebook 原生登录
765 0
解决开启子线程,导致request上下文和session信息丢失问题
解决开启子线程,导致request上下文和session信息丢失问题
1434 0
|
9月前
|
Oracle 安全 关系型数据库
【赵渝强老师】PostgreSQL的参数文件
PostgreSQL数据库的四个主要参数文件包括:`postgresql.conf`(主要配置文件)、`pg_hba.conf`(访问控制文件)、`pg_ident.conf`(用户映射文件)和`postgresql.auto.conf`(自动保存修改后的参数)。视频讲解和详细说明帮助理解各文件的作用。
292 19
|
11月前
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图,替换为自定义的图像或视频纹理。
412 1
Cesium修改地球的贴图为视频或者图片
|
存储 测试技术 Go
用功能模型实现一个预约系统
【9月更文挑战第6天】本文介绍功能模型描述系统的功能需求和操作逻辑,常用数据流图(DFD)或用例图表示,关注系统如何处理输入、输出、数据存储和计算。在订餐系统中,功能模型涵盖预约界面交互、数据库访问、菜单列表查询及时段表管理。对象模型描述系统中的类和对象,功能模型则描述这些对象的功能实现;动态模型描述运行时行为。通过封装、抽象、继承、多态、交互、职责分离及数据和行为的统一,功能模型提高代码组织性和可维护性,增强系统灵活性和扩展性。
961 22
|
容器
Vue3图片(Image)
该图片预览组件提供丰富的功能,包括设置鼠标悬浮预览文本、图像描述、尺寸调整、适应容器模式等。支持单张或多张图片展示,具备旋转、缩放、镜像等功能,并可通过键盘或滚轮控制。组件允许自定义多项属性,如图像地址、宽度、高度、边框显示等,并兼容多种使用场景,如相册模式和循环切换。组件内部使用了 Vue3 的 `Spin` 和 `Space` 组件以及 `add` 函数辅助实现。
469 2
Vue3图片(Image)
[simulink] --- 数据字典
[simulink] --- 数据字典
493 0
|
Linux
centos bond配置文件示例
centos bond配置文件示例
251 2
|
JavaScript
Vue 监听输入框(input、textarea ...)粘贴事件获取图片、视频、文件、文件夹
Vue 监听输入框(input、textarea ...)粘贴事件获取图片、视频、文件、文件夹
1251 0
|
传感器 运维 网络协议
面向 IPv6 的淘宝 App 网络技术与体验升级
面向 IPv6 的淘宝 App 网络技术与体验升级
8153 0

热门文章

最新文章