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是数据的一条记录
点赞{{item.favor_count}}
//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,对这个标签做添加
前端:
-----------------------------------------------------------------------------------
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 = '' + v.fields.content + '
';
//这里找到.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)
提交评论,实时在页面上显示提交的内容(需提交到数据库中),同时自动更新评论的数量(也要更新数据库,并将数量返回给前台)
前端:
-----------------------------------------------------------------------------------
{% endfor %}
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 = '' + callback.data.username + ':' + callback.data.content + '---' + callback.data.create_date + '
'; $(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 = 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))2017/05/31第7课 BBS功能之Web聊天室 65minutes 思路: ----------------------------------------------------------------------------------- 文本框里输入信息,通过提交=====>触发一个函数=====>通过jQuery得到内容=====>发送到后台, 通过Ajax方式=====>后台根据获取的内容,加上时间和用户存到数据库中,并将相关内容再返回给 前台(文本的内容可以不返回)=====>前台接收到后台的数据,通过循环的方式,返回到显示框中 =====>可通过jQuery的层级查找的方式,找到Html标签,将内容Append到标签里 其中: 后台取数据,第一次时取最后10条,先倒序,得到最后的ID=====>第二次取的时间,这是另一个Ajax, 以这个ID为准,取大于此ID的数据,这样就可能取到最新的内容 另外聊天窗口每2秒更新一次,将最新的数据取出来,可以先定义一个变量为Ture,执行后变为False
前台:
-----------------------------------------------------------------------------------
//这是第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 = '' + v.username + ':' + v.content + '---' + v.create_date + '
';
//这里找到.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 = '' + callback.data.username + ':' + callback.data.content + '---' + callback.data.create_date + '
';
$(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');
}
}
function SendMsg(){
/*
简单的写法
获取Message的内容
var value = $('#message').val()
将内容添加到Pool中
$('#chatpool').append(value)
*/
//正常思路:将要发的内容通过Ajax发送到后台存放到数据库中
//再从数据库获取时间/内容/用户返回给前台
var value = $('#message').val()
value = $('#message').val('')
$.ajax({
url:'/subchat/',
data:{data:value},
type:'POST',
success:function(callback){
var callback = jQuery.parseJSON(callback);
if(callback.status == 1){
var now = callback.data.create_date;
var name = callback.data.username;
//这里定义的ID是为了后续取数据时,系统会生成两条同样的数据,定义了最后的ID后,就更新的下面getchat2中的ID
window.last_id = callback.data.id;
var template =''+name+'---'+now+'
'+value+'
'
$('#chatpool').append(template) ;
//先用DOM获取scroll的高度
var height = document.getElementById('chatpool').scrollHeight();
//再将scrollTop设置为离顶部这么高,这样就让流动条在最下面
$('#chatpool').scrollTop(height);
}else{
alert('请求异常。');
}
}
})
}
setInterval('going()',2000)
window.is_first = true
function going(){
if(window.is_first){
$.ajax({
url:'/getchart/',
type:'POST',
success:function(callback){
console.log(callback);
callback = jQuery.parseJSON(callback);
callback = callback.reverse()
window.last_id = callback[0].id
$.each(callback,function(k,v){
var now = v.create_date;
var name = v.user__username;
var value = v.content
var template =''+name+'---'+now+'
'+value+'
'
$('#chatpool').append(template)
});
window.is_first = false;
//先用DOM获取scroll的高度
var height = document.getElementById('chatpool').scrollHeight()
//再将scrollTop设置为离顶部这么高,这样就让流动条在最下面
$('#chatpool').scrollTop(height)
}
});
}else{
$.ajax({
url:'/getchart2/',
type:'POST',
data:{lastid:window.last_id}
success:function(callback){
console.log(callback);
callback = jQuery.parseJSON(callback);
if(callback.length>0){
window.last_id = callback[callback.length-1].id
$.each(callback,function(k,v){
var now = v.create_date;
var name = v.user__username;
var value = v.content
var template =''+name+'---'+now+'
'+value+'
'
$('#chatpool').append(template)
});
}
//先用DOM获取scroll的高度
var height = document.getElementById('chatpool').scrollHeight()
//再将scrollTop设置为离顶部这么高,这样就让流动条在最下面
$('#chatpool').scrollTop(height)
}
})
后台:
-----------------------------------------------------------------------------------
def subchat(request):
ret = {'status':0,'data':'','message':''}
try:
value = request.POST.get('data')
userobj = Admin.objects.get(id=request.session['current_user_id'])
chatobj = Chat.objects.create(content=value,user=userobj)
ret['status'] = 1
ret['data']= {'id':chatobj.id,
'username':userobj.username,
'content':chatobj.content, #这个可以不用返回,前端自己就可以获取
'create_date':chatobj.create_date.strftime('%Y-%m-%d %H:%M:%S')}
except Exception,e:
ret['message'] = e.message
return HttpResponse(json.dumps(ret))
#用于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)
reply_list = json.dumps(reply_list,cls=CJsonEncoder)
return HttpResponse(reply_list)
#用于前台提供评论内容
def getchart(request):
chatlist = Chat.objects.all().order_by('-id')[0:10].values('id','content','user__username','create_date')
chatlist = list(chatlist)
chatlist = json.dumps(chatlist,cls=CJsonEncoder)
return HttpResponse(chatlist)
def getchart2(request):
lastid = request.POST.get('lastid')
chatlist = Chat.objects.all().filter(id__gt=lastid).values('id','content','user__username','create_date')
chatlist = list(chatlist)
chatlist = json.dumps(chatlist,cls=CJsonEncoder)
return HttpResponse(chatlist)
作业:
-----------------------------------------------------------------------------------
评论样式更新
加上分页
装饰器使用,想评论可能弹跳出框,先登录,再发评论
自己可以写一个博客,将所有的内容放到上面
前台
后台
# -*- 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
# Create your views here.
def index(request):
all_data = News.objects.all()
return render_to_response('index.html',{'data':all_data})
#用于点赞功能,点击时写到数据库中,并将数据返回给前台
def addfavor(request):
ret = {'status':0,'data':'','message':''}
try:
#这块有时会出现Sock错误error: [Errno 10053]
id = request.POST.get('id')
newsObj = News.objects.get(id=id)
temp = newsObj.favor_count + 1
newsObj.favor_count = temp
newsObj.save()
ret['status'] = 1
ret['data'] = temp
except Exception,e:
print 'error'
ret['message'] = '页面出错了'
print ret['message']
return HttpResponse(json.dumps(ret))
'''
#外键取数据可以用外键名称__id来操作,查询用点
#如果数据中有时间格式,Json无法序列化
#可使用Django的专用包来解决 serializers
#serializers.serialize(format, queryset)
#不能通过Reply('#reply_detail来访问Part4的内容,这样点击后会改变所有
#要通过子标签的父标签的下一个标签来找到$(doc).parent().netx()
$(doc).parent().next().first()找到子类第一个标签,可用Appen添加内容,
或ToggleClass来去掉CSS
Jquery用来迭代数据,obj是一个序列
$.each(obj,function(k,v){
temp = v.fields
})
'''
def login(request):
if request.methos == 'POST':
username = request.POST.get('usernmae')
password = request.POST.get('password')
try:
#currentObj得到是一个对象
currentObj = Admin.objects.get(username=username,
passsword=password)
except Exception,e:
currentObj = None
if currentObj:
request.session['current_user_id'] = currentObj.id
return redirect('/index')
else:
return redirect('/login')
return render_to_response('login.html')
def submitreply(request):
ret = {'status':0,'data':'','message':''}
try:
id = request.POST.get('nid')
data = 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))
def subchat(request):
ret = {'status':0,'data':'','message':''}
try:
value = request.POST.get('data')
userobj = Admin.objects.get(id=request.session['current_user_id'])
chatobj = Chat.objects.create(content=value,user=userobj)
ret['status'] = 1
ret['data']= {'id':chatobj.id,
'username':userobj.username,
'content':chatobj.content, #这个可以不用返回,前端自己就可以获取
'create_date':chatobj.create_date.strftime('%Y-%m-%d %H:%M:%S')}
except Exception,e:
ret['message'] = e.message
return HttpResponse(json.dumps(ret))
#用于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)
reply_list = json.dumps(reply_list,cls=CJsonEncoder)
return HttpResponse(reply_list)
#用于前台提供评论内容
def getchat(request):
chatlist = Chat.objects.all().order_by('-id')[0:10].values('id','content','user__username','create_date')
chatlist = list(chatlist)
chatlist = json.dumps(chatlist,cls=CJsonEncoder)
return HttpResponse(chatlist)
def getchat2(request):
lastid = request.POST.get('lastid')
chatlist = Chat.objects.all().filter(id__gt=lastid).values('id','content','user__username','create_date')
chatlist = list(chatlist)
chatlist = json.dumps(chatlist,cls=CJsonEncoder)
return HttpResponse(chatlist)