JavaScript
Serverlose CRUD-Datenbankoperationen mit JavaScript

18min
Durchführung von serverlosen Datenbankoperationen
Einführung
Dieser Abschnitt erklärt, wie man die CRUD (Erstellen, Lesen, Aktualisieren und Löschen) Operationen
in einer JavaScript-Umgebung über Back4App implementiert.
Es bietet auch Code-Snippets und eine Online-Umgebung, um Ihren Code ohne lokale Einrichtung auszuführen und zu testen.
Weitere Informationen zum Parse SDK finden Sie unter Parse JavaScript SDK API-Referenz und Parse Open-Source-Dokumentation für JavaScript SDK.
Voraussetzungen
Es gibt keine zusätzlichen Voraussetzungen, außer dass Sie über grundlegende Kenntnisse in JavaScript verfügen.
Optional: Um dieses Tutorial mit Ihrer eigenen App abzuschließen, benötigen Sie:
Eine App, die für JavaScript bei Back4App erstellt und konfiguriert wurde.
Hinweis: Folgen Sie dem JavaScript Install Parse SDK Tutorial um zu erfahren, wie Sie das tun können.
1 - Umgebung einrichten
Dieser Leitfaden verwendet die JSbin Plattform als Code-Editor.
Es ist sehr einfach zu bedienen, alles, was Sie tun müssen, ist, die Hauptseite zu öffnen und auf die HTML, JavaScript und Konsole Schaltflächen zu klicken:
﻿
Der erste Schritt, um mit dem Programmieren zu beginnen, besteht darin, die Parse API einzuschließen und die Schlüssel Ihrer App hinzuzufügen.
Für dieses Tutorial wurde eine öffentliche Back4App-App erstellt, damit Sie Ihre Änderungen in der Datenbank überprüfen können, ohne Ihre eigene App erstellen zu müssen.
Optional: Um die Parse-Datenbank für dieses Beispiel zu überprüfen, müssen Sie Ihre eigene App erstellen und auf die Parse Dashboard Option zugreifen.
Um die Parse API in Ihrer App einzuschließen, fügen Sie die folgende Codezeile innerhalb des HTML-Head-Tags hinzu:
<script type="text/javascript" src="https://npmcdn.com/parse/dist/parse.min.js"></script>
Fügen Sie dann Ihre Anmeldeinformationen zu Beginn der JavaScript-Datei hinzu. Die Standard-Schlüssel sind die, die mit unserer öffentlichen App verbunden sind.
//Fügen Sie Ihren Anwendungs-Schlüssel und JavaScript-Schlüssel entsprechend ein
Parse.initialize("JfMeozLs8UZFxaZibAiZhlpDl5OZkyjVwzdxLfqw", "fi6LWURzRGmTg7neZfI79MJaB2QHjWhiZ4nVFvKD");
Parse.serverURL = "https://parseapi.back4app.com/";
In diesem Tutorial werden wir die CRUD-Operationen basierend auf einer Pet-Klasse erstellen, die ein Name- und ein Altersfeld hat, wobei der Name ein String und das Alter eine Zahl ist. Daher sollte der Code damit beginnen, eine Unterklasse der Pet-Klasse zu erstellen, damit sie später in unseren Funktionen verwendet werden kann, wie unten gezeigt:
var Pet = Parse.Object.extend("Pet");
Alle grundlegenden Operationen erfordern, dass der Benutzer angibt, wie der gewünschte Name des Haustiers lautet. Erstellen Sie auf diese Weise eine globale Variable „textName“. Es ist auch eine gute Idee, eine „textAge“-Variable zu erstellen, die in den Erstellungs- und Aktualisierungsmethoden verwendet wird.
var textName = "myName";
var textAge = 10;
2 - Erstellen
Die create Funktion erstellt ein neues Haustier mit dem Namen und dem Alter, die Sie in den Variablen „textName“ und „textAge“ angegeben haben.
Um diese Funktion zu erstellen, folgen Sie einfach diesen Schritten:
Erstellen Sie eine neue Instanz der Pet-Klasse von Parse mit dem Befehl
Verwenden Sie die set Funktion, um die Parameter für dieses Objekt festzulegen.
Rufen Sie die save Funktion auf, die das Haustier effektiv in Ihrer Datenbank imParse Dashboard registriert.
Sie können die Back4App JavaScript Create Function öffnen, um den bereits implementierten Code zu sehen.
Der Code für die create Funktion ist unten geschrieben:
create.js
1   create();
2
3   function create() {
4       mypet = new Pet();
5       mypet.set("name", textName);
6       mypet.set("agePet", textAge);
7
8       mypet.save().then(function(pet){
9            console.log('Pet created successful with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
10      }).catch(function(error){
11           console.log('Error: ' + error.message);
12      });
13  }
1   create();
2
3   function create() {
4       mypet = new Pet();
5       mypet.set("name", textName);
6       mypet.set("agePet", textAge);
7
8       mypet.save().then(function(pet){
9            console.log('Pet created successful with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
10      }).catch(function(error){
11           console.log('Error: ' + error.message);
12      });
13  }
﻿
Um es zu testen, fügen Sie diesen Code-Schnipsel in die JavaScript-Datei in der JSbin, klicken Sie auf
die Ausführen-Schaltfläche im Konsolenbereich und warten Sie auf die Ausgabe.
Es sollte ausgeben, dass das Haustier erfolgreich erstellt wurde.
Um zu bestätigen, dass das neue Objekt in der Datenbank ist, können Sie auf das Parse Dashboard zugreifen oder Sie können die lesen-Funktion programmieren.
3 - Lesen
Die lesen-Funktion ist verantwortlich für das Abfragen der Datenbank und das Zurückgeben des Objekts, das Ihren Suchkriterien entspricht. Sie kann auch verwendet werden, um die Existenz eines Objekts zu überprüfen.
Hier ist die Schritt-für-Schritt-Anleitung zum Erstellen Ihrer eigenen lesen-Funktion:
Erstellen Sie eine Instanz der Query-Klasse von Parse.
Fügen Sie Einschränkungen zu Ihrer Abfrage hinzu, um die Suche einzuschränken. Weitere Einschränkungsoptionen finden Sie in der Parse Query-Dokumentation.﻿
Führen Sie die Suchmethode der Abfrage aus. Dieses Tutorial verwendet query.first um nur das erste Element zu erhalten, das Ihren Kriterien entspricht.
Wenn die Operationen erfolgreich sind, wird ein Haustierobjekt zurückgegeben. Wenn kein Objekt gefunden wird, hat das Rückgabeobjekt den Wert undefined.
Sie können die Back4App JavaScript Lese-Funktion öffnen, um den bereits implementierten Code zu sehen.
Der Code für die lesen Funktion ist wie folgt:
read.js
1   read();
2
3   function read() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function(pet){
7           if(pet){
8              console.log('Pet found successful with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9           } else {
10             console.log("Nothing found, please try again");
11          }
12      }).catch(function(error){
13          console.log("Error: " + error.code + " " + error.message);       
14      });
15  }
1   read();
2
3   function read() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function(pet){
7           if(pet){
8              console.log('Pet found successful with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9           } else {
10             console.log("Nothing found, please try again");
11          }
12      }).catch(function(error){
13          console.log("Error: " + error.code + " " + error.message);       
14      });
15  }
﻿
Um die read-Funktion zu testen, fügen Sie den Code-Schnipsel in Ihre JSBin-JavaScript-Datei ein. Wenn der Code ausgeführt wird, wird das Alter des gefundenen Haustiers (falls gefunden) oder andernfalls die Meldung ausgegeben, dass kein Haustier gefunden wurde.
Wenn beim Testen das ausgegebene Alter nicht mit dem Alter Ihres Objekts übereinstimmt, bedeutet dies, dass es
 mehr Objekte mit demselben Namen gibt, aber Ihre Abfrage nur eines von ihnen zurückgibt. Um die read-Funktion wirklich zu testen, erstellen Sie ein Objekt mit einem anderen Namen, das noch niemand erstellt hat, und führen Sie dann die Funktion aus, die das Alter des Objekts korrekt ausgibt.
