[RUBY] [Rails] So implementieren Sie die Sternebewertung

Funktionen, die Sie implementieren möchten

--Ermöglicht die Eingabe und Registrierung nach Sternebewertung

• Anzeige der registrierten Sternebewertung

Inhaltsverzeichnis

1. Spalteneinstellungen
2. Vorbereitung auf die Sternebewertung
3. Geben Sie die Sternebewertung ein und speichern Sie sie
4. Anzeige der Sternebewertung

1. Spalteneinstellungen

Stellen Sie die Spalte ein, um die Bewertung zu speichern. Der Spaltentyp verwendet den Float-Typ, um die Bewertung mit einem halben Stern zu ermöglichen.

db/migrate/20XXXXXXXXXXXX_create_posts.rb

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

2. Vorbereitung auf die Sternebewertung

Bild der Sterne

https://github.com/wbotelhos/raty/tree/master/lib/images Laden Sie das Sternbild über den obigen Link herunter. Legen Sie es in einem Ordner in Assets / Images ab.

Funktioniert mit JavaScript

https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js Kopieren Sie den Code über den obigen Link. Fügen Sie es in assets / javascript / application.js ein. ** Da es in jquery geschrieben ist, muss auch jquery installiert werden. ** **.

3. Geben Sie die Sternebewertung ein und speichern Sie sie

Sie können eine Sternebewertung eingeben, indem Sie Folgendes in die Ansichtsdatei schreiben.

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

<%= form_with model: @post, local: true do |f| %>
~Abkürzung~
<div class="field" id="star">
  <%= f.label :evaluation, "Bewertung in Sternen:" %>
  <%= 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]',   #In Bewertungsspalte speichern
      half: true,   #Halbsterneingabe
    });
  </script>
</div>
~Abkürzung~
<% end %>

4. Anzeige der Sternebewertung

Sie können die Ergebnisse der Sternebewertung anzeigen, indem Sie Folgendes in die Ansichtsdatei schreiben, in der die Details angezeigt werden.

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

<% @posts.each do |post| %>
~Abkürzung~
<div class="relative-post-evaluation">
  <span>Bewertung:</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,   #Halbsternanzeige
      readOnly: true,   #Schreibgeschützt
      score: <%= post.evaluation %>,   #Anzeige der Sternebewertung
    });
  </script>
  <%= post.evaluation %>
</div>
~Abkürzung~
<% end %>

Referenzlink

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