[RUBY] [Rails] Comment mettre en œuvre le classement par étoiles

Fonctionnalités que vous souhaitez implémenter

• Vous permet d'entrer et de vous inscrire par classement par étoiles --Afficher le nombre d'étoiles enregistré

table des matières

1. Paramètres de colonne
2. Préparation au classement par étoiles
3. Saisissez et enregistrez le nombre d'étoiles
4. Affichage du nombre d'étoiles

1. Paramètres de colonne

Définissez la colonne pour enregistrer la note. Le type de colonne utilise le type float pour activer l'évaluation demi-étoile.

db/migrate/20XXXXXXXXXXXX_create_posts.rb

class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
     ~Abréviation~
      t.float :evaluation, null: false
     ~Abréviation~
    end
  end
end

2. Préparation au classement par étoiles

Image d'étoiles

https://github.com/wbotelhos/raty/tree/master/lib/images Téléchargez l'image de l'étoile à partir du lien ci-dessus. Placez-le dans un dossier dans les actifs / images.

Fonctionne avec JavaScript

https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js Copiez le code du lien ci-dessus. Collez-le dans assets / javascript / application.js. ** Comme il est écrit en jquery, il est également nécessaire d'installer jquery. ** **

3. Saisissez et enregistrez le nombre d'étoiles

Vous pouvez entrer un classement par étoiles en écrivant ce qui suit dans le fichier de vue.

ruby:app/views/posts/new.html.erb

<%= form_with model: @post, local: true do |f| %>
~Abréviation~
<div class="field" id="star">
  <%= f.label :evaluation, "Évaluation étoilée:" %>
  <%= f.hidden_field :evaluation, id: :review_star %>
  <script>
    $('#star').raty({
      size     : 36,
      starOff:  '<%= asset_path('star-off.png') %>',
      starOn : '<%= asset_path('star-on.png') %>',
      starHalf: '<%= asset_path('star-half.png') %>',
      scoreName: 'post[evaluation]',   #Enregistrer dans la colonne d'évaluation
      half: true,   #Entrée demi-étoile
    });
  </script>
</div>
~Abréviation~
<% end %>

4. Affichage du nombre d'étoiles

Vous pouvez afficher les résultats du classement par étoiles en écrivant ce qui suit dans le fichier de vue qui affiche les détails.

ruby:app/views/posts/show.html.erb

<% @posts.each do |post| %>
~Abréviation~
<div class="relative-post-evaluation">
  <span>Évaluation:</span>
  <span id="star-rate-<%= post.id %>"></span>
  <script>
    $('#star-rate-<%= post.id %>').raty({
      size: 36,
      starOff: "<%= asset_path('star-off.png') %>",
      starOn: "<%= asset_path('star-on.png') %>",
      starHalf: "<%= asset_path('star-half.png') %>",
      half: true,   #Affichage demi-étoile
      readOnly: true,   #Lecture seulement
      score: <%= post.evaluation %>,   #Affichage du nombre d'étoiles
    });
  </script>
  <%= post.evaluation %>
</div>
~Abréviation~
<% end %>

Lien de référence

https://qiita.com/yuki_0920/items/a966d9fa2bdb621f805d https://qiita.com/kitaokeita/items/1e40724c3384507cec13 https://qiita.com/busitora2/items/5b59d1ea9e90c1b016b4