4 - Aktualisieren
Für die update-Funktion wird ein Haustier als Parameter übergeben und die Funktion ändert sein Alter auf das, das Sie in der „textAge“-Variablen angegeben haben. Um das Haustier zu finden, das übergeben wird, verwenden wir eine modifizierte Version unserer read-Funktion.
Im Folgenden sind die Schritte aufgeführt, um Ihre eigene update-Funktion zu erstellen:
Schreiben Sie eine modifizierte read-Funktion namens readThenUpdate, die die update-Funktion aufruft, wenn sie ein Haustier erfolgreich findet.
In der update-Funktion verwenden Sie die set-Funktion, um die Parameter Ihres Haustiers zu ändern.
Rufen Sie die save-Funktion für dieses Haustier auf, um die Änderungen in der Datenbank zu speichern.
Sie können die Back4App JavaScript Update-Funktion öffnen, um den bereits implementierten Code zu sehen.
Hier ist der Code für die readThenUpdate Funktion und update Funktion:
update.js
1   readThenUpdate();
2
3   function readThenUpdate() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function (pet) {
7         if (pet) {
8           console.log('Pet found with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9           update(pet);
10        } else {
11          console.log("Nothing found, please try again");
12        }
13      }).catch(function (error) {
14        console.log("Error: " + error.code + " " + error.message);
15      });
16  }
17
18  function update(foundPet) {
19      textName = "myNameUpdated";
20      textAge = 20;
21      console.log(textAge);
22      foundPet.set('name', textName);
23      foundPet.set('agePet', textAge);
24
25      foundPet.save().then(function (pet) {
26        console.log('Pet updated! Name: ' + pet.get("name") + ' and new age: ' + pet.get("agePet"));
27      }).catch(function(error) {
28        console.log('Error: ' + error.message);
29      });
30  }
1   readThenUpdate();
2
3   function readThenUpdate() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function (pet) {
7         if (pet) {
8           console.log('Pet found with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9           update(pet);
10        } else {
11          console.log("Nothing found, please try again");
12        }
13      }).catch(function (error) {
14        console.log("Error: " + error.code + " " + error.message);
15      });
16  }
17
18  function update(foundPet) {
19      textName = "myNameUpdated";
20      textAge = 20;
21      console.log(textAge);
22      foundPet.set('name', textName);
23      foundPet.set('agePet', textAge);
24
25      foundPet.save().then(function (pet) {
26        console.log('Pet updated! Name: ' + pet.get("name") + ' and new age: ' + pet.get("agePet"));
27      }).catch(function(error) {
28        console.log('Error: ' + error.message);
29      });
30  }
﻿
Um zu bestätigen, ob die update Funktion funktioniert, fügen Sie den obigen Code in die JavaScript-Datei auf der JSBin-Seite ein.
Verwenden Sie einen ungewöhnlichen Namen für Ihr Objekt, um Konflikte mit anderen Benutzern zu vermeiden, und folgen Sie dann diesen Schritten:

