Backbone.jsのRESTコールを理解する

2023-09-23 19:23:47

質問

Backbone.jsのsyncメソッドを理解しようとしていて、ドキュメントを見ながら 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がどのようにマッピングされるかのような）。どんな非常に簡単な例でも非常に有用です...

どのように解決するのですか？

差し支えなければ、いくつかの言葉を整理することから始めたいと思います。REST はそれ自体がプロトコルではなく、単に HTTP プロトコルの使用方法の 1 つです。RESTのスタイルは、特にAPIに有用であることがおわかりいただけると思います。APIがそのスタイルに準拠している場合、それは"RESTful"と言われます。もしあなたが扱っているAPIがRESTfulでない場合、それを動作させるために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 は メソッド .
/questions/18504235/understand-backbone-js-rest-calls はパス .
HTTP/1.1 は プロトコル .
Host: stackoverflow.com の例です。 ヘッダ .

ブラウザは、このページのHTMLを取得するために、ヘッダを増やすだけで、ほぼ同じことをします。クールでしょう？

あなたはフロントエンドで仕事をしているので、おそらくformタグを何度も見たことがあるでしょう。これはその一例です。

<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つの違いがあります。

は メソッド は現在 POST .
はパスは現在 /login .
という余分な行があります。 ボディ .

他にもたくさんのメソッドがありますが、RESTfulなアプリケーションで使われるのは POST , GET , PUT そして DELETE . これにより、サーバはデータに対してどのようなアクションを取るべきかを知ることができ、すべてのデータに対して異なるパスを設定する必要がなくなります。

バックボーンに戻る

これで、HTTPの仕組みについてもう少し理解していただけたと思います。しかし、これがBackboneとどう関係するのでしょうか？それでは、見ていきましょう。

ここに、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();

バックボーンは、あなたが を作成しようとしていることに気づきます。 を作ろうとしていることを理解し、与えられた情報から次のようなリクエストをすることを知ります。

POST /books HTTP/1.1
Host: example.com

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

読み込み（GET）

簡単だったでしょう？しかし、私たちはある時点でその情報を取り戻したいと思っています。例えば new BookCollection().fetch() . を実行しようとしていることをBackboneは理解するでしょう。 を読む a コレクション という本のコレクションを作成し、次のようなリクエストをします。

GET /books HTTP/1.1
Host: example.com

バム。簡単ですね。しかし、1冊分の情報しか欲しくないとします。例えば42番の本とします。例えば new BookModel({ id: 42 }).fetch() . バックボーンは、あなたがしようとしていることを見て を読み取ります。 a シングル の本です。

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 <ストライクが知覚を獲得し、あなたの危険に気づきます。 削除する を削除します。

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が少し異なることを理解し、それを受け入れることができます。あなたがしなければならないのは、そのAPIに idAttribute というようにすればいいだけです。

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

コレクションはいずれにせよモデルをチェックするので、その情報をモデルに追加するだけでよいのです。このように、BackboneはあなたのAPIを理解することができます。 そうでなくても...

この欠点は、覚えておかなければならないのは bookId を使うことを覚えておかなければならないことです。例えば、以前は new BookModel({ id: 42 }).fetch() を使って一冊の本に関するデータを読み込んでいた場合、今度は new BookModel({ bookId: 42 }).fetch() .

この回答が有益で、耐えられないほど退屈でないことを望みます。多くの人にとって、HTTP プロトコルと RESTful アーキテクチャは最もエキサイティングなテーマではないことを理解しているので、少しスパイスを加えてみました。後でこのすべてを読み返したときに、そのことを後悔するかもしれませんが、こちらは午前 2 時なので、とにかく先に進んでこれを提出するつもりです。