[RUBY] [Rails] Volume qui affiche les favoris et une liste de favoris

introduction

Si vous trouvez un produit que vous jugez bon pour les achats en ligne, l'avez-vous enregistré comme favori? À ce moment, si l'écran n'est pas mis à jour et que vous l'aimez ou l'aimez, la couleur de la marque ♡ changera. Après cela, ce serait bien si vous pouviez vérifier vos produits préférés dans une liste. Cette fois, c'est un mémo de la mise en œuvre.

• Nous partirons de l'hypothèse que les fonctions de listage et de publication (table des éléments) et la fonction de connexion (table des utilisateurs) sont fournies.

Procédure de mise en œuvre (synchrone)

Lorsque vous cliquez sur l'image terminée, une partie de l'écran est mise à jour et le nombre augmente. Il a également une fonction de suppression. Nous créerons également une page où vous pourrez vérifier ce que vous avez ajouté à vos favoris dans une liste.

Tout d'abord, comme table intermédiaire entre la table des items et la table des utilisateurs Créez une table des likes.

↓ Les colonnes et associations à ajouter ressemblent à ceci ↓

table des articles

=== Omis ===

• Aucun ajout * Association

• has_many :likes --has_many: shared_users, through :: likes, source :: user # À utiliser lorsque vous voulez créer une liste de favoris, mais ne pas utiliser cette fois

aime la table # table intermédiaire

Association

• belongs_to :item
• belongs_to :user

table des utilisateurs

=== Omis ===

• Aucun ajout *

Association

• has_many :likes --has_many: shared_items, through :: likes, source :: item # À utiliser lorsque vous voulez créer une liste de favoris, mais ne l'utilisez pas cette fois

Ceci complète la conception de la base de données Ensuite, créez un modèle. Entrez la commande suivante dans le terminal

rails g model like

Modifier le fichier de migration pour créer une table

2XXXXXXXXXXXX5_create_likes.rb

class CreateLikes < ActiveRecord::Migration[5.2]
  def change
    create_table :likes do |t|
      t.integer :item_id, null: false
      t.integer :user_id, null: false
    end
  end
end

Rails de db: migrer. Ensuite, un modèle sera généré, donc j'écrirai une association.

user.rb

has_many :likes #ajouter à

item.ruby

has_many :likes #ajouter à

like.rb

class Like < ApplicationRecord

  belongs_to :item
  belongs_to :user

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

  def self.like_method(item, user)
    Like.find_by(item_id: item.id, user_id: user.id)
  end

end

self.like_method(item, user) Je vais définir la déclaration IF ici. Définissez la condition selon laquelle item_id et user_id sont dans la même table! Ensuite, exécutez la commande suivante pour créer le contrôleur

rails g controller likes

Une fois le contrôleur créé avec succès · Voir la fiche ·manette · Routage Je vais définir chacun.

routes.rb

--Omis ---
resources :items, only: [:new, :create, :edit, :update, :show, :destroy] do
    resources :likes, only: [:create, :destroy]
  end
--Omis ---
  resources :users, only: [:show] do
    resources :likes, only: [:index]
  end
--Omis ---

créer et détruire sont imbriqués dans des éléments index imbriqué dans les utilisateurs

likes_controller.rb

class LikesController < ApplicationController

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

  def index
    @items = Item.includes(:item_images).order("created_at DESC")
  end

  def create
    @like = Like.create(item_id: params[:item_id],user_id: current_user.id)
    redirect_to item_path(@item.id)
  end

  def destroy
    @like = Like.find_by(item_id: params[:item_id],user_id: current_user.id)
    @like.destroy
    redirect_to item_path(@item.id)
  end

  def set_item
    @item = Item.find(params[:item_id])
  end

end

Puisque create et destroy n'ont pas de fichier de vue, vous devez définir des redirections.

index.html.haml

--Omis ---
      - if user_signed_in? && Like.like_method(@item, current_user)
        .check_btn__like--add{data: {item_id: @item.id}}
          = link_to "/items/#{@item.id}/likes/:id" , method: :DELETE do
            = icon( "fa", "star")
préféré
            = @item.likes.length
      - elsif user_signed_in?
        .check_btn__like{data: {item_id: @item.id}}
          = link_to "/items/#{@item.id}/likes", method: :POST do
            = icon( "fa", "star")
préféré
            = @item.likes.length
      - else
        .check_btn__like
          = link_to new_user_session_path do
            = icon( "fa", "star")
préféré
            = @item.likes.length
--Omis ---

Cliquez ici pour l'écran lors de l'enregistrement en tant que favori

index.html.haml

.mypage_Wrapper
  %section.mypage_title
Liste des favoris
  %section.like_Wrapper
    .like__box
      - @items.each do |item|
        - if user_signed_in? && Like.like_method(item, current_user)
          .like__box__product
            .like__image
              = link_to item_path(item.id) do
                = image_tag item.item_images[0].image.url
            .like__name
              = item.name
            %ul
              %li
                = item.price.to_s
              %li
                = "Cercle"
              %li.like__tax
                = "(taxe inclu)"
              %li.like__icon
                = link_to "/items/#{item.id}/likes/:id" , method: :DELETE do
                  = icon("fas", "star")
.bottom_Wrapper

C'est ce que vous voyez dans votre liste de produits préférés

like.scss

.like_Wrapper {
  width: 100%;
}

.like__box {
  background-color:white;
  margin: 0 auto;
  width: 65%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  &__product {
    width: 180px;
    height: 90%;
    margin: 25px 2% 0;
    transition: all .3s ease-in-out;
    .like__image {
      width: 180px;
      height: 140px;
      margin-bottom: 3%;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .like__name {
      font-weight: bold;
    }
    ul{
      display: flex;
      font-size: 16px;
      li{
        font-weight: bold;
      }
      .like__tax {
        font-size: 10px;
        writing-mode: lr-tb;
        width: 30px;
        line-height: 30px;
        margin-left: 2%;
        margin-right: 24%;
      }
      .like__icon {
        i {
          font-size:1.1em;
          color: orange;
        }
      }
    }
  }
  &__product:hover {
    cursor: pointer;
    transform: scale(1.1, 1.1);
  }
}

Pour le moment, CSS Je pense qu'il peut être implémenté dans un état synchronisé avec l'implémentation jusqu'à présent! Jusqu'à présent, si vous implémentez une communication asynchrone à l'aide d'Ajax, elle sera plus riche, alors j'aimerais pouvoir écrire cela ... Ce sera plus tard ...

référence

https://techtechmedia.com/favorite-function-rails/#i https://qiita.com/naberina/items/c6b5c8d7756cb882fb20 https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9 https://qiita.com/shh-nkmr/items/48fe53282253d682ecb0