[JAVA] [Rails] Asynchrone Implementierung der Like-Funktion

1. Zuallererst

Wie im folgenden Demo-Video gezeigt, implementieren wir eine Funktion, mit der Sie den vom Benutzer geposteten Inhalt "mögen" können.

2. Voraussetzungen

Unter der Annahme, dass die Benutzerregistrierungsfunktion und die Buchungsfunktion bereits implementiert wurden, fügen Sie die "Like-Funktion" hinzu. Ich werde mit dem Fluss fortfahren.

Ich denke, es wird einfacher zu verstehen sein, wenn Sie sich die unten gezeigte Datenbankstruktur vorstellen können.

3. Implementierung einer ähnlichen Funktion

** ■ Ablauf bis zur Implementierung **

Grob gesagt werden wir es im folgenden Ablauf implementieren. ・ Modell erstellen 　　　↓ ・ Hinzufügen von Routing 　　　↓ ・ Controller erstellen 　　　↓ -Erstellen Sie eine Ansicht

Dann sagen wir mal, es ist schnell.

3-1. Erstellen eines ähnlichen Modells

Erstellen Sie zunächst ein Like-Modell. Führen Sie den folgenden Befehl im Terminal aus.

Terminal

$ rails g model Like

Eine neue Migrationsdatei wird erstellt. Bearbeiten Sie sie daher wie folgt.

db>migrate>xxxxxx_create_likes.rb

class CreateLikes < ActiveRecord::Migration[6.0]
  def change
    create_table :likes do |t|
      # ===Postscript-Teil===
      t.references :tweet, foreign_key: true, null: false
      t.references :user, foreign_key: true, null: false
      # ===Postscript-Teil===
      t.timestamps
    end
  end
end

Wenn Sie wie oben als Referenztyp speichern, können Sie `` tweet_id``` und `user_id``` als externe Schlüssel angeben. Führen Sie nun die Migrationsdatei aus und erstellen Sie eine Likes-Tabelle.

Terminal

$ rails db:migrate

Überprüfen Sie nach dem Ausführen des obigen Befehls, ob die Likes-Tabelle erstellt wurde. Nachdem Sie bestätigt haben, dass es erfolgreich erstellt wurde, müssen Sie im nächsten Schritt die Zuordnung einrichten.

3-2. Zuordnungseinstellungen

Eine Assoziation ist eine Assoziation zwischen zwei Modellen. Wir werden die Assoziationen für das Benutzermodell und das Like-Modell sowie das Tweet-Modell und das Like-Modell festlegen.

Einstellungen für Benutzermodell- und Like-Modellzuordnung

Legen Sie zunächst die Zuordnung zwischen dem Benutzermodell und dem Like-Modell fest.

Die Beziehung zwischen den beiden Modellen ist wie folgt. ・ Benutzer können mehrfach mögen ・ Es gibt nur einen Benutzer, der A mag

Mit anderen Worten, das Benutzermodell und das Like-Modell haben eine "Eins-zu-Viele" -Beziehung. Jetzt schreiben wir den Code.

Fügen Sie dem Benutzermodell den folgenden Code hinzu.

app>models>user.rb

class User < ApplicationRecord

  has_many :tweets, dependent: :destroy

  #Fügen Sie diese Zeile hinzu
  has_many :likes

end

has_manyZeigt an, dass eine "Eins-zu-Viele" -Beziehung zu anderen Modellen besteht.

Fügen Sie als Nächstes den folgenden Code zum Like-Modell hinzu.

app>models>like.rb

class Like < ApplicationRecord

  #Fügen Sie diese Zeile hinzu
  belongs_to :user

end

belongs_toIsthas_manyDas Gegenteil von, es zeigt, dass es eine "Viele-zu-Eins" -Beziehung zu anderen Modellen gibt.

Sie haben jetzt eine Zuordnung zwischen dem Benutzermodell und dem Like-Modell eingerichtet.

Tweet-Modell und Like-Modellzuordnungseinstellungen

Richten Sie auf die gleiche Weise die Zuordnung zwischen dem Tweet-Modell und dem Like-Modell ein.

Die Beziehung zwischen den beiden Modellen ist wie folgt. ・ Ein Beitrag erhält mehrere Likes ・ Es gibt nur einen Beitrag, der mit Like A verknüpft ist

Mit anderen Worten, das Tweet-Modell und das Like-Modell haben auch eine "Eins-zu-Viele" -Beziehung. Jetzt schreiben wir den Code.

Bitte fügen Sie den Code wie folgt zum Tweet-Modell hinzu.

app>models>tweet.rb

class Tweet < ApplicationRecord
  belongs_to :user

  #Fügen Sie diese Zeile hinzu
  has_many :likes, dependent: :destroy

end

dependent: :Durch Hinzufügen von "Zerstören" werden beim Löschen eines Beitrags auch die mit diesem Beitrag verknüpften Likes gelöscht.

 Als nächstes kommt das Like-Modell.


#### **`app>models>like.rb`**
```ruby

