Frage Backbone.js REST-Aufrufe verstehen


Ich versuche, die Backbone.js-Synchronisierungsmethode zu verstehen und ging die Dokumentation auf http://backbonejs.org/#Sync

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 und neu in Backbone war, finde ich das Obige schwer zu verstehen ... Ich habe nie REST oder andere serverseitige Protokolle verwendet ...

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


75
2017-08-29 07:00


Ursprung


Antworten:


Wenn es Ihnen nichts ausmacht, werde ich damit beginnen, einige Formulierungen zu klären. REST ist kein eigenständiges Protokoll, es ist lediglich eine Möglichkeit, das HTTP-Protokoll zu verwenden. Der REST-Stil ist besonders nützlich für APIs, wie Sie sehen werden. Wenn eine API diesem Stil entspricht, wird sie als "RESTful" bezeichnet. Wenn die API, mit der Sie arbeiten, nicht REST-konform ist, müssen Sie viele Änderungen an Backbone.sync vornehmen, um es zum Laufen zu bringen. Also hoffentlich ist es! :)

Das HTTP-Protokoll

Ich mag Beispiele, also hier ist eine HTTP-Anfrage, um den HTML-Code für diese Seite zu erhalten:

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, versuchen Sie, den Befehl auszuführen telnet stackoverflow.com 80 und Einfügen in das oben genannte, gefolgt von Drücken der Eingabetaste ein paar Mal. Voila! HTML in seiner ganzen Pracht.

In diesem Beispiel ...

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

Ihr Browser tut ungefähr dasselbe, nur mit mehr Überschriften, um den HTML für diese Seite zu erhalten. Cool was?

Da Sie im Frontend arbeiten, haben Sie das Form-Tag wahrscheinlich schon mehrmals 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 Beispiel und diesem.

  1. Das Methode ist jetzt POST.
  2. Das Pfad ist jetzt /login.
  3. Es gibt eine zusätzliche Linie, genannt die Karosserie.

Zwar gibt es eine Reihe anderer Methoden, die in RESTful-Anwendungen verwendet werden POST, GET, PUT, und DELETE. 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 zu Backbone

Hoffentlich verstehen Sie jetzt ein bisschen mehr darüber, wie HTTP funktioniert. Aber wie verhält es sich mit Backbone? Lass es uns herausfinden!

Hier ist ein kleiner Teil des Codes, den Sie in einer Backbone-Anwendung finden können.

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

Erstellen (POST)

Da wir eine RESTful-API verwenden, müssen alle Backbone-Informationen in der Lage sein, alle unsere Buchinformationen zu erstellen, zu lesen, zu aktualisieren und zu löschen. 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 du versuchst erstellen ein neues Buch und weiß aus den Informationen, die es gegeben wurde, folgende Anfrage zu machen:

POST /books HTTP/1.1
Host: example.com

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

Lesen (GET)

Siehst du wie einfach das war? Aber wir wollen diese Information irgendwann zurückbekommen. Sagen wir, wir sind gelaufen new BookCollection().fetch(). Backbone würde verstehen, dass Sie es versuchen lesen ein Sammlung von Büchern, und es würde die folgende Bitte stellen:

GET /books HTTP/1.1
Host: example.com

BAM. So einfach. Aber sagen wir, wir wollten nur die Information für ein Buch. Sagen wir Buch # 42. Sagen wir, wir sind gelaufen new BookModel({ id: 42 }).fetch(). Backbone sieht, dass du versuchst lesen ein Single Buch:

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

Aktualisierung (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 schlau genug, das trotz seines Anrufs zu wissen brandNewBookEs wurde bereits gespeichert. So dass es Aktualisierung das Buch:

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

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

Löschen (Löschen)

Schließlich merkt man, 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. Also rennst du brandNewBook.destroy()und Backbone wird empfindungsfähig und erkennt Ihre Gefahr  löscht das Buch mit folgender Bitte:

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

Und es ist weg.

Andere nützliche Leckerbissen

Während wir viel darüber geredet haben, was wir auf den Server schicken, sollten wir wahrscheinlich auch schauen, was wir zurückbekommen. Kehren wir zu unserer Sammlung von Büchern zurück. Wenn du dich erinnerst, haben wir einen gemacht GET Anfrage zu /books. In der Theorie sollten wir etwas wie folgt 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 gruselig. Und noch besser, Backbone weiß, wie man das aus der Box schafft. Aber was, wenn wir es ein bisschen geändert haben? Anstatt von id das Identifizierungsfeld 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 bekommt, dass jede API ein bisschen anders ist, und es ist in Ordnung. Alles, was Sie tun müssen, ist, es wissen zu lassen idAttribute, so:

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

Sie müssen diese Informationen nur dem Modell hinzufügen, da die Sammlung das Modell ohnehin überprüft. Backbone versteht also genau deine API! Selbst wenn ich nicht ...

Der Nachteil davon ist, dass Sie daran denken müssen zu verwenden bookId in bestimmten Fällen. Zum Beispiel, wo wir vorher verwendet haben new BookModel({ id: 42 }).fetch() Um die Daten über ein einzelnes Buch zu laden, müssten wir nun verwenden new BookModel({ bookId: 42 }).fetch().


Hoffentlich haben Sie diese Antwort informativ und nicht zu unerträglich langweilig gefunden. Ich stelle fest, dass für viele das HTTP-Protokoll und die REST-konforme Architektur nicht die aufregendsten Themen sind, also habe ich versucht, es etwas aufzupeppen. Ich kann es bereuen, wenn ich das alles zu einem späteren Zeitpunkt noch einmal gelesen habe, aber es ist 2 Uhr morgens, also werde ich weitermachen und es trotzdem einreichen.


303
2017-08-29 08:57



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

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

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) an ein Modell / eine Sammlung übergeben, kümmert sich Backbone um die Anrufe.


4
2017-08-29 08:50