文章的添加
博客园打开需要拷贝的文章,右键检查--》选择cnblogs_post_body这一个div,然后复制outer HTML到admin后台文章表里面
最后需要在文章详情页的文章内容那一行添加一个|safe
点赞点踩制作
前端样式:
不会写,直接拷贝博客园的点赞点踩html和css样式
{# 点赞点踩样式开始:复制博客园的点赞点踩样式,拷贝其对应的out HTML和css到下面就行#}
<div class="clearfix">
<div id="div_digg">
<div class="diggit action">
<span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
</div>
<div class="buryit action">
<span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips" style="color: red">
</div>
</div>
</div>
{# 点赞点踩样式结束#}
{% block css %}
<style>
#div_digg {
float: right;
margin-bottom: 10px;
margin-right: 30px;
font-size: 12px;
width: 125px;
text-align: center;
margin-top: 10px;
}
.diggit {
float: left;
width: 46px;
height: 52px;
background: url(/static/img/upup.gif) no-repeat;
text-align: center;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
.buryit {
float: right;
margin-left: 20px;
width: 46px;
height: 52px;
background: url(/static/img/downdown.gif) no-repeat;
text-align: center;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
.clear {
clear: both;
}
.diggword {
margin-top: 5px;
margin-left: 0;
font-size: 12px;
color: #808080;
}
</style>
{% endblock %}
向后端提交点赞点踩数据:
// 思考然后判断用户是点了赞还是点了踩??
// 法1:给点赞和点踩的div分别绑定一个事件,以此来判断用户点赞点踩;法2:给div绑定同一个类属性action,在内部判断是否有diggit或者buryit来判断点赞还是点踩、
$('.action').click(function () {
// 保存一下用户是否点赞还是点踩
let isUp = $(this).hasClass('diggit');
// 向后端发送ajajx提交用户是否点赞点踩数据
let div = $(this);
$.ajax({
type: 'post',
url: '/up_or_down/',
// 提交数据:哪个用户为那篇文章点赞了还是点踩了,用户后端有了不用提交了
data: {
'article_id': '{{ article_obj.pk }}',
'is_up': isUp,
'csrfmiddlewaretoken': '{{ csrf_token }}',
},
success: function (args) {
if (args.code == 1000) {
$('#digg_tips').text(args.msg)
let oldNum = div.children().text();
div.children().text(Number(oldNum) + 1)
} else {
$('#digg_tips').html(args.msg)
}
}
})
})
后端逻辑代码:
# 八、点赞点踩视图函数
def up_or_down(request):
"""
逻辑:
1.判断是否登录(未登录需要先登录)
2.判断用户点赞是否是自己的文章(自己不能给自己文章点赞)
3.判断用户是否已经给该文章点过了(点过就不能点了)
4.操作数据库存储数据
:param request:
:return:
"""
# 1.判断是否为ajax请求
if request.method == 'POST':
# 2.定义一个回调字典
back_dic = {'code':1000,'msg':''}
# 3.获取提交的数据
article_id = request.POST.get('article_id')
is_up = request.POST.get('is_up') # 注意结束的是字符串形式需要转为布尔值形式
is_up = json.loads(is_up)
# 4.判断是否登录(未登录需要先登录)
if request.user.is_authenticated:
# 5.判断用户点赞是否是自己的文章(自己不能给自己文章点赞)根据当前文章主键查出该文章的用户与request.user比对
article_obj = models.Article.objects.filter(pk=article_id).first()
user_obj = article_obj.blog.userinfo
if not request.user == user_obj:
# 6.判断用户是否已经给该文章点过了(点过就不能点了)查点赞点踩表是否有对应数据
is_click = models.UpAndDown.objects.filter(article=article_obj,user=request.user)
if not is_click:
# 7.操作数据库存储数据,注意article表里的数据也要同步
# 8.判断是点赞了还是点踩了
if is_up:
models.Article.objects.filter(pk=article_id).update(up_num=F('up_num') + 1)
back_dic['msg'] = '点赞成功'
else:
models.Article.objects.filter(pk=article_id).update(down_num=F('down_num')+1)
back_dic['msg'] = '点踩成功'
models.UpAndDown.objects.create(user=request.user,article=article_obj,is_up=is_up)
else:
back_dic['code'] = 1001
back_dic['msg'] = '您已经支持过了'
else:
back_dic['code'] = 1002
back_dic['msg'] = '您不能给自己文章点赞点踩'
else:
back_dic['code'] = 1003
back_dic['msg'] = '<a href="/login/">请先登录</a>'
return JsonResponse(back_dic)
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:文章的点赞点踩制作 - Python技术站