web-dev-qa-db-fra.com

Comprendre Backbone.js REST appelle

J'essaie de comprendre la méthode de synchronisation Backbone.js et je parcourais la documentation sur http://backbonejs.org/#Sync

Ça dit

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

Maintenant, depuis que j’ai toujours été dans le développement front-end et que je suis nouveau dans Backbone, je trouve ce qui précède difficile à comprendre ... Je n’ai jamais utilisé REST ni aucun autre protocole côté serveur ...

Pourriez-vous s'il vous plaît expliquer la même chose en termes simples (comme comment le REST cartographie lorsque nous utilisons Backbone.sync) Tout exemple très simple serait très utile ...

javascriptjqueryajaxrestbackbone.js
77
testndtv

Si cela ne vous dérange pas, je vais commencer par clarifier un libellé. REST n'est pas un protocole en soi, c'est simplement une façon d'utiliser le protocole HTTP. Le style REST est particulièrement utile pour les API, car j'espère que vous ' Nous verrons. Quand une API se conforme à ce style, elle est dite "RESTful". Si l'API avec laquelle vous travaillez n'est pas RESTful, vous devrez apporter beaucoup de modifications à Backbone.sync afin de faites-le fonctionner, alors espérons-le! :)

Le protocole HTTP

J'aime les exemples, voici donc une requête HTTP pour obtenir le code HTML de cette page:

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

[Facultatif] Si vous avez déjà joué avec une ligne de commande ou un terminal, essayez d'exécuter la commande telnet stackoverflow.com 80 Et de la coller dans ce qui précède, puis appuyez plusieurs fois sur la touche Entrée. Voila! HTML dans toute sa gloire.

Dans cet exemple ...

  • GET est la méthode.
  • /questions/18504235/understand-backbone-js-rest-calls Est le chemin.
  • HTTP/1.1 Est le protocole.
  • Host: stackoverflow.com Est un exemple de en-tête.

Votre navigateur fait à peu près la même chose, mais avec plus d’en-têtes, afin d’obtenir le code HTML pour cette page. Cool hein?

Depuis que vous travaillez en mode frontal, vous avez probablement déjà vu la balise de formulaire à plusieurs reprises. En voici un exemple:

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

Lorsque vous soumettez ce formulaire avec les données appropriées, votre navigateur envoie une demande qui ressemble à ceci:

POST /login HTTP/1.1
Host: stackoverflow.com

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

Il existe trois différences entre l'exemple précédent et celui-ci.

  1. La méthode est maintenant POST.
  2. Le chemin est maintenant /login.
  3. Il existe une ligne supplémentaire appelée body.

Bien qu'il existe de nombreuses autres méthodes, celles utilisées dans les applications RESTful sont POST, GET, PUT et DELETE. Cela indique au serveur le type d'action qu'il est censé effectuer avec les données, sans avoir à avoir des chemins différents pour tout.

Retour à la colonne vertébrale

J'espère que maintenant vous en comprendrez un peu plus sur le fonctionnement de HTTP. Mais quel est le lien avec Backbone? Découvrons-le!

Voici un petit morceau de code que vous pourriez trouver dans une application Backbone.

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

Créer (POST)

Comme nous utilisons une API RESTful, c'est toute l'information dont Backbone a besoin pour pouvoir créer, lire, mettre à jour et supprimer toutes les informations de notre livre! Commençons par faire un nouveau livre. Le code suivant devrait suffire:

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

Backbone se rend compte que vous essayez de créer un nouveau livre et sait, d'après les informations qu'il a été donné, qu'il doit faire la demande suivante:

POST /books HTTP/1.1
Host: example.com

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

Lire (GET)

Vous avez vu comme c'était facile? Mais nous voulons récupérer cette information à un moment donné. Disons que nous avons exécuté new BookCollection().fetch(). Backbone comprendrait que vous essayez de lire a collection de livres, et il ferait la demande suivante:

GET /books HTTP/1.1
Host: example.com

BAM. C'est facile. Mais disons que nous ne voulions que l’information d’un livre. Disons le livre # 42. Disons que nous avons exécuté new BookModel({ id: 42 }).fetch(). Backbone voit que vous essayez de lire a célibataire livre:

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

Mise à jour (PUT)

Oh sacrément, je viens de me rendre compte que j'ai mal orthographié le nom de M. Orwell. Facile à réparer!

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

Backbone est assez intelligent pour savoir que malgré le fait que l'on s'appelle brandNewBook, il a déjà été enregistré. Donc, il met à jour le livre:

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

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

Supprimer (SUPPRIMER)

Enfin, vous réalisez que le gouvernement suit chacun de vos gestes et que vous devez tenir compte du fait que vous avez lu 1984. C'est probablement trop tard, mais cela ne fait jamais de mal d'essayer. Donc, vous exécutez brandNewBook.destroy(), et Backbone devient sensible et réalise votre danger  supprime le livre avec la requête suivante:

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

Et c'est parti.

Autres informations utiles

Bien que nous ayons beaucoup parlé de ce que nous envoyons au serveur, nous devrions probablement aussi regarder ce que nous récupérons. Revenons à notre collection de livres. Si vous vous en souvenez, nous avons fait une demande GET à /books. En théorie, nous devrions récupérer quelque chose comme ceci:

[
    {"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"}
]

Rien de trop effrayant. Et mieux encore, Backbone sait comment gérer cela en dehors de la boîte. Mais si on le changeait un peu? Au lieu de id être le champ d'identification, il s'agissait de 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 comprend que chaque API est un peu différente, ce qui ne pose aucun problème. Tout ce que vous avez à faire est de laisser savoir le idAttribute, comme ceci:

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

Vous devez seulement ajouter ces informations au modèle, car la collection vérifie quand même le modèle. C'est comme ça que Backbone comprend votre API! Même si je ne le fais pas ...

L'inconvénient est que vous devez vous rappeler d'utiliser bookId dans certains cas. Par exemple, lorsque nous utilisions auparavant new BookModel({ id: 42 }).fetch() pour charger les données d'un livre, nous devions maintenant utiliser new BookModel({ bookId: 42 }).fetch().

J'espère que vous avez trouvé cette réponse informative et pas trop ennuyeuse. Je me rends compte que pour beaucoup, le protocole HTTP et l’architecture RESTful ne sont pas les sujets les plus excitants, j’ai donc essayé de le pimenter un peu. Je regretterai peut-être cela quand je relirai tout cela à un moment ultérieur, mais il est 2 heures du matin ici, alors je vais aller de l'avant et le soumettre quand même.

310
ZachRabbit

En supposant que vous compreniez les appels ajax (POST, GET, etc. vers '/ collection', etc.).

Le réseau de base utilise la synchronisation pour router certaines méthodes de modèles et de collections vers des appels REST.

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

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

Si vous transmettez l'URL (/ collection) que vous souhaitez utiliser à un modèle/à une collection, Backbone se chargera des appels.

4
GijsjanB