[JAVA] [Rails] Implémenter le classement par étoiles (entrée, sauvegarde, affichage)

introduction

Je voudrais classer les applications de mémo que je développe. Cette fois, je vais l'évaluer en trois étapes. Parallèlement à cela, nous en apprendrons davantage sur la saisie, l'enregistrement et l'affichage des évaluations par étoiles.

référence

jQuery Raty

Ajouter une fonction de classement par étoiles avec Rails

Comment utiliser jQuery Raty

Ajouter une colonne au fichier de migration

Enregistrez la valeur d'évaluation dans la colonne taux (type: float) de la table des notes (table mémo) Nous supposerons que les tables et les colonnes ont déjà été créées.

La colonne doit être de type flottant car elle stockera des valeurs telles que "0,5" et "1,5" lors de l'évaluation avec une demi-étoile.

Si vous l'avez créé en tant que type entier ou chaîne, vous devrez changer le type, bien que la méthode de changement diffère selon la base de données. L'article ci-dessous décrit une solution lorsque vous êtes accro à ce type de marais de changement.

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

Chargement de javascript, ★ Chargement d'images

Tout en vérifiant le lien de référence ci-dessus, chargez javascript et chargez l'image étoile.

Méthode (2 types)

① Pour utiliser jQuery Raty, téléchargez jquery.raty.js depuis https://github.com/wbotelhos/raty.

Placez le script téléchargé n'importe où sur votre site Web.

Placez le fichier jquery.raty.js téléchargé dans le dossier app / javascripts

(2) Chargez JavaScript dans HTML qui utilise jQuery Raty. Puisque Raty est un plugin jQuery, vous avez également besoin d'un script jQuery.

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

Cette fois, nous allons l'implémenter par la méthode de ①.

• Nous définirons également JavaScript ici. Ajouter au fichier javascripts / application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery       #ajouter à
//= require jquery_ujs　 #ajouter à
//= require_tree .

Ajouter un fichier Gem

gem 'jquery-rails'

budle install

Description du modèle (lien)

note.rb

class Note < ApplicationRecord
  #Liens avec les utilisateurs
  belongs_to :user,optional: true

　#Validation
  validates :title, presence: true
  validates :explanation, presence: true
  
  #Lien avec la catégorie
  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 = autoriser vide
la numéricité autorise également les fractions par défaut. Je souhaite uniquement autoriser les nombres entiers dans la colonne de taux, donc uniquement_entier.
Exemple
   validates :param３, :numericality => { :less_than_or_equal_to => ３}
   #Est-ce que le nombre est 3 ou moins?
   validates :param3, :numericality => { :greater_than_or_equal_to => １ }
   #Est-ce que le numéro est 1 ou plus?

end

Description du contrôleur

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_Obtenez tous les enregistrements qui correspondent
    @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

Ici, nous ajoutons une colonne rate à la méthode note_params.

Faire un formulaire d'inscription mémo

_form.html.erb

<%= form_with model:note, local: true do |f| %>
  <div class='form-group'>
    <%= f.label :Titre%>
    <%= f.text_field :title, class: 'form-control', id: 'note_title' %>
  </div>
  <div class='form-group'>
    <%= f.label :Catégorie%>
    <%= f.collection_select :category_id, Category.all, :id, :name %>
  </div>
  <!--Évaluation-->
  <div class="form-group row" id="star">
    <%= f.label :rate,'importance', class:'col-md-1 col-form-label' %>
    <%= f.hidden_field :rate, id: :review_star %>
  </div>
  <div class='form-group'>
    <div id='editor'>
      <%= f.label :Contenu%>
      <%= 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 'enregistrement', class: 'btn btn-success' %>
  </div>
  <% end %>

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

   <!--Évaluation-->
    $('#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>

Les points sont les suivants

Pour pouvoir saisir la moitié de # ★ half: true,

Affichage de la note par étoile

Je veux afficher ★ dans la liste des mémos. La différence par rapport à "Enter and save ★" ci-dessus est que 1. Affichage sans entrée, 2. Répéter le traitement.

_notes_index.html.erb

<div class='row'>
  <table class='table'>
    <thead>
      <tr>
        <th>Titre</th>
        <th>Catégorie</th>
        <th>importance</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>
        <!--Évaluation-->
　　　　　<td>
         <div id="star-rate-<%= note.id %>"></div>
          <script>
            //Notez que l'identifiant peut être unique même dans le traitement itératif_Entrez l'identifiant
          $('#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,
            //Je ne peux pas entrer simplement en lisant
            readOnly: true,
            score: <%= note.rate %>,
          });
          </script>
        </td>
      </tr>
      <% end %>
      <% end %>
    </tbody>
  </table>
</div>

Les points sont les suivants

Incorporez review.id pour que l'id puisse rester unique même si un traitement itératif est exécuté

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

Lecture seule (ne peut pas être entré)

readOnly: true,

Lire la valeur d'entrée de l'étoile

score: <%= note.rate %>,

Ceci est terminé!

finalement

Veuillez noter que l'explication peut être difficile à comprendre. De plus, s'il y a des erreurs, j'apprécierais que vous puissiez m'apprendre.