Django 将数字渲染为 5 星评级

Question

我正在为我的网站建立一个评级系统。它目前运行良好，但我想改进系统的美学方面。我希望能够从数据库中获取评级并将其显示为 5 星评级。另外，如果不是太复杂，我希望能够点击星星将评分记录在数据库中，而不是写一个数字。

我对网络开发很陌生。特别是，我没有使用 javascript 的经验(我只做过在互联网上找到的教程)，我认为这是实现我正在搜索的功能所必需的，所以请给我一个小例子和你的回复，以便我能够了解。

要将评级呈现为星级，我不知道该怎么做。为了将评分记录为星级，我想到了两种解决方案:

1) 使用 django star-ratings但我认为我没有理解它是如何工作的能力。我已经发了一篇帖子来寻求有关此应用程序的帮助和示例，但我没有收到任何帮助，所以我想我应该忘记这一点。

2) 使用带有一些适当小部件的表单将 IntegerInput 呈现为 5 星评级。

对于第二个解决方案，我已经有了代码，我现在需要一个小部件来替换 'Stars'在下面的代码中，但我不知道该怎么做。有人能帮我吗 ？

模型.py

class Avis(models.Model):
    note = models.IntegerField()

表格.py

class AvisForm(forms.ModelForm):
    class Meta:
        model = Avis
        fields = ['note']
        widgets = {'note': forms.NumberInput(attrs={'class': 'Stars'})}
        labels = {'note': 'Note /5'}

用于录音的 hmtl

<form method="post" action="">
  {% csrf_token %}
  {% for field in form %}
  <div class="fieldWrapper form-group">
    {{ field.label_tag }}
    {{ field }}
  </div>
  {% endfor %}
  <input type="submit" class="btn btn-lg btn-outline-primary btn-block btn-login text-uppercase font- 
  weight-bold mb-2" value="Envoyer mon avis" />
</form>

用于显示的 hmtl

{{ avis.note }}

提前致谢 !

编辑(到目前为止我的评级存储代码):
View .py

def avis(request, id): # view for displaying and storing the form
    commande = get_object_or_404(Commande, id=id)

    if request.method == "POST":
        form = AvisForm(request.POST)
        if form.is_valid():
            avis = form.save(commit = False)
            avis.commande = commande
            avis.save()
            commande.has_avis = True
            commande.save()
            if commande.plat.chef.nb_avis==0:
                commande.plat.chef.rating = avis.note
            else:
                commande.plat.chef.rating = (commande.plat.chef.rating*commande.plat.chef.nb_avis + avis.note)/(commande.plat.chef.nb_avis + 1)
            commande.plat.chef.nb_avis += 1
            commande.plat.chef.save()
            messages.success(request, 'Votre avis a été correctement envoyé !')
            return redirect(mes_commandes)
    else:
        form = AvisForm()

    return render(request, 'actualites/avis.html', locals())

def avis2(request, id): # view for recording the rating
    avis = get_object_or_404(Avis, id=id)
    rating = request.POST.get('rating')
    avis.note = rating
    avis.save()
    messages.success(request, 'Votre avis a été correctement envoyé !')
    return redirect(mes_commandes)

html

 <form method="post" action="">
   {% csrf_token %}
   {% for field in form %}
   <div class="fieldWrapper form-group">
      {{ field.label_tag }}
      {{ field }}
   </div>
   {% endfor %}
   <input type="submit" class="btn btn-lg btn-outline-primary btn-block btn-login text-uppercase font-weight-bold mb-2" value="Envoyer mon avis" />
</form>
<div class="rating rating2">
  <a href="#5" title="Give 5 stars" data-value="5">★</a>
  <a href="#4" title="Give 4 stars" data-value="4">★</a>
  <a href="#3" title="Give 3 stars" data-value="3">★</a>
  <a href="#2" title="Give 2 stars" data-value="2">★</a>
  <a href="#1" title="Give 1 star" data-value="1">★</a>
</div>

