it-swarm.com.de

Verstehen Sie Backbone.js REST Aufrufe

Ich habe versucht, die Synchronisationsmethode "Backbone.js" zu verstehen, und habe die Dokumentation unter http://backbonejs.org/#Sync durchgearbeitet

Es sagt

The default sync handler maps CRUD to REST like so:

create → POST   /collection
read → GET   /collection[/id]
update → PUT   /collection/id
delete → DELETE   /collection/id

Jetzt, da ich schon immer in der Front-End-Entwicklung und neu bei Backbone war, finde ich das oben Genannte schwer zu verstehen ... Ich habe nie REST oder andere serverseitige Protokolle verwendet ...

Könnten Sie das bitte in einfachen Worten erklären (wie die REST Maps, wenn wir Backbone.sync verwenden)? Jedes sehr einfache Beispiel wäre sehr nützlich ...

77
testndtv

Wenn es Ihnen nichts ausmacht, beginne ich mit der Klärung einiger Formulierungen. REST ist kein Protokoll an sich, sondern lediglich eine Methode zur Verwendung des HTTP-Protokolls. Der REST -Stil ist besonders nützlich für APIs, wie ich hoffe, dass Sie Wenn eine API diesem Stil entspricht, wird sie als "RESTful" bezeichnet.Wenn die API, mit der Sie arbeiten, nicht RESTful ist, müssen Sie eine Menge Änderungen an Backbone.sync vornehmen, um dies zu erreichen Bring es zum Laufen. Also hoffentlich ist es das! :)

Das HTTP-Protokoll

Ich mag Beispiele. Hier ist eine HTTP-Anfrage, um den HTML-Code für diese Seite abzurufen:

GET /questions/18504235/understand-backbone-js-rest-calls HTTP/1.1
Host: stackoverflow.com

[Optional] Wenn Sie jemals mit der Befehlszeile oder dem Terminal gespielt haben, führen Sie den Befehl telnet stackoverflow.com 80 Aus und fügen Sie den obigen Befehl ein. Drücken Sie anschließend mehrmals die Eingabetaste. Voila! HTML in seiner ganzen Pracht.

In diesem Beispiel ...

  • GET ist die Methode.
  • /questions/18504235/understand-backbone-js-rest-calls Ist der Pfad.
  • HTTP/1.1 Ist das Protokoll.
  • Host: stackoverflow.com Ist ein Beispiel für einen Header.

Ihr Browser macht ungefähr dasselbe, nur mit mehr Kopfzeilen, um den HTML-Code für diese Seite zu erhalten. Cool was?

Da Sie im Frontend arbeiten, haben Sie das Formular-Tag wahrscheinlich schon oft gesehen. Hier ist ein Beispiel:

<form action="/login" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" name="submit" value="Log In" />
</form>

Wenn Sie dieses Formular zusammen mit den entsprechenden Daten senden, sendet Ihr Browser eine Anfrage, die ungefähr so ​​aussieht:

POST /login HTTP/1.1
Host: stackoverflow.com

username=testndtv&password=zachrabbitisawesome123&submit=Log%20In

Es gibt drei Unterschiede zwischen dem vorherigen und diesem Beispiel.

  1. Die Methode ist jetzt POST.
  2. Der Pfad ist jetzt /login.
  3. Es gibt eine zusätzliche Zeile namens body.

Während es eine Reihe anderer Methoden gibt, werden in RESTful-Anwendungen die Methoden POST, GET, PUT und DELETE verwendet. Dies teilt dem Server mit, welche Art von Aktion er mit den Daten ausführen soll, ohne für alles unterschiedliche Pfade zu haben.

Zurück zum Rückgrat

Hoffentlich verstehen Sie jetzt ein bisschen mehr darüber, wie HTTP funktioniert. Aber wie hängt das mit Backbone zusammen? Lass es uns herausfinden!

Hier ist ein kleiner Codeabschnitt, den Sie möglicherweise in einer Backbone-Anwendung finden.

var BookModel = Backbone.Model.extend({
    urlRoot: '/books'
});
var BookCollection = Backbone.Collection.extend({
    model: BookModel
    , url: '/books'
});

Erstellen (POST)

Da wir eine RESTful-API verwenden, sind dies alle Informationen, die Backbone zum Erstellen, Lesen, Aktualisieren und Löschen aller unserer Buchinformationen benötigt! Beginnen wir mit einem neuen Buch. Der folgende Code sollte ausreichen:

var brandNewBook = new BookModel({ title: '1984', author: 'George Orwel' });
brandNewBook.save();

Backbone erkennt, dass Sie versuchen, create ein neues Buch zu erstellen, und weiß anhand der Informationen, die für die folgende Anforderung angegeben wurden:

POST /books HTTP/1.1
Host: example.com

{"title":"1984","author":"George Orwel"}

