Ich habe versucht, die Ajax-Verarbeitung der ähnlichen Funktion in Rails zu implementieren
Einführung
Ich hatte die Like-Funktion in Rails implementiert, aber als ich diese Funktion verwendete, traten die folgenden Probleme auf.
- Da die gesamte Seite neu gerendert wird, ist eine unnötige Verarbeitung erforderlich.
- Da es sich um Seitenübergänge handelt, wird der Inhalt zum Seitenanfang verschoben, auch wenn Sie unten auf der Seite ein "Gefällt mir" oder einen Kommentar abgeben, wodurch die Benutzerfreundlichkeit verringert wird.
Aus diesem Grund habe ich beschlossen, die Ajax-Funktion hinzuzufügen, um die Benutzerfreundlichkeit ohne Seitenübergang zu verbessern.
Zuerst dachte ich, dass der beste Weg, es zu implementieren, darin bestand, JavaScript / jQuery zu verwenden, um die Ajax-Verarbeitung auszulösen, aber als ich es nachschlug, hatte Rails `link_to``` usw. Es wurde gesagt, dass die Ajax-Verarbeitung verwendet werden kann, indem der Methode von `remote: true``` hinzugefügt wird. Im Gegensatz zu der Implementierungsmethode, die ich zuerst dachte, war sie einfach, also habe ich sie sofort mit dieser Methode implementiert.
Annahme
- Die Buchungsfunktion und die Like-Funktion wurden bereits implementiert.
- Die implementierte Like-Funktion ist vom Typ, der einen Seitenübergang beinhaltet, wenn die Like-Taste gedrückt wird.
- Aus diesem Grund wird davon ausgegangen, dass die Ajax-Verarbeitung durch asynchrone Kommunikation implementiert wird. Dieser Artikel ist eine Einführung in die Schritte dieser Implementierung.
Umgebung / Version
- Ruby 2.6.3
- Rails 6.0.2.1
- jQuery 3.5.1
Implementierung
Lassen Sie zuerst `app / views / posts / show.html.erb``` die Schaltfläche" Gefällt mir "` `app / views / liks / _like.html.erb```` render`` ..
erb:app/views/posts/show.html.erb
#···Kürzung
<div class="post-like mr-auto">
<%= render partial: 'likes/like', locals: { post: @post, like: @like } %>
</div>
#···Kürzung
Fügen Sie `remote: true``` zu` delete und `` `post der Like-Funktion hinzu, um die Ajax-Funktion hinzuzufügen.
erb:app/views/likes/_like.html.erb
<% if current_user.already_liked?(post) %>
<%= link_to 'Like', post_like_path(post, like), method: :delete, class:'post-like__cancel', remote: true %>
<% else %>
<%= link_to 'Like', post_likes_path(post), method: :post, class:'post-like__enable', remote: true %>
<% end %>
Durch Hinzufügen können Sie die folgende Verarbeitung ausführen, nachdem Sie auf jeden Link geklickt haben.
-- delete Methode → `app / views / liks / destroy.js.erb``` Dateiausführung --``` post``` Methode → Führen Sie die Datei `app / views / liks / create.js.erb``` aus
Als nächstes ist die `js.erb```-Datei eine Methode von` Controller wie `` @ post oder `` @ like```, wie im folgenden Code gezeigt. Sie können die definierten Instanzvariablen verwenden. das ist bequem.
erb:app/views/likes/destroy.js.erb
$('.post-like').html('<%= j(render partial: 'likes/like', locals: { post: @post, like: @like }) %>');
erb:app/views/likes/create.js.erb
$('.post-like').html('<%= j(render partial: 'likes/like', locals: { post: @post, like: @like }) %>');
Was wurde gemacht
Das Ergebnis ist wie folgt. Ich konnte bestätigen, dass es ohne Seitenübergänge funktioniert.
schließlich
Ich konnte es auf andere Weise anwenden und Follow-Funktionen und Kommentare implementieren. In Zukunft werde ich auch eine Suchfunktion erstellen, also werde ich auch Ajax verwenden.