<script>
  $(".rating a").on('click', function(e){
    let value = $(this).data('value');
     $.ajax({
        url: "{% url 'avis2' %}",
        type: 'POST',
        data: {'rating': value},
        success: function (d){
         // some processing
        }
     })
  });
</script>

表格.py

class AvisForm(forms.ModelForm):
    class Meta:
        model = Avis
        fields = ['commentaire']
        widgets = {'commentaire': forms.Textarea(attrs={'class': 'form-control'})}

Answer 1

我会尽量回答你的两个问题。为了获得评级，您可以渲染星星并为其添加 JS 单击事件。
代码(HTML、CSS)来源:https://codepen.io/GeoffreyCrofte/pen/jEkBL

$(".rating a").on('click', function(e){
	let value = $(this).data('value');
   $.ajax({
      url: "some_url",
      type: 'POST',
      data: {'rating': value},
      success: function (d){
       // some processing
      }
   })
});

.rating {
  width: 300px;
  margin: 0 auto 1em;
  font-size: 45px;
  overflow:hidden;
}
.rating input {
  float: right;
  opacity: 0;
  position: absolute;
}
.rating a, 
.rating label {
			float:right;
			color: #aaa;
			text-decoration: none;
			-webkit-transition: color .4s;
			-moz-transition: color .4s;
			-o-transition: color .4s;
			transition: color .4s;
		}
.rating label:hover ~ label,
.rating input:focus ~ label,
.rating label:hover,
		.rating a:hover,
		.rating a:hover ~ a,
		.rating a:focus,
		.rating a:focus ~ a		{
			color: orange;
			cursor: pointer;
		}
		.rating2 {
			direction: rtl;
		}
		.rating2 a {
			float:none
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rating rating2">
	<a href="#5" title="Give 5 stars" data-value="5">★</a>
	<a href="#4" title="Give 4 stars" data-value="4">★</a>
	<a href="#3" title="Give 3 stars" data-value="3">★</a>
	<a href="#2" title="Give 2 stars" data-value="2">★</a>
	<a href="#1" title="Give 1 star" data-value="1">★</a>
</div>

对于渲染评级，您需要先计算值。您需要确定给 5、3、... 1 颗星评分的人数。假设有 100 个 5 星级、70 * 4 星级、50 * 3 星级、30 * 2 和 20 * 1 星级。因此，您可以通过以下方式确定评级:

sum of rating / total rating

所以它将是 (100 * 5 + 70 * 4 + 50 * 3 + 30 * 2 + 20 * 1)/100 + 70 + 50 + 30 + 20

所以最终评级将是: 3.74

得到宽度百分比:(3.74 * 100)/5 = 74.8

这里的 5 指的是星星总数，这里我假设评级将基于 5 的等级。

对于渲染，您将需要不同的 HTML 和 CSS。

代码来源: https://codepen.io/Bluetidepro/pen/GkpEa

      .star-ratings-css {
            unicode-bidi: bidi-override;
            color: #c5c5c5;
            font-size: 25px;
            height: 25px;
            width: 100px;
            margin: 0 auto;
            position: relative;
            padding: 0;
            text-shadow: 0px 1px 0 #a2a2a2;
        }

        .star-ratings-css-top {
            color: #e7711b;
            padding: 0;
            position: absolute;
            z-index: 1;
            display: block;
            top: 0;
            left: 0;
            overflow: hidden;
        }

        .star-ratings-css-bottom {
            padding: 0;
            display: block;
            z-index: 0;
        }

        .star-ratings-sprite {
            background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
            font-size: 0;
            height: 21px;
            line-height: 0;
            overflow: hidden;
            text-indent: -999em;
            width: 110px;
            margin: 0 auto;
        }

        .star-ratings-sprite-rating {
            background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
            background-position: 0 100%;
            float: left;
            height: 21px;
            display: block;
        }

<div class="star-ratings-css">
    <div class="star-ratings-css-top" style="width: 74.8%">
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
    <div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
</div>

您需要从 View 和 HTML 中传递宽度，您需要访问它。 <div class="star-ratings-css-top" style="width: {{ width }}%"> .我试过这些代码片段，对我有用，也应该对你有用:)