[RUBY] Implementieren Sie die Star Five-Funktion mit der for-Anweisung

1. Bereiten Sie eine Spalte vor

So implementieren Sie eine 5-Sterne-Bewertung für Ihre Shop- und Essenspostings! !! Bereiten Sie zunächst eine Spalte vor, in der die Anzahl der Sterne gespeichert werden soll. Erstellen Sie eine ganzzahlige Spalte mit dem Namen star.

rails g migration AddStarToPosts star:integer

Die Migrationsdatei befindet sich unten.

class AddStarToPosts < ActiveRecord::Migration[5.1]
  def change
    add_column :posts, :star, :integer
  end
end

Ich werde migrieren.

rails db:migrate

Überprüfen Sie das Datenbankschema in der Beitragstabelle

schema.rb

t.integer "star"

Wenn es geschrieben ist, ist es OK!

2. Neue Seite bearbeiten

Wir können die Nummer "2" für 2 Sterne und "5" für 5 Sterne senden. Alles ist in Ordnung, solange Sie einen numerischen Wert senden können, aber hier werden wir ihn mit Radio implementieren.

html:posts/new.html.erb

<%= form_for @posts do |f| %>
  <div class="field">
  <p>
    <%= f.label :name %>
    <%= f.text_field :name %>
   
  </p>
<-!Teil hinzugefügt->
  <p>
5 Sterne Bewertung:
    <label><%= f.radio_button :star, 1 %> 1</label>
    <label><%= f.radio_button :star, 2 %> 2</label>
    <label><%= f.radio_button :star, 3 %> 3</label>
    <label><%= f.radio_button :star, 4 %> 4</label>
    <label><%= f.radio_button :star, 5 %> 5</label>
   </p>
<-!Bisher->
  </div>
  <%= f.submit "POST IT!" %>
<% end %>

3. Reparieren Sie den Controller

Wenn Sie eine Aktion verwenden, um einen Parameter in der Aktion "Erstellen" zu erhalten, Fügen wir eine Sternspalte hinzu

posts_controller.rb

private
  def post_params
    params.require(:posts).permit(:name,:star)
  end

4. Schreiben Sie Sterne auf die Indexseite

Schließlich werden die Sterne in der for-Anweisung angezeigt! !!

html:posts/index.heml.erb

<% @posts.each do |t| %>
   <div class="index-name">
        <%= t.name %>
   </div>
   <-!Zusätzliche Punkte->
   <div class=“star-bar”>
　　　<%for i in 1..t.star do%>
        ★
　　　<%end%>
　　</div>
   <-!Zusätzliche Punkte->
<%end%>       

Damit ist die Fünf-Sterne-Funktion abgeschlossen! !!