입문

동기화된 기능의 설치를 기억하기 위해 확인하면서 설치했다.
기억하기 위해서 기술도 겸하고
사용자 등록 기능은 "devise"를 사용하여 만듭니다.
이번에는 투고의 상세한 페이지에 기능을 설치했다.

개발 환경

macOS Big Sur 11.1
Ruby 2.6.5
Rails 6.1.1

작업대

중간 테이블을 준비했어요. "좋아!!!"누르다
'누가 좋아요를 눌렀어요','어떤 댓글이 좋아요를 눌렀어요'는 Likes 표에 사용자와 앨범 ID를 등록합니다.

모범

연관된 정의는 다음과 같습니다.
user.rb

class User < ApplicationRecord
 has_many :likes
end

album.rb

class Album < ApplicationRecord
 has_many :likes
end

like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :album
end

라우팅 선택

likes는'create'와'destroy'만 사용하기 때문에 두 개를 설정합니다.
routes.rb

Rails.application.routes.draw do

post 'like/:id' => 'likes#create', as: 'create_like'

delete 'like/:id' => 'likes#destroy', as: 'destroy_like'

end

URI Pattern 지정에 대한 자세한 정보
TechTechMedia: [Rails Base] 자유형 URL!라우팅 이름을 지정하는 방법 설명
이해하기 쉽다.

컨트롤러

컨트롤러를 설치하다.
'create'와'destroy'를 실시합니다.
likes_controller

class LikesController < ApplicationController
  def create
      Like.create(user_id: current_user.id, album_id: params[:id])
      redirect_to album_path
    end
  end

  def destroy
  Like.find_by(user_id: current_user.id, album_id: params[:id]).destroy
    redirect_to album_path
  end
end

보기

...전에 "user.rb"에서 하나 더 기술하십시오.
이것은 "album_id"가 존재하는지 확인하기 위한 기술입니다.
존재하는지 없는지 "좋아!"를 클릭합니다.
user.rb

def liked_by?(album_id)
    likes.where(album_id: album_id).exists?
  end

뷰를 설명합니다.
if 문장에서 전환할 수 있습니다.
albums/show.html.erb

<div class="pic-likes">
                <ul class="like-content">
                  <% if current_user.liked_by?(@album.id) %>
                    <li>
                      <%= link_to destroy_like_path(@album), method: :delete, class: "like-link" do %>
                        <%= icon('far', 'kiss-wink-heart', 'いいね!!', class: 'like-part2') %>：<%= @album.likes.count %>
                      <% end %>
                    </li>
                  <% else %>
                    <li>
                      <%= link_to  create_like_path(@album), method: :post, class: "like-link" do %>
                        <%= icon('far', 'meh-blank', 'いいねを押す', class: 'like-part')  %>：<%= @album.likes.count %>
                      <% end %>
                    </li>
                  <% end %>
                </ul>
              </div>

이번에는'font-awesome'도 아이콘을 사용했습니다.

아이콘 사용

내가 표시하고 싶은 방법도 많지만 이해하기 쉬워서 github를 보면서 설치했다.
SaimonL:fontawesome-sass
이쪽도 참고했어.
pikawaka: [Rails] font-awesome-rails의 사용법을 철저히 설명해주세요!
pikawaka: [Rails] font-awesome-sass의 사용법을 철저히 설명해주세요!

순서

1. "Gemfile"에 기술하기
Gemfile

gem 'font-awesome-sass', '~> 5.9.0'

2. 설치

bundle install

3.app/assets/stylesheets/application.scss에 다음 내용을 추가합니다.
application.css를 사용하면 scss로 변환됩니다.

@import "font-awesome-sprockets";
@import "font-awesome";

4. 뷰에서 설명합니다.
albums/show.html.erb

<li>
 <%= link_to destroy_like_path(@album), method: :delete, class: "like-link" do %>

　　　　　# アイコンのスタイル　アイコンの名前　　記述したいテキスト　　　　クラス
   <%= icon('far', 'kiss-wink-heart', 'いいね!!', class: 'like-part2') %>：<%= @album.likes.count %>

        # => <i class="far fa-kiss-wink-heart　like-part2"></i> いいね！！

 <% end %>
</li>

아이콘의 스타일은 세 가지 정도입니다.

solid (fas)

regular (far)

brands (fab)

아이콘은 여러 종류를 사용할 수 있다
여기서 사용할 수 있습니다.↓
fontawesome

계수

이 부분은 "좋아!!!"눌리면 계수되는 부분.
count 방법을 사용하고 있습니다.

<%= @album.likes.count %>

이후 css로 좋아하는 색깔과 모양으로 정리합니다.

마지막

이쪽도 시간이 많이 걸렸지만 순조롭게 설치됐어요.
다음에도 비동기적인 물건을 설치하고 싶어요.
(이런 느낌도 빨라지고 싶다.)

오늘은 여기까지.수고하셨습니다!!

참고 자료

이 기사는 이해하기 쉽기 때문에 참고로 한다.
TechTechMedia: [Rails] 기능 풀버전!동기화 좋아요, 좋아요, 숫자 표시, 비동기화 좋아요, 아이콘 표시, 각자의 설치 방법 총결산 설명
이것도 참고 가치가 있다.세밀하게 쓰다.
[Rails, JavaScript]는 뛰어난 기능(동기식, 비동기식) 제공