Django:之BBS项目

首先新建一个BBSProject项目，在建一个app，把app导入到项目中。

在项目BBSProject中的settings.py中，

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01',＃导入app01

]

url设置，在BBSProject的urls里导入app01中的views，

from django.conf.urls import url
from django.contrib import admin
from app01 import views＃导入app01中的views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index),＃设置默认首页访问页面
]

在访问index的时候返回的结果是，在app01中的views中设置的index函数。

#_*_coding:utf-8_*_
from django.shortcuts import render,HttpResponse

# Create your views here.
def index(request):
    return HttpResponse(u"欢迎访问吴老二博客")

测试简单页面

在做一个bbs之前首先要考虑的是数据库的框架，在一个bbs中需要的内容，还有就是数据库之间的的联用一定要清晰。

注：一个bbs首先要有用户，要有内容，不同的板块，还要有评论，点赞还有就是用户组。

#_*_coding:utf-8_*_
from __future__ import unicode_literals
from django.db import models
from django.contrib.auth.models import User
'''用户组表,用户组名称不能相同,长度为64,返回用户组名
'''
class UserGroup(models.Model):

    name = models.CharField(max_length=,unique=True)

    def __unicode__(self):
        return self.name
'''用户信息表,包括用户名,用户组,
'''
class UserProfile(models.Model):

    user = models.OneToOneField(User)
    name = models.CharField(max_length=)
    groups = models.ManyToManyField(UserGroup)
    def __unicode__(self):
        return self.name
'''
帖子板块,长度.板块不能重复.用户权限
'''
class Category(models.Model):

    name = models.CharField(max_length=,unique=True)
    admin = models.ManyToManyField(UserProfile)
    def __unicode__(self):
        return self.name
'''帖子数据库表,标题,需要设置标题长度,标题不能重复.帖子隶属于板块,帖子插入的图片存储位置,内容以及优先级,帖子内容长度,帖子发布者需要联用用户列表,
如果用户列表在帖子列表下面需要加双引号.
    '''
class Article(models.Model):

    title = models.CharField(u"文章标题",max_length=,unique=True)
    categroy = models.ForeignKey(Category,verbose_name=u"板块")
    head_img = models.ImageField(upload_to="uploads")
    summary = models.CharField(max_length=)
    content = models.TextField(u"内容")
    author = models.ForeignKey(UserProfile)
    publish_date = models.DateTimeField(auto_now=True)
    hidden = models.BooleanField(default=True)
    priority = models.IntegerField(u"优先级",default=)

    def __unicode__(self):
        return "<%s, author:%s>" %(self.title,self.author)

'''
评论数据库表,评论的帖子需要联用帖子列表,评论者需要调用用户表,评论内容
'''
class Comment(models.Model):

    article = models.ForeignKey(Article)
    user = models.ForeignKey(UserProfile)
    parent_comment = models.ForeignKey('self',related_name='p_comment',blank=True,null=True)
    comment = models.TextField(max_length=)
    date = models.DateTimeField(auto_now=True)
    def __unicode__(self):
        return "<%s, user:%s>" %(self.comment,self.user)
'''点赞表点赞时间,点赞的帖子,和点赞者'''
class ThumbUp(models.Model):

    article = models.ForeignKey(Article)
    user = models.ForeignKey(UserProfile)
    date = models.DateTimeField(auto_now=True)
    def __unicode__(self):
        return "<user:%s>" %(self.user)

models

建好数据库需要同步一下：

python manage.py makemigrations　　
python manage.py migrate

开始写页面返回views

#_*_coding:utf-8_*_
from django.shortcuts import render,HttpResponseRedirect
import models
from django.core.exceptions import ObjectDoesNotExist
from django.contrib.auth import authenticate,login,logout
from forms import ArticleForm,handle_uploaded_file
# Create your views here.
def index(request):
    '''首页'''
    articles = models.Article.objects.all()
    return render(request,'index.html',{'articles': articles})
def category(request,category_id):
    '''二级分类'''
    articles = models.Article.objects.filter(categroy_id=category_id)
    return render(request,'index.html',{'articles': articles})