1. Erstellen Sie ein Objekt mit Ihrem gewünschten Namen.
2. Überprüfen Sie, ob das Objekt mit Ihrer read Funktion erstellt wurde.
3. Rufen Sie Ihre readThenUpdate Funktion auf, die in diesem Thema erstellt wurde, mit einem Alter, das sich von dem ursprünglichen unterscheidet.
4. Überprüfen Sie, ob sich das Alter des Haustiers geändert hat, indem Sie Ihre read Funktion erneut aufrufen.
5 - Löschen
Die Löschen Funktion löscht ein Haustier, das von der lesen Funktion empfangen wurde. Es ist eine irreversible Aktion, was bedeutet, dass Sie vorsichtig sein sollten, während Sie sie verwenden, insbesondere weil Ihre lesen Funktion möglicherweise mehr Objekte zurückgibt, als Sie tatsächlich löschen möchten. Aus diesem Grund wird empfohlen, immer nur ein Objekt auf einmal zu löschen. Die Schritte zum Schreiben Ihrer eigenen Löschen Funktion finden Sie unten:
Am Ende des Erfolgs Ihrer “lesen” Funktion (readThenDelete, machen Sie einen Aufruf für die Löschen Funktion.
In der deletePet Funktion, rufen Sie die Zerstörungsmethode auf dem empfangenen Objekt “foundPet” auf.
Sie können die Back4App JavaScript Löschen Funktion öffnen, um den Code zu sehen, der bereits implementiert wurde.
Hier ist der Code für die readThenDelete Funktion und deletePet Funktion:
delete.js
1   readThenDelete();
2
3   function readThenDelete() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function (pet) {
7           if (pet) {
8               console.log('Pet found with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9               deletePet(pet);
10          } else {
11              console.log("Nothing found, please try again");
12              return null;
13          }
14      }).catch(function (error) {
15          console.log("Error: " + error.code + " " + error.message);
16          return null;
17      });
18  }
19
20  function deletePet(foundPet) {
21      foundPet.destroy().then(function(response) {
22        console.log('Pet '+ foundPet.get("name") + ' erased successfully');
23      }).catch(function(response, error) {
24        console.log('Error: '+ error.message);
25      });
26  }
1   readThenDelete();
2
3   function readThenDelete() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function (pet) {
7           if (pet) {
8               console.log('Pet found with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9               deletePet(pet);
10          } else {
11              console.log("Nothing found, please try again");
12              return null;
13          }
14      }).catch(function (error) {
15          console.log("Error: " + error.code + " " + error.message);
16          return null;
17      });
18  }
19
20  function deletePet(foundPet) {
21      foundPet.destroy().then(function(response) {
22        console.log('Pet '+ foundPet.get("name") + ' erased successfully');
23      }).catch(function(response, error) {
24        console.log('Error: '+ error.message);
25      });
26  }
﻿
Um es zu testen, wird empfohlen, ein Objekt mit einem ungewöhnlichen Namen zu erstellen, genau wie die anderen Funktionen, um
 Konflikte mit Objekten anderer Benutzer zu vermeiden.
Fügen Sie einfach den Code-Schnipsel in das JSBin ein und führen Sie den Code mit dem Namen Ihres Objekts und dem Objekt aus, das gelöscht werden soll.
Dann können Sie Ihre read Funktion aufrufen, um zu bestätigen, dass es keine Objekte mit diesem Namen gibt.
Wenn die Abfrage ein Objekt zurückgibt, was sie nicht sollte, bedeutet das wahrscheinlich, dass Sie mehr Objekte mit dem
 gleichen Namen haben und eines von ihnen als das delete Funktion nur ein Objekt löscht.
Sie können Ihr Objekt überprüfen, indem Sie auf Ihr Parse Dashboard zugreifen.
Es ist erledigt!
An diesem Punkt haben Sie gelernt, wie man die grundlegenden CRUD-Operationen mit JavaScript durchführt.
Parse SDK im JavaScript-Projekt installieren
ALS NÄCHSTES
Benutzerregistrierung und Anmeldung mit Parse.js