[RUBY] Informationen zum Hinzufügen einer ähnlichen Funktion

Gleiche Funktion in der asynchronen Kommunikation

Ich habe eine Weile eine Affäre mit Java und als ich zum ersten Mal seit einiger Zeit meine persönliche App (Ruby) berührte, hatte ich viel Speicher, also habe ich eine nette Funktion installiert, um mich daran zu erinnern. Ich habe es implementiert, während ich mir verschiedene Artikel angesehen habe, daher ist es ein Memo, das ich selbst zusammenfassen kann. Bis es Ihnen gefällt, indem Sie Benutzer und Artikel verknüpfen und einen Knopf drücken.

Achtung ... Dies ist eine Erklärung aus dem Zustand, in dem die Form als Anwendung bereits zu einem gewissen Grad vorgenommen wurde

① Hinzufügung von Modell und Tabelle

Ändern Sie die Migrationsdatei, indem Sie Rails G Model Favourite ausführen

Migrationsdatei

class CreateFavorites < ActiveRecord::Migration[5.2]
  def change
    create_table :favorites do |t|
      t.references :user, null: false, foreign_key: true
      t.references :article, null: false, foreign_key: true
      t.timestamps
    end
  end
end

Dann Schienen db: migrieren

Fügen Sie dem Modell eine Zuordnung hinzu

user.rb

  has_many :favorites, dependent: :destroy
  has_many :favorite_articles, through: :favorites, source: :article

article.rb

  has_many :favorites, dependent: :destroy
  has_many :favorite_users, through: :favorites, source: :user

favorite.rb

  belongs_to :user
  belongs_to :article

  validates :user_id, presence: true
  validates :article_id, presence: true
  validates_uniqueness_of :article_id, scope: :user_id

(2) Hinzufügen eines Controllers (zusätzlich zum Routing)

Favoriten-Controller mit Schienen hinzufügen g Controller-Favoriten Und wie folgt hinzufügen

favorites_contoroller.rb

before_action :set_article, only: [:create, :destroy]

  def create
    @favorite = Favorite.create(user_id: current_user.id, article_id: @article.id)
  end

  def destroy
    @favorite = Favorite.find_by(user_id: current_user.id, article_id: @article.id)
    @favorite.destroy
  end

  private
  def set_article
    @article = Article.find(params[:article_id])
  end

Routing bearbeiten

routes.rb

  resources :articles do
    resources :favorites , only: [:create, :destroy] #Nachtrag
  end

③ Ansicht bearbeiten

Fügen Sie mithilfe einer Teilvorlage eine Schaltfläche "Gefällt mir" hinzu

view

.content
  = render "layouts/favorite", article: @article

ruby:_favorite.html.haml

.content__favorite{id: "like-#{@article.id}"}
  - if Favorite.find_by(user_id: current_user.id, article_id: article.id)
    .btn1
      = link_to article_favorite_path(article.id, current_user.id), method: :delete, class: "like-delete", remote: true do
        = icon('fa', 'star')
Favorit hinzugefügt
        = article.favorites.length
  - else
    .btn2
      = link_to article_favorites_path(article.id), method: :post, class: "like-create", remote: true do
        = icon('fa', 'star')
Favorit
        = article.favorites.length

Wenn remote: true hinzugefügt wird, wird Ajax gestartet, wenn auf die Verbindung getreten wird.

④ Stellen Sie die Schaltfläche asynchron her

Erstellen und fügen Sie die Dateien create.js.haml und destroy.js.haml hinzu

ruby:views/favorites/create.js.haml

$("#like-#{@article.id}").html("#{j(render partial: 'layouts/favorite', locals: { article: @article })}");

ruby:views/favorites/destroy.js.haml

$("#like-#{@article.id}").html("#{j(render partial: 'layouts/favorite', locals: { article: @article })}");

Es scheint, dass die Datei neu geladen wird, wenn die Taste gedrückt wird, indem auf die an die Schaltfläche angehängte ID verwiesen wird.

Wenn Sie danach das Erscheinungsbild der Schaltflächen ordentlich anordnen, wird es abgeschlossen.

Artikel, auf die verwiesen wird https://qiita.com/yummy888/items/2b7708a498861e5ba733 https://qiita.com/nojinoji/items/2c66499848d882c31ffa