class Like < ApplicationRecord

  belongs_to :user

  #Fügen Sie diese Zeile hinzu
  belongs_to :tweet

end

Damit sind die Zuordnungseinstellungen für alle Modelle abgeschlossen.

3-3. Validierungseinstellungen

Da ein Benutzer Post A nur einmal mögen soll, stellen Sie die Validierung so ein, dass sie nicht mehr als einmal gedrückt werden kann.

Bitte fügen Sie dem Like-Modell Folgendes hinzu.

app>models>like.rb

class Like < ApplicationRecord

  belongs_to :user
  belongs_to :tweet

  #Fügen Sie diese Zeile hinzu
  validates :user_id, uniqueness: { scope: :tweet_id }

end

Wenn Sie wie oben beschrieben schreiben, können Sie verhindern, dass sich `user_id``` und` tweet_id``` überschneiden. Damit sind die Validierungseinstellungen abgeschlossen.

3-4. Hinzufügen von Routing

Schließlich werden wir die ähnliche Funktion ernsthaft implementieren.

Fügen wir zunächst das Routing hinzu, das für die Like-Funktion verwendet wird. Bitte fügen Sie den Code wie folgt hinzu.

config>routes.rb

Rails.application.routes.draw do
  devise_for :users,
    controllers: { registrations: 'registrations' }

  resources :tweets, only: [:index, :new, :create, :show, :destroy] do

    #Fügen Sie diese Zeile hinzu
    resources :likes, only: [:create, :destroy]

  end

end

Ich habe die Aktionen `create``` und` destroy``` des Likes-Controllers definiert, da ich eine Route hinzufügen muss, um ähnliche Informationen zu speichern und zu löschen.

Durch Verschachteln des Routings können Sie klar angeben, mit welchem Beitrag das Gleiche verknüpft ist.

Stellen Sie nach dem Hinzufügen des Codes sicher, dass Sie den Befehl `` `Rails Routen``` verwenden, um sicherzustellen, dass die Routing-Einstellungen korrekt sind.

3-5 Erstellen eines Likes-Controllers

Als nächstes erstellen wir einen Likes-Controller. Führen Sie den folgenden Befehl im Terminal aus.

Terminal

$ rails g controller likes

Sie können einen Likes-Controller erstellen, indem Sie den obigen Befehl ausführen.

Jetzt erstellen wir eine `create``` Aktion und eine` destroy``` Aktion im erstellten Likes Controller. Bitte fügen Sie den Code wie folgt hinzu.

app>controllers>likes_controller.rb

class LikesController < ApplicationController

  # ===Postscript-Teil===
  def create
    @like = current_user.likes.build(like_params)
    @tweet = @like.tweet
    if @like.save
      respond_to :js
    end
  end

  def destroy
    @like = Like.find_by(id: params[:id])
    @tweet = @like.tweet
    if @like.destroy
      respond_to :js
    end
  end

  private
    def like_params
      params.permit(:tweet_id)
    end
  # ===Postscript-Teil===

