[JAVA] [Schienen] Sternebewertung implementieren (Eingabe, Speichern, Anzeigen)

Einführung

Ich möchte die Memo-Apps, die ich entwickle, bewerten. Dieses Mal werde ich es in drei Schritten bewerten. Außerdem lernen wir, wie Sie Bewertungen nach Sternen eingeben, speichern und anzeigen.

Referenz

jQuery Raty

Sternebewertungsfunktion mit Rails hinzufügen

Verwendung von jQuery Raty

Spalte zur Migrationsdatei hinzufügen

Speichern Sie den Auswertungswert in der Tarifspalte (Typ: float) der Notentabelle (Memotabelle). Wir gehen davon aus, dass die Tabellen und Spalten bereits erstellt wurden.

Die Spalte sollte vom Typ float sein, da bei der Auswertung mit einem halben Stern Werte wie "0,5" und "1,5" gespeichert werden.

Wenn Sie es als Ganzzahl- oder Zeichenfolgentyp erstellt haben, müssen Sie den Typ ändern, obwohl die Änderungsmethode je nach Datenbank unterschiedlich ist. Der folgende Artikel beschreibt eine Lösung, wenn Sie von dieser Art von Änderungssumpf abhängig sind.

class CreateNotes < ActiveRecord::Migration[5.2]
  def change
    create_table :notes do |t|
      t.text :title
      t.integer :user_id
      t.integer :category_id
      t.text :explanation
      t.float :rate

      t.timestamps
    end
  end
end

rails db:migrate:reset

Laden von Javascript, ★ Laden von Bildern

Laden Sie beim Überprüfen des obigen Referenzlinks Javascript und das Sternbild.

Methode (2 Arten)

① Um jQuery Raty zu verwenden, laden Sie jquery.raty.js von https://github.com/wbotelhos/raty herunter.

Platzieren Sie das heruntergeladene Skript an einer beliebigen Stelle auf Ihrer Website.

Legen Sie die heruntergeladene Datei jquery.raty.js im Ordner app / javascripts ab

(2) Laden Sie JavaScript in HTML, das jQuery Raty verwendet. Da Raty ein jQuery-Plugin ist, benötigen Sie auch ein jQuery-Skript.

    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.raty.js"></script>

Dieses Mal werden wir es nach der Methode von ① implementieren.

• Wir werden hier auch JavaScript definieren. Zur Datei "javascripts / application.js" hinzufügen

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery       #hinzufügen
//= require jquery_ujs　 #hinzufügen
//= require_tree .

Gem-Datei hinzufügen

gem 'jquery-rails'

budle install

Modellbeschreibung (Verknüpfung)

note.rb

class Note < ApplicationRecord
  #Verknüpfung mit Benutzern
  belongs_to :user,optional: true

　#Validierung
  validates :title, presence: true
  validates :explanation, presence: true
  
  #Link mit Kategorie
  belongs_to :category

  validates :rate, presence: true
  validates :rate, numericality: {
    # only_integer: true,
    less_than_or_equal_to: 3,
    greater_than_or_equal_to: 1,
  }

# Numericality = leer zulassen
Die Numerizität erlaubt standardmäßig auch Brüche. Ich möchte nur ganze Zahlen in der Rate-Spalte zulassen, also nur_ganze Zahl.
Beispiel
   validates :param３, :numericality => { :less_than_or_equal_to => ３}
   #Ist die Nummer 3 oder weniger?
   validates :param3, :numericality => { :greater_than_or_equal_to => １ }
   #Ist die Nummer 1 oder mehr?

end

Controller-Beschreibung

notes_controller.rb

class NotesController < ApplicationController
  before_action :authenticate_user!
  def new
    @note = Note.new
  end

  def create
    # @note = Note.new(note_params)
    @note = current_user.notes.build(note_params)
    @note.save
    redirect_to notes_path
  end

  def index
    # is_Holen Sie sich alle Datensätze, die übereinstimmen
    @categorys = Category.where(is_valid: true)
    @q = Note.all.ransack(params[:q])
    @notes = @q.result(distinct: true)
  end

  def show
    @note = Note.find(params[:id])
  end

  def edit
    @note = Note.find(params[:id])
  end

  def update
    @note = Note.find(params[:id])
    @note.update(note_params)
    redirect_to note_path
  end

  def destroy
    @note = Note.find(params[:id])
    @note.destroy
    redirect_to notes_path
  end

  def search
    @categorys = Category.where(is_valid: true)
    @category = Category.find(params[:id])
    @q = @category.notes.all.ransack(params[:q])
    @notes = @q.result(distinct: true).page(params[:page])
    @title = @category.name
    render 'notes/index'
  end

  private

  def note_params
    params.require(:note).permit(:title, :category_id, :explanation,:user_id,:rate)
  end