def article_detail(request,article_id):
    '''帖子内容'''
    try:
        article_obj = models.Article.objects.get(id=article_id)
    except ObjectDoesNotExist as e:
        return render(request,'404.html',{'err_msg':u"文章不存在！"})
    return render(request,'article.html', {'article_obj':article_obj})
def acc_logout(request):
    '''退出登陆'''
    logout(request)
    return HttpResponseRedirect('/')
def acc_login(request):
    '''登陆'''
    print(request.POST)
    err_msg =''
    if request.method == "POST":
        print('user authention...')
        username = request.POST.get('username')
        password = request.POST.get('password')
        user = authenticate(username=username,password=password)
        if user is not None:
            login(request,user)
            return HttpResponseRedirect('/')
        else:
            err_msg = "Wrong username or password!"
    return render(request,'login.html',{'err_msg':err_msg})

def new_article(request):
    '''最新帖子'''
    if request.method == 'POST':
        print(request.POST)
        form = ArticleForm(request.POST,request.FILES)
        if form.is_valid():
            print("--form data:",form.cleaned_data)
            form_data = form.cleaned_data
            form_data['author_id'] = request.user.userprofile.id

            new_img_path = handle_uploaded_file(request,request.FILES['head_img'])
            form_data['head_img'] = new_img_path
            new_article_obj = models.Article(**form_data)
            new_article_obj.save()
            return  render(request,'new_article.html',{'new_article_obj':new_article_obj})
        else:
            print('err:',form.errors)
    category_list = models.Category.objects.all()
    return render(request,'new_article.html', {'categroy_list':category_list})

views

路径urls

#_*_coding:utf-8_*_

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$',views.index, name="index" ),
    url(r'^category/(\d+)/$',views.category,name="category" ),
    url(r'^article/(\d+)/$',views.article_detail,name="article_detail"),
    url(r'^article/new/$',views.new_article,name="new_article"),
    url(r'account/logout/',views.acc_logout,name='logout'),
    url(r'account/login/',views.acc_login,name='login'),

]

可以登陆管理员后台建立板块和用户，发布帖子，帖子存放路径需要新建一个forms在app01里。

#!/usr/bin/env python
# -*- coding:utf-8 -*-
from django import forms
import os
class ArticleForm(forms.Form):
    '''帖子路径包括标题,内容作者,图片'''
    title = forms.CharField(max_length=255,min_length=5)
    summary  = forms.CharField(max_length=255,min_length=5)
    categroy_id = forms.IntegerField()
    head_img = forms.ImageField()
    content = forms.CharField(min_length=10)

def handle_uploaded_file(request,f):
    '''帖子图片存储路径'''
    base_img_upload_path = 'statics/imgs'
    user_path = "%s/%s" %(base_img_upload_path,request.user.userprofile.id)
    if not os.path.exists(user_path):
        os.mkdir(user_path)
    with open("%s/%s" %(user_path,f.name), 'wb+') as destination:
        for chunk in f.chunks():
            destination.write(chunk)
    return  "/static/imgs/%s/%s" %(request.user.userprofile.id,f.name)

关于帖子的评论需要考虑级别，在app01里新建一个tree_search_test评论函数。

#!/usr/bin/env python
# -*- coding:utf- -*-
'''评论'''
data = [
    (None,'A'),
    ('A','A1'),
    ('A','A1-1'),
    ('A1','A2'),
    ('A1-1','A2-3'),
    ('A2-3','A3-4'),
    ('A1','A2-2'),
    ('A2','A3'),
    ('A2-2','A3-3'),
    ('A3','A4'),
    (None,'B'),
    ('B','B1'),
    ('B1','B2'),
    ('B1','B2-2'),
    ('B2','B3'),
    (None,'C'),
    ('C','C1'),

]
def tree_search(d_dic,parent,son):
    for k,v_dic in d_dic.items():
        if k == parent: #find your parent
            d_dic[k][son] = {}
            print("find parent of :", son)
            return
        else: # might in the deeper layer
            print("going to furhter layer...")
            tree_search(d_dic[k],parent,son)

data_dic = {}

