[Rails 6] Raty.js의 별 모양 평론 사용하기

시작하다

나는 성형 평론을 실현하기 위해 졸았다
"app/assetsjavascriptsファイル는 존재하지 않습니다!"거기 너!!!!!
왜 assets에javascripts가 없나요?
그것은
왜냐하면 개발 환경은 rails6이기 때문이다!
JavaScript의 사용 방법은 Ruby on Rails 6.0보다 변경되었습니다!

이 글은 Rails6(Webpacker 표준 탑재) 환경에서 Raty를 도입하여 별 평가 기능을 실현하는 방법을 소개했다.

2 이미지 완성

별표로 평가!

사용자가 별 버튼을 누르면 댓글을 달 수 있습니다!

3 개발 환경 및 전제 조건

개발 환경

rails 6.0.3.4

전제 조건

모델은 다음과 같다.UserモデルとHouseモデルはCommentモデルを中間テーブルとした多対多の関係

comments표(구두 투고용 표)의 star열(유형:integer)에 평가값을 저장합니다.

테이블과 열이 작성된 것을 전제로 합니다.

열에 대해 반성평가를 할 때'0.5'와'1.5'의 값을 저장하기 때문에 flat형을 설정해야 한다.이번에는 정수만 평가하기 때문에 스타열은 인덱스형을 사용한다.

4 jQuery 도입

yarn add jquery

Webpacker로 관리할 때, Node.js의 포장을 사용합니다.注意 다른 기사에서 jquery를 가져올 때'jquery-rails'라는 gm를 사용했지만 이번과 같은 rails6 환경에서는 사용하지 않습니다!!
yarn add 명령은 패키지의 설치와 함께 패키지입니다.제이슨에게 버전을 쓰다.
다음에 웹 패키지 프로필에 jQuery를 추가합니다.
config/webpack/environment.js

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

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

마지막으로 jQuery를 호출합니다.
app/javascript/packs/application.js

省略

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

5 jQuery Raty 도입

5_별 이미지 저장

　 https://github.com/wbotelhos/raty/tree/master/lib/images
여기 github에서.star-off.png star-on.pngassets/images로 복사합니다.
(star-harf.pg는 별 반 개로 평가한 경우 미리 복사)

5_2 Raty 도입

app/javascript/packs에서 생성raty.js.
이어서 다음 URL의 js 코드를 raty.js에 복사합니다.
마지막으로 응용 프로그램입니다.js에 다음 내용 추가
app/javascript/packs/application.js

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

6 View의 기술

6_1 성 평가 입력

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

  <!-- 評価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 %>

설명

공통 모델의 star열에 값 저장scoreName: 'comment[star]'

⭐𐁨는 반 입력을 하지 않는다!half: false,

6_별점 표시

별 평가를 원하는view에 다음과 같은 내용을 기재합니다

<h1>口コミ一覧</h1>
<%= link_to '口コミを投稿する', new_house_comment_path(house_id: params[:house_id]) %>
<% @comments.each do |comment|%>

  <div class=card>
    <p>内容:<%= comment.content%></p>
    <p>評価 :<%= comment.star%>点</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 %>

최후

하면, 만약, 만약...
Raty의 실현에서 터미널에 오류 문장이 표시되지 않기 때문에 브라우저의 개발 도구를 사용하여 오류 문장을 확인하세요!
초보자를 향해!Chrome 인증 기능(개발자 도구) 사용 방법

참고 자료

Rails6은 Webpacker 개발 환경에서 Raty입니다.js를 사용하고 싶습니다.

Rails에서 Star 검사 Raty 사용

[Rails] 별★을 평가하는 심사(입력, 저장, 표시)를 실현한다.