[RAILS] Einführung von jQuery - bis es verwendet werden kann (Datensatz zur Vorbereitung der asynchronen Kommunikation ausgeführt) haml

• Eine Zusammenfassung derjenigen, die alle asynchronen Kommunikationsvorgänge von jQuery [hier] überprüfen möchten (https://kayoblog.org/programming_myapp_hidoukitushin/)

Vorbereitung zur Einführung

Wir werden jQuery mithilfe des Paketverwaltungssystems einführen. Das diesmal verwendete Paketverwaltungssystem (Paketmanager) ist "Garn". Installieren.

Terminal

% yarn install

Einführung von jQuery

Einführung von jQuery, einer der JavaScript-Bibliotheken

Beschreibe in Gemfile.

Gemfile

gem 'jquery-rails'
#Füllen Sie am Ende aus

Vergessen Sie nicht, das Bundle nach dem Schreiben des Edelsteins zu installieren.

Terminal

% bundle install

Starten Sie den Server neu, nachdem Sie den Edelstein reflektiert haben.

Bereit zum Laden von JavaScript

Erstellen Sie ein Verzeichnis zum Schreiben von JavaScript

Erstellen Sie eine Datei mit dem Namen "javascripts" im Assets-Ordner

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　:file_folder: stylesheets

Erstellen Sie eine Datei, die JavaScript beschreibt

Erstellen Sie application.js im Ordner javascripts

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　　　:page_facing_up:application.js 　　　　:file_folder: stylesheets

Laden Sie JavaScript

Sie müssen die JavaScript-Datei aus der Ansichtsdatei aufrufen. Gleiche Kapazität wie CSS. "= Javascript_include_tag'application '" wurde zur 9. Zeile hinzugefügt.

haml:app/views/layouts/application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Sample app
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application'
    -# = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    -#Die obige Zeile beschreibt eine Technologie namens Webpacker. Bei Bedarf löschen.
  %body
    = yield

Machen Sie es möglich, die Datei application.js aufzurufen.

Schreiben Sie "// = link_directory ../javascripts .js" in die zweite Zeile.

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

JavaScript sollte jetzt geladen werden!

Überprüfen Sie, ob JavaScript normal geladen ist

Schreiben Sie Folgendes in application.js. Überprüfen Sie das Konsolenprotokoll.

app/assets/javascripts/application.js

console.log("JavaScript wurde erfolgreich geladen");

Die Seite erneut laden Es ist in Ordnung, wenn auf der Konsole "JavaScript wurde erfolgreich geladen" angezeigt wird.

Wenn Sie bestätigen können, dass es normal ist, habe ich es früher geschrieben Löschen Sie "console.log (" JavaScript wird normal geladen ");" in application.js.

Stellen Sie jQuery zur Verfügung

Fügen Sie application.js die folgenden zwei Zeilen hinzu. Eine Beschreibung für die Verwendung des zuvor erwähnten Edelsteins, genannt jquery-rail.

app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs

Laden von jQuery ・ ・ ・ // = erfordert jquery Verwenden von JavaScript mit Rails ... // = erfordert Rails-UJs

Bemerkungen

Danach, wenn Sie eine JavaScript-Datei direkt unter application.js erstellen und schreiben Da alle JavaScript-Dateien in dem Verzeichnis gelesen werden müssen, in dem application.js vorhanden ist, fügen Sie am Ende "// = require_tree" hinzu.

app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs
//= require_tree .

Beispiel: JavaScript-Datei sample1.js sample2.js sample3.js Wenn Sie es direkt unter application.js erstellen Dies bedeutet, dass alles in der vorherigen Beschreibung gelesen wird.

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　　　:page_facing_up: application.js 　　　　　　:page_facing_up: sample1.js 　　　　　　:page_facing_up: sample2.js 　　　　　　:page_facing_up: sample3.js 　　　　:file_folder: stylesheets

Überprüfen Sie, ob jQuery funktioniert

Direkt unter application.js wie im vorherigen Beispiel für den Betriebstest Nur sample1.js erstellt tatsächlich eine Datei. Wenn der Name der Datei festgelegt wird, die als nächstes erstellt werden soll, ist dieser Name in Ordnung.

Beschreiben Sie Folgendes in der Datei sample1.js.

app/assets/javascripts/sample1.js

$(function(){
  console.log("jQuery funktioniert korrekt")
});

Wenn du es beschreiben kannst Wenn Sie die Seite neu laden und die Konsole anzeigt, dass "jQuery korrekt verwendet werden kann", funktioniert sie ordnungsgemäß.

Wenn Sie dies bestätigen können, löschen Sie den Inhalt von sample1.js. Wenn Sie diese Datei verwenden, ändern Sie den Namen.

Memo Bei der Einführung von jQuery verwenden wir das Paketverwaltungssystem "Garn". Es ist in haml beschrieben.

Ich möchte auch herausfinden, was ohne die Verwendung des Paketverwaltungssystems passieren würde.

Ein letztes Wort

Asynchrone Kommunikation implementieren Ich musste JavaScript laden und jQuery einführen. JavaScript vereinfacht den Code mithilfe einer Bibliothek namens jQuery. Der oben geschriebene Code wäre ohne jQuery ziemlich lang.

Was ist die Bibliothek und was ist jedes Wort? Ich möchte auch verstehen, was ein Paketverwaltungssystem wie Garn tut. Ich hoffe, ich kann es noch einmal nachschlagen und einen Artikel schreiben.

Danach ging ich zu Ajax, um die asynchrone Kommunikation zu implementieren. Auf diese Weise habe ich den Artikel als eine einzige Einführung gemacht, weil ich erwartet hatte, dass er auf andere Dinge angewendet werden kann. Ich bin mir nicht sicher, ob ab diesem Zeitpunkt eine andere Implementierung möglich ist. Ich wollte mehr tun.

ähnliche Links

Es ist [hier]([ttps: //kayoblog.org/programming_myapp_hidoukitushin/), das den gesamten Fluss der asynchronen Kommunikation seit Einführung von jQuery beschreibt.