Lesen (GET)

Sehen Sie, wie einfach das war? Aber wir wollen diese Informationen irgendwann zurückbekommen. Angenommen, wir haben new BookCollection().fetch() ausgeführt. Backbone würde verstehen, dass Sie versuchen, zu lesen eine Sammlung Bücher, und es würde die folgende Anfrage stellen:

GET /books HTTP/1.1
Host: example.com

BAM. So einfach. Aber sagen wir, wir wollten nur die Informationen für ein Buch. Sagen wir, Buch Nr. 42. Angenommen, wir haben new BookModel({ id: 42 }).fetch() ausgeführt. Backbone sieht, dass Sie versuchen, read a single book:

GET /books/42 HTTP/1.1
Host: example.com

Update (PUT)

Oh verdammt, ich habe gerade gemerkt, dass ich Mr. Orwells Namen falsch geschrieben habe. Einfach zu reparieren!

brandNewBook.set('author', 'George Orwell');
brandNewBook.save();

Das Backbone ist intelligent genug, um zu wissen, dass es bereits gespeichert wurde, obwohl es brandNewBook heißt. Also ist es updates das Buch:

PUT /books/84 HTTP/1.1
Host: example.com

{"title":"1984","author":"George Orwell"}

Löschen (LÖSCHEN)

Schließlich stellen Sie fest, dass die Regierung jeden Ihrer Schritte verfolgt, und Sie müssen die Tatsache begraben, dass Sie 1984 gelesen haben. Es ist wahrscheinlich zu spät, aber es tut nie weh, es zu versuchen. Sie führen also brandNewBook.destroy() und Backbone aus wird empfindungsfähig und erkennt deine Gefahr  löscht das Buch mit folgender Aufforderung:

DELETE /books/84 HTTP/1.1
Host: example.com

Und es ist weg.

Andere nützliche Leckerbissen

Während wir viel darüber gesprochen haben, was wir an den Server senden, sollten wir uns wahrscheinlich auch ansehen, was wir zurückbekommen. Kehren wir zu unserer Büchersammlung zurück. Wenn Sie sich erinnern, haben wir eine GET Anfrage an /books Gestellt. Theoretisch sollten wir so etwas zurückbekommen:

[
    {"id":42,"author":"Douglas Adams","title":"The Hitchhiker's Guide to the Galaxy"}
    , {"id":3,"author":"J. R. R. Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"}
]

Nichts zu beängstigend. Und noch besser ist, dass Backbone weiß, wie man damit umgeht. Aber was ist, wenn wir es ein bisschen geändert haben? Anstatt dass id das identifizierende Feld ist, war es bookId?

[
    {"bookId":42,"author":"Douglas Adams","title":"The Hitchhiker's Guide to the Galaxy"}
    , {"bookId":3,"author":"J. R. R. Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"}
]

Backbone merkt, dass jede API ein bisschen anders ist, und das ist in Ordnung. Alles, was Sie tun müssen, ist, es das idAttribute so wissen zu lassen:

var BookModel = Backbone.Model.extend({
    urlRoot: '/books'
    , idAttribute: 'bookId'
});

Sie müssen diese Informationen nur zum Modell hinzufügen, da die Sammlung das Modell ohnehin überprüft. So einfach, versteht Backbone Ihre API! Auch wenn ich nicht ...

Der Nachteil dabei ist, dass Sie in bestimmten Fällen daran denken müssen, bookId zu verwenden. Wenn wir beispielsweise zuvor new BookModel({ id: 42 }).fetch() verwendet haben, um die Daten für ein einzelnes Buch zu laden, müssten wir jetzt new BookModel({ bookId: 42 }).fetch() verwenden.


Hoffentlich finden Sie diese Antwort informativ und nicht zu langweilig. Mir ist klar, dass HTTP-Protokoll und RESTful-Architektur für viele nicht die aufregendsten Themen sind, deshalb habe ich versucht, sie ein wenig aufzupeppen. Ich kann es bedauern, wenn ich das alles zu einem späteren Zeitpunkt wieder lese, aber es ist 2 Uhr morgens hier, also werde ich weitermachen und es trotzdem einreichen.

310
ZachRabbit

Vorausgesetzt, Sie verstehen Ajax-Aufrufe (POST, GET usw. zu '/ collection' usw.).

Das Backbone verwendet die Synchronisierung, um einige Models- und Collections-Methoden an REST -Aufrufe weiterzuleiten.

model/collection.fetch() => GET
model.save() => POST (isNew())
model.save() => PUT (!isNew())
model.destroy() => DELETE

collection.create() ruft model.save() (isNew()) => POST auf

Wenn Sie die URL (/ collection), die Sie verwenden möchten, an ein Modell/eine Sammlung übergeben, kümmert sich Backbone um die Anrufe.

4
GijsjanB