개시하다

이것은 첫 번째 학자의 성과 보도다.
지적할 점이 있으면 잘 부탁드립니다.
이번엔?

그래 버튼 비동기 설치

모 학교의 최종 과제에서 팀은 어떤 메일 ○의 복제 사이트를 개발하고 있다.
이번에는 제가 맡은 ine 버튼 설치에 대한 비망록을 남기고 싶습니다.
먼저
좋은 구조로prograte의rails노선으로그곳에서 공부하면서 이보로 없는 좋은 실현을 해설했기 때문이다.
이 기초 위에서 비동기적인 좋은 것을 실현하였다.
다음은 코드입니다.
JS 파일을 기술하지 않습니다.
js.저는erb입니다.

경로

routes.rb

#パスがlikeとlikesで似ていて分かりにくかったのでas: 'like'　　as: 'unlike'と記述してパス名を変更(わかりやすくしました)

  resource :likes, to: 'likes#create', path: 'likes/:product_id/create', only: :create, as: 'like'
  resource :likes, to: 'likes#destroy', path: 'likes/:product_id/destroy', only: :destroy, as: 'unlike'

like의 기술에서 경로 이름을 바꾸는 것은 이해하기 쉬울 뿐 필수적인 것은 아니다.

모델

like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :product, counter_cache: :likes_count

  validates :product_id, presence: true
  validates :user_id, presence: true
end
#counter_cache:で :likes_countに保存

counter_cache는 연관된 서브모델의 수를 모 모델의 열에 저장합니다.
만약likes표의 기록이 증가하면,product표의likes카운트의 수량이 증가하는 구조입니다.
코드가 기재되어 있지는 않지만
전문형,user형 방면에서has-매니의 기술로 연관을 이루세요.

컨트롤러

likes_controller.rb

class LikesController < ApplicationController
  before_action :set_variables #set_variablesが読み込まれる

  def create　#イイねがつけられる(イイねのレコードがクリエイトされる)
    @like = Like.create(user_id: session[:user_id], product_id: params[:product_id])
    @likes_btn = Like.find_by(user_id: session[:user_id], product_id: @product_like.id)
    @product_like.reload　#リロードする。
  end

  def destroy　　#削除する(レコード削除)
    @like = Like.find_by(user_id: session[:user_id], product_id: params[:product_id])
    @like.destroy
    @likes_btn = Like.find_by(user_id: session[:user_id], product_id: @product_like.id)
    @product_like.reload
  end

  def set_variables
    @product_like = Product.find(params[:product_id])
  end
end
#@likes_btnはページ読み込みの判定する時のif文で使用します。likeカウントがあるかどうか。

like의 기록을 생성하고 삭제하는 동작입니다.
↓ product 컨트롤러입니다.이것은 보기 페이지를 불러올 때의 쇼 동작입니다.
product_controller.rb

　before_action :set_product

　def show
    @likes = Like.find_by(user_id: session[:user_id], product_id: @product.id)
  end

def set_product
    @product = Product.find(params[:id])
  end

#こちらの@likesはページアクセスしたり更新した時に読み込まれます。

뷰

햄 표시예요.
_main.html.haml

.product-detail__item__button-box
    .product-detail__item__button-box__left
      = render partial: 'likes/like', locals: { product: @product, likes: @likes}

#renderで部分テンプレートを呼び出します。
product_controllerの方で定義したインスタンス変数をそれぞれテンプレートに送ります。

likes/_like.html.haml

%button.product-detail__item__button-box__left__good
  .product-detail__item__button-box__left__good__text
    - if user_signed_in?      #if文でログインしてるか判定。ログインしてないとイイね押せない。
      - if likes   #いいねのレコードがあるかどうか判定。あるなら削除。ないなら生成。
        %i.fas.fa-heart.product-detail__item__button-box__left__good__text__heart
        = link_to("いいね！", unlike_path(product.id), method: :delete, remote: true) #ここのremote: true記述でajax通信に切り替わる
        %span.product-detail__item__button-box__left__good__count
          = product.likes_count
      - else
        %i.far.fa-heart.product-detail__item__button-box__left__good__icon
        = link_to("いいね！", like_path(product.id), method: :post, remote: true) #remote: trueの記述
        %span.product-detail__item__button-box__left__good__count
          = product.likes_count #イイね数
     - else
       %i.far.fa-heart.product-detail__item__button-box__left__good__icon
         いいね！ 
         %span.product-detail__item__button-box__left__good__count
           = product.likes_count

여기 부분 템플릿에 있는 likes와 Product는 Product입니다.controller와likescontroller가 정의한 @product,@product_like는product,@likes,@likes_btn는likes로 사용한다.
여기를 참고했어요.
Rails에서 remote: 참 및 js.erb를 사용하여 간단하게 Ajax(이동 통신)를 실현합시다!(수면 기능이 뛰어난 프레젠테이션)

js.erb 파일

파일이 없기 때문에, 보기의likes 디렉터리에 직접 만들고 설명하십시오.
likes/create.js.erb

$(".product-detail__item__button-box__left").html('<%= escape_javascript(render("likes/like", product: @product_like, likes: @likes_btn)) %>');

クラス名を指定してhtmlをさしかえるってやつですね。

create 동작이 비동기적일 때 읽습니다.likes 컨트롤러가 정의한 실례 변수를 전달합니다.
다음은destroy 동작입니다.마찬가지
likes/destroy.js.erb

$(".product-detail__item__button-box__left").html('<%= escape_javascript(render("likes/like", product: @product_like, likes: @likes_btn)) %>');

괜찮은 버튼을 무사히 완성했다.
이번에 반했을 때, 나는 각 컨트롤러에 실례 변수에 대한 정의가 없어서, 수치를 교부하지 못했다.그 비동기적인 것에 따르면,reload의 기술은 없고, 계수만 비동기적이다.움직이지 않을 때 수치를 건네주고 동작마다 보기를 읽을 수 있다는 것을 고려해 보세요.
js.erb.햄도 쓸 수 있을 것 같애.
이상입니다.