点赞点踩图标的制作
拷贝代码
{# 点赞点踩开始#}
<div id="div_digg">
<div class="diggit" onclick="votePost(17391141,'Digg')">
<span class="diggnum" id="digg_count">1</span>
</div>
<div class="buryit" onclick="votePost(17391141,'Bury')">
<span class="burynum" id="bury_count">0</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips">
</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.png') 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.png') 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 %}
拷贝图片
实现功能完整代码
路由’
# 点赞点踩
path('up_and_down/', views.up_and_down),
html
{# 点赞点踩开始#}
<div id="div_digg">
<div class="diggit action">
<span class="diggnum" id="digg_count">{{ article_detail.up_num }}</span>
</div>
<div class="buryit action">
<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>
{# 点赞点踩结束#}
{% endblock %}
{% block js %}
<script>
$(".action").click(function () {
var _this = $(this);
// 区分开到底点的是赞还是踩
// 如果返回是True ,说明是赞 否则是踩
var is_up = $(this).hasClass('diggit')
// 文章id
var article_id = '{{ article_detail.pk }}'
// 用户id， 后端从session；里获取
// 发起Ajax请求，把数据提交到Django的后端
$.ajax({
url: '/up_and_down/',
type: 'post',
data: {
is_up: is_up, article_id: article_id, csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (res) {
if (res.code == 200){
$("#digg_tips").html(res.msg);
// 要先拿到原来的数量，然后＋1， 再写进去
// 1.要拿到原来的值
var old_num = _this.children().text(); //string
_this.children().text(parseInt(old_num) + 1);
} else{
$("#digg_tips").html(res.msg);
}
}
})
})
</script>
{% endblock %}
视图函数
def up_and_down(request):
if request.method == 'POST':
# 1.定义返回给前端的数据格式
back_dic = {'code': 200, 'msg': '点赞成功'}
# 2.接收参数
is_up = request.POST.get('is_up')
article_id = request.POST.get('article_id')
print(is_up, type(is_up)) # true <class 'str'>
# 3.验证参数
if not request.session.get('username'):
back_dic['code'] = 1006
back_dic['msg'] = '<a href="/login/" style="color:red">请先登录</a>'
# 自己的文章自己不能点
# 先通过当前文章去查询谁写的，然后与当前登录用户比较
article_obj = models.Article.objects.filter(pk=article_id).first()
print(article_obj)
if article_obj.blog.userinfo.username == request.session.get(('username')):
back_dic['code'] = 1007
back_dic['msg'] = '宝贝啊，不能给自己支持'
return JsonResponse(back_dic)
# 验证一篇文章一个人只能点一次
# 根据文章id和用户id两个条件，去表里面查询，如果查到了，说明已经点过了，不能再点了
is_click = models.UpAndDown.objects.filter(article_id=article_id, user_id=request.session.get('id')).first()
if is_click:
back_dic['code'] = 1008
back_dic['msg'] = '你已经点过了'
return JsonResponse(back_dic)
# 4.入库
# 操作哪些表？
# 1、点赞点踩表 2.文章表： 点赞数 点赞数
# 这里需要要对is_up做反序列化
# jason.dumps json.loads
is_up = json.loads(is_up)
if is_up:
# 说明是点赞了
models.Article.objects.filter(pk=article_id).update(up_num=F('up_num') + 1)
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=article_obj, user_id=request.session.get('id'))
# models.UpAndDown.objects.create(is_up=is_up, article=article_obj)
return JsonResponse(back_dic)
