1.绑定事件
1.使用jQuery，当点击点赞或者反对时，就触发设定的事件。
2.事件触发后要反对点击的点赞还是反对，使用hasClass判断具体的class是否存在，如果点赞中的diggit存在结果为真就设定为电站，结果为假就是反对，
3.获取到点赞文章的pk，在js中到的变量不能直接用{{article.pk}},原因是未定义，使用"{{ article.pk }}"
2.发送ajax请求
1.设定路由和方法，将点赞和反对，文章发送过去，同时注意csrf保护机制
data={article_id,is_up}
2.在url中添加路由
3.views中处理
1.接收到传过来的文章id和认定过的结果is_up，但is_up的类型为'true'，需要反序列化
2.得到用户对象 user=request.user
3.设置状态，来标识是第一次来点赞，如果不是第一次，就变换状态response={"state":True}
4.如果是第一次操作，在用户点赞表中添加用户对象，文章id和操作类型，并在文章表中将点赞数据+1
如果不是第一次操作，将状态设置为False，并获取到操作第一次的操作类型
5.数据存在字典中，返回时需要序列化 return JsonResponse(response)
4.响应结果给ajax
1.响应结果给ajax后，首先判断是否为操作是否为第一次
2.如果操作为第一次，判断是点赞还是踩灭，获取到响应页面上的值，将值加1
3.如果不是第一次提交，判断第一次提交的操作类型，显示相应的提示语
5.在js中返回指定页面
1.location.href = "/login/"
2.在js中改变图片标签的链接： $(this)[0].src += "?";
点赞功能代码
'''
{% extends 'base.html' %} 继承母板
{% block page-main %}
<div class="article-detail">
<h1>{{ article.title }}</h1>
<p>{{ article.articledetail.content|safe }}</p>
</div>
<div id="div_digg">
<div class="diggit action">
<span class="diggnum" id="digg_count">{{ article.up_count }}</span>
</div>
<div class="buryit action">
<span class="burynum" id="bury_count">{{ article.down_count }}</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips" style="color: red;"></div>
</div>
{% endblock %}
{% block page_js %}
{% csrf_token %}
<script>
$("#div_digg .action").on("click",function () {
//判断是点赞还是踩灭,注意不能是diggnum
var is_up=$(this).hasClass("diggit");
console.log(is_up);
//获取到文章id 在js中需要加引号
var article_id="{{ article.pk }}";
$.ajax({
url:"/blog/up_down/",
type:"post",
data:{
"is_up":is_up,
"article_id":article_id,
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(),
},
success:function(data){
alert(data);
//如果为真，说明是第一次操作
//console.log(data.state); 都可以使用
console.log(data["state"]);
if(data.state){
if(is_up){
var val=$("#digg_count").text(); //点赞加1
val=parseInt(val)+1;
console.log(val);
$("#digg_count").text(val);
}else{
var val=$("#bury_count").text();
val=parseInt(val)+1;
$("#bury_count").text(val); //踩加1
}
}else{
var val=66;
console.log(val);
if(data.first_action){
$("#digg_tips").html("您已经推荐过");
}else {
$("#digg_tips").html("您已经反对过");
}
}
}
}
)
})
</script>
{% endblock %}
'''
HTML
'''
from django.http import JsonResponse
import json
from django.db.models import F
def up_down(request):
if request.method =="POST":
rep=json.loads(request.POST.get("is_up")) #传过来的是字符串类型,将'true'转换成True
article_id=request.POST.get("article_id")
print(article_id)
print(rep,type(rep))
user=request.user
response={"state":True}
try:
# print("走了")
models.ArticleUpDown.objects.create(user=user,article_id=article_id,is_up=rep)
models.Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
# print("第一次")
###当点过赞后，再次点赞后，由于ArticleUpDown表中已经创建过这个用户，因此走except
except Exception as e:
response["state"]=False
response["first_action"]=models.ArticleUpDown.objects.filter(user=user,article_id=article_id).first().is_up
# print("第二次")
return JsonResponse(response) #response是个字典，要序列化处理
'''
Views