[RUBY] À propos de l'ajout d'une fonction similaire

Fonction similaire dans la communication asynchrone

J'ai une liaison avec Java depuis un moment, et quand j'ai touché mon application personnelle (Ruby) pour la première fois depuis un moment, j'avais beaucoup de mémoire, donc j'ai installé une fonction sympa pour m'en souvenir. Je l'ai implémenté en regardant divers articles, c'est donc un mémo à résumer pour moi-même. Jusqu'à ce que vous puissiez aimer en associant l'utilisateur et l'article et en appuyant sur un bouton.

Attention ... C'est une explication de l'état où la forme en tant qu'application a déjà été faite dans une certaine mesure

① Ajout de modèle et de table

Modifiez le fichier de migration en faisant des rails g modèle favori

Fichier de migration

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

Puis rails db: migrer

Ajouter une association au modèle

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) Ajout de contrôleur (en plus du routage)

Ajouter un contrôleur préféré avec les favoris du contrôleur Rails Et ajoutez comme suit

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

Modifier le routage

routes.rb

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

③ Modifier la vue

Ajouter un bouton J'aime à l'aide d'un modèle partiel

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')
Favori ajouté
        = article.favorites.length
  - else
    .btn2
      = link_to article_favorites_path(article.id), method: :post, class: "like-create", remote: true do
        = icon('fa', 'star')
préféré
        = article.favorites.length

Si remote: true est ajouté, ajax démarrera lorsque le lien sera activé.

④ Rendre le bouton communication asynchrone

Créez et ajoutez des fichiers create.js.haml et destroy.js.haml

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 })}");

Il semble que le fichier soit rechargé lorsque le bouton est enfoncé en se référant à l'identifiant attaché au bouton.

Après cela, si vous organisez soigneusement l'apparence des boutons, cela sera terminé.

Articles référencés https://qiita.com/yummy888/items/2b7708a498861e5ba733 https://qiita.com/nojinoji/items/2c66499848d882c31ffa