BBS項目分布搭建四(點贊點踩及評論功能準備)
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 %}
