[RAILS] Ich habe versucht, die ähnliche Funktion durch asynchrone Kommunikation zu implementieren

Einführung

Viele Artikel wurden bereits veröffentlicht, aber ich möchte sie als eigenes Memorandum schreiben.

Vorteile der asynchronen Kommunikation

Indem Sie zuerst persönlich lernen, "warum die Technologie verwendet wird", Ich habe das Gefühl, dass es schnell zu verstehen ist, weil der Zweck klar ist.

1. Nur ein Teil der Seite kann aktualisiert werden, ohne die Seite zu ändern.

Um ehrlich zu sein, finde ich es ziemlich ärgerlich, wenn die Seite jedes Mal geändert wird, wenn Sie es mögen. Durch die Verwendung der asynchronen Kommunikation können Sie jedoch Benutzer kommentieren, mögen und bearbeiten, ohne __Seitenübergänge zu durchlaufen! __ __

Implementierung!

Schritt ① Senden Sie eine JS-Formatanforderung an den Server

Erstens, wenn es sich nicht um eine asynchrone Kommunikation handelt, verhält sich das Terminal zum Zeitpunkt der gleichen Ausführung wie folgt. Das Anforderungsformat wird im roten Kreis des Bildes ausgegeben. In diesem Fall bedeutet dies, dass die Kommunikation im HTML-Format erfolgt!

Ich möchte dies in das JS-Format bringen ...!

views:_favorites.html.erb

<%= link_to post_favorites_path(post), method: :DELETE, remote: true do %>

Auf diese Weise können Sie eine JS-Formatanforderung senden, indem Sie remote: true zum Link der Schaltfläche "Gefällt mir" hinzufügen.

Schritt ② Erstellen Sie eine Teilvorlage für die Schaltfläche "Gefällt mir"

Um eine asynchrone Kommunikation zu implementieren, müssen die Änderungen Teilvorlagen sein. Bereiten Sie insbesondere ein "Gefällt mir" -Box vor, das Sie teilweise aktualisieren möchten. Es ist ein Bild, das die Anzeige wechselt, je nachdem, ob es Ihnen gefällt oder nicht.

views:views/posts/_favorites.html.erb

  <% if post.favorited_by?(current_user) %>
    <%= link_to post_favorites_path(post), method: :DELETE, remote: true do %>
      <span class="btn btn-danger">Mag es aus</span>
    <% end %>
  <% else %>
    <%= link_to post_favorites_path(post), method: :POST, remote: true do %>
      <span class="btn btn-primary">Mögen</span>
    <% end %>
  <% end %>

Erstellen Sie eine Teilvorlage views / posts / _favorites.html.erb, Verschieben Sie den Like-Button-Teil hierher. Rufen Sie dann die Teilvorlage auf, die zuvor in der ursprünglichen index.html erstellt wurde.

views:views/posts/index.html.erb

<div class="main_contents">
    <% @posts.each do |post| %>
        <div class="post_contents">
          <h2><%= link_to post.title, post_path(post.id) %></h2>
          <%= post.content %>

         <!--↓ Hinzufügen(Wo Sie teilweise aktualisieren möchten)↓ -->
          <div id="favorite-<%= post.id %>">
             <%= render 'posts/favorites', post: post %>
          </div>
         <!--↑ Bis hierher ↑-->
        </div>
  <% end %>
</div>

Schritt ③ Erstellen Sie eine js.erb-Datei

Bei Anforderungen im HTML-Format lautet die Ansichtsdatei views / Controller-Name / Aktionsname.html.erb Rufen Sie die Datei von auf.

Für JS-Formatanforderungen muss jedoch views / controller name / action name.js.erb Rufen Sie die Datei von auf.

Dieses Mal implementiere ich die Like-Funktion mithilfe der Aktionen zum Erstellen und Zerstören des Favoriten-Controllers. views / Favoriten / create.js.erb und views / Favoriten / destroy.js.erb Erstellen Sie eine Datei.

ruby:views/favorites/create.js.erb

 #id="favorite-<%= @post.id %>"Es ist ein Prozess, nur den HTML-Code dieses Teils teilweise mit Render zu aktualisieren
$("#favorite-<%= @post.id %>").html("<%= j(render 'posts/favorites',  post: @post ) %>");

ruby:views/favorites/destroy.js.erb

$("#favorite-<%= @post.id %>").html("<%= j(render 'posts/favorites',  post: @post ) %>");

Schritt ④ Löschen Sie die Controller-Umleitung

controllers/favorites_controller.rb

    def create
      @post = Post.find(params[:post_id])
      favorite = current_user.favorites.build(post_id: @post.id)
      favorite.save
      redirect_to root_path #← Lösche diese Zeile
    end

    def destroy
      @post = Post.find(params[:post_id])
      favorite = current_user.favorites.find_by(post_id: @post.id)
      favorite.destroy
      redirect_to root_path #← Lösche diese Zeile
    end

Komplett!

Mit dem obigen Verfahren können Sie eine Desynchronisation der gleichen Funktion implementieren!

Referenz

Ajax (asynchrone Kommunikation) wird mit Schwerpunkt auf Verständlichkeit zusammengefasst (mit einer Demo mit Rails)