for item in data:
    parent,son = item
    if parent is None:# has no parent
        data_dic[son] ={}
    else: #  looking for its parent
        tree_search(data_dic,parent,son)

for k,v in data_dic.items():
    print(k,v )

'''
data_dic = {
    'A': {
        'A1': {
            'A2':{
                'A3':{
                    'A4':{}
                }
            },
            'A2-2':{
                'A3-3':{}
            }
        }
    },
    'B':{
        'B1':{
            'B2':{
                'B3':{}
            },
            'B2-2':{}
        }
    },
    'C':{
        'C1':{}
    }

}'''

tree_search_test

一下是前台页面的处理，首先要设置语言和路径，在settings里设置。

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    "%s/%s" %(BASE_DIR, "statics"),
    # "%s/%s" %(BASE_DIR, ""), #static/uploads/uploads/
)

html文件可以在下面下载。

index的导航部分

<div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ><a href="{% url 'index' %}">综合区</a></li>
            <li><a href="{% url 'category' 1 %}">欧美专区</a></li>
            <li><a href="{% url 'category' 2 %}">日韩专区</a></li>
            <li><a href="{% url 'category' 3 %}">河北专区</a></li>

          </ul>
          <ul class="nav navbar-nav navbar-right">

               {% if request.user.is_authenticated %}
                <li class="dropdown">
                  <a href="http://v3.bootcss.com/examples/navbar-fixed-top/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ request.user.userprofile.name }} <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="{% url 'new_article' %}">发贴</a></li>
                    <li><a href="http://v3.bootcss.com/examples/navbar-fixed-top/#">Another action</a></li>
                    <li><a href="http://v3.bootcss.com/examples/navbar-fixed-top/#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="http://v3.bootcss.com/examples/navbar-fixed-top/#">Separated link</a></li>
                    <li><a href="{% url 'logout' %}">注销</a></li>
                  </ul>
                </li>
               {% else %}
                 <li><a href="{% url 'login'%}">注册\登录</a></li>
               {% endif %}
          </ul>
        </div>

导航下分帖子展示和其他板块

<div class="container">
     {% block page-container %}
        <div class="row">
            <div class="col-md-8 left-content-panel">
                <div class="content-box">
                    {% for article in articles reversed %}
                        <div class="article-box row">
                            <div class="article-head-img col-md-3">
                                <img src="{{ article.head_img }}">
                            </div>
                            <div class="article-summary col-md-8">
                                <h4><a href="{% url 'article_detail' article.id %}">{{ article.title }}</a></h4>
                                <div class="article-attr">
                                    <ul  class="list-inline">
                                        <li>{{ article.author.name }}</li>
                                        <li>{{ article.publish_date }}</li>
                                        <li>thumbup:{{ article.thumbup_set.select_related.count }}</li>
                                        <li>comments:{{ article.comment_set.select_related.count }}</li>
                                    </ul>
                                </div>
                                <p>{{ article.summary }}</p>
                            </div>
                        </div>
                         <hr >
                    {% endfor %}

                </div>
            </div>
            <div class="col-md-4 right-sidebar">
                bar
            </div>
        </div>
     {% endblock %}
    </div>

js的调用

    <script src="/static/bootstrap/js/jquery-2.1.4.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var menus = $("#navbar a[href='{{ request.path }}']")[0];
            $(menus).parent().addClass("active");
            $(menus).parent().siblings().removeClass("active");
            //console.log(menus);
        });

    </script>

    {% block bottom-js %}
   {% endblock %}

登陆页面

{% extends 'index.html' %}

{% block page-container %}

<div class="col-md-4">
    <form class="form-signin" action="{% url 'login' %}" method="post">{% csrf_token %}
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">用户名</label>
        <input type="text" id="" name="username" class="form-control" placeholder="username" required="" autofocus="">
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required="">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        <p style="color:red;">{{ err_msg }}</p>
    </form>
</div>

{% endblock %}

最新帖子

{% extends 'index.html' %}
{% block head-js %}
   <script src="/static/plugins/ckeditor/ckeditor.js"></script>
{% endblock %}

