python webqq机器人_python模拟开发WebQQ（二）

前端页面设计

前端主要采用bootstrap和jquery开发，聊天室的页面展示代码在template/webqq/dashboard.html

主要设计分为：

对data_type的切换是联系人还是群组，

联系人搜索和列表的设计，

联系人列表通过通过for循环取出

对在和谁聊天名字的显示，

聊天内容和输入框img，

以及登录页面。

主要代码

• 联系人
• 群组

{% for contact in request.user.userprofilehpy.friends.select_related %}

0

{{ contact.name }}

{% endfor %}

img

...

...

效果展示

用jquery实现选中聊天对象变色以及将把聊天人是谁赋值给dialog-box-head

$(document).ready(function(){

//用递归，结束这个线程在进行下一个，不用for

GetNewMsg_hpy();

/*不用setInterval每次用一个线程

RefreshMsgs = setInterval(function(){

//定时器3秒向后端请求

GetNewMsg_hpy();

},3000);*/

$("#contact-list a").click(function(){

//点中与谁聊天的颜色改变，并且把名字赋予dialog-box-head

$ (this).addClass("active");

$(this).children("span").addClass("hide");

$(this).children("span").text("0");

$(this).siblings().removeClass("active");//同级别siblings,切换聊天人

//console.log("hello");

SwitchChatBoxhpy(this);

});

});