[JAVA] [Rails 6] Sternförmige Überprüfung mit Raty.js

1. Zuallererst

Ich habe gegoogelt, um eine Sternebewertung durchzuführen

"Die" Javascripts-Datei "existiert nicht in App / Assets !!", klagen Sie dort! !! !! !! !!

Der Grund, warum es keine Javascripts in Assets gibt, ist

das ist

Weil die Entwicklungsumgebung Rails6 ist!

Der Umgang mit JavaScript hat sich seit Ruby on Rails 6.0 geändert!

Dieser Artikel beschreibt, wie Raty in einer Rails 6-Umgebung (Webpacker-Standard) bereitgestellt und die Sternebewertung implementiert wird!

2 Abgeschlossenes Bild

Zeigen Sie die Bewertung mit einem Stern an!

スクリーンショット 2020-11-07 15.50.15.png

Benutzer können durch Klicken auf die Stern-Schaltfläche überprüfen!

スクリーンショット 2020-11-07 15.57.58.png

3 Entwicklungsumgebung und Annahmen

Entwicklungsumgebung

rails 6.0.3.4

Annahme

Das Modell ist wie folgt eingestellt. "Benutzermodell und Hausmodell haben eine Viele-zu-Viele-Beziehung zum Kommentarmodell als Zwischentabelle"
Speichern Sie den Bewertungswert in der Sternspalte (Typ: Ganzzahl) der Kommentartabelle (Tabelle zum Veröffentlichen von Bewertungen).
Gehen Sie davon aus, dass die Tabellen und Spalten bereits erstellt wurden.
Wenn Sie eine Spalte mit einem halben Stern auswerten möchten, müssen Sie sie als Gleitkommatyp festlegen, da Sie Werte wie "0,5" und "1,5" speichern. Diesmal ist die Sternspalte vom Typ Ganzzahl, da sie nur mit Ganzzahlen ausgewertet wird.

4 Einführung von jQuery

yarn add jquery

Verwenden Sie bei der Verwaltung mit Webpacker das Paket Node.js. Achtung Wenn Sie jquery in anderen Artikeln einführen, verwenden Sie den Edelstein" jquery-Rails ", aber verwenden Sie ihn nicht in der Rails6-Umgebung wie dieser! !! Der Befehl yarn add schreibt die Version in package.json, wenn das Paket installiert wird.

Schreiben Sie als Nächstes in die Webpacker-Konfigurationsdatei die Beschreibung zum Hinzufügen von verwaltetem jQuery.

`config/webpack/environment.js`


const { environment } = require('@rails/webpacker')
#Nachtrag
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
  })
)
#Bisher
module.exports = environment

```
 Rufen Sie abschließend jQuery auf.


#### **``app/javascript/packs/application.js`**
```js


Kürzung

window.$ = window.jQuery = require('jquery'); #Nachtrag

5 Einführung von jQuery Raty

5_1 Speichern Sie das Bild des Sterns

https://github.com/wbotelhos/raty/tree/master/lib/images

Von Github hier star-off.png star-on.png Und legen Sie es in einem Ordner in Assets / Images. (Kopieren Sie star-harf.png, wenn Sie mit einem halben Stern auswerten möchten.)

5_2 Raty eingeführt

Erstellen Sie raty.js in app / javascript / packs.

Kopieren Sie als Nächstes den js-Code der folgenden URL nach raty.js.

https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js

Fügen Sie abschließend Folgendes zu application.js hinzu

`app/javascript/packs/application.js`


window.$ = window.jQuery = require('jquery'); 
require('packs/raty') #Nachtrag

6 In Ansicht beschrieben

6_1 Geben Sie eine Sternebewertung ein

スクリーンショット 2020-11-07 15.57.58.png

`ruby:_form.html.erb`


<%= form_for [@house, @comment] do |f| %>
  <div class="field">
  <div>
    <%= f.label :content%>
    <%= f.text_field :content %>
  </div>

  <div>
    <%= f.submit button_value %>
  </div>

    <div class="form-group row" id="star">
    <%= f.label :star,'Auswertung', class:'col-md-3 col-form-label' %>
    <%= f.hidden_field :star, id: :review_star %>
  </div>

  <!--Bewertung Javascript-->
  <script>
  $('#star').raty({
    size     : 36,
    starOff:  '<%= asset_path('star-off.png') %>',
    starOn : '<%= asset_path('star-on.png') %>',
 
    scoreName: 'comment[star]',
    half: false,
  });
  </script>  

<% end %>

Erläuterung

--Kommentar Speichern Sie den Wert in der Sternspalte des Modells scoreName: 'comment[star]'

Geben Sie nicht die Hälfte von ⭐️ ein! half: false,

6_2 Sternebewertung

Beschreiben Sie Folgendes in der Ansicht, die Sie nach Sternen bewerten möchten スクリーンショット 2020-11-07 15.50.15.png

<h1>Überprüfungsliste</h1>
<%= link_to 'Schreiben Sie eine Rezension', new_house_comment_path(house_id: params[:house_id]) %>
<% @comments.each do |comment|%>

  <div class=card>
    <p>Inhalt:<%= comment.content%></p>
    <p>Auswertung:<%= comment.star%>Punkt</p>
    <div id="star-rate<%= comment.id%>"></div>    
    <script>
      $('#star-rate<%= comment.id%>').raty({
        size      : 36,
        starOff   : '<%= asset_path('star-off.png') %>',
        starOn    : '<%= asset_path('star-on.png') %>',
        half      : false,
        readOnly: true,
        score: <%= comment.star %>,
      });
    </script>
  </div>
<% end %>

Schließlich

Wenn es nicht funktioniert, Bei der Implementierung von Raty wird keine Fehleranweisung auf dem Terminal angezeigt. Verwenden Sie daher die Entwicklertools Ihres Browsers, um die Fehleranweisung zu überprüfen! !! Anfänger! Verwendung der Überprüfungsfunktion von Chrome (Entwicklertool)