{% block page-container %}
   <div class="new-article">
    {% if new_article_obj %}
        <h3>文章<{{ new_article_obj.title }}>已发布，<a href="{% url 'article_detail' new_article_obj.id %}"> 点我查看</a></h3>
    {% else %}
       <form  enctype="multipart/form-data" method="post" action="{% url 'new_article' %}">{% csrf_token %}
        <input name="title" type="text" class="form-control" placeholder="文章标题">
        <select name="categroy_id" class="form-control">
          {% for category in categroy_list %}
            <option value="{{ category.id }}">{{ category.name }}</option>
          {% endfor %}
        </select>
        <input name="summary" type="text" class="form-control" placeholder="一句话文章中心思想...">
        <input type="file" name="head_img">必选文章标题图片
        <textarea id="ck-editor" name="content" class="form-control" rows="3"></textarea>

        <br/>
       <button type="submit" class="btn btn-success pull-right">发贴</button>

    </form>
    {% endif %}
   </div>
{% endblock %}

{% block bottom-js %}
    <script>
         CKEDITOR.replace( 'ck-editor' );
        CKEDITOR.editorConfig = function( config ) {
            //config.language = 'es';
            config.uiColor = '#F7B42C';
            config.height = 500;
            config.toolbarCanCollapse = true;
        };
    </script>
{% endblock %}

所有帖子

{% extends 'index.html' %}
{% load custom_tags %}

{% block page-container %}
   <div class="article-detail">
        <h4>{{ article_obj.title }}</h4>

        <p>{{ article_obj.content|safe }}</p>

        <hr/>
        {%  build_comment_tree article_obj.comment_set.select_related %}
   </div>
{% endblock %}

报错404

{% extends 'index.html' %}

{% block page-container %}
    <h1 style="font-size: 200px">404</h1>
    <h3>{{ err_msg }}</h3>
{% endblock %}

以上是一个简单的bbs的搭建和制作，参考文件　　

webqq聊天室

webqq聊天室就给予上面的bbs制作吧，首先是数据库

在app01的数据库的用户信息表中新建朋友表。

class UserProfile(models.Model):
    '''
    用户信息表,包括用户名,用户组,
    '''
    user = models.OneToOneField(User)
    name = models.CharField(max_length=32)
    groups = models.ManyToManyField('UserGroup')
    friends = models.ManyToManyField('self', related_name='my_friends')＃新加的朋友表
    def __unicode__(self):
        return self.name

新建一个webqq项目，数据库中新建聊天组。

from __future__ import unicode_literals

from django.db import models
from app01.models import UserProfile
# Create your models here.
class QQGroup(models.Model):
    name = models.CharField(max_length=64,unique=True)
    description = models.CharField(max_length=255,default="nothing...")
    members = models.ManyToManyField(UserProfile,blank=True)
    admins = models.ManyToManyField(UserProfile,related_name='group_admins')
    max_member_nums = models.IntegerField(default=200)
    def __unicode__(self):
        return self.name

聊天组的views

#_*_coding:utf-8_*_
from django.shortcuts import render,HttpResponse
from webqq import models
import json,Queue,time
from django.contrib.auth.decorators import login_required#登录判断

# Create your views here.
GLOBAL_MQ = {}

@login_required

def dashboard(request):
    return render(request,'webqq/dashboard.html')
'''聊天页面函数返回聊天页面
'''
@login_required
def contacts(request):
    contact_dic = {
        #'contact_list': [],
        #'group_list': [],
    }
    contacts = request.user.userprofile.friends.select_related().values('id','name')
    contact_dic['contact_list']= list(contacts)
    groups = request.user.userprofile.qqgroup_set.select_related().values("id",'name','max_member_nums')
    contact_dic['group_list'] = list(groups)
    print(contact_dic)
    return HttpResponse(json.dumps(contact_dic))
