实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室

快速浏览更多在线 Demo

想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。

一、界面设计：

二、数据模型设计

id 每个发言都有一个独立的id由tastypie自动生成

content 发言的内容

username 发言者

date 发言时间

三、前端制作

这里没有用到Backbone的Router，因为这里不需要记录hash记录

1.Div+CSS制作静态页面，这里item-template为每一个发言的模版

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        ul, li {

            margin:0px;

            padding:0px;

            list-style:none;

        }

        body {

        }

        #wrapper {

            width:1000px;

            margin:0px auto;

        }

            #wrapper .header {

                width: 100%;

                background-color: rgb(46, 177, 232);

            }

            #wrapper .content {

                width: 100%;

            }

                #wrapper .content .username {

                    color: red;

                }

                #wrapper .content .time {

                    color: orange;

                }

                #wrapper .content .item_content {

                    color: blue;

                }

            #wrapper .content_ul, #wrapper .item {

                background-color: rgb(237, 237, 237);

                padding: 10px;

            }

            #wrapper .destroy{

                color: green;

                font-weight: bold;

                cursor: pointer;

            }

            #wrapper .footer {

                width:100%;

                float: left;

                background-color: rgb(46, 177, 232);

                padding: 10px 0px;

            }

                #wrapper .footer .fl {

                    width:80%;

                    float:left;

                }

                #wrapper .footer .fr{

                    width:20%;

                    float:left;

                }

                    #wrapper .footer .fr::after {

                        clear:both;

                    }

        #new_chat {

            width: 100%;

            height: 80px;

        }

        #wrapper .footer .fr_up {

            margin-left: 30px;

            margin-bottom: 10px;

        }

        #wrapper .footer .fr_down {

            margin-left: 30px;

        }

        #nickname {

            width: 97px;

        }

        #wrapper .footer .send {

            width: 150px;

            background-color: green;

            display: block;

            text-align: center;

            padding: 20px;

            text-decoration: none;

        }

    </style>

</head>

<body>

    <div id="wrapper">

        <div class="header">

           [ Chat Room Beta 1.0 ]

        </div>

        <div class="content">

            <ul class="content_ul">

            </ul>

        </div>

        <div class="footer">

            <div class="fl"><textarea id="new_chat" autofocus></textarea></div>

            <div class="fr">

                <div class="fr_up">

                    呢称：<input id="nickname" type="text"/>

                </div>

                <div class="fr_down">

                    <button class="send" id="send">发送消息</button>

                </div>

            </div>

        </div>

    </div>

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

            <span class="username"><%=username %></span> : <span class="time"><%=date %></span> <a class="destroy">X</a><br />

            <span class="item_content"><%=content %></span>

    </script>

    <script src="/static/chatroom/js/vendor/jquery.js"></script>

    <script src="/static/chatroom/js/vendor/underscore.js"></script>

    <script src="/static/chatroom/js/vendor/backbone.js"></script>

    <script src="/static/chatroom/js/models.js"></script>

    <script src="/static/chatroom/js/views.js"></script>

</body>

</html>

2.Backbone Models 文件，为了方便，这里把model与collection都放到同一文件了,\static\chatroom\js\models.js

var Chat = Backbone.Model.extend({

    urlRoot: '/api/v1/chat/',

    defualts: {

        content: '',

        username: '',

        date: ''

    },

    clear: function () {

        this.destroy();

    }

});

var ChatList = Backbone.Collection.extend({

    url: '/api/v1/chat/',

    parse: function (response) {

        return response.objects;

    },

    model: Chat

});

3.Backbone Views文件，为了方便，参照todoMVC把视图划分为两个,一个是ChatView用于每个发言，一个为AppView用于整体处理，这里把ChatView与AppView都放到同一文件了,\static\chatroom\js\views.js

var chatList = new ChatList;//New 一个Collection下面会用到

var ChatView = Backbone.View.extend({

    tagName: 'li',

    className: 'item',

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

        This = $(this.el).find('.time');

        This.text(This.text().split('.')[0].replace('T',' '));//注意这里tastypie提供的时间格式为：2015-03-01T23:52:26.854388　所以要对时间进行格式化一下

        return this;

    },

    clear: function () {

        this.model.clear();

    }

});

var AppView = Backbone.View.extend({

    el: $('#wrapper'),

    events: {

        "click #send": "say"

    },

    initialize: function () {

        _.bindAll(this, 'addOne', 'addAll');

        this.nickname = this.$('#nickname');

        this.textarea = this.$("#new_chat");

        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.$(".content_ul").append(view.render().el);

            $('.content').scrollTop($(".content_ul").height() + 50);

        }

    },

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

        };

    }

});

var appView = new AppView;//启动程序

到这里前端代码已经完成。

四、后端处理

这里用Django自带的SQLite作后台数据库

1.Django Model文件-D:\project\mysite\ChatRoom\models.py

from django.db import models

class Chat(models.Model):

    content = models.CharField(max_length=1024)

    username = models.CharField(max_length=1024)

    date = models.DateTimeField(auto_now_add=True)

2.配置TastyPie API文件-D:\project\mysite\ChatRoom\api\resources.py

from tastypie.authorization import Authorization

from tastypie import fields

from tastypie.resources import ModelResource

from ChatRoom.models import Chat

class ChatResource(ModelResource):

    class Meta:

        queryset = Chat.objects.all()

        resource_name = 'chat'

        authorization = Authorization()

        fields=['id','username','content','date']

3.Restfull API的Url文件配置-D:\project\mysite\mysite\urls.py

from django.conf.urls import patterns, include, url

from tastypie.api import Api

from ChatRoom.api.resources import ChatResource

v1_api = Api(api_name='v1')

v1_api.register(ChatResource())

urlpatterns = patterns('',

    url(r'^admin/', include(admin.site.urls)),

    url(r'^api/', include(v1_api.urls)),

)

把数据库导好及配置好Tastypie，运行测试，可以正常留言！

参考引用

http://www.the5fire.com/

https://github.com/tastejs/todomvc