web-dev-qa-db-ja.com

Backbone.js REST呼び出しを理解する

Backbone.js同期メソッドを理解しようとしていますが、 http://backbonejs.org/#Sync のドキュメントを調べていました。

それは言う

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

私は常にフロントエンド開発に携わっており、Backboneを初めて使用しているので、上記を理解するのは難しいと思います... RESTまたは他のサーバー側プロトコルを使用したことはありません...

同じことを簡単な言葉で説明してもらえますか（Backbone.syncを使用するときにRESTがどのようにマッピングされるかなど）非常に単純な例は非常に便利です...

javascriptjqueryajaxrestbackbone.js
77
testndtv

気にしない場合は、いくつかの文言を片付けることから始めます。 RESTはそれ自体がプロトコルではなく、単にHTTPプロトコルを使用する方法です。 RESTスタイルは、APIに特に役立ちます。 APIがそのスタイルに準拠している場合、「RESTful」と呼ばれます。使用しているAPIがRESTfulでない場合、Backbone.syncを機能させるには、Backbone.syncに多くの変更を加える必要があります。うまくいけばそうです！ :)

HTTPプロトコル

私は例が好きなので、このページのHTMLを取得するHTTPリクエストを次に示します。

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

[オプション]コマンドラインまたはターミナルでプレイしたことがある場合は、コマンドtelnet stackoverflow.com 80を実行して上記の貼り付けを行い、Enterキーを数回押してください。出来上がり！すべてが栄光に満ちたHTML。

この例では...

  • GETはmethodです。
  • /questions/18504235/understand-backbone-js-rest-callsはパスです。
  • HTTP/1.1は、プロトコルです。
  • Host: stackoverflow.comは、ヘッダーの例です。

このページのHTMLを取得するために、ブラウザーはほぼ同じようにヘッダーを追加します。かっこいい？

フロントエンドで作業しているので、おそらくフォームタグを何度も見たことがあるでしょう。以下に例を示します。

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

適切なデータとともにこのフォームを送信すると、ブラウザは次のようなリクエストを送信します。

POST /login HTTP/1.1
Host: stackoverflow.com

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

前の例とこの例には3つの違いがあります。

  1. methodはPOSTになりました。
  2. pathは/loginになりました。
  3. bodyと呼ばれる余分な行があります。

他にも多くのメソッドがありますが、RESTfulアプリケーションで使用されるものはPOST、GET、PUT、およびDELETEです。これは、すべてに対して異なるパスを持たなくても、データに対してどのタイプのアクションを取るべきかをサーバーに伝えます。

バックボーンに戻る

うまくいけば、HTTPの仕組みについてもう少し理解できたと思います。しかし、これはどのようにバックボーンに関連していますか？確認してみましょう！

以下に、Backboneアプリケーションで見つかる可能性のあるコードの小さなチャンクを示します。

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

作成（POST）

RESTful APIを使用しているため、Backboneがすべての書籍情報を作成、読み取り、更新、削除できるようにするために必要なすべての情報です！新しい本を作ることから始めましょう。次のコードで十分です。

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

Backboneは、あなたがcreate新しい本をしようとしていることに気付き、与えられた情報から次のリクエストを行うことを知っています。

POST /books HTTP/1.1
Host: example.com

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

読み取り（GET）

それがどれほど簡単でしたか？しかし、ある時点でその情報を取り戻したいです。 new BookCollection().fetch()を実行したとしましょう。 Backboneは、あなたがread a collectionの本をしようとしていることを理解し、次のリクエストを行います：

GET /books HTTP/1.1
Host: example.com

バム。簡単です。しかし、1冊の本の情報だけが必要だったとしましょう。本＃42としましょう。 new BookModel({ id: 42 }).fetch()を実行したとします。バックボーンは、あなたがしようとしているのを見ますread a single book：

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

更新（PUT）

ああ、オーウェル氏の名前のスペルを間違えたのに気付いた。簡単に修正できます！

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

BackboneはbrandNewBookと呼ばれているにも関わらず、既に保存されていることを知るのに十分スマートです。 更新本：

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

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

削除（DELETE）

最後に、政府があなたのすべての動きを追跡していることに気づき、1984年を読んだという事実を埋める必要があります。おそらく遅すぎますが、試してみても痛いことはありません。したがって、brandNewBook.destroy()とBackboneを実行します 感覚的になり、あなたの危険を認識します deletes次のリクエストのある本：

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

そして、それはなくなっています。

その他の便利な情報

サーバーに送信する内容について多くのことを話しましたが、おそらく何が返ってきているのかを確認する必要があります。書籍のコレクションに戻りましょう。覚えているなら、GETを/booksにリクエストしました。理論的には、次のようなものを取り戻す必要があります。

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

怖いものはありません。さらに良いことに、Backboneはこれをそのまま使用する方法を知っています。しかし、少し変更した場合はどうなりますか？ idが識別フィールドである代わりに、それは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は、すべてのAPIが少し異なることを取得し、それで問題ありません。必要なことは、次のようにidAttributeを知らせることだけです。

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

コレクションはモデルをチェックするため、その情報をモデルに追加するだけです。そのように、BackboneはAPIを理解します！ 私がしなくても...

これの欠点は、特定の場合にbookIdを使用することを忘れないでください。たとえば、以前にnew BookModel({ id: 42 }).fetch()を使用して1つの書籍に関するデータをロードした場合、new BookModel({ bookId: 42 }).fetch()を使用する必要があります。

この応答が有益であり、あまりにも退屈ではないことを願っています。多くの人にとって、HTTPプロトコルとRESTfulアーキテクチャは最も爽快なテーマではないことに気づいたので、少しスパイスを効かせようとしました。後ほどこれをすべて読んだときに後悔するかもしれませんが、ここは午前2時なので、とにかくこれを提出します。

310
ZachRabbit

Ajax呼び出し（ '/ collection'へのPOST、GETなど）を理解していると仮定します。

バックボーンは同期を使用して、一部のモデルおよびコレクションメソッドをREST呼び出しにルーティングします。

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

collection.create()はmodel.save() (isNew()) => POSTを呼び出します

使用するURL（/ collection）をモデル/コレクションに渡すと、Backboneが呼び出しを処理します。

4
GijsjanB