首页 > 代码库 > Python学习day14 BBS功能和聊天室
Python学习day14 BBS功能和聊天室
Created on 2017年5月15日 @author: louts
第1课 作业讲解及装饰器使用 28minutes
def check(func):
def rec(request,*args,**kargs):
return func(request,*args,**kargs)
return rec
@check
def index(request,):
print request
第2课 自定义装饰器扩展使用 18minutes
第3课
第4课 BBS功能分析及介绍 37minutes
分析网站的架构
自己写数据库Models
参考网站的前端来写一个页面
这节完成了页面头部的代码
第5课 BBS功能之点赞 40minutes
按HTML分几个部分
页头，内容，页尾
内容中按标题，内容，通过迭代数据库内容显示出来
参考页面写CSS和jQuery
可以在函数中定义好几个参数
item是数据的一条记录
<a href=http://www.mamicode.com/‘‘ onclick=‘Favor(this,{{item.id}})‘>点赞{{item.favor_count}}
<script type=‘text/javascript‘>
//jquery还是有错误，无法正常使用20170517
function Favor(doc,id){
$.ajax({
//注意Ajax里不能用冒号，要用逗号
url:‘/addfavor/‘,
data:{id:id},
type:‘POST‘,
sussess:function(arg){
console.log(arg);
var temp = ‘赞‘ + arg;
$(doc).text(temp);
}
})
2017/05/22
第6课 BBS功能之评论一 53minutes
思路：
点击 评论，触发Reply，Reyly去找父标签的下一个兄弟标签的第一个标签，对这个标签操作－－－目前这里实际操作失败
在这个标签下，定义输入框，和历史记录（记录用Ajax到数据库里取），对这个标签初始CSS为display:None
可以在这个标签里设定两个CSS，用于区别后台数据和当前输入框，找到历史的CSS，对这个标签做添加
前端：
-----------------------------------------------------------------------------------
<div class=‘part3‘>
<a href=http://www.mamicode.com/‘‘ onclick=‘Favor(this,{{item.id}})‘>点赞{{item.favor_count}}
<a href=http://www.mamicode.com/‘‘ id=‘id1‘ onclick=‘Reply()‘>评论{{item.reply_count}}
<span>{{item.create_date|date:‘Y-m-d H:i:s‘}}</span>
</div>
<!-- 下面自定义一个属性has-input用于JAVA里的判断是否有穿入框了 -->
<div has-input=0 class=‘part4 hide‘>
<!--这底下两个CSS用于下面Java的处理 -->
<div class=‘replys‘></div>
<div class=‘input‘>
<lable>请输入内容：</lable>
<textarea></textarea>
<input type=‘button‘ value=http://www.mamicode.com/‘提交‘>
</div>
</div>
function Reply(doc,id){
$.ajax(){
url:‘/getreply/‘,
type:‘POST‘,
data:{nid,id},
sussess:function(callback){
//callback是后台返回的数据
console.log(callback;)
var obj = jQuery.parseJSON(callback);
$.each(obj,function(k,v){
//当前标签和父亲标签的下一个标签的第一个标签
//$(doc).parent().next().first().text(‘0000‘)
var temp = ‘<p>‘ + v.fields.content + ‘</p>‘;
//这里找到.reply的CSS，先清除当前的内容，不然会出现重复
$(doc).parent().next().find(‘.replys‘).empty();
//这里找到.reply的CSS，再将返回的数据插进去
$(doc).parent().next().find(‘.replys‘).append(temp);
})；
//这里点击时会去掉当前的hide的CSS
$(doc).parent().next().toggleClass(‘hide‘);
}
}
//console.log($(‘#content‘).attr(‘has-input‘));
//$(‘#rid‘).removeClass(‘part4‘);
//toggleClass反复的加减CSS
//$(‘#content‘).toggleClass(‘hide‘);
var html = $(‘#id1‘).parent().next().first()
console.log(html)
//removeClass(‘hide‘);
}
后端：
-----------------------------------------------------------------------------------
def getreply(request):
id = request.POST.get(‘nic‘)
#这里可直接用外键__字段获取另一张表的内容 user__username new__id
reply_list = Reply.objcects.filter(new__id=id).values(‘id‘,‘content‘,‘user__username‘,‘create_date‘)
#json 无法序列化一个时间，可用serializers来操作
#serialize(format, queryset, **options)
reply_list = serializers.serialize(‘json‘, reply_list)
return HttpResponse(reply_list)
2017/05/24
第7课 BBS功能之评论二 55minutes
#用于Jason序列化时间格式
class CJsonEncoder(json.JSONEncoder):
def default(self,obj):
if isinstance(obj,datetime.datetime):
return obj.strftime(‘%Y-%m-%d %H:%M:%S‘)
elif isinstance(obj,date):
return obj.strftime(‘%Y-%m-%d‘)
else:
return json,JSONEncoder.default(self,obj)
def getreply(request):
id = request.POST.get(‘nic‘)
#这里可直接用外键__字段获取另一张表的内容 user__username new__id
reply_list = Reply.objcects.filter(new__id=id).values(‘id‘,‘content‘,‘user__username‘,‘create_date‘)
#json 无法序列化一个时间，可用serializers来操作
#serialize(format, queryset, **options)
‘‘‘
reply_list = serializers.serialize(‘json‘, reply_list)
return HttpResponse(reply_list)
‘‘‘
#用自己定义的类来处理时间格式
reply_list = list(reply_list)
json.dumps(reply_list,cls=CJsonEncoder)
return HttpResponse(reply_list)
提交评论，实时在页面上显示提交的内容（需提交到数据库中），同时自动更新评论的数量（也要更新数据库，并将数量返回给前台）
前端：
-----------------------------------------------------------------------------------
<div class=‘part3‘>
<a href=http://www.mamicode.com/‘‘ onclick=‘Favor(this,{{item.id}})‘>点赞{{item.favor_count}}
<a href=http://www.mamicode.com/‘‘ class=‘reply‘ onclick=‘Reply(this,{{item.id}})‘>评论{{item.reply_count}}
<span>{{item.create_date|date:‘Y-m-d H:i:s‘}}</span>
</div>
<!-- 下面自定义一个属性has-input用于JAVA里的判断是否有穿入框了 -->
<div has-input=0 class=‘part4 hide‘>
<!--这底下两个CSS用于下面Java的处理 -->
<div class=‘replys‘></div>
<div class=‘input‘>
<lable>请输入内容：</lable>
<textarea></textarea>
<!-- 这里添加item.id,是提交的时候要关联到这个新闻，不能放到其他的新闻里去
这里的this,一样通过此标签的上一个标签，就是提交的内容 -->
<input type=‘button‘ value=http://www.mamicode.com/‘提交‘ onclick=‘Submit(this,{{item.id}})‘>
</div>
</div>
{% endfor %}
</div>
<!-- 遮罩层开始 -->
<div id=‘shade‘ class=‘shade hide‘></div>
<!-- 遮罩层结束 -->
<!-- 加载层开始 -->
<div id=‘loading‘ class=‘loading hide‘></div>
<!-- 加载层结束 -->
function Submit(doc,id){
//上一个标签
var value = http://www.mamicode.com/$(doc).prev().val();
//提交后清除输入框
$(doc).prev().val(‘‘);
$(‘#shade,loading‘).removeClass(‘hide‘);
$.ajax(){
url:‘/submitreply/‘,
type:‘POST‘,
data:{nid:id,data:value},
sussess:function(callback){
//callback是后台返回的数据
console.log(callback;)
var callback = jQuery.parseJSON(callback);
if (callback.status==1){
//把数据Append到回复列表中
temp = ‘<p>‘ + callback.data.username + ‘:‘ + callback.data.content + ‘---‘ + callback.data.create_date + ‘</p>‘;
$(doc).parent().prev().append(temp)
//底下两行代码可以让评论数实时的更新，添加一条时自动计数
//先提交到后台，正常保存后自动加1，同时将新的内容和数值提交到前台
count = ‘评论‘ + callback.data.reply_count
$(doc).parent().parent().prev().find(‘.reply‘).text(count)
}else{
alert(‘失败‘)}
}
$(‘#shade,loading‘).addClass(‘hide‘);
}
}
后端：
-----------------------------------------------------------------------------------
def submitreply(request):
ret = {‘status‘:0,‘data‘:‘‘,‘message‘:‘‘}
try:
id = request.POST.get(‘nid‘)
data = http://www.mamicode.com/request.POST.get(‘data‘)
#获取新闻的对象
newsObj = News.objects.get(id=id)
obj = Reply.objects.create(content=data,
user=Admin.objects.get(id=request.session[‘current_user_id‘]),
new=newsObj)
#评论保存后同时要更新闻的评论条目，自动加1
temp = newsObj.reply_count + 1
newsObj.reply_count = temp
newsObj.save()
#将数量放到前端的字典中
ret[‘data‘]= {‘reply_count‘:temp,‘content‘:obj.content,
‘user__name‘:obj.user.username,
‘create_date‘:obj.create_date.strftime(‘%Y-%m-%d %H:%M:%S‘)}
ret[‘status‘] = 1
except Exception,e:
ret[‘message‘] = e.message
return HttpResponse(json.dumps(ret))
后台
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render,render_to_response,HttpResponse, redirect
from models import *
import json
from django.core import serializers
from json.encoder import JSONEncoder
from django.contrib.redirects.models import Redirect
# Create your views here.
def index(request):
all_data = http://www.mamicode.com/News.objects.all()>
前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel=‘stylesheet‘ href=http://www.mamicode.com/‘/static/css/common.css‘>"/" class="digg-logo"></a>
<div class=‘header-menu‘>
<a href=‘/index‘ class=‘tb active‘>全部</a>
<a href=‘/index‘ class=‘tb‘>1024区</a>
<a href=‘/index‘ class=‘tb‘>老男孩</a>
<a href=‘/index‘ class=‘tb‘>IT民工</a>
</div>
</div>
<div class=‘header-search‘></div>
</div>
<div class=‘pg-body‘>
{% for item in data %}
<br>
<div class=‘part1‘>
<a href=‘{{item.url}}‘>{{item.title}}</a>
</div>
<div class=‘part2‘>
{{item.summary}}
</div>
<div class=‘part3‘>
<a href=‘‘ onclick=‘Favor(this,{{item.id}})‘>点赞{{item.favor_count}}</a>
<a href=‘‘ class=‘reply‘ onclick=‘Reply(this,{{item.id}})‘>评论{{item.reply_count}}</a>
<span>{{item.create_date|date:‘Y-m-d H:i:s‘}}</span>
</div>
<!-- 下面自定义一个属性has-input用于JAVA里的判断是否有穿入框了 -->
<div has-input=0 class=‘part4 hide‘>
<!--这底下两个CSS用于下面Java的处理 -->
<div class=‘replys‘></div>
<div class=‘input‘>
<lable>请输入内容：</lable>
<textarea></textarea>
<!-- 这里添加item.id,是提交的时候要关联到这个新闻，不能放到其他的新闻里去
这里的this,一样通过此标签的上一个标签，就是提交的内容 -->
<input type=‘button‘ value=‘提交‘ onclick=‘Submit(this,{{item.id}})‘>
</div>
</div>
{% endfor %}
</div>
<!-- 遮罩层开始 -->
<div id=‘shade‘ class=‘shade hide‘></div>
<!-- 遮罩层结束 -->
<!-- 加载层开始 -->
<div id=‘loading‘ class=‘loading hide‘></div>
<!-- 加载层结束 -->
<div class=‘pg-buttom‘></div>
<script src=‘/static/jquery/jquery-1.12.4.js‘></script>
<script type=‘text/javascript‘>
//jquery还是有错误，无法正常使用20170517
function Favor(doc,id){
$.ajax({
//注意Ajax里不能用冒号，要用逗号
url:‘/addfavor/‘,
data:{id:id},
type:‘POST‘,
sussess:function(arg){
var obj = jQuery.parseJSON(arg);
//console.log(obj);
if(obj.status==1){
var temp = ‘赞‘ + obj.data;
$(doc).text(temp);
}else{
//出错的时候未能正常显示出来
alert(obj.message)
}
}
})
}
/*
这里测试始终不成功，不能看到Lable里值，不能去掉CSS
function Reply(content,id){
//console.log($(‘#content‘).attr(‘has-input‘));
//$(‘#rid‘).removeClass(‘part4‘);
//toggleClass反复的加减CSS
//$(‘#content‘).toggleClass(‘hide‘);
var html = $(‘#id1‘).parent().next().first()
console.log(html)
//removeClass(‘hide‘);
} */
/* 这是第6课的内容
function Reply(doc,id){
$.ajax(){
url:‘/getreply/‘,
type:‘POST‘,
data:{nid,id},
sussess:function(callback){
//callback是后台返回的数据
console.log(callback;)
var obj = jQuery.parseJSON(callback);
$.each(obj,function(k,v){
//当前标签和父亲标签的下一个标签的第一个标签
//$(doc).parent().next().first().text(‘0000‘)
var temp = ‘<p>‘ + v.fields.content + ‘</p>‘;
//这里找到.reply的CSS，先清除当前的内容，不然会出现重复
$(doc).parent().next().find(‘.replys‘).empty();
//这里找到.reply的CSS，再将返回的数据插进去
$(doc).parent().next().find(‘.replys‘).append(temp);
})；
//这里点击时会去掉当前的hide的CSS
$(doc).parent().next().toggleClass(‘hide‘);
}
}
//console.log($(‘#content‘).attr(‘has-input‘));
//$(‘#rid‘).removeClass(‘part4‘);
//toggleClass反复的加减CSS
//$(‘#content‘).toggleClass(‘hide‘);
var html = $(‘#id1‘).parent().next().first()
console.log(html)
//removeClass(‘hide‘);
}
*/
//这是第7课的内容
function Reply(doc,id){
$.ajax(){
url:‘/getreply/‘,
type:‘POST‘,
data:{nid:id},
sussess:function(callback){
//callback是后台返回的数据
console.log(callback;)
var obj = jQuery.parseJSON(callback);
//放在这里，不会每次都清空掉，这样可以显示所有记录
$(doc).parent().next().find(‘.replys‘).empty();
$.each(obj,function(k,v){
//当前标签和父亲标签的下一个标签的第一个标签
//$(doc).parent().next().first().text(‘0000‘)
temp = ‘<p>‘ + v.username + ‘:‘ + v.content + ‘---‘ + v.create_date + ‘</p>‘;
//这里找到.reply的CSS，先清除当前的内容，不然会出现重复，这样只会显示最新的内容，正常要放到循环外面
//$(doc).parent().next().find(‘.replys‘).empty();
//这里找到.reply的CSS，再将返回的数据插进去
$(doc).parent().next().find(‘.replys‘).append(temp);
})；
//这里点击时会去掉当前的hide的CSS
$(doc).parent().next().toggleClass(‘hide‘);
}
}
}
function Submit(doc,id){
//上一个标签
var value = $(doc).prev().val();
//提交后清除输入框
$(doc).prev().val(‘‘);
$(‘#shade,loading‘).removeClass(‘hide‘);
$.ajax(){
url:‘/submitreply/‘,
type:‘POST‘,
data:{nid:id,data:value},
sussess:function(callback){
//callback是后台返回的数据
console.log(callback;)
var callback = jQuery.parseJSON(callback);
if (callback.status==1){
//把数据Append到回复列表中
temp = ‘<p>‘ + callback.data.username + ‘:‘ + callback.data.content + ‘---‘ + callback.data.create_date + ‘</p>‘;
$(doc).parent().prev().append(temp)
//底下两行代码可以让评论数实时的更新，添加一条时自动计数
//先提交到后台，正常保存后自动加1，同时将新的内容和数值提交到前台
count = ‘评论‘ + callback.data.reply_count
$(doc).parent().parent().prev().find(‘.reply‘).text(count)
}else{
alert(‘失败‘)}
}
$(‘#shade,loading‘).addClass(‘hide‘);
}
}
</script>
</body>
</html>
Python学习day14 BBS功能和聊天室