创建一个 5 星评价功能

使用 jquery、ajax 和 php 构建一个 5 星评级系统，网站上的星级评定系统使用户可以轻松地提供反馈并帮助其他人做出选择。它为企业提供有关客户如何喜欢他们的产品的反馈。星级还有助于建立对网站及其产品的信任。

创建一个 5 星评价功能第1张

所有主要的电子商务网站都使用评级来让买家知道他们可以从产品中获得什么样的质量。

在本教程中，我将向您展示如何构建您自己的五星级评级系统。

为结构编写 html 和 css

构建星级评分系统的第一步是编写标记，这将取决于我们要在页面上显示的元素。

我们绝对想在我们的评级小部件中包含电影的名称。我们还需要在小部件内显示五颗星，用户可以单击这些星进行投票。一旦用户投票，我们也会将投票数据显示给用户。

以下 HTML 实现了所有这些：

1    <div class="rating-wrapper" data-id="raiders">    
2      <h2>Raiders of the Lost Ark</h2>    
3      <div class="star-wrapper">    
4        <i class="fa-regular fa-star"></i>    
5        <i class="fa-regular fa-star"></i>    
6        <i class="fa-regular fa-star"></i>    
7        <i class="fa-regular fa-star"></i>    
8        <i class="fa-regular fa-star"></i>    
9      </div>    
10      <p class="v-data">Voting Data</p>    
11    </div>

我正在使用font Awesome库来添加星星。默认情况下，我们希望星星具有黑色描边且无填充。班级fa-regular为我们做到了。

我们还想在用户将鼠标悬停在星星上时将星星的颜色更改为淡黄色，在用户单击它们以表明他们的评分已被记录时更改为橙色。下面的 CSS 为我们完成了这一切：

1    div.rating-wrapper {    
2      display: flex;    
3      align-items: first baseline;    
4      flex-direction: column;    
5      margin: 5rem;    
6      font-size: 1.5rem;    
7    }    
8    
9    div.star-wrapper {    
10      font-size: 2rem;    
11    }    
12    
13    div.star-wrapper i {    
14      cursor: pointer;    
15    }    
16    
17    div.star-wrapper i.yellow {    
18      color: #FDD835;    
19    }    
20    
21    div.star-wrapper i.vote-recorded {    
22      color: #F57C00;    
23    }    
24    
25    p.v-data {    
26      background: #ccc;    
27      padding: 0.5rem;    
28    }

为交互编写 jQuery

我们现在将使用一些 jQuery 来响应用户事件。我们想在我们的恒星上追踪两个事件。

让我们从mouseover事件开始，它将把我们悬停的星星和它前面的所有兄弟姐妹变成黄色。然而，只有当用户还没有点击星标来登记他们的投票时才会发生这种情况。我们将操纵 Font Awesome 星形图标的类来实现这一点。

这是我们需要的代码：

1    $("div.star-wrapper i").on("mouseover", function () {    
2      if ($(this).siblings("i.vote-recorded").length == 0) {    
3        $(this).prevAll().addBack().addClass("fa-solid yellow").removeClass("fa-regular");      
4        $(this).nextAll().removeClass("fa-solid yellow").addClass("fa-regular");    
5      }    
6    });

我们使用该if语句来检查是否有我们当前悬停的星的任何兄弟姐妹以及vote-recorded附加到他们的类。任何此类元素的存在都表明投票已经记录在案。在这种情况下，我们不进行任何类操作。

但是，如果尚未记录投票，我们将获取当前元素和该元素之前的所有兄弟元素，并向它们添加fa-solid和类。yellow我们还从当前元素之后的所有兄弟元素中删除这些类。

现在，我们将编写处理该事件的 jQuery 代码click。每当用户点击第四颗星时，我们就知道他们想给这部电影打四颗星。所以我们记录之前兄弟姐妹的个数，加一得到rating。我们还记录了movie_id将评级添加到正确的电影。

1    $("div.star-wrapper i").on("click", function () {    
2      let rating = $(this).prevAll().length + 1;    
3      let movie_id = $(this).closest("div.rating-wrapper").data("id");    
4    
5      if ($(this).siblings("i.vote-recorded").length == 0) {    
6    
7        $(this).prevAll().addBack().addClass("vote-recorded");    
8        $.post("update_ratings.php", { movie_id: movie_id, user_rating: rating }).done(    
9          function (data) {    
10            parent_div.find("p.v-data").text(data);    
11          }    
12        );    
13    
14      }    
15    });

