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

墨蓝 2024-03-24 23:22 64阅读 0赞

##  ##

**目录**

前言

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

含义：

作用：

二、功能实现

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

分析：

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

分析：

三、最终效果图

查询输入框所在图：

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

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

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

总结

--------------------

### 前言 ###

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

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

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

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

--------------------

### 一、indexOf是什么？indexOf有什么作用？ ###

#### 含义： ####

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

##### 作用： #####

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

##  ##

### 二、功能实现 ###

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

![542c26397e2a4225bcd7f7342e4f72cb.png][]

#### 分析： ####

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。
2.  如果`this.userForm.userName`不为空且`this.userForm.sex`为空：
    
     *  通过`user.username.indexOf(this.userForm.userName) >= 0`判断用户的用户名是否包含了`this.userForm.userName`，如果是则返回true，否则返回false。
     *  只有当用户名满足条件时，才返回true。
3.  如果`this.userForm.userName`为空且`this.userForm.sex`不为空：
    
     *  通过`user.sex.indexOf(this.userForm.sex) >= 0`判断用户的性别是否包含了`this.userForm.sex`，如果是则返回true，否则返回false。
     *  只有当性别满足条件时，才返回true。
4.  如果`this.userForm.userName`为空且`this.userForm.sex`为空：
    
     *  直接返回true，表示不对用户名和性别进行筛选。

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

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

![491a9a9c40124a8eb6806465223d9572.png][]

#### 分析： ####

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

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

### 三、最终效果图 ###

#### 查询输入框所在图： ####

![70f862727d824233b6a2c0d14e84ba84.png][]

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

![d43ef569d8e2479bb7013bfe176af629.png][]

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

![cbfc082b92c24378ab0b48963932f019.png][]

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

![0909980b62da4fb7bbf9a4e1c02b264e.png][]

### 四、代码块 ###

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`是一个用于查找数组中指定元素索引的方法，可以方便地对数组进行操作和判断。

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

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

[542c26397e2a4225bcd7f7342e4f72cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/25cd86f1865742f7be5a1647ea070e5d.png
[491a9a9c40124a8eb6806465223d9572.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/36da84c8d26043509db948b40582ca27.png
[70f862727d824233b6a2c0d14e84ba84.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/6d6df2fc3c5d468bbd5f93988392fd2c.png
[d43ef569d8e2479bb7013bfe176af629.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5a482da1f547460c875557556b5038f5.png
[cbfc082b92c24378ab0b48963932f019.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/ad9eaa3cd5de40079332f135900060c6.png
[0909980b62da4fb7bbf9a4e1c02b264e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/3d005aabafba4b1092ba615dd3b056b6.png