[JAVA] [Rails] À propos de la mise en œuvre de la fonction similaire

Contexte

Je suis un débutant avec 3 mois d'expérience en programmation. Lorsque j'ai créé mon application personnelle, j'ai introduit ** une fonction similaire utilisant la communication asynchrone **, mais je l'ai implémentée en utilisant l'application googlée telle quelle, donc je vais organiser mon esprit J'ai décidé de publier un article pour approfondir ma compréhension.

De plus, cet article sera écrit en supposant qu'un gem appelé Devise est installé lors de l'implémentation de cette fonction.

la mise en oeuvre

Cette fois, nous utiliserons le modèle User, le modèle Posts et le modèle Likes.

migration

Créez une migration du modèle Like.

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

User_id et post_id sont définis comme des ** clés externes d'association **.

modèle

Nous mettrons en place des associations pour chaque modèle.

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

** les utilisateurs peuvent avoir plusieurs "J'aime" ** et ** Les messages peuvent également être "aimés" **, donc Les deux s'associent avec comme avec ** has_many **.

racine

config/routes.rb

Rails.application.routes.draw do
  devise_for :users

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

Nest aime dans les messages. L'imbrication vous permet de déterminer quel message a un équivalent.

** Pour référence ** Si vous faites des voies ferrées ...

Terminal

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

Vous pouvez voir que like est appelé en association avec un message spécifique.

manette

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 obtient ce que l'utilisateur actuellement connecté ** aime en associant, Je recherche un ** post (@post) ** à la différence.

Vue

Créer un modèle partiel

Cette fois, le bouton J'aime et la partie d'affichage du nombre de likes seront préparés avec un modèle partiel. Vous pouvez comprendre la raison en regardant l'explication de JavaScript dans la section suivante.

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

Il renvoie true ** si vous l'aimez déjà, et false ** si vous ne l'avez pas encore aimé.

** "remote: true do" est une option pour la communication asynchrone **. ** À l'origine, la page se déplacera vers la destination du lien **, mais si vous écrivez "remote: true do", ** JS sera recherché à la place **. Par conséquent, ** le mouvement de page est arrêté **. (Comme la valeur semble sauter à la destination du lien, la page ne bouge pas, mais il semble qu'elle sera enregistrée dans la base de données.)

• Font-awesome-sass est requis pour utiliser "icon (" fas "," heart ")".
• Css n'est pas répertorié cette fois.

Appel d'un modèle partiel

○○.haml

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

Veuillez l'inclure lorsque vous appelez le modèle partiel préparé dans la section précédente. C'est un miso que l'identifiant soit décrit par ** attribut de données personnalisé **.

JavaScript C'est la clé de la communication asynchrone.

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') %>");

Les deux ont exactement la même description. ** Il semble être considéré comme JS lors de l'utilisation de la méthode "j" **. Quelqu'un vient d'arrêter la pagination et cherche ** JS **. ..

Lorsque vous appuyez sur le bouton J'aime, le contenu de [** like_ <% = @ post.id%> "**] sera rendu ** dans le ** modèle partiel que vous avez défini précédemment.

En d'autres termes, il sera mis à jour de manière asynchrone vers "posts / like" du modèle partiel ** sans mettre à jour la page.

Résumé

Merci d'avoir lu jusqu'au bout. Ce n'est peut-être pas difficile pour ceux qui y sont habitués, mais c'est quand même très difficile pour les débutants ... Nous espérons que tous les débutants qui se réfèrent à cet article pourront l'implémenter en toute sécurité!

Cette fois, c'était difficile et je ne pouvais pas me le permettre, alors ne soyez pas stupide. ..