end

Angenommen, Sie verstehen die privaten Methoden und Parameter, werfen wir einen kurzen Blick auf den hinzugefügten Code.

Aktion erstellen

Erstens enthält `@ like``` die` user_id des Benutzers, der den Beitrag "gemocht" hat, und die `` `tweet_id des" gemochten "Beitrags. Ich werde. Dieser Code verwendet die Erstellungsmethode, um eine Instanz zu erstellen.

Als nächstes enthält `@ tweet``` die Informationen des Beitrags, der mit` @ likeverknüpft ist, dh die Informationen des "gemochten" Beitrags.@tweet```Zu welchem Beitrag"Wie schön"Wird beim Erstellen von Ansichten verwendet, um festzustellen, ob Sie gedrückt haben.

Der letzte `if @ like.save``` Teil ändert das Format der Antwort, die zurückgegeben wird, wenn" Like "mit der` reply_to``` Methode gedrückt wird. Um die Ansicht in Echtzeit wiederzugeben, wenn "Gefällt mir" gedrückt wird, wird die Antwort im JS-Format zurückgegeben.

Aktion zerstören

Es gibt viele Teile, die sich mit den in der Aktion "Erstellen" erläuterten Inhalten überschneiden. Um dies kurz zu erläutern, wird "id" aus der empfangenen HTTP-Anforderung und dem in "@ like" angegebenen Datensatz ermittelt Enthält Informationen.

Um die Ansicht in Echtzeit wiederzugeben, wird die Antwort im JS-Format zurückgegeben.

3-5 Erstellen einer Ansicht

Es ist endlich Zeit, eine Ansicht zu erstellen.

Lassen Sie uns zunächst den Ansichtsbildschirm der Beitragsliste bearbeiten ... Ich möchte sagen, aber definieren Sie zuerst die Methode, die in der Ansicht verwendet werden soll.

Bitte fügen Sie den Code wie folgt zum Tweet-Modell hinzu.

app>models>tweet.rb

class Tweet < ApplicationRecord
  belongs_to :user
  has_many :likes, dependent: :destroy

  #Zusätzlicher Teil(liked_nach Methode)
  def liked_by(user)
    Like.find_by(user_id: user.id, tweet_id: id)
  end
  #Zusätzlicher Teil

end

Die oben hinzugefügte Methode `liked_by``` sucht nach einer Übereinstimmung, die mit` user_id und `` `tweet_id übereinstimmt, und gibt nill zurück, wenn sie nicht vorhanden ist.

Fügen Sie dann den folgenden Code zu `app / views / tweets / index.html.erb `hinzu.

html:app>views>tweets>index.html.erb

<% @tweets.each do |tweet| %>

  #Fügen Sie dem Teil hinzu, in dem Sie die Schaltfläche "Gefällt mir" anzeigen möchten
  <div class="content-like">
    <ul class="content-like__icons">
      <li id="<%= tweet.id.to_s %>">
        <% if tweet.liked_by(current_user).present? %>
          <%= link_to (tweet_like_path(tweet.id, tweet.liked_by(current_user)), method: :DELETE, remote: true, class: "liked") do %>
            <i class="far fa-thumbs-up"></i>
          <% end %>
        <% else %>
          <%= link_to (tweet_likes_path(tweet), method: :POST, remote: true, class: "like") do %>
            <i class="far fa-thumbs-up"></i>
          <% end %>
        <% end %>
      </li>
    </ul>
  </div>
  #Dies ist das Ende des zusätzlichen Teils

<% end %>

liked_byAls Argument zucurrent_user Durch Übergeben kann der aktuell angemeldete Benutzer posten"Wie schön"Ich urteile, ob ich es tue.

