1.点赞样式的构建/点赞事件的绑定

点赞人即当前登录人；评论人即当前当前登录人。

article_detail.html

{% extends "base.html" %}{
    % block content %}{
    #    {% load my_tags %}#}{
   #    {% multi_tag 3 9 %}#}    
     
        
      
{
   { article_obj.title }}
  //文章标题     　　 
      
        //文章内容        　　{
    { article_obj.content |safe }} {
   # 加这个是为了告诉django的模板不要给我做任何转义，为了安全性#}    　　
      
    　　
      
        //点赞 ,这一套点赞，再给它们加上样式        　　
       
         //点赞，            　　
        {
      {article_obj.up_count}} //不要把点赞数写成1，这样就写死了        　　
       
        　　
       
         //踩灭；要给点赞和踩灭同时绑定ajax，同时起个名字action            　　
        {
      {article_obj.down_count}}        　　
       
        　　
       
        　　
       
    　　
      
 　　
     
    {
    % endblock %}

 

base.html

    
             
         
         
          //先引入它
     
    
      
        
       
            {
   { blog.title }}            管理        
    
      
     
     
    
      
        
       
                    {
    % load my_tags %}            {
    % get_classification_style username %}        
       
        
       
                   {
    % block content %}  {
   # 写个块留着扩展用#}            {% endblock %}        
       
    
      
     

article_detail.css（点赞样式的）

.article_info .title{    margin-bottom: 20px;}#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/font/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/font/downdown.gif") no-repeat;    text-align: center;    cursor: pointer;    margin-top: 2px;    padding-top: 5px;}.clear {    clear: both;  //清除浮动}

哪个用户对那篇文章进行了点赞，发Ajax请求，发生True or False

 

home_site.css

*{margin:0;padding:0;}.header{    width:100%;    height: 60px;    background-color: #369;}.header .title{    font-size: 18px;    font-weight: 100;    line-height: 60px;    color: white;    margin-left: 15px;    margin-top: -10px;;}.backend{    float:right;    color: white;    text-decoration: none;    font-size: 16px;    margin-right:10px;    margin-top: 10px;;}.pub_info{    margin-top: 10px;    color: darkgrey;}.menu{    margin-top: 20px;}

2. 文章点赞的保存

views.py

#点赞import jsondef digg(request):    print(request.POST)    article_id = request.POST.get("article_id")  #应该传布尔值，反序列化下，而不是字符串    is_up = json.loads(request.POST.get("is_up")) #它拿到的是字符串“True”,传的时候永远是一个真值，要反序列化传一个布尔值；    #点赞人即当前登录人    user_id = request.user.pk    ard = models.ArticleUpDown.objects.create(user_id=user_id, article_id=article_id,is_up=is_up)    return HttpResponse("ok")

点赞————>>>

3. 文章点赞数的数据同步

再次访问点赞这个页面时，应该保持这个点赞数。--->>> 在创建点赞记录的时候同时也要对文章进行更新。

#点赞import jsonfrom django.db.models import Fdef digg(request):    print(request.POST)    article_id = request.POST.get("article_id")    is_up = json.loads(request.POST.get("is_up")) #字符串的“True”,是一个布尔值    #点赞人即当前登录人    user_id = request.user.pk    ard = models.ArticleUpDown.objects.create(user_id=user_id, article_id=article_id,is_up=is_up)    queryset = models.Article.objects.filter(pk=article_id) #拿到这篇文章     if is_up:        queryset.update(up_count=F("up_count")+1) #对这篇文章点赞数进行更新     else:        queryset.update(down_count=F("down_count")+1)    return HttpResponse("ok")

 

4. 文章点赞的提示重复操作

#点赞import jsonfrom django.db.models import Ffrom django.http import JsonResponsedef digg(request):    print(request.POST)    article_id = request.POST.get("article_id")    is_up = json.loads(request.POST.get("is_up")) #字符串的“True”,是一个布尔值    #点赞人即当前登录人    user_id = request.user.pk    obj = models.ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first() //过滤，用户对文章做了什么操作； 拿到这个对象。    response={
   "state":True} #默认True    if not obj:        ard = models.ArticleUpDown.objects.create(user_id=user_id, article_id=article_id,is_up=is_up)        queryset = models.Article.objects.filter(pk=article_id)        if is_up:            queryset.update(up_count=F("up_count")+1)        else:            queryset.update(down_count=F("down_count")+1)    else:        response["state"] = False        #True表示你已经赞支持过了，False表已经踩过了        response["handled"] = obj.is_up  #字典再加一个信息；过滤出的obj拿到is_up    return JsonResponse(response)

 

 article_detail.html

5. 文章点赞数的Ajax更新

渲染有两种方式： render的渲染（刷新页面）、Ajax的dom显示（局部刷新），

代码的优化