[RUBY] [Rails] Pagenation mit Ajax kompatibel machen
1. 1. Einführung
In Bezug auf die Seitennation des Startbildschirms der Webanwendung (Kinderbetreuungsseite - * SUKUSUKU * -), die gerade erstellt wird, fühlte ich mich beim Wechsel zu einer anderen Seite gestresst, dass sie neu geladen und an den oberen Rand der Seite verschoben wurde. Deshalb wollte ich die Pagenation mit Ajax kompatibel machen, um die Verwendung zu vereinfachen.
** Was Sie in diesem Artikel sehen können ** ・ Grundlegender Mechanismus der Ajax-Kommunikation ・ Typische JavaScript-Bibliothek ・ Ajax in Rails ・ Pagenation mit Ajax kompatibel machen
2. Was ist Ajax überhaupt?
Laut wikipedia ist Ajax (Ajax)
Es handelt sich um eine Programmiermethode, die eine Schnittstelle erstellt, während eine asynchrone Kommunikation in einem Webbrowser durchgeführt wird. Verwenden Sie die asynchrone Kommunikation über XMLHttpRequest (integrierte JavaScript-Klasse für die HTTP-Kommunikation), um einen Teil der Seite mit dynamischem HTML (DHTML) entsprechend dem Kommunikationsergebnis dynamisch neu zu schreiben. Ajax steht für Asynchronous JavaScript + XML und wurde am 18. Februar 2005 vom US-amerikanischen Informationsarchitekten Jesse James Garrett benannt.
Und das. Ich werde es etwas genauer erklären.
Was ist asynchrone Kommunikation?
Da es sich um asynchrone Kommunikation mit synchroner Kommunikation handelt, werden wir zunächst die synchrone Kommunikation erläutern. Bei der synchronen Kommunikation wird, wie in der folgenden Abbildung gezeigt, eine Operation an der Benutzeroberfläche ausgeführt und die Anforderung an den Webserver gesendet. Anschließend empfängt der Webserver die Antwort, verarbeitet sie in der Datenbank usw. und sendet das Ergebnis in der Antwort von HTML, CSS usw. an die Browserseite. Der Browser wird neu geladen und Sie sehen die Ergebnisse.
In der synchronen Kommunikationskarten-App wurde der Browser beim Verschieben oder Vergrößern von der aktuell angezeigten Position neu geladen.
Die asynchrone Kommunikation ermöglicht die dynamische Verarbeitung in einem Webbrowser mithilfe von JavaScript. Wenn auf der Benutzeroberfläche etwas getan wird, wie in der folgenden Abbildung gezeigt, wird JavaScript im Browser an die Ajax-Engine aufgerufen, anstatt direkt mit dem Server zu kommunizieren. Die Ajax-Engine sendet HTML und CSS als Antwort auf die Benutzeroberfläche, und das DOM wird im Browser angezeigt. Zu diesem Zeitpunkt befinden sich Browser und Server nicht im selben Status, sodass die Ajax-Engine eine ** XML HTTP-Anforderung (XHR) ** an den Webserver sendet. Die Serverseite antwortet mit dem Ergebnis des Empfangs der Anforderung als XML und JSON.
Wenn Sie mit der App für asynchrone Kommunikationskarten die aktuell angezeigte Position verschieben oder vergrößern, können Sie eine dynamische Verarbeitung durchführen, ohne sie auf der Browserseite neu laden zu müssen.
Mit anderen Worten
** Synchrone Kommunikation **: Nach dem Warten auf die Serverkommunikation wird der Browser neu geladen und eine dynamische Verarbeitung ist möglich.
** Asynchrone Kommunikation **: Die dynamische Verarbeitung kann durchgeführt werden, ohne auf die Serverkommunikation zu warten. Zu diesem Zeitpunkt wird der Browser nicht neu geladen.
darüber.
Was ist XML?
Abkürzung für Extensible Markup Language. Eine der Auszeichnungssprachen. HTML ist die Sprache, in der Daten ausgetauscht und Konfigurationsdateien geschrieben werden, im Gegensatz zu der Sprache, in der Webseiten angezeigt werden. Es wird als "erweiterbare Auszeichnungssprache" bezeichnet, da Sie Tags usw. frei bearbeiten können.
<?xml version="1.0" encoding="UTF-8" ?>
<Lebensmittelgeschäft>
<Lebensmittel>
<Name>Apfel</Name>
<Farbe>rot</Farbe>
</Lebensmittel>
</Lebensmittelgeschäft>
Auf diese Weise können Tags auch auf Japanisch geschrieben werden.
Was ist JSON?
Abkürzung für JavaScript Object Notation. Eine gängige Datendefinitionssprache ähnlich wie XML. Es ist ein Format, das für Menschen leicht zu lesen und zu schreiben ist und für Maschinen leicht zu analysieren und zu generieren ist.
Ich habe darauf verwiesen → Einführung von JSON
Was ist DOM?
Abkürzung für Document Object Model. Eine Programmierschnittstelle für HTML- und XML-Dokumente. DOM erweitert HTML und XML als Baumstruktur. Ajax verwendet DOM, um nur einen Teil der Benutzeroberfläche neu zu schreiben.
Referenziert → Einführung von DOM
3. 3. Vor- und Nachteile der Verwendung von Ajax
verdienen
-Die dynamische Hochgeschwindigkeitsverarbeitung kann durchgeführt werden, ohne auf eine Antwort vom Server zu warten.
-Die Menge der empfangenen Daten kann reduziert werden.
-Der Server ist nicht belastet.
Fehler
- Während der Entwicklung wird die Fehlermeldung nicht auf dem Bildschirm angezeigt, da der Browser nicht neu geladen wird. Es ist schwer zu sagen, wo der Fehler liegt.
・ Browserübergreifende Maßnahmen [^ 1] sind erforderlich
-Die Validierung muss sowohl auf der JS- als auch auf der Serverseite beschrieben werden.
Es scheint, dass die Vorteile hauptsächlich auf der Benutzerseite und die Nachteile auf der Entwicklungsseite liegen.
4. JavaScript-Framework
Sie müssen JavaScript lernen, um Ajax verwenden zu können. Es gibt verschiedene Frameworks, die das Schreiben von JavaScript erleichtern. Hier sind einige typische.
jQuery Das beliebteste Framework zur Vereinfachung der Ajax-Verarbeitung. Die Grammatik ist einfach und leicht zu merken. Es hängt nicht vom Typ des Browsers ab und kann eine Vielzahl von Bereichen von Animation über Effekte bis hin zur asynchronen Kommunikation verarbeiten.
Angular Ein von Google und den Privat- und Unternehmensgemeinschaften entwickeltes Framework. Hauptsächlich für großtechnische Anwendungen geeignet. Die Lernkosten sind hoch, da es viele einzigartige Konzepte und Funktionen gibt.
React Ein von Facebook und der Community entwickeltes Framework. Da es sich um eine Bibliothek handelt, die nur den UI-Teil enthält, verwenden Sie sie zusammen mit anderen Frameworks. Stattdessen funktioniert es schnell.
Vue.js Einfach, leicht und schnell. Mit leistungsstarken Komponentenfunktionen können Daten und Verarbeitung getrennt und die Kommunikation mit dem Server mit hoher Geschwindigkeit durchgeführt werden.
5. Ajax in Rails
Rails nennt die Technik zum Hinzufügen von JavaScript zum DOM ** "UJS: Unauffälliges JavaScript" **. Wenn JavaScript in HTML gemischt wird, verstößt es häufig gegen das DRY-Prinzip [^ 2] und wird kompliziert und schwierig zu warten. Daher verwendet Rails eine Methode, die JavaScript korrekt trennt und nicht verfügbar macht. Mit Rails können Sie jedes JavaScript mit diesen "Minimierungen" und "Verkettungen" ausführen. Um JavaScript tatsächlich in den Link einzubetten, aktivieren Sie die Remote-Option in der Ansicht wie unten gezeigt.
<%= link_to "Artikel", @article, remote: true %>
Jetzt können Sie JavaScript einbetten. Referenz → Verwenden von JavaScript mit Schienen
6. Machen Sie Pagenation Ajax kompatibel
Umgebung
-
MacBook Catalina ver.10.15.7
-
Rails 6.0.3
-
ruby 2.7.1
-
jQuery
Dieses Mal haben wir uns angesichts der Lernkosten entschieden, ** jQuery ** als Framework zu verwenden.
Setzen Sie jQuery in Rails ein
Zunächst müssen Sie jQuery sowohl zu Webpack als auch zu Yarn hinzufügen.
Terminal
$ yarn add jquery
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
Benötigen Sie jQuery in der Datei application.js.
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
Sie können jQuery jetzt mit Rails verwenden.
Ansicht (HTML)
Machen Sie zunächst die Ansicht Ajax kompatibel.
HTML:app/views/static_pages/home.html.erb
-Nur der Page Nation-Teil wird beschrieben-
.
.
<div class="question-index">
<%= paginate @questions, remote: true %>
<%= render partial: 'questions/question', collection: @questions %>
<%= paginate @questions, remote: true %>
</div>
.
.
Schreiben Sie remote: true in pagenate.
Der HTML-Code der von dieser home.html.erb generierten Pagenation lautet wie folgt.
HTML
<ul class="pagination">
<li class='active'>
<a data-remote="true">1</a>
</li>
<li>
<a rel="next" data-remote="true" href="/?page=2">2</a>
</li>
<li>
<a rel="next" data-remote="true" href="/?page=2">Nächster›</a>
</li>
<li>
<a data-remote="true" href="/?page=2">letzte»</a>
</li>
</ul>
```
Alle Pagenation-Links haben jetzt "data-remote =" true "".
Dadurch kann Rails informiert werden, dass JavaScript Formulare bearbeiten darf.
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687088/0cb6e3b0-2b9f-c5cc-3fd1-ef28f16e879d.png " width="30%">
↑ Die erzeugte Pagenation.
#### Regler
Aktivieren Sie dann den Controller, um auf Ajax-Anforderungen zu antworten.
#### **`app/controllers/static_pages_controller.rb`**
```ruby
class StaticPagesController < ApplicationController
def home
@questions = Question.page(params[:page]).per(10).all
respond_to do |format|
format.html
format.js
end
end
end
```
Die `` reply_to`` -Methode führt einen beliebigen Code im Block aus.
Normalerweise wird `` format.html`` als Antwort aufgerufen, aber diesmal lautet der Pagenationslink `` data-remote = "true" `` und die Option `` remote`` ist aktiviert, also ` `format.js`` wird aufgerufen.
#### Ansicht (HTML)
Verwenden Sie schließlich jQuery, um es Ajax-kompatibel zu machen.
Verschieben Sie zuvor den Code in home.html.erb auf partiell, damit er von jQuery aufgerufen werden kann.
#### **`HTML:app/views/static_pages/home.html.erb (Bewertung)`**
```
<div id="home_pagenate">
<%= render partial: 'index_page' %>
</div>
```
Fügen Sie den ursprünglichen Code home.html.erb in den Teil ein.
#### **`HTML:app/views/static_pages/_index_page.html.erb`**
```
-Nur der Page Nation-Teil wird beschrieben-
.
.
<div class="question-index">
<%= paginate @questions, remote: true %>
<%= render partial: 'questions/question', collection: @questions %>
<%= paginate @questions, remote: true %>
</div>
.
.
```
Erstellen Sie eine JS-Datei und schreiben Sie den jQuery-Code.
#### **`javascript:home.js.erb`**
```
$('#home_pagenate').html("<%= escape_javascript(render 'index_page') %>");
```
Wenn nun die Paginierung mit `` data-remote = "true" `` ausgeführt wird, ruft der Controller die JS-Datei auf und die Originalseite wird in der JS-Datei gerendert. Damit ist die Ajax-Unterstützung abgeschlossen.
#### Vollständiges Formular
Es scheint einen einfacheren Weg zu geben, aber es hat vorerst gut funktioniert! !!
# 7. Zusammenfassung
Ich habe ziemlich viel Ruby studiert, aber ich wusste nicht viel über JavaScript, also habe ich es zusammengefasst. Die Lernkosten sind relativ hoch und die Wartung scheint für Anfänger schwierig zu sein. Daher möchte ich die erforderlichen Teile identifizieren.
[^ 1]: Funktioniert garantiert mit allen Browsern.
[^ 2]: Wiederholen Sie sich nicht "Vermeiden Sie Wiederholungen"
Recommended Posts