[RUBY] Implementieren Sie eine ähnliche Funktion für Posts

Überblick

Diesmal zum Posten von Apps wie Twitter Eine Funktion, mit der Sie mögen und abbrechen können Eine Funktion, die Likes zählen und die Anzahl der Fälle anzeigen kann. Ich werde die Implementierung zusammenfassen, die einen ähnlichen Link zu einem Herzen macht.

Übrigens, in Bezug auf die Funktion, Beiträge zu mögen, gibt es in progate einen Lehrplan, aber ich habe nicht die Funktion erhalten, die ich erwartet hatte, selbst wenn ich sie so implementiert habe, wie sie ist, also habe ich viele Websites wie Qiita durchsucht.

Ich werde es auch darauf basierend zusammenfassen.

Erscheinungsbild der Funktion

Implementierung

Bereiten Sie ein ähnliches Modell vor

rails g model like

In der Migrationsdatei t.references, Foreign_key: Setzen Sie die Spalten user_id und post_id auf true.

models/like.rb

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

Routing einrichten

routes.rb

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

Infolgedessen sehen die Schienenrouten wie im folgenden Bild aus. Verstehen Sie das nicht falsch, da Sie es benötigen, wenn Sie den Link in der Ansichtsdatei angeben.

Erstellen Sie einen Controller

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

Nach dem Speichern oder Löschen werden Sie zur Detailseite des Beitrags weitergeleitet.

Lassen Sie uns eine Ansichtsdatei vorbereiten

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>

Erstens wird die bedingte Verzweigung verwendet, um zu verzweigen, ob der Benutzer möchte oder nicht. Gibt an, ob beim Drücken der Taste erstellt oder zerstört werden soll.

Und wie ich als nächstes schreiben werde, können Sie einen HTML-Satz dazwischen setzen, indem Sie link_to ~~~ do ausführen. (Siehe den Lehrplan für Schienen von progate, wenn Sie nicht damit vertraut sind.)

Stellen Sie sicher, dass die URL link_to korrekt ist.

Wie Sie in dem Bild sehen können, das ich zuvor in das Routing eingefügt habe, schreiben Sie / liks / post_id / create (oder zerstören).

Machen Sie eine Schaltfläche wie mit einem Herzsymbol

Ich weiß nichts anderes, weil ich mich für diesen Teil auf progate bezogen habe. Verwenden Sie font-awesome, um die gewünschten Links in Schaltflächen umzuwandeln.

Laden Sie zuerst den Link in den Kopfteil, damit Sie font-awesome verwenden können.

views/layouts/application.html.erb

 ---Kürzung---

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

Die Ansichtsdatei ist also bereits in einem geeigneten Format geschrieben Schreiben Sie zum Schluss CSS, damit es rosa wird, wenn es Ihnen gefällt, und wenn Sie es nicht mögen, wird es grau.

Wie Sie anhand der zuvor beschriebenen Ansichten / posts / show.html.erb sehen können, werden like-btn und like-btn-different durch die Schaltfläche "Gefällt mir" und die Schaltfläche "Abbrechen" getrennt.

assets/stylesheets/likes.scss

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


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


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

Sie sollten nun in der Lage sein, mit der Herztaste zu mögen oder rückgängig zu machen.

Lassen Sie uns abschließend die Anzahl der Likes zählen und anzeigen.

Zählen Sie die Anzahl der Fälle und zeigen Sie sie an

Die Prozedur besteht darin, @like_count in der show-Methode des Posts-Controllers zu definieren und in der Ansichtsdatei anzuzeigen.

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

Wir definieren, wo die Datenbank nach Likes für den Beitrag durchsucht werden soll, und zählen sie nach Anzahl.

views/posts/show.html.erb

<div class="like-btn">

  <h3>Anzahl der 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 %>
---Kürzung---

Das ist es.