Backbone实战：Webchat开发

eddysoft

浏览: 115262 次
性别:
来自: 西安

最近访客更多访客>>

yu2388353

jin_config

wkm

liucaninfo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Python
实用转载

现在最后来从头开始做一个完整的实例，来体验一把backbone在开发过程中的使用。

这个实战项目我把它叫做webchat（web在线聊天室），使用技术就是backbone+django+sqlite。在功能方面没有想的特别复杂，因为项目的目的就是让大家能够快速的用上backbone。（不过经过前面的文章，我想应该已经能让你用上backbone了）

大概说下这个聊天室的功能，很简单，不用注册登录：

1、查看所有聊天记录
2、说话

功能有了，就来设计页面，用画图工具简单的设计一下：

页面也很简单

我们可以概括出需要的实体类，模型如下：

chat:
    id     #主键
    content   #消息
    username    #昵称
    date    #消息发送时间

这样的一个模型基本上已经满足了功能上的需求了。

再由上一篇中的那个页面设计，我们也进行了实现，代码就不解释了。

先是html：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<title>the5fire-WebChat</title>
<link href="/site_media/chat/css/chat.css" media="all" rel="stylesheet" type="text/css"/>
<script src="/site_media/chat/js/jquery-1.7.1.js"></script>
<script src="/site_media/chat/js/underscore-1.3.1.js"></script>
<script src="/site_media/chat/js/backbone.js"></script>
<script src="/site_media/chat/js/chat.js"></script>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="head">
<span>欢迎光临the5fire聊天室，当前时间：<label id="nowdate"></label></span>
</div>
<div class="screen">
<ul class="chat_list">
<li><div class="msgtitle">the5fire 2012-04-10 23:16:00</div><p>大家好！</p></li>
<li><div class="msgtitle">other 2012-04-10 23:16:00</div><p>你好</p></li>
</ul>
</div>
<div class="send_message">
<div class="message">
<textarea id="content" rows="4"></textarea>
</div>
<div class="opt">
<label for="nickname">昵称：</label><input name="nickname" id="nickname"/><br/>
<button id="send">发送消息</button>
</div>
</div>
</div>
</div>
</body>
<script>
function show_time()
{
var today,hour,second,minute,year,month,date,time;
today=new Date();
year = today.getFullYear();
month = today.getMonth()+1;
date = today.getDate();
hour = today.getHours();
minute =today.getMinutes();
second = today.getSeconds();
if(minute < 10) minute = '0' + minute;
if(second < 10) second = '0' + second;
time = year + "-" + month + "-" + date +" " + hour + ":" + minute + ":" + second;
$("#nowdate").html(time);
}
setInterval(show_time,1000);
</script>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>the5fire-WebChat</title>
    <link href="/site_media/chat/css/chat.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="/site_media/chat/js/jquery-1.7.1.js"></script>
    <script src="/site_media/chat/js/underscore-1.3.1.js"></script>
    <script src="/site_media/chat/js/backbone.js"></script>
    <script src="/site_media/chat/js/chat.js"></script>
  </head>
  <body>
    <div class="wrap">
      <div class="main">
        <div class="head">
          <span>欢迎光临the5fire聊天室，当前时间：<label id="nowdate"></label></span>
        </div>
        <div class="screen">
          <ul class="chat_list">
            <li><div class="msgtitle">the5fire 2012-04-10 23:16:00</div><p>大家好！</p></li>
            <li><div class="msgtitle">other 2012-04-10 23:16:00</div><p>你好</p></li>
          </ul>
        </div>
        <div class="send_message">
          <div class="message">
            <textarea id="content" rows="4"></textarea>
          </div>
          <div class="opt">
            <label for="nickname">昵称：</label><input name="nickname" id="nickname"/><br/>
            <button id="send">发送消息</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    function  show_time()
    {
        var today,hour,second,minute,year,month,date,time;
          
        today=new Date();
      
        year = today.getFullYear();
        month = today.getMonth()+1;
        date = today.getDate();
        hour = today.getHours();
        minute =today.getMinutes();
        second = today.getSeconds();
        if(minute < 10) minute = '0' + minute;
       if(second < 10) second = '0' + second;
       time = year + "-" + month + "-" + date +" " + hour + ":" + minute + ":" + second;
       $("#nowdate").html(time);
   } 
   setInterval(show_time,1000);
 </script>
</html>

然后在是CSS代码：

/*
    author:the5fire
    blog:http://www.the5fire.net
    date:2012-04-09
*/
html {
    margin:0;
    padding:0;
}
body {
    margin:0;
    font-size:14px;
}
.wrap {
    background-color: #B26F4C;
    width: 100%;
    height: 800px;
}


.main {
    width: 50%;
    margin: auto;
    height: 700px;
    background-color: #fff;
}

.head {
    height: 40px;
    padding-top: 10px;
    border-bottom: 1px solid #000;
    font-size:20px;
}

.head span{
    margin: auto;
    width: auto;
}