我们再次检查是否已经为该特定电影记录了投票。如果还没有记录投票，我们将这个vote-recorded类添加到当前点击的元素和它之前的所有兄弟元素中。

我们还使用 jQuerypost()方法通过 POST 请求将我们的投票数据发送到后端。第一个参数是将处理我们的请求的 PHP 脚本的 URL，而第二个参数是我们要处理的数据。

我们还在内部提供回调done()，以便在成功处理我们的请求后进一步处理从服务器发送给我们的数据。

下面的 CodePen 演示展示了我们评级系统的前端是什么样子的：

See the Pen Creating a 5 Star Rating System by Monty (@Shokeen) on CodePen.

编写 PHP 来记录选票

我们将使用 mysql 数据库将投票记录存储在后端。您可以使用您喜欢的任何应用程序来管理您的数据库。我正在使用 phpMyAdmin。这里的第一步是创建一个数据库，我将其命名为rating_test. 我们现在将在数据库中创建一个名为的表movie_ratings。在您的数据库上运行以下 sql 查询以创建表：

1     CREATE TABLE `movie_ratings`(    
2        `id` INT(11) NOT NULL AUTO_INCREMENT,    
3        `movie_id` VARCHAR(128) NOT NULL DEFAULT '',    
4        `average_rating` DOUBLE NOT NULL DEFAULT 0,    
5        `total_votes` DOUBLE NOT NULL DEFAULT 0,    
6        PRIMARY KEY(`id`)    
7    ) ENGINE = InnoDB DEFAULT CHARSET = utf8;

执行上述语句将创建一个movie_ratings以四个不同列命名的表。

第一个是自动递增的id，用作我们添加到表中的每条记录的主键。第二个是movie_id，它将标识一部电影，最多可包含 128 个字符。第三个是average_rating存储到目前为止所有选票的平均值。第四个，total_votes，是跟踪已投选票总数的那个。

再回头看看post()上一节方法的第一个参数。您将看到字符串update_ratings.php，这是我们现在需要创建的文件。该文件将包含更新和记录电影评级的 PHP 代码。

1    $movie_id = $_POST['movie_id'];    
2    $user_rating = $_POST['user_rating'];    
3    
4    $mysqli = new mysqli('localhost', 'root', '', 'rating_test');    
5    
6    if ($mysqli->connect_errno) {    
7        die("Error while connecting: " . $mysqli->connect_error);    
8    }

我们首先使用$_POST来获取 POST 数据，然后创建一个新mysqli对象来建立与数据库的连接。然后我们检查的值，connect_errno看看在我们的数据库连接调用期间是否有错误。

1    $rating_query = $mysqli->query("SELECT * from `movie_ratings` WHERE `movie_id` = '$movie_id'");
2    $rating_query_rows = mysqli_num_rows($rating_query);
3
4    if($rating_query_rows == 0) {
5    $mysqli->query("INSERT INTO `movie_ratings` (`movie_id`, `average_rating`, `total_votes`) VALUES ('$movie_id', $user_rating, 1)");
6
7    echo "Average Rating: $user_rating Total Votes: 1";
8    } else {
9
10   $rating_data = $rating_query->fetch_array(MYSQLI_ASSOC);
11
12    $total_votes = $rating_data['total_votes'];
13    $average_rating = $rating_data['average_rating'];
14
15    $rating_sum = $average_rating*$total_votes + $user_rating;
16
17    $total_votes += 1;
18    $new_average_rating = round($rating_sum/($total_votes), 2);
19
20    $mysqli->query("UPDATE `movie_ratings` SET `average_rating` = $new_average_rating, `total_votes` = $total_votes WHERE `movie_id` = '$movie_id'");
21
22    echo "Average Rating: $new_average_rating Total Votes: $total_votes";
23    }

建立连接后，我们运行第一个查询以查看是否已经有一行要更新其评级的电影。

如果没有这样的电影，我们运行另一个查询将电影插入表中。由于这是为电影投的第一票，我们将总票数设置为 1。

但是，如果表中已经有我们 passed 的行movie_id，我们会从该行获得电影的总票数和当前平均评分。之后，我们计算新的评级并相应地更新数据库。

最后，我们将平均评分和总票数的新值回显给用户。