'''好有聊天,以及群组聊天
'''
@login_required
def new_msg(request):
    if request.method == 'POST':
        print('-->',request.POST.get('data'))

        data = json.loads(request.POST.get('data'))
        send_to = data['to']
        msg_from = data["from"]
        contact_type = data['contact_type']
        data['timestamp'] = time.time()
        if contact_type == 'group_contact':
            group_obj = models.QQGroup.objects.get(id=send_to)
            for member in group_obj.members.select_related():
                if  str(member.id) not in  GLOBAL_MQ:
                    GLOBAL_MQ[str(member.id)] = Queue.Queue()
                if str(member.id) != msg_from:
                    GLOBAL_MQ[str(member.id)].put(data)

        else:
            if  send_to not in  GLOBAL_MQ:
                GLOBAL_MQ[send_to] = Queue.Queue()
            GLOBAL_MQ[send_to].put(data)
        return HttpResponse(GLOBAL_MQ[send_to].qsize())
    else:#recv msgs
        request_user = str(request.user.userprofile.id)
        msg_lists = []
        print(GLOBAL_MQ,request_user)
        if request_user in GLOBAL_MQ:
            print("hehe")
            stored_msg_nums = GLOBAL_MQ[request_user].qsize()
            if stored_msg_nums ==: #no new msgs
                try:
                    print("\033[41;1mNo new msg , wait for 60 secs...\033[0m")
                    msg_lists.append(GLOBAL_MQ[request_user].get(timeout=))
                except Exception as e:
                    print("err:",e)
                    print("\033[41;1mtime out or new msgs....\033[0m ")

            for i in range(stored_msg_nums):
                msg_lists.append(GLOBAL_MQ[request_user].get())
        else:
            #create a new queue for this user
            GLOBAL_MQ[str(request.user.userprofile.id)] = Queue.Queue()
        return  HttpResponse(json.dumps(msg_lists))
'''聊天消息发送,首先是判断是群组聊天还是个人聊天,群组聊天直接进去群组,个人聊天直接返回个人,根据不同的聊天对象发送消息,并且返回
'''

webqq.Views

BBSProject项目的url把webqq的url导入进去进去。

from django.conf.urls import url,include
from django.contrib import admin
from app01 import views
from webqq import urls as char_urls
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^chat/', include(char_urls)),＃webqq的url
    url(r'^$',views.index, name="index" ),
    url(r'^category/(\d+)/$',views.category,name="category" ),
    url(r'^article/(\d+)/$',views.article_detail,name="article_detail"),
    url(r'^article/new/$',views.new_article,name="new_article"),
    url(r'account/logout/',views.acc_logout,name='logout'),
    url(r'account/login/',views.acc_login,name='login'),

]

webqq下新建一个url

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

urlpatterns = [

    url(r'dashboard/$',views.dashboard,name='webqq'),
    url(r'contacts/$',views.contacts,name='load_contact_list'),
    url(r'msg/$',views.new_msg,name='send_msg'),
    url(r'msg/$',views.new_msg,name='get_new_msgs'),
]

webqq下的tests信息

from django.test import TestCase

# Create your tests here.

def callMyself(n):
    print("level:",n )
    callMyself(n+1)
    print('111')
    return  0
callMyself(1)

webqq下的admin

from django.contrib import admin
from webqq import models
# Register your models here.
admin.site.register(models.QQGroup)

webqq下的apps　

from __future__ import unicode_literals

from django.apps import AppConfig

class WebqqConfig(AppConfig):
    name = 'webqq'

后台信息建好开始更新数据库　　

python manage.py makemigrations　　
python manage.py migrate

把前台的web数据编辑

{% extends 'index.html' %}

{% block page-container %}
    {% csrf_token %}
<h1>好基友聊天室</h1>
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" chat-type="contact_list" contact-type="single_contact" class="active"><a href="#contacts"role="tab" data-toggle="tab">联系人</a></li>
    <li role="presentation" chat-type="group_list" contact-type="group_contact"><a onclick="LoadContacts();" href="#contacts" role="tab" data-toggle="tab">群组</a></li>
    <li role="presentation"><a href="#notifications"  role="tab" data-toggle="tab">通知</a></li>
    <li role="presentation"><a href="#settings"  role="tab" data-toggle="tab">配置</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="contacts" >

        <div class="chat-container row">
    <div class="contact-list col-md-3">
        <div class="list-group">
        </div>

    </div>
    <div class="chat-box col-md-9">
        <div class="chat-header">

        </div>
        <div class="chat-content"> content</div>
        <div class="chat-msg-sendbox">
            <div class="msg-box col-md-10">
                <textarea></textarea>
            </div>
            <div class="msg-box-btn col-md-2">
               <button type="button" class="btn btn-success">发送</button>
            </div>
        </div>
    </div>
