[JAVA] [Rails 6] Revue en forme d'étoile utilisant Raty.js

1.Tout d'abord

J'ai cherché sur Google pour mettre en œuvre une critique d'étoile

"Le fichier javascripts n'existe pas dans app / assets !! ", vous vous en plaignez! !! !! !! !!

La raison pour laquelle il n'y a pas de javascripts dans les actifs est

C'est

Parce que l'environnement de développement est rails6!

La gestion de JavaScript a changé depuis Ruby on Rails 6.0!

Cet article décrit comment déployer Raty dans un environnement Rails 6 (standard Webpacker) et implémenter la fonction de classement par étoiles!

2 Image terminée

Affichez la note avec une étoile!

Les utilisateurs peuvent consulter en cliquant sur le bouton étoile!

3 Environnement de développement et hypothèses

Environnement de développement

rails 6.0.3.4

supposition

• Le modèle est défini comme suit. Le modèle utilisateur et le modèle Maison ont une relation plusieurs-à-plusieurs avec le modèle Comment en tant que table intermédiaire

--Enregistrer la valeur d'évaluation dans la colonne étoile (type: entier) du tableau des commentaires (tableau pour la publication des avis).

• Continuez en supposant que les tables et les colonnes ont déjà été créées.

• Si vous voulez évaluer une colonne avec une demi-étoile, vous devez en faire un type float car vous sauvegarderez des valeurs telles que "0.5" et "1.5". Cette fois, la colonne étoile est de type entier car elle n'est évaluée qu'avec des entiers.

4 Introduction de jQuery

yarn add jquery

Lors de la gestion avec Webpacker, utilisez le package Node.js. Attention Lors de l'introduction de jquery dans d'autres articles, utilisez le gem" jquery-rails ", mais ne l'utilisez pas dans l'environnement rails6 comme celui-ci! !! La commande yarn add écrira la version dans package.json lorsque le package est installé.

Ensuite, dans le fichier de configuration de Webpacker, écrivez la description de l'ajout de jQuery sous gestion.

config/webpack/environment.js

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

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

```
 Enfin, appelez jQuery.


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


réduction

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

5 Introduction de jQuery Raty

5_1 Enregistrez l'image de l'étoile

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

De github ici star-off.png star-on.png Et mettez-le dans un dossier dans assets / images. (Copiez star-harf.png si vous voulez évaluer avec une demi-étoile)

5_2 Raty introduit

Créez raty.js dans app / javascript / packs.

Ensuite, copiez le code js de l'URL suivante dans raty.js.

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

Enfin, ajoutez ce qui suit à application.js

app/javascript/packs/application.js

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

6 Décrit en vue

6_1 Saisissez une note

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,'Évaluation', class:'col-md-3 col-form-label' %>
    <%= f.hidden_field :star, id: :review_star %>
  </div>

  <!--Évaluation 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 %>

Explication

--Commentaire Enregistrer la valeur dans la colonne étoile du modèle scoreName: 'comment[star]'

-Ne saisissez pas la moitié de ⭐️! half: false,

6_2 Affichage du classement par étoiles

Décrivez les éléments suivants dans la vue que vous souhaitez évaluer par étoiles

<h1>Liste de révision</h1>
<%= link_to 'Poster un avis', new_house_comment_path(house_id: params[:house_id]) %>
<% @comments.each do |comment|%>

  <div class=card>
    <p>Contenu:<%= comment.content%></p>
    <p>Évaluation:<%= comment.star%>point</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 %>

finalement

Si ça ne marche pas, Avec l'implémentation de Raty, aucune déclaration d'erreur n'est affichée sur le terminal, utilisez donc les outils de développement de votre navigateur pour vérifier la déclaration d'erreur! !! Débutants! Comment utiliser la fonction de vérification de Chrome (outil de développement)

référence

• Je souhaite utiliser Raty.js dans l'environnement de développement Webpacker avec Rails6.
• Use Star Review Raty with Rails
• [Rails] Implémenter le classement par étoiles pour examen (saisie, enregistrement, affichage)