了解 Backbone.js REST 调用

如果你不介意，我将首先澄清一些措辞。 REST 本身不是一种协议，它只是一种使用 HTTP 协议的方式。 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 是协议。

主机：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

上一个示例和这个示例之间存在三个不同之处。

该方法现在是 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'
});

创建（发布）

由于我们使用的是 RESTful API，这就是 Backbone 需要能够创建、读取、更新和删除我们所有图书信息的所有信息！让我们从制作一本新书开始。下面的代码应该足够了：

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

Backbone 意识到您正在尝试创建一本新书，并从它获得的信息中知道提出以下请求：

POST /books HTTP/1.1
Host: example.com

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

读取（获取）

看看这有多容易？但我们希望在某个时候取回这些信息。假设我们运行了 new BookCollection().fetch()。 Backbone 会理解您正在尝试阅读 收藏书籍，它会发出以下请求：

GET /books HTTP/1.1
Host: example.com

巴姆。就这么简单。但是假设我们只想要一本书的信息。让我们说第 42 本书。假设我们运行了 new BookModel({ id: 42 }).fetch()。 Backbone 发现您正在尝试阅读一本单本书：

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"}

删除（删除）

最后，你意识到政府正在跟踪你的一举一动，你需要掩饰你已经阅读了 1984 年的事实。这可能为时已晚，但尝试永远不会有坏处。因此，您运行 brandNewBook.destroy()，Backbone 变得有知觉并意识到您的危险 删除这本书并提出以下请求：

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

它消失了。

其他有用的花絮

虽然我们已经讨论了很多关于我们发送到服务器的内容，但我们可能还应该看看我们返回的内容。让我们回到我们的书籍收藏。如果您还记得，我们向 /books 发出了 GET 请求。理论上，我们应该得到这样的结果：

[
    {"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() 来加载关于一本书的数据，现在我们必须使用 new BookModel({ bookId: 42 }).fetch()。

希望您发现此回复内容丰富，并且不会太无聊。我意识到对于许多人来说，HTTP 协议和 RESTful 架构并不是最令人兴奋的主题，所以我试着给它加点趣味。当我稍后阅读所有这些内容时，我可能会后悔，但现在是凌晨 2 点，所以我还是要继续提交。

---

假设您了解 ajax 调用（POST、GET 等到 '/collection' 等）。

Backbone 使用同步将一些模型和集合方法路由到 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 将处理调用。

---