webentwicklung-frage-antwort-db.com.de

Möglichkeiten zum Speichern der Modelldaten von Backbone.js?

Ich bin mehr in der Front-End-Entwicklung und habe vor kurzem begonnen, Backbone.js in meine App zu integrieren. Ich möchte die Modelldaten auf dem Server beibehalten.

Könnten Sie mir bitte die verschiedenen Möglichkeiten zum Speichern der Modelldaten (im JSON-Format) erläutern? Ich benutze Java auf der Serverseite. Außerdem habe ich hauptsächlich gesehen, dass REST zum Speichern von Daten verwendet wird. Da ich mehr in Front-End-Entwickler bin, bin ich es nicht Kenntnis von REST und ähnlichen Dingen.

Es wäre toll, wenn mir jemand den Vorgang anhand eines einfachen Beispiels erläutern könnte.

86
testndtv

Grundsätzlich haben Modelle eine Eigenschaft namens Attribute, die die verschiedenen Werte darstellen, die ein bestimmtes Modell haben kann. Backbone verwendet JSON-Objekte als einfache Methode zum Auffüllen dieser Werte mit verschiedenen Methoden, die JSON-Objekte verwenden. Beispiel:

Donuts = Backbone.Model.extend({
    defaults: {
        flavor: 'Boston Cream',  // Some string
        price: '0.50'  // Dollars
    }
});

Um das Modell zu füllen, gibt es verschiedene Möglichkeiten. Beispielsweise können Sie Ihre Modellinstanz einrichten, indem Sie eine JSON OR -Methode mit dem Namen set () übergeben, die ein JSON-Objekt mit Attributen verwendet.

myDonut = new Donut({'flavor':'lemon', 'price':'0.75'});
mySecondHelping = new Donut();
mySecondHelping.set({'flavor':'plain', 'price':'0.25'});

console.log(myDonut.toJSON());
// {'flavor':'lemon', 'price':'0.75'}
console.log(mySecondHelping.toJSON());
// {'flavor':'plain', 'price':'0.25'}

Das bringt uns dazu, Modelle zu speichern und sie entweder auf einem Server zu speichern. Es gibt eine ganze Reihe von Details zu "Was ist REST/RESTful?" Und es ist schwierig, all dies hier in einem kurzen Klappentext zu erklären. Insbesondere im Hinblick auf das Speichern von REST und des Backbones sollten Sie die Semantik der HTTP-Anforderungen und die Art und Weise berücksichtigen, wie Sie mit Ihren Daten vorgehen.

Sie sind wahrscheinlich an zwei Arten von HTTP-Anfragen gewöhnt. GET und POST. In einer REST-Umgebung haben diese Verben eine besondere Bedeutung für bestimmte Verwendungen, die Backbone annimmt. Wenn Sie eine bestimmte Ressource vom Server abrufen möchten (z. B. das zuletzt gespeicherte Donut-Modell, einen Blogeintrag, eine Computerspezifikation) und diese Ressource vorhanden ist, führen Sie eine GET-Anforderung aus. Umgekehrt verwenden Sie POST, wenn Sie eine neue Ressource erstellen möchten.

Bevor ich zu Backbone kam, habe ich noch nie die beiden folgenden HTTP-Anforderungsmethoden angesprochen. PUT und DELETE. Diese beiden Verben haben auch eine spezifische Bedeutung für Backbone. Wenn Sie eine Ressource aktualisieren möchten (z. B. den Geschmack von Zitronendonut in Limonendonut ändern usw.), verwenden Sie eine PUT-Anforderung. Wenn Sie dieses Modell zusammen vom Server löschen möchten, verwenden Sie eine DELETE-Anforderung.

Diese Grundlagen sind sehr wichtig, da Sie mit Ihrer RESTful-App wahrscheinlich eine URI-Bezeichnung haben, die die entsprechende Aufgabe basierend auf der Art des von Ihnen verwendeten Anforderungsverbs ausführt. Beispielsweise:

// The URI pattern
http://localhost:8888/donut/:id

// My URI call
http://localhost:8888/donut/17

Wenn ich einen GET-Befehl für diesen URI ausführe, wird ein Donut-Modell mit der ID 17 erstellt. Die ID: hängt davon ab, wie Sie es serverseitig speichern. Dies könnte nur die ID Ihrer Donut-Ressource in Ihrer Datenbanktabelle sein.

Wenn ich einen PUT für diesen URI mit neuen Daten vornehme, werde ich ihn aktualisieren und darüber speichern. Und wenn ich diesen URI lösche, löscht er ihn von meinem System.

Da Sie beim POST noch keine Ressource erstellt haben, verfügt diese über keine festgelegte Ressourcen-ID. Vielleicht ist das URI-Ziel, das ich zum Erstellen von Ressourcen verwenden möchte, einfach Folgendes:

http://localhost:8888/donut

