Ich bin ein Anfänger-Front-End-Entwickler. Jetzt studiere und trainiere ich in einem Minsker IT-Unternehmen. Das Erlernen der Grundlagen der Web-Benutzeroberfläche erfolgt am Beispiel der Webix JS-Bibliothek. Ich möchte meine bescheidenen Erfahrungen teilen und als kleines Tutorial für diese interessante UI-Bibliothek speichern.SECHSTES PROBLEM
Webix ist eine JavaScript-Bibliothek, in der Operationen hauptsächlich auf der Clientseite ausgeführt werden. Erst dann wird das Ergebnis an den Server gesendet, wenn die Daten gespeichert werden müssen. Hier gibt es keine strengen Anforderungen an das Backend. Es spielt keine Rolle, welche Daten auf dem Server verarbeitet werden. Hauptsache, es akzeptiert Anforderungen eines bestimmten Formats und gibt die Antwort in der richtigen Form. Der Entwickler muss lediglich eine Verbindung zum Server herstellen und mit einfachen Abfragen arbeiten, da das Projekt keine komplexen Benutzereinstellungen hat.Betrachten Sie die folgenden Aufgaben:- Verbinden der Serverseite der Anwendung;
- Serveranforderungsmethoden;
- wie man das Download-Ergebnis verfolgt;
- So verfolgen Sie das Ergebnis des Speicherns.
Der Artikel verwendet das Tabellen- Widget , das in der Dokumentation ausführlich beschrieben wird.Quellen für die Arbeit mit dem Artikel finden Sie hier .Die fertige Bewerbung finden Sie hier .Verbinden der Serverseite der Anwendung
Hier ist ein Beispiel, das auf dem Tabellen-Widget basiert. Die Quellstruktur hat jetzt die Struktur der Anwendung geändert. Zuvor war es eine gewöhnliche index.html-Datei, mit der js-Dateien verbunden waren. Jetzt wurden zwei Ordner hinzugefügt - das Backend mit einem einfachen Serverskript auf nodeJS und der App-Ordner, in dem der gesamte geschriebene Client-Code liegt. Serveroperationen für jedes Widget werden in separaten Dateien beschrieben. Für das Tabellen-Widget ist dies die Datei films.js.Der Code für das Tabellen-Widget befindet sich in der Datei table.js des App-Ordners und wird auf der Registerkarte "Dashboard" gerendert.
Führen Sie zunächst die Anwendung auf dem lokalen Server aus.Öffnen Sie die Befehlszeile für den Ordner mit der Anwendung und geben Sie nacheinander die folgenden Befehle ein:npm install
npm run server
Danach erscheint im Terminal folgender Eintrag:Server läuft auf Port 3000 ...
Öffnen Sie localhost : 3000 / app im Browser
Die angegebene Adresse / der angegebene Link wird im Browser geöffnet.Das Serverskript, auf das das Tabellen-Widget zugreift, unterstützt alle grundlegenden Rohoperationen.Geben Sie zum Laden von Daten in eine Tabelle den Pfad zum Skript in seiner URL-Eigenschaft an.url: "/samples/server/films"
So senden Sie Sicherungsanforderungen : Der Pfad zum Skript wird in der Eigenschaft save angegeben. Der Pfad ist der gleiche wie in der URL, nur mit dem Restpräfix. Wir werden unten über Ruhe sprechen.save:"rest->/samples/server/films"
Abfragemethoden bestimmen, was wir mit der Ressource tun möchten. Standardmäßig verwendet Webix die Methoden GET und POST. Wir verwenden jedoch die RESTful-API und alle für unsere Datenoperationen geeigneten Methoden: GET, POST, PUT und DELETE.Mit dem Rest Präfix , das bereits im Spareinstellung gesetzt ist, werden alle Anfragen durch das entsprechende fertige gesendet Proxy . Der Rest-Proxy koordiniert die Anforderungsmethode mit der Art der Operation, die wir auf dem Client ausgeführt haben. Für bestimmte Aufgaben gibt es mehrere vorgefertigte Proxys. Bei Bedarf können Sie benutzerdefinierte Proxys erstellen.Wir werden Anfragen am Beispiel des Tabellen-Widgets verfolgen. Gehen Sie dazu im Browser zu DevTools-> Netzwerk und suchen Sie Informationen zur gewünschten Anforderung.Verwenden Sie zum Laden von Daten in eine TabelleGET-Methode .Wir werden die Seite aktualisieren und auf die Skriptanforderung klicken films.Standardmäßig enthält diese Anforderung keine Parameter, da es sich um das erste Laden von Daten in die Komponente handelt.Infolgedessen gibt der Server ein JSON-Array mit allen Daten zurück.Ergebnis einer GET-Anforderung:
Mit der POST-Methode wird ein neuer Datensatz in der Tabelle erstellt .Fügen Sie mithilfe des Formulars neue Daten zur Tabelle hinzu.Die Anforderungsdaten sind die folgenden Daten:
Wenn Sie dem Server einen Datensatz hinzufügen, muss die dort zugewiesene ID definitiv kommen:{ "id":"ImurRuK1k59qzy2f" }
Dies ist erforderlich, um die Verbindung zwischen den Daten auf dem Server / Client nicht zu verlieren. Die gleiche ID wird jetzt auf dem Client verwendet.Um die Daten in den Zeilen zu ändern, wird die PUT-Methode verwendet .Wir wählen die erste Zeile in der Tabelle aus - die Daten daraus werden im Formular angezeigt. Dann werden wir sie ändern und speichern. Der gesamte Datensatz (Datenobjekt) wird zusammen mit unseren Änderungen an den Server gesendet.
Die Serverantwort sollte keinen bestimmten Status enthalten (ein leeres Objekt kann auch die Antwort sein, wie unten gezeigt wird). In unserem Fall gibt der Server jedoch den folgenden JSON zurück:{ status: “updated” }
Verwenden Sie zum Löschen von Daten die DELETE-Methode .Löschen Sie die erste Zeile, indem Sie auf das Kreuz klicken.In diesem Fall sind die gesamten Zeichenfolgen die an den Server übertragenen Parameter. Die Hauptsache in den Parametern ist die ID des Datensatzes, der auf dem Server gelöscht werden soll.
Der Server gibt ein leeres Objekt zurück, da eine spezielle Bestätigung eines solchen Vorgangs nicht erforderlich ist.Verfolgen Sie das Download-Ergebnis
Stellen Sie sich eine Situation vor, in der wir berechnen müssen, wie viele Datensätze in eine Tabelle geladen wurden, und dies als Nachricht anzeigen müssen. Verwenden Sie dazu den Ready- Handler .Der Ready- Handler wird sofort nach Eingang der ersten Daten in der Komponente und nur einmal aufgerufen. Innerhalb des Handlers platzieren wir die Funktion, webix.message()die die count- Methode aufruft . Nach dem Aufruf wird in der oberen rechten Ecke des Bildschirms eine Meldung angezeigt “Loaded 250 records!”.const table = {
ready(){
webix.message({
text:`Loaded ${this.count()} records!`,
type:"success"
});
}
}
Moment
des Datenladens : Falls beim Laden der Daten ein Fehler aufgetreten ist, wird das Ereignis onLoadError ausgelöst :$$("datatable").attachEvent("onLoadError", function(xhr){
webix.message("Error!");
});
Tracking Ergebnisse speichern
Sie können die Serverantwort beim Speichern durch Vorgänge wie Hinzufügen, Bearbeiten und Löschen erhalten. Betrachten Sie das Beispiel des Tabellen-Widgets.Hierzu wird das DataProcessor- Modul zur Interaktion mit dem Server verwendet. Die API dieses Moduls kann zur Feinabstimmung der Datenspeicherung verwendet werden. Wir müssen nur den Moment des Speicherns verfolgen - daher verwenden wir eines seiner Ereignisse - onAfterSync .Auf das DataProcessor-Modul wird über die Einstellung zugegriffen. webix.dp(id)Das Ereignis onAfterSync wird ausgelöst, wenn die Antwort vom Server empfangen und verarbeitet wird. Zeigen Sie für dieses Ereignis eine Nachricht durch an webix.message(). Nach dem Speichern wird die Meldung - in der oberen rechten Ecke angezeigt “Saved!”.Wir löschen die erste Zeile in der Tabelle und sehen uns das Ergebnis an.
Ereigniscode in der Datei script.js nach der Webix-Initialisierung:let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
webix.message({
text:"Saved!",
type:"success"
})
});
In diesem Fall können Fehler mit dem Ereignis onAfterSaveError abgefangen werden :dp.attachEvent("onAfterSaveError", function(id, status, response, details){
webix.message("Error!");
});
Verallgemeinerung
Mithilfe von CRUD-Operationen haben wir herausgefunden, wie mit der Serverseite der Anwendung interagiert werden kann. Wir haben einen Standardsatz von Abfragemethoden untersucht und untersucht, wie das Laden und Speichern von Daten erfasst wird. Die im Artikel beschriebenen Beispiele sind nicht nur für das Tabellen-Widget, sondern auch für List verfügbar. Sie können es selbst in den am Anfang angegebenen Quellcodes versuchen.Den Code der fertigen Bewerbung finden Sie hier .