了解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如何映射)任何非常简单的例子都是非常有用的。

如果你不介意,我将开始清理一些措辞。 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 

[可选]如果您曾经玩过命令行或terminal,请尝试运行命令telnet stackoverflow.com 80并粘贴上述内容,然后按input几次。 瞧! HTML中的所有荣耀。

在这个例子中…

  • GET方法
  • /questions/18504235/understand-backbone-js-rest-callspath
  • 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. path现在是/login
  3. 有一个额外的线,称为身体

虽然还有其他一些方法,但在RESTful应用程序中使用的方法是POSTGETPUTDELETE 。 这告诉服务器它应该采取什么types的行动,而不必为所有事情build立不同的path。

回到主干

所以希望现在您可以更多地了解HTTP的工作原理。 但是这与Backbone有什么关系呢? 让我们找出来!

这里有一小段代码可以在Backbone应用程序中find。

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

创build(POST)

由于我们使用的是RESTful API,这就是Backbone需要能够创build,读取,更新和删除我们所有图书信息的所有信息! 让我们开始写一本新书。 下面的代码应该足够了:

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

骨干意识到你正在尝试创build一本新书,并从它给出的信息中知道做出如下请求:

 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(); 

骨干很聪明,知道尽pipe被称为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 

它消失了。

其他有用的花絮

虽然我们已经谈了很多关于我们发送给服务器的信息,但我们也应该看看我们回来的是什么。 让我们回到我们的书籍集合。 如果您还记得,我们向/books提出了GET请求。 理论上,我们应该回到这样的东西:

 [ {"id":42,"author":"Douglas Adams","title":"The Hitchhiker's Guide to the Galaxy"} , {"id":3,"author":"JRR 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":"JRR Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"} ] 

骨干得到,每个API是有点不同,这是没关系的。 所有你需要做的就是让它知道idAttribute ,就像这样:

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

您只需将该信息添加到模型中,因为集合无论如何都会检查模型。 就这样,Backbone理解你的API! 即使我不…

这个缺点是你必须记住在某些情况下使用bookId 。 例如,我们以前使用new BookModel({ id: 42 }).fetch()加载关于一本书的数据,现在我们需要使用new BookModel({ bookId: 42 }).fetch()


希望你已经find了这个回应的信息,而不是太无法忍受的沉闷。 我意识到,对于很多人来说,HTTP协议和RESTful架构并不是最令人兴奋的主题,所以我试着把它调味一点。 我可能会后悔的是,当我稍后再读完这一切时,现在是凌晨2点,所以我要继续提交。

假设你了解ajax调用(POST,GET等到/ collection)等。

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