了解Backbone.js REST调用

时间:2013-08-29 07:00:52

标签: javascript jquery ajax rest backbone.js

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

2 个答案:

答案 0 :(得分:310)

如果你不介意,我将开始清理一些措辞。 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. 还有一行名为 body
  4. 虽然有许多其他方法,但RESTful应用程序中使用的方法是POSTGETPUTDELETE。这告诉服务器它应该对数据采取什么类型的操作,而不必为所有内容设置不同的路径。

    返回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()。 Backbone会理解您正在尝试阅读 集合图书,并会提出以下请求:

    GET /books HTTP/1.1
    Host: example.com
    

    BAM。那很容易。但是说我们只想要一本书的信息。我们来说#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点,所以无论如何我都要继续提交。

答案 1 :(得分:4)

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

Backbone使用sync将一些模型和集合方法路由到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将负责调用。

相关问题