</div>

    </div>
    <div role="tabpanel" class="tab-pane" id="groups">profile...</div>
    <div role="tabpanel" class="tab-pane" id="notifications">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

{% endblock %}

{% block bottom-js %}
<script>
//csrf ref
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
//end csrf ref

$(document).ready(function(){
        //load all contacts
        GLOBAL_SESSION_CACHE = {
            'single_contact':{},
            'group_contact':{}
        }
        LoadContacts();
        //var RefreshNewMsgs =  setInterval(function(){
        GetNewMsgs();
        //},31000);

            //send msg
        $("body").delegate("textarea", "keydown",function(e){
            if(e.which == 13) {//Enter key down
                //send msg button clicked
                var msg_text = $("textarea").val();
                if ($.trim(msg_text).length > 0){
                    console.log(msg_text);
                    SendMsg(msg_text);
                }
                //no wait the send_msg's call confirm msg
                AddSentMsgIntoChatBox(msg_text);
                $("textarea").val('');
            }
        });//end body
});//end doc ready
function AddRecvMsgToChatBox(msg_item){
    var msg_ele = "<div class='msg-item-recv'>" + "<p>" + msg_item.from_name + "   " + msg_item['timestamp'] + "</p>" +
                    "<p>" +  msg_item.msg + "</p>" +
                    "</div>";

    $(".chat-content").append(msg_ele);

    $('.chat-content').animate({
        scrollTop: $('.chat-content')[0].scrollHeight}, 500
    );//e
}
function GenerateNewMsgItem(msg_item){
    var msg_ele = "<div class='msg-item-recv'>" + "<p>" + msg_item.from_name + "   " + msg_item['timestamp'] + "</p>" +
                    "<p>" +  msg_item.msg + "</p>" +
                    "</div>";
    return msg_ele;
}

function AddSentMsgIntoChatBox(msg_text){
    var d = new Date();
    var send_time = d.getHours() + ":"+ d.getMinutes() + ":"+ d.getSeconds();
    var msg_ele = "<div class='msg-item-sent'>" + "<p>" + "{{ request.user.userprofile.name }}   " +
                    send_time + "</p>" +
                    "<p>" +  msg_text + "</p>" +
                    "</div>";
    $(".chat-content").append(msg_ele);

    $('.chat-content').animate({
        scrollTop: $('.chat-content')[0].scrollHeight}, 500
    );//e

}

function LoadContacts(){
    $.get("{% url 'load_contact_list' %}", function(callback){
        console.log(callback);
        var data = JSON.parse(callback);
        var current_tab = $(".nav-tabs li").filter(".active")[0];
        var chat_type = $(current_tab).attr("chat-type");
        var contact_type = $(current_tab).attr("contact-type");
        $(".contact-list .list-group").empty();
        $.each(data[chat_type], function(index, ele){
            var ele =  "<a href='#' onclick='OpenDialogBox(this);' class='list-group-item' contact_id='"+ ele.id +"' contact_type='"+contact_type +"' >" + ele.name +  "<span class='badge'>0</span></a>";
            $(".contact-list .list-group").append(ele);
        });//end each

    });//end get
}
function GetCsrfToken(){
    return $("input[name='csrfmiddlewaretoken']").val();
}
function OpenDialogBox(ele){
    var contact_id = $(ele).attr("contact_id");
    var contact_type = $(ele).attr("contact_type");
    var contact_name = $(ele).text();
    //dump current session contents
    DumpSession();

    var new_header = "<h4><span contact_id='" + contact_id + "'" + "contact_type='"+ contact_type+"'>Talking with " + contact_name +
                    "</span></h4>";
    $(".chat-header").html(new_header);
    $(".chat-content").html(LoadSession(contact_id,contact_type));

    //clear the unread msg num flags
    var unread_msg_num_ele = $(ele).find("span")[0];
    $(unread_msg_num_ele).text(0);

    $(unread_msg_num_ele).css("display","none");

}

