[RUBY] Erstellen Sie eine Instagram-Klon-App ④

Einführung

Wie der Titel schon sagt, werden wir eine vereinfachte Version der Instagram-App erstellen. Ich werde den Artikel in den folgenden Schritten schreiben, also hoffe ich, dass Sie ihn Schritt für Schritt lesen werden.

① App-Erstellung - Implementierung der Anmeldefunktion ② Implementierung der Fotoposting-Funktion ③ [Implementierung der Benutzerseite] (https://qiita.com/maca12vel/items/c716702b02f977303011) ④ [Implementierung der Verfolgungsfunktion] (https://qiita.com/maca12vel/items/2760d33f3683fac91de5) ← Imakoko ⑤ Implementierung der Post-Deletion-Funktion

Modellieren

• Im Folgenden im Anwendungsverzeichnis

Terminal

rails g model follow user:belongs_to target_user:belongs_to

Ändern Sie die Migrationsdatei. Ändern Sie Foreign_key von target_user in ** false **.

db/migrate/2020**********_create_follows.rb

class CreateFollows < ActiveRecord::Migration[6.0]
  def change
    create_table :follows do |t|
      t.belongs_to :user, null: false, foreign_key: true
      t.belongs_to :target_user, null: false, foreign_key: false

      t.timestamps
    end
  end
end

Sobald dies behoben ist, führen Sie Rails db: migrate aus.

Beziehungseinstellungen

Stellen Sie die Beziehung zum Follow-Modell ein. Geben Sie "Klassenname" und "Fremdschlüssel" für "Zielbenutzer" an.

app/models/follow.rb

class Follow < ApplicationRecord
  belongs_to :user
  belongs_to :target_user, class_name: 'User', foreign_key: 'target_user_id'
end

Wir werden auch Beziehungen für das Benutzermodell festlegen. active_relationships passive_relationships Wird beschrieben.

app/models/user.rb

class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_many :active_relationships, class_name: 'Follow', foreign_key: 'user_id'
  has_many :passive_relationships, class_name: 'Follow', foreign_key: 'target_user_id'
  has_many :followings, through: :active_relationships, source: :target_user
  has_many :followers, through: :passive_relationships, source: :user
  has_many :photos
end

Damit ist die Beziehung abgeschlossen.

folgt der Controller-Erstellung

Terminal

rails g controller follows

Vergessen Sie nicht, auch das Routing festzulegen.

routes.rb

Rails.application.routes.draw do
  root 'homes#index'

  devise_for :users

  resources :photos
  resources :users do
    resource :follow #← hier
  end
end

Die URL sollte nun wie folgt aussehen: "user / user_id / follow".

Bearbeiten Sie als Nächstes den folgenden Controller.

folows_controller.rb

class FollowsController < ApplicationController
  before_action :authenticate_user!

  def create
    current_user.active_relationships.create(target_user_id: params[:user_id])

    redirect_to [:user, {id: params[:user_id] }]
  end

  def destroy
    current_user.active_relationships.find_by(target_user_id: params[:user_id]).destroy

    redirect_to [:user, {id: params[:user_id] }]
  end
end

Durch Setzen von before_action: authenticate_user! Nur angemeldete Benutzer können "folgen / nicht folgen".

Stellen Sie die Folgebewegung mit der Aktion "Erstellen" ein. Das Umleitungsziel ist [: user, {id: params [: user_id]}] Es ist so eingestellt, dass es zur Benutzer-ID des Benutzers übergeht, dh zur Detailseite des Benutzers.

Stellen Sie die Entfolgebewegung in der "Zerstörungsaktion" ein. Holen Sie sich zuerst den Datensatz, dem Sie folgen, mit "find_by" anstelle von "create". Dann zerstört es den von destroy erfassten Datensatz. Ich denke, es ist in Ordnung, zum selben Ziel umzuleiten.

Erstellen Sie einen Follow / Unollow-Link in der Ansichtsdatei

erb:app/views/users/show.html.erb

<h3><%= @user.email %></h3>

#↓↓↓↓↓↓↓↓↓↓ Von hier aus ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<% if current_user.active_relationships.exists?(target_user_id: @user.id) %>
  <%= link_to 'unfollow', [@user, :follow], method: :delete %>
<% else %>
  <%= link_to 'follow', [@user, :follow], method: :post %>
<% end %>
#Bis hierher

<div>
  <%= link_to 'followings', [@user, :followings] %>
</div>
<div>
  <%= link_to 'followers', [@user, :followers] %>
</div>

<% @user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>
<% end %>

Mit bedingter Verzweigung Wenn current_user dem Benutzer bereits gefolgt ist Zeigen Sie den Link zum Aufheben an. → ** Methode: löschen ** Wenn Sie noch nicht gefolgt sind, wird ein Link zum Folgen angezeigt. → ** Methode: Post **

Lassen Sie es uns bisher einmal mit einem Browser überprüfen. Wenn es wie folgt aussieht, ist es erfolgreich. Wechseln Sie zur Seite mit den Benutzerdetails und drücken Sie "Folgen", um den Vorgang abzuschließen. Dann ändert sich follow in unfollow. Drücken Sie unfollow, um nicht mehr zu folgen und zu follow zurückzukehren.

In diesem Status jedoch Benutzer, die nicht angemeldet sind Wenn Sie direkt auf die URL zugreifen, wird eine Fehlermeldung angezeigt. ↓

Dies liegt daran, dass der bedingte Zweig current_user verwendet. Daher werden wir weitere bedingte Zweige hinzufügen. Fügen Sie den bedingten Zweig mit ↓ ein. <% if user_signed_in? && current_user != @user %> <% end %>

erb:app/views/users/show.html.erb

<h3><%= @user.email %></h3>

<% if user_signed_in? && current_user != @user %> #← hier
  <% if current_user.active_relationships.exists?(target_user_id: @user.id) %>
    <%= link_to 'unfollow', [@user, :follow], method: :delete %>
  <% else %>
    <%= link_to 'follow', [@user, :follow], method: :post %>
  <% end %>
<% end %> #← hier

<div>
  <%= link_to 'followings', [@user, :followings] %>
</div>
<div>
  <%= link_to 'followers', [@user, :followers] %>
</div>

<% @user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>
<% end %>

Benutzer ist angemeldet in Und current_user ist nicht der Benutzer auf der Benutzerdetailseite

Dies bedeutet, dass der bedingte Zweig hinzugefügt wird.

Wenn Sie nicht angemeldet sind, wird der Link "Folgen / Nicht folgen" nicht angezeigt. Außerdem wird es nicht angezeigt, wenn Sie zu Ihrer Detailseite springen.

Damit ist die Verfolgungsfunktion fast abgeschlossen. Zum Schluss möchte ich eine Liste der Benutzer sehen, die verfolgt werden.

Erstellen eines Followers / Follower-Controllers

Terminal

rails g controller followings

Terminal

rails g controller followers

Vergessen Sie nicht, auch das Routing festzulegen.

routes.rb

Rails.application.routes.draw do
  root 'homes#index'

  devise_for :users

  resources :photos
  resources :users do
    resource :follow
    resources :followings #← hier
    resources :followers #← hier
  end
end

Wir werden auch jeden in der Steuerung beschreiben.

folowings_controller.rb

class FollowingsController < ApplicationController
  def index
    @followings = User.find(params[:user_id]).followings
  end
end

folowers_controller.rb

class FollowersController < ApplicationController
  def index
    @followers = User.find(params[:user_id]).followers
  end
end

Und wir werden eine Ansicht erstellen. Zeigen Sie email von Following / Follower mit link_to an. Ich erstelle einen Link zur Seite mit den Benutzerdetails.

erb:app/views/followings/index.html.erb

<% @followings.each do |following| %>
  <div>
    <%= link_to following.email, [following] %>
  </div>
<% end%>

erb:app/views/followers/index.html.erb

<% @followers.each do |follower| %>
  <div>
    <%= link_to follower.email, [follower] %>
  </div>
<% end%>

Die Angabe des Pfades ist [following]→user_followings_path [follower]→user_followers_path Aber es ist okay, also leicht zu verstehen.

Erstellen Sie abschließend einen Link auf der Benutzerdetailseite.

erb:app/views/users/show.html.erb

<h3><%= @user.email %></h3>

<% if user_signed_in? && current_user != @user %>
  <% if current_user.active_relationships.exists?(target_user_id: @user.id) %>
    <%= link_to 'unfollow', [@user, :follow], method: :delete %>
  <% else %>
    <%= link_to 'follow', [@user, :follow], method: :post %>
  <% end %>
<% end %>

#↓↓↓↓↓↓↓↓↓↓ Von hier aus ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<div>
  <%= link_to 'followings', [@user, :followings] %>
</div>
<div>
  <%= link_to 'followers', [@user, :followers] %>
</div>
#Bis hierher

<% @user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>
<% end %>

Der Pfad der anzuzeigenden Seite lautet Followings von @ user Follower von @ user Es wird sein.

Lassen Sie uns die Operation damit überprüfen. Wenn es wie folgt aussieht, ist es erfolgreich.

Es ist schnell und schwer zu verstehen, aber es beginnt mit dem Status der Anmeldung mit sample. ① sample springt zur Detailseite von example und ** folgt **. ② Wenn Sie auf der Beispieldetailseite zum folgenden Link springen, sehen Sie das Beispiel, dem Sie gerade gefolgt sind. ③ Wenn Sie auf der Detailseite des Beispiels zum Link "Follower" springen, sehen Sie "Beispiel".

das ist alles. Danke für deine harte Arbeit.