BackBone 教程 - 第四部分：使用 HTTP REST 服务对 BackBoneJs 模型执行 CRUD 操作

Rahul Rajat Singh

4.78/5 (24投票s)

2014年7月17日

CPOL

3分钟阅读

91126

4035

如何使用基于 REST 的 HTTP 服务对 BackBone 模型执行 CRUD 操作

引言

在本文中，我们将讨论如何使用基于 REST 的 HTTP 服务对 backbone 模型执行 CRUD 操作。

背景

在本文中，我们将探讨如何使用基于 REST 的 Web 服务对 backbone 模型执行 CRUD 操作。

完整系列链接

Using the Code

我们要做的第一件事是创建一个简单的基于 REST 的 Web API，该 API 可用于使用我们简单的 backbone 应用程序将数据保存在服务器上。为此，我创建了一个包含单个表（如下所示）的简单数据库。

ID 字段配置为自动递增，并且是表的主键。因此，在创建新模型时，我们无需将其提供给服务器。现在，在此模型之上，我编写了一个简单的 ASP.NET Web API，它将为我们提供 RESTful API。此 API 配置为在我本地计算机上运行：https://:51377/。API 详细信息如下：

创建：POST https://:51377/api/values
读取：GET https://:51377/api/values/{id}
更新：PUT https://:51377/api/values/{id}
删除：DELETE https://:51377/api/values/{id}

一旦 API 运行起来，我们就可以开始处理我们的 backbone 模型了。我们在上一篇文章中创建了 backbone 模型，如下所示：

var Book = Backbone.Model.extend({
    defaults: {
        ID: "",
        BookName: ""
    },
    idAttribute: "ID",
    initialize: function () {
        console.log('Book has been initialized');
        this.on("invalid", function (model, error) {
            console.log("Houston, we have a problem: " + error)
        });
    },
    constructor: function (attributes, options) {
        console.log('Book\'s constructor had been called');
        Backbone.Model.apply(this, arguments);
    },
    validate: function (attr) {
        if (!attr.BookName) {
            return "Invalid BookName supplied."
        }
    }
});

backbone 模型天然支持使用 RESTful Web API 将数据保存到服务器。要使用 HTTP REST 服务保存模型，我们需要在 backbone 模型中指定 urlRoot。要实际保存模型，我们可以调用 backbone 模型上的 save 方法。save 方法将触发验证，如果验证成功，它将尝试识别要执行的操作（即创建或更新），并基于该操作，它将使用 urlRoot 并调用相应的 REST API 来执行操作。让我们指定 URL 根目录，以使此模型能够使用我们的 Web API 服务。

var Book = Backbone.Model.extend({
    defaults: {
        ID: "",
        BookName: ""
    },
    idAttribute: "ID",
    initialize: function () {
        console.log('Book has been initialized');
        this.on("invalid", function (model, error) {
            console.log("Houston, we have a problem: " + error)
        });
    },
    constructor: function (attributes, options) {
        console.log('Book\'s constructor had been called');
        Backbone.Model.apply(this, arguments);
    },
    validate: function (attr) {
        if (!attr.BookName) {
            return "Invalid BookName supplied."
        }
    },
    urlRoot: 'https://:51377/api/Books'
});

现在让我们尝试对此模型执行 CRUD 操作。

Create

要在服务器上创建新实体，我们需要填充模型中的非标识字段（在此情况下为除 ID 之外的字段），然后调用模型上的 Save 方法。

// Lets perform a create operation [CREATE]
var book = new Book({ BookName: "Backbone Book 43" });
book.save({}, {
    success: function (model, respose, options) {
        console.log("The model has been saved to the server");
    },
    error: function (model, xhr, options) {
        console.log("Something went wrong while saving the model");
    }
});

读取

要读取单个 book 实体，我们需要创建带有已填充标识属性的 book 实体，即我们要读取的 book 的 ID。然后，我们需要调用 model 对象上的 fetch 方法。

// Now let us try to retrieve a book [READ]
var book1 = new Book({ ID: 40 });
book1.fetch({
    success: function (bookResponse) {
        console.log("Found the book: " + bookResponse.get("BookName"));
    }
});

更新

现在，假设我们要更新在之前的 fetch 调用中检索到的书名。我们要做的就是设置需要更新的属性，然后再次调用 save 方法。

// Lets try to update a book [UPDATE]
var book1 = new Book({ ID: 40 });
book1.fetch({
    success: function (bookResponse) {
        console.log("Found the book: " + bookResponse.get("BookName"));
        // Let us update this retrieved book now (doing it in the callback) [UPDATE]
        bookResponse.set("BookName", bookResponse.get("BookName") + "_updated");
        bookResponse.save({}, {
            success: function (model, respose, options) {
                console.log("The model has been updated to the server");
            },
            error: function (model, xhr, options) {
                console.log("Something went wrong while updating the model");
            }
        });
    }
});

删除

现在要删除一个 Model，我们只需要调用 model 对象上的 destroy 方法。

// Let us delete the model with id 13 [DELETE]
var book2 = new Book({ ID: 40 });
book2.destroy({
    success: function (model, respose, options) {
        console.log("The model has deleted the server");
    },
    error: function (model, xhr, options) {
        console.log("Something went wrong while deleting the model");
    }
});

用于对模型执行 CRUD 操作的自定义 URL

在某些情况下，我们可能希望为单个操作提供自定义 URL。这可以通过重写 sync 函数并为每个操作提供自定义 URL 来实现。让我们创建另一个模型 BookEx 来看看如何实现这一点。

var BookEx = Backbone.Model.extend({
    defaults: {
        ID: "",
        BookName: ""
    },
    idAttribute: "ID",
    
    // Lets create function which will return the custom URL based on the method type
    getCustomUrl: function (method) {
        switch (method) {
            case 'read':
                return 'https://:51377/api/Books/' + this.id;
                break;
            case 'create':
                return 'https://:51377/api/Books';
                break;
            case 'update':
                return 'https://:51377/api/Books/' + this.id;
                break;
            case 'delete':
                return 'https://:51377/api/Books/' + this.id;
                break;
        }
    },
    // Now lets override the sync function to use our custom URLs
    sync: function (method, model, options) {
        options || (options = {});
        options.url = this.getCustomUrl(method.toLowerCase());
        
        // Lets notify backbone to use our URLs and do follow default course
        return Backbone.sync.apply(this, arguments);
    }
});

现在，我们可以像之前对上一个模型一样，对这个模型执行 CRUD 操作。

看点

在本文中，我们探讨了如何使用基于 HTTP 的 REST 服务对 backbone 模型执行 CRUD 操作。本文是从初学者的角度撰写的。希望这能提供信息。

历史

2014 年 7 月 17 日：第一个版本