如何在Django中以星级形式展示商品平均评分

你的模板循环代码失败的原因很直接：product.get_average_rating返回的是浮点型数值，而Django模板的{% for %}循环只能遍历可迭代对象（比如列表、字符串、QuerySet），无法直接遍历数字。下面提供两种可行的实现方案：

方案一：纯Django模板实现（无需JS） #

通过循环生成5颗星星，根据评分值判断每颗星的填充状态（全满、半满、空），配合CSS设置颜色：

模板代码 #

<div class="rating-stars">
    {% with rating=product.get_average_rating %}
        {% for i in "12345" %}
            {% with current_star=i|add:"0" %}
                {% if current_star <= rating %}
                    <span class="star filled">★</span>
                {% elif rating >= current_star|add:"-0.5" %}
                    <span class="star half-filled">⯨</span>
                {% else %}
                    <span class="star empty">☆</span>
                {% endif %}
            {% endwith %}
        {% endfor %}
    {% endwith %}
</div>

CSS样式 #

.rating-stars .star {
    font-size: 1.5rem;
    margin-right: 2px;
}
.rating-stars .filled, .rating-stars .half-filled {
    color: #ffc107; /* 金色 */
}
.rating-stars .empty {
    color: #dee2e6; /* 灰色 */
}

说明：

• 用"12345"字符串生成5次循环，替代Django模板不支持的range语法
• current_star=i|add:"0"将字符串转为整数，方便和浮点评分对比
• 半星使用Unicode符号⯨，也可以根据需求替换为其他半星图标或用CSS渐变实现

方案二：JavaScript实现（适合动态场景） #

如果需要动态更新评分（比如异步加载评论后刷新），可以用JS根据评分数据生成星星：

模板代码 #

<div class="rating-stars" data-rating="{{ product.get_average_rating }}"></div>

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.rating-stars').forEach(el => {
        const rating = parseFloat(el.dataset.rating);
        let starsHtml = '';
        
        for (let i = 1; i <= 5; i++) {
            if (i <= rating) {
                starsHtml += '<span class="star filled">★</span>';
            } else if (i - 0.5 <= rating) {
                starsHtml += '<span class="star half-filled">⯨</span>';
            } else {
                starsHtml += '<span class="star empty">☆</span>';
            }
        }
        
        el.innerHTML = starsHtml;
    });
});

配套CSS #

和方案一的CSS样式完全相同即可。

内容的提问来源于stack exchange，提问作者Raja Shirjeel