Kein ID-Fragment in der URI. Alle diese URI-Entwürfe hängen von Ihnen ab und davon, wie Sie über Ihre Ressourcen denken. In Bezug auf RESTful Design ist es jedoch meines Wissens so, dass Sie die Verben Ihrer Aktionen auf Ihrer HTTP-Anfrage und die Ressourcen als Substantive belassen möchten, die URIs leicht lesbar und benutzerfreundlich machen.

Sind Sie noch da? :-)

Also lasst uns wieder über Backbone nachdenken. Backbone ist wunderbar, weil es viel Arbeit für Sie leistet. Um unseren Donut und unser zweites Hilfsprogramm zu retten, machen wir einfach Folgendes:

myDonut.save();
mySecondHelping.save();

Backbone ist schlau. Wenn Sie gerade eine Donut-Ressource erstellt haben, verfügt diese über keine ID vom Server. Es hat eine sogenannte CID, die von Backbone intern verwendet wird. Da es jedoch keine offizielle ID hat, weiß es, dass es eine neue Ressource erstellen soll, und sendet eine POST -Anforderung. Wenn Sie Ihr Modell vom Server erhalten haben, wird es wahrscheinlich eine ID haben, wenn alles in Ordnung war. In diesem Fall wird beim Speichern von () Backbone davon ausgegangen, dass Sie den Server aktualisieren möchten, und es wird ein PUT gesendet. Um eine bestimmte Ressource abzurufen, verwenden Sie die Backbone-Methode .fetch () und senden eine GET-Anforderung. Wenn Sie .destroy () für ein Modell aufrufen, wird DELETE gesendet.

In den vorherigen Beispielen habe ich Backbone nie explizit mitgeteilt, wo sich der URI befindet. Machen wir das im nächsten Beispiel.

thirdHelping = Backbone.Model.extend({
    url: 'donut'
});
thirdHelping.set({id:15});  // Set the id attribute of model to 15
thirdHelping.fetch();  // Backbone assumes this model exists on server as ID 15

Das Backbone holt sich die dritte Hilfe bei http://localhost:8888/donut/15. Es fügt einfach/donut stem zu Ihrem Site-Stammverzeichnis hinzu.

Wenn du NOCH bei mir bist, gut. Ich glaube. Es sei denn, Sie sind verwirrt. Aber wir werden trotzdem weitermachen. Der zweite Teil davon ist die SERVER-Seite. Wir haben über verschiedene Verben von HTTP und die semantischen Bedeutungen hinter diesen Verben gesprochen. Bedeutungen, die Sie, Backbone UND Ihr Server teilen müssen.

Ihr Server muss den Unterschied zwischen einer GET-, POST-, PUT- und DELETE-Anforderung verstehen. Wie Sie in den obigen Beispielen gesehen haben, könnten GET, PUT und DELETE alle auf denselben URI verweisen http://localhost:8888/donut/07. Sofern Ihr Server nicht zwischen diesen HTTP-Anforderungen unterscheiden kann, ist es sehr verwirrend, was mit dieser Ressource geschehen soll .

Dies ist der Zeitpunkt, an dem Sie über Ihren RESTful-Server-Endcode nachdenken. Manche Leute mögen Ruby, manche mögen .net, ich mag PHP. Besonders mag ich SLIM PHP Micro-Framework. SLIM PHP ist ein Micro-Framework, das über ein sehr elegantes und einfaches Tool-Set für den Umgang mit RESTful-Aktivitäten verfügt. Sie können Routen (URIs) wie in den obigen Beispielen definieren und je nachdem, ob der Aufruf GET, POST, PUT oder DELETE lautet, wird der richtige Code ausgeführt. Es gibt andere SLIM-ähnliche Lösungen wie Recess, Tonic. Ich glaube, dass größere Frameworks wie Cake und CodeIgniter ähnliche Dinge tun, obwohl ich minimal mag. Habe ich gesagt, ich mag Slim? ;-)

So könnte der Auszug auf dem Server aussehen (d. H. Speziell in Bezug auf die Routen).

$app->get('/donut/:id', function($id) use ($app) {
    // get donut model with id of $id from database.
    $donut = ...

    // Looks something like this maybe:
    // $donut = array('id'=>7, 'flavor'=>'chocolate', 'price'=>'1.00')

    $response = $app->response();
    $response['Content-Type'] = 'application/json';
    $response->body(json_encode($donut));
});

Hierbei ist zu beachten, dass Backbone ein JSON-Objekt erwartet. Lassen Sie den Inhaltstyp von Ihrem Server immer als "application/json" kennzeichnen und verschlüsseln Sie ihn nach Möglichkeit im json-Format. Wenn Backbone das JSON-Objekt empfängt, weiß es, wie das Modell aufgefüllt wird, das es angefordert hat.

Mit SLIM PHP funktionieren die Routen ziemlich ähnlich wie oben.

