Rails에 사용자 추적 기능 설치(Ajax 사용)②

뭐 공부 해요?

이 보도는 이 보도의 후속이다.
▶ 지난번 보도
Rails에 사용자 추적 기능 설치(Ajax 사용)①
Rails 과제를 수행하고 있습니다.User 추적 기능
이전 글에서 이전 파일의 제작과 모델 파일의 관련에 대한 정의가 끝났기 때문에 이번에는 controller과view, 그리고 모델 방법을 추가할 것입니다.
또한 실행 환경은 다음과 같다.

Rails 5.2.3

Ruby 2.6.0

종점

이번 결승점은 이런 느낌이다.버튼을 누르면 바삭바삭함과 동기화되지 않는 추적/추적 해제 버튼이 나타납니다.

규격

이 기능의 사용은 다음과 같다.

사용자가 다른 사용자를 팔로우할 수 있음

동일한 사용자를 두 번 추적할 수 없음

사용자가 자신을 팔로우할 수 없음

데이터 구조

또한 DB는 다음과 같이 설계되었습니다.

왜 이러는지 읽으세요저번 보도

비동기식 구현

우선 비동기식으로 설치합니다.controller, model 같이 쓰세요. 자세히 알고 싶으신 분들은 이 근처 기사를 보실 수 있습니다.

레일스로 "좋아!"창조적 기능작업 작성

레일스로 "좋아!"창조적 기능 - ③ "좋아!"해제

레일스 아약스로 "좋아!"기능을 구현합니다.

controller

controller의 기록은 다음과 같다.
relationships_controller.rb

class RelationshipsController < ApplicationController
  def create
    @other_user = User.find(params[:follower])
    current_user.follow(@other_user)
  end

  def destroy
    @user = current_user.relationships.find(params[:id]).follower
    current_user.unfollow(params[:id])
  end
end

follow,unfollow은 모형 방법이다.이따가 설명할게요.

view

뷰 파일 설명은 다음과 같습니다.또 꾸미기 위한 반은 생략했다.또한 user(각자의 사용자)를 나타내는 변수는 여기에 표시된 코드에서 전달된다.
view

- if logged_in? && current_user != user
  - if current_user.following?(user)
    = button_to 'フォロー解除', relationship_path(current_user.relationships.find_by(follower: user)), method: :delete
  - else
    = button_to 'フォロー', relationships_path(follower: user)

following?도 모델 양말이다.

model

user모델의 모델 방법으로 각각 정의follow,unfollow,following?방법.

class User < ApplicationRecord
  # 前回の記事で定義した部分
  has_many :relationships, dependent: :destroy
  has_many :followings, through: :relationships, source: :follower

  has_many :passive_relationships, class_name: 'Relationship', foreign_key: 'follower_id', dependent: :destroy
  has_many :followers, through: :passive_relationships, source: :user

  # 今回追記したモデルメソッド
  def follow(other_user)
    return if self == other_user

    relationships.find_or_create_by!(follower: other_user)
  end

  def following?(user)
    followings.include?(user)
  end

  def unfollow(relathinoship_id)
    relationships.find(relathinoship_id).destroy!
  end
end

또 이 등급 위에는 이전 문장에서 적당한 복잡한 관련 있다.

비비동기식 통신에서 구현 완료

지금까지 Ajax가 아닌 추적 기능을 완성했습니다.프레젠테이션용redirect_to으로 화면을 옮기기 때문에 약간 비동기적으로 보이지만 추적 단추를 눌러 화면을 다시 설치한 후 추적 해제 단추가 나타납니다.

Ajax에서 구현

그럼, 우리는 이것을 비동기적인 통신으로 만들 것이다.이쪽도 깨끗하게 썼는데 왜 이런 사람이 됐는지 궁금하니 이쪽 기사를 보세요.
remote:true는 aax의 게시물을 켜서 자체 검사합니다.

html 섹션

먼저 단추 부분에 remote: true 옵션을 추가하여 부분으로 자릅니다.
views/relationships/_follow_button.html.slim

= button_to 'フォロー', relationships_path(follower: user), remote: true

views/relationships/_unfollow_button.html.slim

= button_to 'フォロー解除', relationship_path(current_user.relationships.find_by(follower: user)), method: :delete, remote: true

# もともとボタンのあったビューファイル
- if logged_in? && current_user != user
 div id="follow-button-#{user.id}"
   - if current_user.following?(user)
      = render 'relationships/unfollow_button', user: user
   - else
      = render 'relationships/follow_button', user: user

**.js.erb 파일 만들기

동적 호출 부분의 파일을 *＊.js.erb 파일로 내보냅니다.
views/relationships/create.js.erb

$("#follow-button-<%= @other_user.id %>").html("<%= j(render 'unfollow_button', user: @other_user) %>")

views/relationships/destroy.js.erb

$("#follow-button-<%= @user.id %>").html("<%= j(render 'follow_button', user: @user) %>")

완성!

여기서 Ajax를 완성하면 보기 파일만 고치면 끝납니다
신푸르

감상

추적·추적 해제 기능, 데이터 구조 8할!이런 느낌, DB와 모델의 디자인이 굉장히 복잡하네요~
잘 읽어서 너무 좋아요 ^ ^