Comprendre Backbone.js appels de REPOS

Si vous n'avez pas l'esprit, je vais commencer avec l'éclaircissement de certains mots. Le REPOS n'est pas un protocole en lui-même, c'est simplement une façon d'utiliser le protocole HTTP. Le RESTE de style est particulièrement utile pour les Api, comme je l'espère, vous verrez. Quand une API est conforme à ce style, il est dit d'être de "repos". Si l'API vous travaillez avec n'est pas Reposant, vous aurez à faire beaucoup de changements à la colonne vertébrale.synchronisation afin de l'obtenir pour fonctionner. Alors j'espère qu'il est! 🙂

Le Protocole HTTP

J'aime 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 n'avez jamais joué avec la ligne de commande ou un terminal, essayez d'exécuter la commande telnet stackoverflow.com 80 et le coller dans le ci-dessus, puis en appuyant sur entrée une couple de fois. Voila! HTML dans l'ensemble de sa gloire.

Dans cet exemple...

• GET est le 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 ne prend environ le même, avec plusieurs têtes, afin d'obtenir le code HTML de cette page. Cool, hein?

Puisque vous travaillez en front-end, vous avez probablement vu la balise de formulaire de nombreuses fois. Voici un exemple de l'un:

<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 requête qui ressemble à quelque chose comme ceci:

POST /login HTTP/1.1
Host: stackoverflow.com

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

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

1. La méthode est maintenant POST.
2. La chemin est maintenant /login.
3. Il existe une ligne supplémentaire, appelé le corps.

Alors qu'il y a un tas d'autres méthodes, celles utilisées dans Reposante applications sont POST, GET, PUT, et DELETE. Cela indique au serveur quel type d'action il est censé prendre avec les données, sans avoir besoin d'avoir des chemins différents pour tout.

Retour à l'épine Dorsale

Alors j'espère que vous comprenez maintenant un peu plus sur la façon de le HTTP fonctionne. Mais comment est-ce lié à l'épine Dorsale? Voyons!

Voici un petit morceau de code que vous pourriez trouver dans un Squelette d'application.

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

Créer (POST)

Puisque nous sommes à l'aide d'une API RESTful, c'est tout le réseau d'information doit être capable de créer, lire, mettre à jour et supprimer l'ensemble de nos informations sur le livre! Commençons par faire un nouveau livre. Le code suivant devrait suffire:

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

Épine dorsale se rend compte que vous essayez de créer un nouveau livre, et sait à partir de l'information qu'il a été donné de faire la requête suivante:

POST /books HTTP/1.1
Host: example.com

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

De lecture (GET)

Voir comment facile qui a été? Mais nous voulons obtenir que les informations de dos à un certain point. Disons que nous avons couru new BookCollection().fetch(). Épine dorsale serait de comprendre que vous êtes en train de lire un collection de livres, et il en ferait la demande suivante:

GET /books HTTP/1.1
Host: example.com

BAM. Que facile. Mais dire que nous n'avons voulu les informations d'un livre. Disons que le livre n ° 42. Dire que nous avons couru new BookModel({ id: 42 }).fetch(). Épine dorsale voit que vous essayez de lire un unique livre:

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

Update (METTRE)

Oh mince, je viens de réaliser que j'ai définis M. Orwell nom de mal. Facile à fixer!

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

Épine dorsale est assez intelligent pour savoir qu'en dépit d'être appelé brandNewBook, ça a déjà été enregistré. Donc, il mises à jour le livre:

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

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

Delete (SUPPRIMER)

Enfin, vous vous rendez compte que le gouvernement est suivi de tous vos déplacements, et vous avez besoin d'enterrer le fait que vous avez lu 1984. Il est probablement trop tard, mais il ne fait jamais de mal d'essayer. Si vous exécutez brandNewBook.destroy(), et de la colonne vertébrale 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 Friandises

Alors que nous avons beaucoup parlé de ce que nous allons envoyer au serveur, nous devrions sans doute nous aussi jeter un oeil à ce que nous obtenons en retour. Revenons-en à notre collection de livres. Si vous vous souvenez, nous avons fait une GET demande à /books. En théorie, nous devrions revenir à 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 encore mieux, de la colonne vertébrale sait comment gérer cette sortie de la boîte. Mais que faire si nous avons changé un peu? Au lieu de id étant le champ d'identification, il a été 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"}
]

Épine dorsale obtient que chaque API est un peu différent, et il est d'accord avec ça. Tout ce que vous avez à faire est de laisser savoir à la idAttribute, comme suit:

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

Vous n'avez qu'à ajouter de l'information pour le modèle, depuis la collecte vérifie le modèle de toute façon. Donc, juste comme ça, de la colonne vertébrale comprend votre API! Même si je ne suis pas...

L'inconvénient de cette est que vous avez à retenir pour utiliser bookId dans certains cas. Par exemple, où nous avons déjà utilisé new BookModel({ id: 42 }).fetch() pour charger les données sur un seul livre, nous avons maintenant à utiliser new BookModel({ bookId: 42 }).fetch().

---

Nous espérons que vous avez trouvé cette réponse informative, et pas trop insupportablement ennuyeux. Je me rends compte que pour beaucoup, le protocole HTTP et le repos, l'architecture ne sont pas les plus exaltantes de sujets, j'ai donc essayé de pimenter un peu. Je peut regretter que quand j'ai lu l'ensemble de ce retour à un point plus tard, mais il est 2H du matin ici, donc je vais aller de l'avant et de présenter cela de toute façon.