如果你不介意,我将首先澄清一些措辞。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
并粘贴到上面,然后按几次回车键。瞧!HTML 在它的所有荣耀。
在这个例子中...
GET
是方法。
/questions/18504235/understand-backbone-js-rest-calls
是路径。
HTTP/1.1
是协议。
Host: stackoverflow.com
是一个header的例子。
您的浏览器的功能大致相同,只是带有更多标题,以便获取此页面的 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
。
- 有一条额外的线,称为body。
虽然还有很多其他方法,但在 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
它消失了。
其他有用的花絮
虽然我们已经讨论了很多关于我们发送到服务器的内容,但我们可能还应该看看我们返回的内容。让我们回到我们的书籍收藏。如果您还记得,我们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()
加载关于一本书的数据,现在我们必须使用new BookModel({ bookId: 42 }).fetch()
.
希望您发现此回复内容丰富,并且不会太无聊。我意识到对于许多人来说,HTTP 协议和 RESTful 架构并不是最令人兴奋的主题,所以我试着给它加点趣味。当我稍后阅读所有这些内容时,我可能会后悔,但现在是凌晨 2 点,所以我还是要继续提交。