了解Backbone.js REST调用

Question

我试图理解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映射的方式)任何非常简单的例子都非常有用......

Answer 1

如果你不介意的话,我将开始清理一些措辞.REST本身不是一个协议,它只是一种使用HTTP协议的方式.REST样式对API特别有用,我希望你会看到.当API符合该样式时,它被称为"RESTful".如果您使用的API不是RESTful,那么您必须对Backbone.sync进行大量更改才能使其正常工作.所以希望它是!:)

HTTP协议

我喜欢这个例子,所以这里有一个HTTP请求来获取这个页面的HTML:

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是标题的示例.

您的浏览器大致相同,只需要更多标题,以获取此页面的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

前一个示例与此示例之间存在三个差异.

1. 该方法是现在POST.
2. 该路径现在/login.
3. 有一条额外的线,称为身体.

虽然有一堆的其他方法,在RESTful应用程序所使用的那些是POST,GET,PUT,和DELETE.这告诉服务器应该对数据采取什么类型的操作,而不必为所有内容设置不同的路径.

回到Backbone

所以希望你现在更了解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();

Backbone意识到你正在尝试创建一本新书,并且从信息中知道它已经发出以下请求:

POST /books HTTP/1.1
Host: example.com

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

读(GET)

看看这有多容易？但我们希望在某些时候得到这些信息.我们说我们跑了new BookCollection().fetch().骨干会明白,你想读一个收集的书籍,并会提出以下要求:

GET /books HTTP/1.1
Host: example.com

BAM.那很容易.但是说我们只想要一本书的信息.我们来说#42号书.说我们跑了new BookModel({ id: 42 }).fetch().主干看到你想读一个单一的书:

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点,所以无论如何我都要继续提交.