如何构建简单的评论和五星评级系统？

Question

我对Web技术很陌生，这是我团队的一个学期项目。我们正在开发一个美食评价网站。

目前，我不确定如何实现一个简单的五星评分系统。我应该使用像PHP这样的服务器端语言还是像JavaScript（w / JQuery）这样的客户端语言？看起来JQuery更适合这个任务？或者需要两者结合使用吗？

就功能而言，我想要：

• 鼠标悬停时星星亮起
• 点击星星时无需重新加载页面（这不是必需的）
• 星级旁边显示某种平均分
• 将评分存储在MySQL数据库中（这是个好主意吗？）

如果我的问题听起来含糊不清或愚蠢，请见谅，我对如何实现这个项目一无所知，并已经尝试了谷歌搜索。如果您有任何问题，请告诉我。

非常感谢。

- Chris Vinz

Answer 1

鼠标悬停时星星会亮起来
有一篇非常好的网络教程可以设计一个5星级评分系统：http://rog.ie/blog/css-star-rater。它是纯CSS，所以不需要使用JavaScript。

当点击星星时无需重新加载页面（实际上并不需要）
Ajax是你的朋友，我做的是用<a class="one_star" href="javascript: submitRating(1, 5)"> 其中<a>表示星星，submitRating()函数使用Ajax将我的评分（1/5）传输到服务器，服务器存储评分（并指定给出评分的用户），重新计算新的平均评分，并以JSON格式提交结果。

在星星旁边显示某些平均值
很容易。编写一个SQL脚本，根据产品ID，将平均评分（即1/5 + 2/5 + 4/5等）相加，然后将其（总和）除以总评分数再乘以100。将该值返回给服务器，然后从服务器返回给客户端。

评分必须存储在MySQL数据库中（这是一个好主意吗？）
我正在使用MySQL进行此操作，并且它工作得很好...任何数据库系统都可以。

- Buhake Sindi

---

Ajax（http://en.wikipedia.org/wiki/Ajax_%28programming%29）和JSON（http://en.wikipedia.org/wiki/JSON）的简要介绍。 - Buhake Sindi

AJAX或者Javascript并不是必要的，也可以在不重新加载页面的情况下实现此功能：https://dev59.com/oXPYa4cB1Zd3GeqPouhn - A.B. Carroll

@Uday Sawant，链接现在可以使用了。我猜博客的作者想要重新设计它。 - Buhake Sindi

性能如何？如果我有数百万的评分要求和呢？ - kabrice

链接又坏了。 - ale10ander

Answer 2

鼠标悬停时星星发光
简单来说，需要有一个黄色星星的图片和一个白色星星的图片。当鼠标悬停在某个星星上时，该星星左侧的所有星星都会将它们的"src"更改为黄色星星，右侧的所有星星都会将它们的"src"更改为白色星星。

点击星星时页面不会重新加载
可以考虑使用Ajax/XHR技术
http://en.wikipedia.org/wiki/Ajax_(programming)
提示：创建一个名为vote.php的.php文件，并将用户给出的食品ID和评分传递给它。

在星星之间显示某种平均值
大多数网站只显示0％，50％和100％的星星...用户不会因为没有'确切精度'而感到恐慌

评分应存储在MySQL数据库中
任何数据库系统都可以。但是，您可能希望为此使用SQL数据库。

- Warty

---

对于你的第一个答案，可以使用CSS来完成...请看我的回答。 - Buhake Sindi

Answer 3

这里有一个类似问题的答案，应该是一个很好的起点。

使用jQuery和CSS将数字转换为星级评分显示

- Justin Johnson

Answer 4

是的，你的方法听起来很完美。有几个要点：

带悬停效果的星级评分：

JQuery：http://www.fyneworks.com/jquery/star-rating/

原型：http://www.fyneworks.com/jquery/star-rating/

CSS：http://www.henryhoffman.com/css-star-rating-tutorial.html

可以使用JQuery的onclick调用ajax请求：

http://api.jquery.com/jQuery.post/

然后在服务器端可以将其维护在一个评分表中。

这里有一个更长的例子：

http://webtint.net/tutorials/5-star-rating-system-in-php-mysql-and-jquery/

- user262976

Answer 5

使用JS和PHP的组合是正确的方式（如果PHP是您选择的服务器端语言）。 JQuery是一种很好的方式，可以轻松地实现某种评分系统，我曾经为我的一个网站开发过这个功能，后来将其删除。 它是一个简单的东西，将onrollover事件链接到5个图像。 当被点击时，如果它是“id 4”，它将使用jQuery的.post（）函数将用户的投票发送到记录用户并在MySQL数据库中记录投票（如果他们还没有投票）的PHP脚本中。

- Xorlev

Answer 6

要有一个漂亮的星形控件，你需要使用JavaScript。所以你应该使用jQuery。

是的，你需要将东西存储在数据库中。你可以使用PHP和MySQL来实现。

考虑到这是一个课堂作业，实现起来很多。可以通过使用现有的CMS来作弊。Drupal特别适合你所要求的功能。你不需要学习太多Drupal，只需购买《使用Drupal》一书。第4章将向您展示如何：

建立一个社区产品评论网站，使用Fivestar模块提供评分小部件。

Drupal基于PHP，并使用MySQL作为其数据库，因此它似乎符合您的要求。可能需要一点时间才能运行Drupal...但然后你就可以轻松地进入第4章了。

如果老师坚持让你编写代码，Drupal是开源的，很容易添加自定义模块。

- Frank Schwieterman

---

你不必仅使用jQuery来完成它...我使用了简单的ajax和JS...没问题！ - Buhake Sindi