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

2019-02-18 本文已影响45人 27efec53a72d

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

服务器环境搭建（选学）

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

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

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

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

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

项目源码下载：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 %}
<div class="container">
    <div class="col-md-9">
        <header>
            <h1>{{ article.title }}</h1>
            <p>
                <a href="{% url 'article:author_articles' article.author.username %}">{{ article.author.username }}</a>
                <span style="margin-left:20px" class="glyphicon glyphicon-thumbs-up">{{ total_likes }}like{{ total_likes|pluralize }}</span>
            </p>
        </header>

        <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}"/>
        <div id='editormd-view'>
        <textarea id="append-test" style="display:none;">
{{ article.body }}
        </textarea>
        </div>
        <div>
            <p class="text-center">
                <a onclick="like_article({{article.id}}, 'like')" href="#">
                    <span class="glyphicon glyphicon-thumbs-up">like</span>
                </a>
                <a onclick="like_article({{article.id}}, 'unlike')" href="#">
                    <span style="margin-left: 15px;" class="glyphicon glyphicon-thumbs-down">unlike</span>
                </a>
            </p>
        </div>
        <div>
            <p class="text-center"><strong>点赞本文的读者</strong></p>
            {% for user in article.users_like.all %}
            <p class="text-center">{{user.username}}</p>
            {% empty %}
            <p class="text-center">还没有人对此文章表态</p>
            {% endfor %}
        </div>
    </div>
</div>

<script src='{% static "js/jquery.js" %}'></script>
<script src='{% static "editor/lib/marked.min.js" %}'></script>
<script src='{% static "editor/lib/prettify.min.js" %}'></script>
<script src='{% static "editor/lib/raphael.min.js" %}'></script>
<script src='{% static "editor/lib/underscore.min.js" %}'></script>
<script src='{% static "editor/lib/sequence-diagram.min.js" %}'></script>
<script src='{% static "editor/lib/flowchart.min.js" %}'></script>
<script src='{% static "editor/lib/jquery.flowchart.min.js" %}'></script>
<script src='{% static "editor/editormd.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
$(function(){
    editormd.markdownToHTML("editormd-view", {
        htmlDecode: "style, script, iframe",
        emoji: true,
        taskList:true,
        tex:true,
        flowChart:true,
        sequenceDiagram : true,
    });
});

function like_article(id, action){
    $.ajax({
        url: "{% url 'article:like_article' %}",
        type: "POST",
        data: {"id":id, "action":action},
        success: function(e){
            if(e=="1"){
                layer.msg("感谢点赞");
                window.location.reload();
            }else{
                layer.msg("我会继续努力");
                window.location.reload();
            }
        },
    });
}

</script>
{% endwith %}
{% endblock %}

5、测试效果

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

文章详情