function DumpSession(){
    var current_contact_id = $(".chat-header span").attr("contact_id");
    var current_contact_type= $(".chat-header span").attr("contact_type");
    //console.log($(".chat-content").html());
    console.log("contact id:::" +current_contact_id );
    if (current_contact_id){
        GLOBAL_SESSION_CACHE[current_contact_type][current_contact_id] =$(".chat-content").html();
    }
}
function DumpSession2(contact_id,contact_type,content){
    if (contact_id){
        GLOBAL_SESSION_CACHE[contact_type][contact_id] =content;
    }
}
function LoadSession(contact_id,contact_type){
    if (GLOBAL_SESSION_CACHE[contact_type].hasOwnProperty(contact_id) ){
        var session_html = GLOBAL_SESSION_CACHE[contact_type][contact_id];
    }else{
        var session_html = '';
    }
    return session_html;
    //$(".chat-content").html(session_html);
}

function SendMsg(msg_text){
    var contact_id = $(".chat-header span").attr("contact_id");
    console.log("contact_id" + contact_id);
    var contact_type = $(".chat-header span").attr("contact_type");
    var msg_dic = {
        'contact_type':contact_type,
        'to':contact_id,
        'from': "{{ request.user.userprofile.id }}",
        'from_name':"{{ request.user.userprofile.name }}",
        'msg':msg_text
    }
    //$.post("{% url 'send_msg' %}",{'data':JSON.stringify(msg_dic),'csrfmiddlewaretoken':GetCsrfToken()}, function(callback){
    $.post("{% url 'send_msg' %}",{'data':JSON.stringify(msg_dic)}, function(callback){
        console.log(callback);
    });//end post

}

function GetNewMsgs(){
    $.get("{% url 'get_new_msgs' %}",function(callback){
        console.log("new msgs:" + callback);
        var msg_list = JSON.parse(callback);
        var current_open_session_id = $(".chat-header span").attr("contact_id");
        var current_open_session_type = $(".chat-header span").attr("contact_type");
        $.each(msg_list, function(index,msg_item){
            if (msg_item.contact_type  == 'single_contact'){
                if (msg_item.contact_type == current_open_session_type){
                    if(msg_item.from == current_open_session_id){
                        AddRecvMsgToChatBox(msg_item);
                    }else{ // 代表这个session当前未被打开
                        var old_session_content = LoadSession(msg_item.from,msg_item.contact_type);
                        var new_msg_ele = GenerateNewMsgItem(msg_item);
                        var new_session_content  =old_session_content+ new_msg_ele;
                        DumpSession2(msg_item.from ,msg_item.contact_type,new_session_content)
                        UpdateUnreadMsgNums(msg_item.from ,msg_item.contact_type);
                    };//end if(msg_item.from == current_open_session_id)
                };//end if msg_item.contact_type == current_open_session_type
            }else{//for single contact
                if (msg_item.contact_type == current_open_session_type){

                    if (msg_item.to == current_open_session_id){
                        //current group dialog is opened...
                        AddRecvMsgToChatBox(msg_item);
                    }else{
                        var old_session_content = LoadSession(msg_item.to,msg_item.contact_type);
                        var new_msg_ele = GenerateNewMsgItem(msg_item);
                        var new_session_content  =old_session_content+ new_msg_ele;
                        DumpSession2(msg_item.to ,msg_item.contact_type,new_session_content);
                        UpdateUnreadMsgNums(msg_item.to ,msg_item.contact_type);

                    }
                }

            };// for group contact

        });//end each

        //start a new request again
        console.log("----run again....");
        GetNewMsgs();

    });//end get
}

function UpdateUnreadMsgNums(contact_id ,contact_type){
    var msg_num_ele = $(".contact-list a[contact_id='" + contact_id +"']").find("span")[0];
    $(msg_num_ele).text(   parseInt($(msg_num_ele).text()) + 1);
     $(msg_num_ele).show();
}

</script>
{% endblock %}

webqq聊天室制作完毕，有些功能还不太完善，但是给予聊天已经没有问题，