BBS项目分布搭建四(点赞点踩及评论功能)
1. 点赞点踩样式准备
# 在base.html文件中 head标签内 添加css模块：
{% block css %}
{% endblock %}
# 修改 article_detail.html内容：
{% extends 'base.html' %}
{% 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 %}
{% block content %}
<h1>{{ article_detail.title }}</h1>
<div class="article_content">
{{ article_detail.content|safe }}
</div>
{# 点赞点踩样式开始#}
<div class="clearfix">
<div id="div_digg">
<div class="diggit active">
<span class="diggnum" id="digg_count">{{ article_detail.up_num }}</span>
</div>
<div class="buryit active">
<span class="burynum" id="bury_count">{{ article_detail.down_num }}</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips" style="color: red;"></div>
<div class="error_msg" style="color: red"></div>
</div>
</div>
{# 点赞点踩样式结束#}
{% endblock %}
2. 前端逻辑书写
# 在base.html文件中 body标签内 添加：
{% block js %}
{% endblock %}
# 在 article_detail.html 添加js模块：
{% block js %}
<script>
$('.active').click(function () {
var is_up = $(this).hasClass('diggit'); // true false
var article_id = '{{ article_id }}';
// 发送ajax请求
$.ajax({
url: '/up_or_down/',
type: 'post',
data: {'is_up': is_up, article_id: article_id},
success: function (res) {
console.log(res);
}
})
})
</script>
{% endblock %}
# 在views.py中添加功能：
# 9. 点赞点踩
def up_or_down(request):
print(123)
# 添加路由：
# 点赞点踩表
url(r'^up_or_down/', views.up_or_down),
3. 后端逻辑实现
# 在views.py中添加 点赞点踩功能：
import json
from django.db.models import F
# 9. 点赞点踩
def up_or_down(request):
'''
1. 验证登录
2. 验证是不是自己发布的文章，自己的文章不能点击
3. 验证是否已经被点击过，如果点击过了，就不要在点了
4. 正常入库
4.1 点赞点踩表要操作
4.2 文章表也要操作
:param request:
:return:
'''
if request.method == 'POST':
user_id = request.session.get('id')
back_dic = {'status': 200, 'msg': '支持成功', 'data': {}}
# 1. 接收参数
is_up = request.POST.get('is_up') # true <class 'str'>
article_id = request.POST.get('article_id')
# print(is_up, type(is_up))
# 2. 验证参数是否登录
if not request.session.get('username'):
back_dic['status'] = 1010
back_dic['msg'] = '<a href="/login/" style="color: red">请先登录</a>'
return JsonResponse(back_dic)
# 验证是不是自己的文章
article_obj = models.Article.objects.filter(pk=article_id).first()
# 通过文章查用户，
if article_obj.blog.userinfo.username == request.session.get('username'):
# 当前点击的文章是自己的
back_dic['status'] = 1011
back_dic['msg'] = '不能点击自己的文章哦，宝贝~'
return JsonResponse(back_dic)
# 验证是否点击过,参考点赞点踩表
is_click = models.UpAndDown.objects.filter(article_id=article_id, user_id=user_id).first()
if is_click:
# 已经点过
back_dic['status'] = 1012
back_dic['msg'] = '你已经点过喽，宝贝~'
return JsonResponse(back_dic)
# 对传递过来的参数is_up做反序列话，需要转为布尔值
is_up = json.loads(is_up)
print(is_up, type(is_up))
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(is_up=is_up, article_id=article_id, user_id=user_id)
return JsonResponse(back_dic)
# 修改article_detail.html：
$('.active').click(function () {
var is_up = $(this).hasClass('diggit'); // true false
var article_id = '{{ article_id }}';
// 发送ajax请求
$.ajax({
url: '/up_or_down/',
type: 'post',
data: {'is_up': is_up, article_id: article_id},
success: function (res) {
console.log(res);
if (res.status == 200) {
layer.msg(res.msg)
} else if (res.status == 1010) {
$('.error_msg').append(res.msg)
} else {
layer.msg(res.msg)
}
}
})
})
# 添加路由 ：
# 点赞点踩表
url(r'^up_or_down/', views.up_or_down),
"""
注意：：：
所有路由 最好短的放上面 避免匹配不到对应路由就已经结束匹配！！！
"""
4. 前端逻辑实现
# 修改article_detail.html：
{% block js %}
<script>
$('.active').click(function () {
var is_up = $(this).hasClass('diggit'); // true false
var article_id = '{{ article_id }}';
var _this = $(this)
// 发送ajax请求
$.ajax({
url: '/up_or_down/',
type: 'post',
data: {'is_up': is_up, article_id: article_id},
success: function (res) {
console.log(res);
if (res.status == 200) {
$('.error_msg').text(res.msg);
var old_num = Number(_this.children().text());
_this.children().text(old_num + 1)
} else if (res.status == 1010) {
$('.error_msg').append(res.msg)
} else {
layer.msg(res.msg)
}
}
})
})
</script>
{% endblock %}
5. 评论样式准备
# 修改article_detail.html：
{# 点赞点踩样式结束#}
{# 评论样式开始#}
<div >
<p>
<span class="glyphicon glyphicon-comment"></span>发表评论
</p>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" class="btn btn-success" value="提交">
</p>
</div>
{# 评论样式结束#}
<div style="height: 1000px"></div>
{% endblock %}
