Verstehen Sie die REST-Aufrufe von Backbone.j

Ich versuche, die Synchronisierungsmethode von Backbone.js zu verstehen, und habe die Dokumentation unter http://backbonejs.org/#Sync durchgesehen

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 immer in der Front-End-Entwicklung war und neu in Backbone war, finde ich das oben Genannte schwer zu verstehen ... Ich habe noch nie REST oder andere serverseitige Protokolle verwendet ...

Könnten Sie das bitte in einfachen Worten erklären (wie die REST-Zuordnungen bei Verwendung von Backbone.sync)? Jedes sehr einfache Beispiel wäre sehr nützlich ...

Wenn es Ihnen nichts ausmacht, beginne ich mit der Klärung einiger Formulierungen. REST ist kein Protokoll für sich, sondern lediglich eine Möglichkeit, das HTTP-Protokoll zu verwenden. Der REST-Stil ist besonders nützlich für APIs, wie Sie hoffentlich sehen werden. Wenn eine API diesem Stil entspricht, wird sie als "RESTful" bezeichnet. Wenn die API, mit der Sie arbeiten, nicht RESTful ist, müssen Sie viele Änderungen an Backbone.sync vornehmen, damit sie funktioniert. Also hoffentlich ist es das! :) :)

Das HTTP-Protokoll

Ich mag Beispiele, daher hier 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 einer Befehlszeile oder einem Terminal gespielt haben, führen Sie den Befehl aus telnet stackoverflow.com 80und fügen Sie ihn oben ein. Drücken Sie anschließend mehrmals die Eingabetaste. Voila! HTML in seiner ganzen Pracht.

In diesem Beispiel ...

• GETist die Methode .
• /questions/18504235/understand-backbone-js-rest-callsist der Weg .
• HTTP/1.1ist das Protokoll .
• Host: stackoverflow.comist ein Beispiel für einen Header .

Ihr Browser macht ungefähr das Gleiche, nur mit mehr Headern, 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 von einem:

<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 Weg ist jetzt /login.
3. Es gibt eine zusätzliche Linie, den Körper .

Zwar gibt es eine Reihe von anderen Methoden, die in RESTful - Anwendungen verwendeten sind POST, GET, PUT, und DELETE. Dies teilt dem Server mit, welche Art von Aktion er mit den Daten ausführen soll, ohne dass für alles unterschiedliche Pfade erforderlich sind.

Zurück zum Backbone

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

Hier ist ein kleiner Teil des Codes, 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 benötigt, um alle unsere Buchinformationen erstellen, lesen, aktualisieren und löschen zu können! 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 , ein neues Buch zu erstellen , und weiß anhand der Informationen, dass es die folgende Anfrage gestellt hat:

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. Nehmen wir an, wir sind gerannt new BookCollection().fetch(). Backbone würde verstehen, dass Sie versuchen, eine Sammlung von Büchern zu lesen , und es würde die folgende Anfrage stellen:

GET /books HTTP/1.1
Host: example.com

BAM. So einfach. Angenommen, wir wollten nur die Informationen für ein Buch. Sagen wir Buch Nr. 42. Sagen wir, wir sind gerannt new BookModel({ id: 42 }).fetch(). Backbone sieht, dass Sie versuchen, ein einzelnes Buch zu lesen :

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();

Backbone ist klug genug zu wissen, dass es trotz Aufruf brandNewBookbereits gespeichert wurde. So aktualisiert es 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 jede Ihrer Bewegungen 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 rennen also brandNewBook.destroy()und Backbone wird empfindungsfähig und erkennt, dass Ihre Gefahr das Buch mit der folgenden Anfrage löscht :

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 GETAnfrage an gestellt /books. 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, Backbone weiß, wie man sofort damit umgeht. Aber was ist, wenn wir es ein bisschen geändert haben? Anstatt iddas identifizierende Feld zu sein, 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 stellt fest, dass jede API ein bisschen anders ist, und das ist in Ordnung. Alles was Sie tun müssen, ist es wissen zu lassen idAttribute, wie folgt :

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

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

Der Nachteil dabei ist, dass Sie bookIdin bestimmten Fällen daran denken müssen, es zu verwenden . Wenn wir beispielsweise früher new BookModel({ id: 42 }).fetch()die Daten zu einem einzelnen Buch geladen haben, müssen wir sie jetzt verwenden new BookModel({ bookId: 42 }).fetch().

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

Angenommen, Sie verstehen Ajax-Aufrufe (POST, GET usw. an '/ collection' usw.).

Backbone verwendet die Synchronisierung, um einige Modell- und Sammlungsmethoden an REST-Aufrufe weiterzuleiten.

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

collection.create() Anrufe model.save() (isNew()) => POST

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