$app->post('/donut', function() use ($app) {
    // Code to create new donut
    // Returns a full donut resource with ID
});
$app->put('/donut/:id', function($id) use ($app) {
    // Code to update donut with id, $id
    $response = $app->response();
    $response->status(200);  // OK!
    // But you can send back other status like 400 which can trigger an error callback.
});
$app->delete('/donut/:id', function($id) use ($app) {
    // Code to delete donut with id, $id
    // Bye bye resource
});

Sie haben also fast die gesamte Rundreise hinter sich gebracht! Geh und hol ein Soda. Ich mag Diet Mountain Dew. Holen Sie sich auch eine für mich.

Sobald Ihr Server eine Anfrage verarbeitet, etwas mit der Datenbank und der Ressource unternimmt, eine Antwort vorbereitet (ob es sich um eine einfache http-Statusnummer oder eine vollständige JSON-Ressource handelt), werden die Daten zur endgültigen Verarbeitung an Backbone zurückgesendet.

Mit Ihren Methoden save (), fetch () usw. können Sie optionale Rückrufe bei Erfolg und Fehlern hinzufügen. Hier ist ein Beispiel, wie ich diesen speziellen Kuchen aufgebaut habe:

Cake = Backbone.Model.extend({
    defaults: {
        type: 'plain',
        nuts: false
    },
    url: 'cake'
});

myCake = new Cake();
myCake.toJSON()  // Shows us that it is a plain cake without nuts

myCake.save({type:'coconut', nuts:true}, {
    wait:true,
    success:function(model, response) {
        console.log('Successfully saved!');
    },
    error: function(model, error) {
        console.log(model.toJSON());
        console.log('error.responseText');
    }
});

// ASSUME my server is set up to respond with a status(403)
// ASSUME my server responds with string payload saying 'we don't like nuts'

Es gibt ein paar verschiedene Dinge an diesem Beispiel. Sie werden sehen, dass ich für meinen Kuchen, anstatt die Attribute vor dem Speichern zu setzen (), einfach die neuen Attribute an meinen Speicheraufruf übergeben habe. Backbone ist ein ziemlich guter Ninja, wenn es darum geht, JSON-Daten überall zu erfassen und wie ein Champion zu behandeln. Also möchte ich meinen Kuchen mit Kokosnüssen und Nüssen retten. (Sind das 2 Nüsse?) Wie auch immer, ich habe zwei Gegenstände an meinen Save übergeben. Das Attribut JSON-Objekt UND einige Optionen. Der erste Wert, {wait: true}, bedeutet, dass mein clientseitiges Modell erst aktualisiert wird, wenn die serverseitige Auslösung erfolgreich ist. Der erfolgreiche Rückruf erfolgt, wenn der Server eine Antwort erfolgreich zurückgibt. Da dieses Beispiel jedoch zu einem Fehler führt (ein anderer Status als 200 zeigt Backbone an, dass der Fehlerrückruf verwendet werden soll), erhalten wir eine Darstellung des Modells ohne die Änderungen. Es sollte immer noch schlicht und ohne Nüsse sein. Wir haben auch Zugriff auf das Fehlerobjekt, das der Server zurückgesendet hat. Wir haben eine Zeichenfolge zurückgesendet, aber es könnte sich um ein JSON-Fehlerobjekt mit mehr Eigenschaften handeln. Dieser befindet sich im Attribut error.responseText. Ja, wir mögen keine Nüsse.

Herzliche Glückwünsche. Sie haben Ihre erste ziemlich vollständige Rundreise gemacht, indem Sie ein Modell eingerichtet, es serverseitig gespeichert und zurück. Ich hoffe, dass dieses Antwort-Epos Ihnen einen IDEA gibt, wie das alles zusammenkommt. Es gibt natürlich viele Details, an denen ich vorbeikomme, aber die Grundideen von Backbone Save, RESTful-Verben, serverseitigen Aktionen und Response sind hier. Lesen Sie weiterhin die Backbone-Dokumentation (die im Vergleich zu anderen Dokumenten sehr einfach zu lesen ist), aber denken Sie daran, dass dies einige Zeit in Anspruch nimmt, um Ihren Kopf herumzukrempeln. Je mehr Sie daran arbeiten, desto flüssiger werden Sie. Ich lerne jeden Tag etwas Neues mit Backbone und es macht wirklich Spaß, wenn Sie anfangen, Sprünge zu machen und sehen, dass Sie dieses Framework fließend beherrschen. :-)

Viel Spaß beim Codieren!

EDIT: Ressourcen, die nützlich sein können:

Andere ähnliche Antworten zu SO: Generieren von Modell-IDs mit Backbone

In REST: http://rest.elkstein.org/http://www.infoq.com/articles/rest-introductionhttp: // www.recessframework.org/page/towards-restful-php-5-basic-tips

271
jmk2142