`
2008winstar
  • 浏览: 60881 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke: 写的很好,也可以看看那这个文章,我感觉学的还可以。http:/ ...
    HTML

《开始学Backbone.js》之第三章Backbone Models与Collections(六)

 
阅读更多

      本篇内容翻译自《Beginning Backbone.js》,原著作者James Sugrue。转载请注明相关信息。

 

      本文内容接上篇博客内容

 

   与服务端交换数据

       Backbone模型最后可用的功能集合是与如何从一个提供REST API的服务端读取数据,或将数据发送至该服务端相关。在开始接触Backbone的这个相关机制前,我们首先设置一个简单的后端用以为我们的API调用提供响应。

 

   Node.js服务端后台

       既然我们使用了JavaScript,我将概述一下使用Node.js的一个简单的服务端,但你也可以根据你的选择轻松地换成其他REST服务端的实现。由于本书的重点在于客户端,因此我们不会深入地讨论服务端的实现。然而,对于解释如何响应Backbone应用的请求这一目的来说已经够用了。

 

      首先需要从http://nodejs.org上安装Node.js。安装完后,使用NPM包管理器安装express node包,其是一个很小的用于Node.js的web应用框架,通过它可以轻松地运行一个具有REST API的简单服务端。

npm install express

 

       最后,只需将以下代码拷贝到server.js中。从代码中可以看到,它通过http://localhost:8080/books提供了一些简单的端点服务。

/**
 * 由localhost:8080/books提供的简单API
 */
var express = require('express');
var app = express();
var bookId = 100;

function findBook(id){
    for(var i = 0; i < books.length; i++){
        if(books[i].id === id){
            return books[i];
        }
    }
    return null;
}

function removeBook(id){
    var bookIndex = 0;
    for(var i = 0; i < books.length; i++){
        if(books[i].id === id){
            bookIndex = i;
        }
    }
    books.splice(bookIndex, 1);
}

app.configure(function(){
    //解析由body request提供的JSON对象
    app.use(express.bodyParser());
});

var books = [
    {id: 98, author: 'Stephen King', title: 'The Shining', year: 1977},
    {id: 99, author: 'George Orwell', title: 1949}
];

/**
 * HTTP GET /books
 * 应该返回一个books的列表
 */
app.get('/books', function(request, response){
    response.header('Access-Control-Allow-Origin', '*');
    console.log('In GET function');
    response.json(books);
});

/**
 * HTTP GET /books/:id
 * id是你想获取的那本书的唯一标识符
 * 应该返回具有指定id的任务,不然的话就是404
 */
app.get('/books/:id', function(request, response){
    response.header('Access-Control-Allow-Origin', '*');
    console.log('Getting a book with id ' + request.paras.id);
    var book = findBook(parseInt(request.params.id, 10));
    if(book === null){
        response.send(404);
    }else{
        response.json(book);
    }
});

/**
 * HTTP POST /books/
 * 请求的主体包含了创建的book
 * 若成功则返回200
 */
app.post('/books/', function(request, response){
    response.header('Access-Control-Allow-Origin', '*');
    var book = request.body;
    console.log('Saving book with the following structure ' + JSON.stringify(book));
    book.id = bookId++;
    books.push(book);
    response.send(book);
});

/**
 * HTTP PUT /books/
 * id是你想更新的那本书的唯一标识
 * 如果具有该id的书不存在则返回404
 */
app.put('/books/:id', function(request, response){
    response.header('Access-Control-Allow-Origin', '*');
    var book = request.body;
    console.log('Updating Book ' + JSON.stringify(book));
    var currentBook = findBook(parseInt(request.params.id, 10));
    if(currentBook === null){
        response.send(404);
    }else{
        //本地存储book
        currentBook.title = book.title;
        currentBook.year = book.year;
        currentBook.author = book.author;
        response.send(book);
    }
});

/**
 * HTTP DELETE /books/
 * id是你想删除的那本书的唯一标识
 * 如果具有指定id的那本书不存在则返回404
 */
app.delete('/books/:id', function(request, response){
    console.log('calling delete');
    response.header('Access-Control-Allow-Origin', '*');
    var book = findBook(parseInt(request.params.id, 10));
    if(book === null){
        console.log('Could not find book');
        response.send(404);
    }else{
        console.log('Deleting ' + request.params.id);
        removeBook(parseInt(request.params.id, 10));
        response.send(200);
    }
    response.send(200);
});

//为允许CORS请求追加设置
var allowCrossDomain = function(req, response, next){
    response.header('Access-Control-Allow-Origin', 'http://localhost');
    response.header('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE');
    response.header('Access-Control-Allow-Headers', 'Content-Type');
    if('OPTIONS' == req.method){
        response.send(200);
    }else{
        next();
    }
};

app.configure(function(){
    app.use(allowCrossDomain);
});
//设置app的端口号为8080
app.listen(8080);

 

      在命令行中输入node server.js以启动服务器。这个服务器虽然非常简单,但对于Backbone的持久性调用的正确执行来说已经足够了。

 

 

分享到:
评论

相关推荐

    Backbone.js(1.1.2) API中文文档.zip Backbone.js离线文档

    3. **集合(Collections)**:集合是模型的有序列表,它们继承自Backbone.Events,因此可以触发和监听事件。集合有自己的URL,可以进行同步操作,如`fetch`和`create`。集合中的模型可以通过比较ID来保持唯一性。 4...

    backbone.js入门教程

    Backbone.js 建立在 jQuery 和 Underscore.js 之上,因此它可以无缝集成到已经使用这些库的项目中。此外,它还支持通过 RESTful JSON 接口与服务器通信,使得前后端之间的数据交换更加高效。 #### 二、通过 Hello...

    Backbone.js的集合

    在Backbone.js中,集合(Collections)是模型(Models)的有序集合,它们提供了一种组织和操作数据的高效方式。在本文中,我们将深入探讨Backbone.js集合的各个方面,包括其核心概念、功能、API以及在实际开发中的...

    实例讲解JavaScript的Backbone.js框架中的View视图

    Backbone.js框架相对轻量级,它的核心在于模型(Models)、视图(Views)、集合(Collections)和路由(Routers)。本篇文章重点讲解Backbone.js框架中的View视图组件。 Backbone.js的View视图是一个非常重要的部分...

    前端项目-backbone.radio.zip

    3. **消息传递模式**:在Backbone.Radio中,消息传递模式通过`Radio.channel`来实现。开发者可以创建频道,发布和监听消息,从而实现组件间的解耦通信。 4. **频道(Channel)**:Backbone.Radio的核心是频道概念,...

    讲解JavaScript的Backbone.js框架的MVC结构设计理念

    通过Model,Backbone实现了数据和视图之间的同步,当Model数据发生变化时,与之关联的视图会自动更新,保持数据的即时显示。 2. Collections(集合):Collection用于存储一组Model,提供了添加、移除、排序、过滤...

    用Backbone.js写的增删改查列表

    它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等概念,帮助开发者实现数据与用户界面的双向绑定,以及更好的组织前端代码。在"用Backbone.js写的增删改查列表"这个项目中,我们...

    SPA-with-Backbone, Backbone.jsでsingle pageアプリケーションを作る方法.zip

    1. **Backbone.js框架**:Backbone.js提供了一套组织前端代码的工具,包括模型(Models)、视图(Views)、集合(Collections)以及路由器(Router)。它依赖于jQuery或Zepto库,用于DOM操作。 2. **模型-视图-控制...

    Backbone.js实现的俄罗斯方块游戏源码.zip

    Backbone.js是一个轻量级的JavaScript库,它提供了一种结构化的方式来组织前端应用,尤其适合构建复杂的单页面应用程序(SPA)。在这个“Backbone.js实现的俄罗斯方块游戏源码”中,我们可以深入理解如何利用...

    Backbone.js实战正文.pdf

    Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESTful ...

    Backbone.js的Hello World程序实例.docx

    Backbone.js是一个轻量级的JavaScript库,它为构建结构化的Web应用提供了基础框架,包括模型(Models)、视图(Views)、集合(Collections)和路由器(Router)。在这个实例中,我们将看到如何整合Backbone.js与...

    kanban, Kanban 看板 is a Trello clone in Rails and Backbone.js.zip

    5. **vendor/**: 第三方库和插件存放的地方。 6. **javascripts/**: Backone.js的源码和应用特定的JavaScript文件。 【kanban github】表明这个项目是在GitHub上开源的,你可以在那里找到项目的完整源代码、问题...

    前端项目-backbone.collectionView.zip

    【标题】"前端项目-backbone.collectionView.zip"是一个与前端开发相关的资源包,主要涉及的技术是Backbone.js的CollectionView。在Web开发中,前端框架扮演着至关重要的角色,它们帮助开发者组织代码,提高效率,...

    实例讲解JavaScript的Backbone.js框架中的View视图_.docx

    在Backbone.js中,View是用来呈现模型数据的部分,同时也是与用户交互的关键组件。View负责监听事件并对这些事件做出响应,同时还能渲染数据到DOM中。理解View的用途和工作原理对于开发高质量的应用程序至关重要。 ...

    backbone教程

    Backbone.js是一个轻量级的JavaScript框架,主要提供了三大组件:models(模型)、collections(集合)和views(视图)。通过这三个组件,可以快速构建复杂的Web应用程序。 Models(模型) Backbone.Model是...

    TODO-APP:使用Backbone.js开发ud989的项目

    7. **JavaScript 文件夹**: 存放所有与Backbone.js相关的代码,如模型、视图、集合、路由器的定义。 **三、开发流程** 1. **初始化应用**:在`index.html`中引入Backbone.js及相关库,如jQuery和Underscore.js,...

    前端项目-backbone.projections.zip

    Backbone.js是一个轻量级的JavaScript库,它为开发者提供了模型(Models)、视图(Views)、集合(Collections)和路由器(Router)等核心概念,帮助组织前端代码结构,提高可维护性和复用性。Backbone.Projections...

    backbone-min.js

    主要提供了3个东西:1、models(模型) 2、collections(集合) 3、views(视图) backbone.js文件本身很小,压缩后只有5.3KB,作为一个框架级别的核心JS文件,这个数字很可怕。 除此之外,这个JS还必须依赖于另一个JS文件...

Global site tag (gtag.js) - Google Analytics