[RUBY] Mettre en œuvre une fonctionnalité similaire pour les articles

Aperçu

Cette fois, pour publier des applications comme Twitter Une fonction qui vous permet d'aimer et d'annuler Une fonction qui peut compter les likes et afficher le nombre de cas, Je vais résumer l'implémentation qui fait d'un lien comme un cœur.

Au fait, en ce qui concerne la fonction d'aimer les messages, il y a un programme en cours, mais même si je l'ai implémenté tel quel, cela n'est pas devenu la fonction à laquelle je m'attendais, alors j'ai cherché dans beaucoup de sites comme qiita.

Je vais également le résumer sur cette base.

Apparence de la fonction

la mise en oeuvre

Préparez un modèle similaire

rails g model like

Dans le fichier de migration t.references, Foreign_key: définissez les colonnes user_id et post_id sur true.

models/like.rb

class Like < ApplicationRecord
  validates :user_id, presence: true
  validates :post_id, presence: true
end

Configurer le routage

routes.rb

post "likes/:post_id/create" => "likes#create"
post "likes/:post_id/destroy" => "likes#destroy"

En conséquence, les itinéraires des rails ressembleront à l'image suivante. Ne vous méprenez pas, car vous en aurez besoin lorsque vous spécifiez le lien dans le fichier de vue.

Créer un contrôleur

controllers/likes_controller.rb

class LikesController < ApplicationController
  before_action :authenticate_user!



  def create
    @like = Like.new(user_id: current_user.id, post_id: params[:post_id])
    @like.save
    redirect_to "/posts/#{@like.post_id}"
  end

  def destroy
    @like = Like.find_by(user_id: current_user.id, post_id: params[:post_id])
    @like.destroy
    redirect_to("/posts/#{params[:post_id]}")
  end


end

Après l'enregistrement ou la suppression, vous serez redirigé vers la page de détails de l'article.

Préparons un fichier de vue

views/posts/show.html.erb

<div class="like-btn">
    <% if Like.find_by(user_id: @current_user.id, post_id: @post.id) %>

      <%=link_to("/likes/#{@post.id}/destroy", {method: :post}) do %>
        <span class="fa fa-heart like-btn-unlike"></span>
      <% end %>

    <% else %>

      <%= link_to("/likes/#{@post.id}/create", {method: :post}) do %>
        <span class="fa fa-heart like-btn"></span>
      <% end %>

    <% end %>
  </div>

Premièrement, le branchement conditionnel est utilisé pour créer un branchement, que l'utilisateur le veuille ou non. Spécifie s'il faut créer ou détruire lorsque le bouton est enfoncé.

Et, comme je vais l'écrire ensuite, vous pouvez mettre une phrase HTML entre les deux en faisant link_to ~~~ do. (Voir le programme des rails de progate si vous ne le connaissez pas)

Assurez-vous que l'URL link_to est correcte.

Comme vous pouvez le voir dans l'image que j'ai mise dans le routage plus tôt, écrivez / likes / post_id / create (ou destroy).

Faire un comme un bouton avec une icône en forme de cœur

Je ne sais rien d'autre car j'ai fait référence à progate pour cette partie. Utilisez font-awesome pour transformer les liens que vous aimez en boutons.

Tout d'abord, chargez le lien dans la partie head afin de pouvoir utiliser font-awesome.

views/layouts/application.html.erb

 ---réduction---

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>

Le fichier de vue est déjà écrit dans un format approprié, donc Enfin, écrivez css pour que si vous l'aimez, il sera rose, et si vous ne l'avez pas, ce sera gris.

Comme vous pouvez le voir en vérifiant les vues / posts / show.html.erb décrites précédemment, like-btn et like-btn-unlike sont séparés par le bouton like et le bouton d'annulation.

assets/stylesheets/likes.scss

.like-btn {
  color: #8899a6;
}


.like-btn-unlike {
  color: #ff2581;
}


.posts-show-item .fa {
  font-size: 16px;
  margin-right: 3px;
}

Vous devriez maintenant pouvoir aimer ou annuler avec le bouton en forme de cœur.

Enfin, comptons et affichons le nombre de likes.

Compter et afficher le nombre de cas

La procédure consiste à définir @like_count dans la méthode show du contrôleur de posts et à l'afficher dans le fichier de vue.

controllers/posts_controller.rb

def show
    @post = Post.find(params[:id])
    @comment = Comment.new
    @comments = @post.comments.includes(:user)
    @like_count = Like.where(post_id: @post.id).count
 end

Nous définissons où rechercher dans la base de données les likes de la publication et les comptons par décompte.

views/posts/show.html.erb

<div class="like-btn">

  <h3>Nombre de likes:<%= @like_count %></h3>

    <% if Like.find_by(user_id: @current_user.id, post_id: @post.id) %>
      <%=link_to("/likes/#{@post.id}/destroy", {method: :post}) do %>
---réduction---

C'est tout.