十六、Django2.1 搭建多用户的博客网站——文章点赞功能

目录：Django 2.1 从零开始搭建博客网站系列

服务器环境搭建（选学）

• 在阿里云服务器从零开始上线Django项目：Ubuntu18.04+Python3+Django2，并通过公网IP访问

小试牛刀——简单的博客网站

• 一、Django2.1 搭建简单的博客网站
• 二、Django2.1 搭建简单的博客网站扩展——自定义模板和静态文件位置

庖丁解牛——多用户的博客网站之用户模块

• 三、Django2.1 搭建多用户的博客网站——登录
• 四、Django2.1 搭建多用户的博客网站——注册
• 五、Django2.1 搭建多用户的博客网站——修改密码
• 六、Django2.1 搭建多用户的博客网站——重置密码
• 七、Django2.1 搭建多用户的博客网站——维护个人详细信息
• 八、Django2.1 搭建多用户的博客网站——头像上传
• 九、Django2.1 搭建多用户的博客网站——用户模块小结

庖丁解牛——多用户的博客网站之文章模块

• 十、Django2.1 搭建多用户的博客网站——文章栏目
• 十一、Django2.1 搭建多用户的博客网站——简单的文章发布
• 十二、Django2.1 搭建多用户的博客网站——使用Markdown发布文章
• 十三、Django2.1 搭建多用户的博客网站——修改和删除文章
• 十四、Django2.1 搭建多用户的博客网站——向用户展示文章
• 十五、Django2.1 搭建多用户的博客网站——文章模块小结

华丽转身——多用户的博客网站之扩展功能

• 十六、Django2.1 搭建多用户的博客网站——文章点赞功能
• 十七、Django2.1 搭建多用户的博客网站——统计文章浏览次数
• 十八、Django2.1 搭建多用户的博客网站——文章评论功能
• 十九、Django2.1 搭建多用户的博客网站——使用自定义模板标签
• 二十、Django2.1 搭建多用户的博客网站——文章标签
• 二十一、Django2.1 搭建多用户的博客网站——美图模块
• 未完待续

项目源码下载：https://github.com/jt1024/lehehe

正文：

1、修改数据模型类

在 ./article/models.py 中的 ArticlePost 增加一行

users_like = models.ManyToManyField(User, related_name="articles_like", blank=True)

执行以下命令同步数据库

python manage.py make migrations
python manage.py migrate

2、编写视图函数

在 ./article/list_views.py 中增加 like_article 函数

@csrf_exempt
@require_POST
@login_required(login_url='/account/login/')
def like_article(request):
    article_id = request.POST.get("id")
    action = request.POST.get("action")
    if article_id and action:
        try:
            article = ArticlePost.objects.get(id=article_id)
            if action == "like":
                article.users_like.add(request.user)
                return HttpResponse("1")
            else:
                article.users_like.remove(request.user)
                return HttpResponse("2")
        except:
            return HttpResponse("no")

3、添加路由

在 ./article/urls.py 中增加路由信息

path('like-article/', list_views.like_article, name="like_article"),

4、修改模板文件

修改后的模板文件 ./templates/article/list/article_content.html 代码如下

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}articles list{% endblock %}
{% block content %}

{% with total_likes=article.users_like.count users_like=article.users_like.all %}

    

        

            
{{ article.title }}
            

                {{ article.author.username }}
                {{ total_likes }}like{{ total_likes|pluralize }}
            
        

        
        

        {{ article.body }}
        
        
        

            

                
                    like
                
                
                    unlike
                
            
        
        

            
点赞本文的读者
            {% for user in article.users_like.all %}
            
{{user.username}}
            {% empty %}
            
还没有人对此文章表态
            {% endfor %}
        
    













{% endwith %}
{% endblock %}

5、测试效果

进入文章详情，点击文章底部的 “like”或“unlike”图标，查看页面效果

文章详情