Wenn Sie nun auf die Schaltfläche "Gefällt mir" klicken, wenn der Benutzer nicht "Gefällt mir" ist, wird die zuvor erstellte Aktion "Erstellen" ausgeführt, und wenn der Benutzer "Gefällt mir" ist, "" Ich konnte eine "Zerstörungs" -Aktion ausführen und eine bedingte Verzweigung erstellen.

Vergessen Sie nicht, die Option `remote: true``` zu` link_to hinzuzufügen, da Sie die Datei `` `.js.erb aufrufen müssen, wenn der Link gedrückt wird. Bitte gib mir.

Für das Symbol "Gefällt mir" wird Font Awesome verwendet. Für die Einführungsmethode denke ich, dass der folgende Qiita-Artikel usw. hilfreich sein wird. Rails Font-Awesome-Sass-Installationsmethode

Erstellen Sie als Nächstes eine Datei, die ausgegeben werden soll, wenn die Erstellungsaktion ausgeführt wird.

app/Erstellen Sie einen Likes-Ordner direkt unter dem Views-Ordner und erstellen Sie ihn.js.Erstellen Sie eine erb-Datei.

 Fügen Sie nach dem Erstellen der Datei den Code wie folgt hinzu.


#### **`ruby:app>views>likes>create.js.erb`**

$('#<%= @tweet.id.to_s %>'). html('<%= j render "tweets/liked", { tweet: @tweet } %>');

 Der obige Code ruft die Datei `` `_liked.html.erb``` im Ordner` `` tweets``` auf, wenn die Erstellungsaktion ausgeführt wird.


#### **`Im Tweets-Ordner_liked.html.Erstellen Sie eine erb-Datei und fügen Sie den folgenden Code hinzu.`**

html:app>views>tweets>_liked.html.erb

<%= link_to (tweet_like_path(tweet.id, tweet.liked_by(current_user)), method: :DELETE, remote: true, class: "liked") do %>
  <i class="far fa-thumbs-up"></i>
<% end %>

Wenn ich im obigen Code auf die Schaltfläche "Gefällt mir" drücke, wird der HTML-Code angezeigt, mit dem das "Gefällt mir" abgebrochen wird.

Erstellen Sie im selben Ablauf eine Datei, die aufgerufen wird, wenn die Zerstörungsaktion ausgeführt wird.

app/views>zerstöre im Likes-Ordner.js.Erstellen Sie eine erb-Datei.

 Fügen Sie nach dem Erstellen der Datei den Code wie folgt hinzu.


#### **`ruby:app>views>likes>destroy.js.erb`**

$('#<%= @tweet.id.to_s %>'). html('<%= j render "tweets/like", { tweet: @tweet } %>');

#### **`Im Tweets-Ordner_like.html.Erstellen Sie eine erb-Datei und fügen Sie den folgenden Code hinzu.`**

html:app>views>tweets>_like.html.erb

<%= link_to (tweet_likes_path(tweet), method: :POST, remote: true, class: "like") do %>
  <i class="far fa-thumbs-up"></i>
<% end %>

Mit dem oben Gesagten konnten wir die ähnliche Funktion asynchron implementieren.

Danach sieht es so aus, aber der Klassenname ist "wie", wenn es gefällt, und "wie", wenn es nicht gefällt. Versuchen Sie also, es mit CSS anzupassen. Bitte gib mir.

In meinem Fall ändere ich die Farbe des Symbols in Rot, wenn es gefällt, und Grau, wenn es nicht gefällt.

app>assets>stylesheets>tweets>_tweet.css

.like {
  color: gray;
}

.liked {
  color: red;
}

4. Schließlich

Dies ist mein erster Beitrag, aber das Schreiben eines Artikels ist schwieriger als ich es mir vorgestellt hatte. Ich würde es begrüßen, wenn Sie auf Teile hinweisen könnten, die schwer zu verstehen oder falsch sind.

Vielen Dank für das Lesen bis zum Ende ☺️