end

Hier fügen wir der Methode "note_params" eine Spalte "rate" hinzu.

Erstellen Sie ein Memo-Registrierungsformular

_form.html.erb

<%= form_with model:note, local: true do |f| %>
  <div class='form-group'>
    <%= f.label :Titel%>
    <%= f.text_field :title, class: 'form-control', id: 'note_title' %>
  </div>
  <div class='form-group'>
    <%= f.label :Kategorie%>
    <%= f.collection_select :category_id, Category.all, :id, :name %>
  </div>
  <!--Auswertung-->
  <div class="form-group row" id="star">
    <%= f.label :rate,'Bedeutung', class:'col-md-1 col-form-label' %>
    <%= f.hidden_field :rate, id: :review_star %>
  </div>
  <div class='form-group'>
    <div id='editor'>
      <%= f.label :Inhalt%>
      <%= f.text_area :explanation, rows: 10, class: 'form-control', id: 'note_explanation', "v-model" => "input", name: "note[explanation]" %>
    <h2><i class="fas fa-eye"></i> Preview</h2>
    <div id="preview-field" v-html='input | marked'>
    </div>
    <div ></div>
  </div>
  <%= f.submit 'Anmeldung', class: 'btn btn-success' %>
  </div>
  <% end %>

  <!--Echtzeitvorschau-->
  <script type="text/javascript">
    window.onload = function() {
      new Vue({
      el: '#editor',
      data: {
        input: '<%== j @note.explanation %>',
      },
      filters: {
      marked: marked,
      },
      });
    };

   <!--Auswertung-->
    $('#star').raty({
      size     : 36,
      starOff:  '<%= asset_path('star-off.png') %>',
      starOn : '<%= asset_path('star-on.png') %>',
      starHalf: '<%= asset_path('star-half.png') %>',
      scoreName: 'note[rate]',
      half: true,
    });
  </script>

Die Punkte sind wie folgt

Um die Hälfte von # ★ eingeben zu können half: true,

Anzeige der Bewertung nach Stern

Ich möchte ★ in der Memoliste anzeigen. Der Unterschied zum obigen "Enter and Save ★" besteht darin, dass 1. ohne Eingabe angezeigt wird, 2. die Verarbeitung wiederholt wird.

_notes_index.html.erb

<div class='row'>
  <table class='table'>
    <thead>
      <tr>
        <th>Titel</th>
        <th>Kategorie</th>
        <th>Bedeutung</th>
      </tr>
    </thead>
    <tbody>
      <% @notes.each do |note| %>
      <% if user_signed_in? && current_user.id == note.user_id %>
      <tr>
        <td>
          <%= link_to note_path(note) do %>
            <%= note.title %>
          <% end %>
        </td>
        <td><%= note.category.name %></td>
        <!--Auswertung-->
　　　　　<td>
         <div id="star-rate-<%= note.id %>"></div>
          <script>
            //Beachten Sie, dass die ID auch bei der iterativen Verarbeitung eindeutig sein kann_ID eingeben
          $('#star-rate-<%= note.id %>').raty({
            size: 36,
            starOff:  '<%= asset_path('star-off.png') %>',
            starOn : '<%= asset_path('star-on.png') %>',
            starHalf: '<%= asset_path('star-half.png') %>',
            half: true,
            //Ich kann nicht einfach durch Lesen eintreten
            readOnly: true,
            score: <%= note.rate %>,
          });
          </script>
        </td>
      </tr>
      <% end %>
      <% end %>
    </tbody>
  </table>
</div>

Die Punkte sind wie folgt

Betten Sie review.id ein, damit die ID auch dann eindeutig bleibt, wenn die iterative Verarbeitung ausgeführt wird

<div id="note-rate-<%= note.id %>"></div>

Schreibgeschützt (kann nicht eingegeben werden)

readOnly: true,

Lesen Sie den Eingabewert des Sterns

score: <%= note.rate %>,

Damit ist fertig!

Schließlich

Bitte beachten Sie, dass die Erklärung möglicherweise schwer zu verstehen ist. Auch wenn es Fehler gibt, würde ich es begrüßen, wenn Sie mich unterrichten könnten.