php实现星级评分
PHP实现星级评分
数据库设计
创建一个包含评分数据的数据库表，例如ratings，包含字段id、item_id、user_id、rating和timestamp。item_id表示被评分的项目，user_id表示评分用户，rating存储1-5的星级值。
CREATE TABLE ratings (
id INT AUTO_INCREMENT PRIMARY KEY,
item_id INT NOT NULL,
user_id INT NOT NULL,
rating TINYINT NOT NULL,
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);前端显示星级
使用HTML和CSS创建星级评分界面。通过单选按钮或点击事件捕获用户选择的星级。
<div class="star-rating">
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5" title="5 stars">★</label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4" title="4 stars">★</label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3" title="3 stars">★</label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2" title="2 stars">★</label>
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1" title="1 star">★</label>
</div>CSS样式
为星级评分添加样式，使其在悬停和选中时有视觉反馈。
.star-rating {
direction: rtl;
unicode-bidi: bidi-override;
display: inline-block;
}
.star-rating input {
display: none;
}
.star-rating label {
color: #ddd;
font-size: 30px;
cursor: pointer;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #ffcc00;
}PHP处理评分
创建一个PHP脚本接收前端提交的评分数据，并将其存入数据库。同时验证用户是否已评分，避免重复提交。
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$item_id = $_POST['item_id'];
$user_id = $_POST['user_id'];
$rating = $_POST['rating'];
// 验证数据
if (!is_numeric($item_id) || !is_numeric($user_id) || !is_numeric($rating)) {
die('Invalid data');
}
// 检查用户是否已评分
$pdo = new PDO('mysql:host=localhost;dbname=your_database', 'username', 'password');
$stmt = $pdo->prepare('SELECT id FROM ratings WHERE item_id = ? AND user_id = ?');
$stmt->execute([$item_id, $user_id]);
if ($stmt->rowCount() > 0) {
die('You have already rated this item');
}
// 插入新评分
$stmt = $pdo->prepare('INSERT INTO ratings (item_id, user_id, rating) VALUES (?, ?, ?)');
$stmt->execute([$item_id, $user_id, $rating]);
echo 'Rating submitted successfully';
}
?>计算平均评分
从数据库获取所有评分并计算平均分，用于显示项目的总体评分。
<?php
function getAverageRating($item_id) {
$pdo = new PDO('mysql:host=localhost;dbname=your_database', 'username', 'password');
$stmt = $pdo->prepare('SELECT AVG(rating) as avg_rating FROM ratings WHERE item_id = ?');
$stmt->execute([$item_id]);
$result = $stmt->fetch();
return round($result['avg_rating'], 1);
}
$average_rating = getAverageRating($item_id);
echo "Average Rating: " . $average_rating;
?>显示平均星级
根据计算出的平均分，在前端显示相应的星级。
<?php
function displayStars($average) {
$full_stars = floor($average);
$half_star = ($average - $full_stars) >= 0.5 ? 1 : 0;
$empty_stars = 5 - $full_stars - $half_star;
for ($i = 0; $i < $full_stars; $i++) {
echo '★';
}
if ($half_star) {
echo '½';
}
for ($i = 0; $i < $empty_stars; $i++) {
echo '☆';
}
}
displayStars($average_rating);
?>防止重复提交
在用户提交评分后，禁用评分按钮或显示已评分状态，避免用户多次提交。
document.querySelectorAll('.star-rating input').forEach(input => {
input.addEventListener('change', function() {
// 禁用所有星级选项
document.querySelectorAll('.star-rating input').forEach(i => {
i.disabled = true;
});
// 提交表单
document.getElementById('rating-form').submit();
});
});
