[JAVA] [Rails] Über die Implementierung der Like-Funktion

Hintergrund

Ich bin ein Anfänger mit 3 Monaten Programmiererfahrung. Als ich meine persönliche App erstellte, führte ich ** eine ähnliche Funktion mit asynchroner Kommunikation ** ein, aber ich implementierte sie mit der gegoogelten, so wie sie ist, damit ich meine Gedanken organisieren kann ( Ich beschloss, einen Artikel zu veröffentlichen, um mein Verständnis zu vertiefen.

Darüber hinaus wird in diesem Artikel davon ausgegangen, dass bei der Implementierung dieser Funktion ein Juwel namens Devise installiert wird.

Implementierung

Dieses Mal verwenden wir das Benutzermodell, das Posts-Modell und das Likes-Modell.

Migration

Erstellen Sie eine Migration des Like-Modells.

db/migrate/○○_create_likes.rb

class CreateLikes < ActiveRecord::Migration[5.0]
  def change
    create_table :likes do |t|
      t.references :post, foreign_key: true
      t.references :user, foreign_key: true
      t.timestamps
    end
  end
end

Sowohl user_id als auch post_id werden als ** externer Zuordnungsschlüssel ** festgelegt.

Modell-

Wir werden Assoziationen für jedes Modell einrichten.

models/user.rb

  has_many :posts
  has_many :likes

models/post.rb

  belongs_to :user
  has_many :likes

models/like.rb

  belongs_to :user
  belongs_to :post

** Benutzer können mehrere "Likes" haben ** und ** Beiträge können auch "gemocht" werden **, also Beide assoziieren mit like mit ** has_many **.

Wurzel

config/routes.rb

Rails.application.routes.draw do
  devise_for :users

  resources :users
  resources :posts do
    resources :likes, only: [:create, :destroy]
  end
end

Nest mag in Beiträgen. Durch Verschachteln können Sie bestimmen, welcher Beitrag ein "Gefällt mir" hat.

** Als Referenz ** Wenn Sie Schienenrouten machen ...

Terminal

post_likes POST   /posts/:post_id/likes(.:format)        likes#create
 post_like DELETE /posts/:post_id/likes/:id(.:format)    likes#destroy

Sie können sehen, dass like in Verbindung mit einem bestimmten Beitrag aufgerufen wird.

Regler

controllers/likes_controller.rb

class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = Like.create(user_id: current_user.id, post_id: @post.id)
  end

  def destroy
    @like = current_user.likes.find_by(post_id: @post.id)
    @like.destroy
  end

  private
  def set_post
    @post = Post.find(params[:post_id])
  end
end

destroy erhält das, was der aktuell angemeldete Benutzer ** mag, indem er verknüpft, Ich suche einen ** Beitrag (@post) **, der sich nicht unterscheidet.

Aussicht

Teilvorlage erstellen

Dieses Mal werden die Schaltfläche "Gefällt mir" und der Anzeigeteil der Anzahl der Likes mit einer Teilvorlage vorbereitet. Sie können den Grund verstehen, indem Sie sich die Erklärung von JavaScript im nächsten Abschnitt ansehen.

haml:view/likes/_like.html.haml

- if Like.find_by(user_id: current_user.id, post_id: @post.id)
  = link_to "/posts/#{@post.id}/likes/#{@post.likes.ids}", method: :delete, class:"element", remote: true do
    = icon("fas", "heart", class: "like")
- else
  = link_to "/posts/#{@post.id}/likes", method: :post, class:"element", remote: true do
    = icon("fas", "heart", class: "unlike")
.count
  = @post.likes.length

Es gibt true ** zurück, wenn es Ihnen bereits gefällt, und false **, wenn es Ihnen noch nicht gefallen hat.

** "remote: true do" ist eine Option für die asynchrone Kommunikation **. ** Ursprünglich wird die Seite zum Linkziel verschoben **, aber wenn Sie "remote: true do" schreiben, wird stattdessen ** JS durchsucht **. Daher wird die ** Seitenbewegung gestoppt **. (Da der Wert zum Linkziel zu springen scheint, wird die Seite nicht verschoben, aber es scheint, dass sie in der Datenbank registriert wird.)

• Font-awesome-sass ist erforderlich, um "icon (" fas "," heart ")" zu verwenden.
• CSS ist diesmal nicht aufgeführt.

Teilvorlage aufrufen

○○.haml

#like{ id: @post.id }
  = render "likes/like"

Bitte geben Sie dies an, wenn Sie die im vorherigen Abschnitt erstellte Teilvorlage aufrufen. Es ist ein Miso, dass die ID durch ** benutzerdefiniertes Datenattribut ** beschrieben wird.

JavaScript Dies ist der Schlüssel zur asynchronen Kommunikation.

javascript:views/likes/create.js.erb

$("#like_<%= @post.id %>").html("<%= j(render 'likes/like') %>");

javascript:views/likes/destroy.js.erb

$("#like_<%= @post.id %>").html("<%= j(render 'likes/like') %>");

Beide haben genau die gleiche Beschreibung. ** Es scheint als JS betrachtet zu werden, wenn die "j" -Methode verwendet wird **. Jemand hat gerade mit der Paginierung aufgehört und nach ** JS ** gesucht. ..

Wenn Sie auf die Schaltfläche "Gefällt mir" klicken, wird der Inhalt von [** like_ <% = @ post.id%> "**] ** in die zuvor festgelegte ** Teilvorlage gerendert.

Mit anderen Worten, es wird asynchron auf "posts / like" der Teilvorlage ** aktualisiert, ohne die Seite zu aktualisieren.

Zusammenfassung

Vielen Dank für das Lesen bis zum Ende. Vielleicht ist es nicht schwierig für diejenigen, die daran gewöhnt sind, aber es ist immer noch sehr schwierig für Anfänger ... Wir hoffen, dass alle Anfänger, die auf diesen Artikel verweisen, ihn sicher implementieren können!

Diesmal war es schwierig und ich konnte es mir nicht leisten, also sei nicht albern. ..