.screen {
    height:400px;
    width:auto;
    overflow-y: scroll;
    background:#CCCCCC;
    border: 2px solid #000;
}

.screen .msgtitle {
    color:blue;
}

.send_message {
    margin-top: 5px;
}

.send_message .message {
    width:60%;
    float:left;
}

.send_message .message textarea {
    width:100%;
}

.send_message .opt {
    margin-right:10px;
    margin-top:10px;
    float:right;
}

来看下界面：

界面设计和模型都有了，那么后台应该有哪些接口呢？

从功能上看也是很简单，只有两个：

1、说话（say），在此方法中，讲用户输入的内容保存到数据库。
2、获取所有聊天记录（getChatLog）,将数据库的内容全部提取出来。

有了前面功能介绍以及整体详细设计，下面的开发就变得更有目的性了。

沿着上一篇文章的思路，我们先来把javascript模板建立起来，模板用来取代上一篇中html代码里的：

<li>
<div class="msgtitle">the5fire 2012-04-10 23:16:00</div>
<p>大家好！</p>
</li>

把它改成模板为：

<script type="text/template" id="item-template">

   <div class="msgtitle">
      <%=username %> <%=date %><a id="destroy">删除</a>
   </div>
   <p><%=content %></p>

  </script>

其实模板的作用就是复用，里面多了一个删除的连接，主要是为了演示backbone的DELETE操作。

模板建立很容易，下面来建立页面端的实体类，这个更容易，因为上篇文章已经分析好了：

var Chat = Backbone.Model.extend({

        urlRoot:'',

        defualts: {
            content:'',
            username:'',
            date:''
        },

        clear: function(){
            this.destroy();
        }
    });

没有看到我上一篇插曲文章的同学可能觉得奇怪，为什么urlRoot为空？这里再次重复一下，当model和collection一起使用的时候，或者更确切的说是一个model属于某一个collection时，collection的url将取代mode的urlRoot，但是你的urlRoot还必须存在。

顺着思路，在来看collection，其实简单的很，因为我这里的collection没有太多的动作要做：

var ChatList = Backbone.Collection.extend({

        url:'/chat/',

        model:Chat

    });

仅此而已，是不是很简单。

然后同以前我们分析的todos一样，我们也来建立一个管理单个chat界面的类,学以致用，就是模仿–使用–发挥：

var ChatView = Backbone.View.extend({

        tagName:'li',

        template:_.template($('#item-template').html()),
        events:{
            'click #destroy' : 'clear'
        },

        initialize:function(){
            _.bindAll(this,'render','remove');
            this.model.bind('change', this.render);
            this.model.bind('destroy', this.remove);
        },

        render: function(){
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        },

        clear: function(){
            this.model.clear();
        }
    });

代码不肖多说。

然后对应着，也要有一个整体的管理view：

var AppView = Backbone.View.extend({
        el:$('.main'),

        events: {
            "click #send": "say"
        },

        initialize: function() {
            _.bindAll(this,'addOne','addAll');
            this.nickname = this.$('#nickname');
            this.textarea = this.$("#content");

            chatList.bind('add', this.addOne);
            chatList.bind('reset', this.addAll);
            chatList.fetch();
            setInterval(function() {
                chatList.fetch({add: true});
            }, 5000);
        },

        addOne: function(chat) {
            //页面所有的数据都来源于server端，如果不是server端的数据，不应添加到页面上
            if(!chat.isNew()) {  
                var view = new ChatView({model:chat});
                this.$(".chat_list").append(view.render().el);
                $('#screen').scrollTop($(".chat_list").height() + 200);
            }
        },

        addAll: function() {
            chatList.each(this.addOne);
        },

        say: function(event) {
            chatList.create(this.newAttributes());
            //为了满足IE和FF以及chrome
            this.textarea.text('');
            this.textarea.val('');
            this.textarea.html('');

        },

       
        newAttributes: function() {

            var content = this.textarea.val();
            if (content == '') {
                content = this.textarea.text();
            }

            return {
              content: content,
              username: this.nickname.val(),
              date: get_time()
            };
        }
    });

其中有两个地方需要注意：

1、 $(‘#screen’).scrollTop($(“.chat_list”).height() + 200); 这个是为了让那个显示聊天信息的窗口滚动条始终处于最下方。
2、
setInterval(function() {

chatList.fetch({add: true});

}, 5000);

这个的意思就是，每隔5秒就到到服务器取一下数据，里面的add：true参数表示，每次取回数据之后都在原有数据上累加。

剩下需要说的就是，不用忘了初始化AppView，以及在ChatView定义的上方，实例化ChatList：

var chatList = new ChatList;

//ChatView定义上方

var appView = new AppView;

到这里web端的代码就构建完毕了，从上面的实现可以发现，web端和server端的交互全部通过collection中定义的url:’/chat/’来完成的。所有的CRUD操作通过POST，GET，PUT，DELETE来完成。

分享到：

Java应用级产品开发平台APDPlat | Django开发环境搭建及使用!

2013-09-17 13:13
浏览 993
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论