根评论功能实现

urls.py

from django.conf.urls import url
from django.contrib import admin
from django.views.static import serve

from BBS import settings
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^register/', views.register),  # -- 注册
    url(r'^login/', views.login),        # -- 登陆
    url(r'^get_code/', views.get_code),  # -- 获取验证码
    url(r'^home/', views.home),          # -- 首页
    url(r'^logout/', views.logout),      # -- 退出登陆
    url(r'^set_pwd/', views.set_pwd),    # -- 修改密码

    # -- 点赞点踩功能
    url(r'^up_or_down/$', views.up_or_down),
  
    # -- 文章评论功能
    url(r'^comment/$', views.comment),

    # -- 个人站点 (有名分组)
    url(r'^(?P<username>\w+)/$', views.site),

    # -- 个人站点侧边栏筛选功能!
    url(r'^(?P<username>\w+)/(?P<condition>tag|category|archive)/(?P<param>.*)', views.site),

    # -- 开放对外访问的接口
    url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),

    # -- 文章详情页
    url(r'^(?P<username>\w+)/article/(?P<article_id>\d+)', views.article_detail),
]

views.py

from django.shortcuts import render, HttpResponse, redirect
from django.http import JsonResponse
from app01 import models
from django.db.models import Count, F
from django.db.models.functions import TruncMonth
from django.db import transaction

import json
import hashlib
import random
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO, StringIO


def register(request):...


def get_random():...


def get_code(request):...


def login(request):...


def home(request):...


def logout(request):...


def set_pwd(request):...


def site(request, username, **kwargs):...


def article_detail(request, username, article_id):...


def up_or_down(request):...
  

def comment(request):
    if request.method == "POST":
        back_dic = {'code': 200, 'msg': ''}
        article_id = request.POST.get('article_id')
        content = request.POST.get('content')

        # -- 验证用户是否登陆!
        if not request.session.get('username'):
            back_dic['code'] = 1018
            back_dic['msg'] = "<a href='/login/' style='color: goldenrod'>请先登陆.</a>"
            return JsonResponse(back_dic)

        # -- 入库
        #    在这里模拟下事务的使用.
        with transaction.atomic():
            # 1.操作文章表
            article_obj = models.Article.objects.filter(pk=article_id).first()
            if not article_obj.comment_num:
                article_obj.comment_num = 1
                article_obj.save()
            else:
                article_obj.comment_num += 1
                article_obj.save()
            # 2.操作评论表
            models.Comment.objects.create(
                content=content,
                article_id=article_id,
                user_id=request.session.get('id'))
        back_dic['msg'] = '评论成功!'
        return JsonResponse(back_dic)

article_detail.html

{% extends 'site.html' %}

{% block content_9 %}
    <h1>{{ article_obj.title }}</h1>
    {# -- 点赞点踩样式开始 -- #}
    <div style="display: flex;justify-content: flex-end;" ...>
    {# -- 点赞点踩样式结束 -- #}

    {# -- 文章内容开始 -- #}
    <div class="article_content" ...>
    {# -- 文章内容结束 -- #}

    {# -- 评论楼开始 -- #}

    {# -- 评论楼结束 -- #}

    {# -- 评论样式开始 -- #}
    <div style="margin-top: 10px" ...>
        <p><span class="glyphicon glyphicon-envelope"></span> 发表评论</p>
        <p><textarea name="" id="comment_content" cols="30" rows="5"></textarea></p>
        <p>
            <button class="btn btn-primary submit_comment">提交评论</button>
        </p>
    </div>
    {# -- 评论样式结束 -- #}


{% endblock %}

{% block js %}
    <script>
        // 点赞点踩功能
        $('.action').click(function () {...})

        // 评论功能
        $('.submit_comment').click(function () {
            // 可以在这里面自定义属性,保存下再取
            // <button aid="{{ article_obj.pk }}">提交评论</button>
            let article_id = '{{ article_obj.pk }}'
            let content = $('#comment_content').val()
            if (!content) {
                layer.msg('请来点咖啡/评论!')
                return
            }
            // 发起ajax请求
            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {
                    'article_id': article_id,
                    'content': content,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (res) {
                    if (res.code == 200) {
                        $('#comment_content').val('')
                        layer.msg(res.msg)
                    } else {
                        layer.msg(res.msg)
                    }
                }
            })
        })

    </script>
{% endblock %}

---

评论楼展示

在views.py的article_detail里修改添加以下代码.

def article_detail(request, username, article_id):
    # -- 验证站点是否存在、文章是否存在 但凡有一个不存在,跳转404页面
		# ... ...

    # -- 左侧筛选功能的数据还是得再传一遍
		# ... ...

    # -- 查出所有的评论
    comment_list = models.Comment.objects.filter(article__pk=article_id).all()

    return render(request, 'article_detail.html', locals())

在article_detail.html里添加修改以下代码!

{# -- 评论楼开始 -- #}
<div style="margin-top: 10px">
    <ul class="list-group">
        {% for comment in comment_list %}
            <li class="list-group-item">
                <p>
                    <span># {{ forloop.counter }}楼  </span>
                    <span>{{ comment.create_time|date:'Y-m-d H:i' }}</span>
                    <span>{{ comment.user.username }}</span>
                    <span class="pull-right"><a href="" class="reply">回复</a></span>
                </p>
                <p>{{ comment.content }}</p>
            </li>
        {% endfor %}
    </ul>
</div>
<div class="temp_comment"></div> {# 放临时评论的地方 #}
{# -- 评论楼结束 -- #}



$('.submit_comment').click(function () {
            // 可以在这里面自定义属性,保存下再取
            // <button aid="{{ article_obj.pk }}">提交评论</button>
            let article_id = '{{ article_obj.pk }}'
            let content = $('#comment_content').val()
            if (!content) {
                layer.msg('请来点咖啡/评论!')
                return
            }
            // 发起ajax请求
            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {
                    'article_id': article_id,
                    'content': content,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (res) {
                    if (res.code == 200) {
                        $('#comment_content').val('')
                        let username = '{{ request.session.username }}'
                        let html = `
                            <li class="list-group-item">
                                <p>
                                    <span>${username}的评论:</span>
                                </p>
                                <p>${content}</p>
                            </li>
                        `
                        $('.temp_comment').append(html)
                        layer.msg(res.msg)
                    } else {
                        layer.msg(res.msg)
                    }
                }
            })
        })

---

子评论功能实现

代码太杂了,不想粘贴了.. 阐述下逻辑..
点击回复按钮,可以拿到当前评论的id,此id作为点击提交评论按钮时发生的ajax请求中的parent_id数据!!
在后台添加的评论数据就具备了parent_id,而不是Null..
注意一点的是,回复按钮点击事件里的变量,评论按钮的点击事件里也要用的话,将该变量设计为全局变量即可..

我麻了.. 真心不喜欢前端. ╮(￣▽￣"")╭ 前端的展示惨不忍睹.. 略.

---

后台添加文章

先创建一个应用: startapp app02 并注册应用
在admin目录下创建分路由urls.py,在总路由里做路由分发! url(r'^app02/', include('app02.urls')),

app02/urls.py

from django.conf.urls import url
from app02 import views

urlpatterns = [
    url(r'^add_article/', views.add_article),
    url(r'^article_list/', views.article_list),
]

app02/views.py
应该将输入的content内容进行过滤,过滤掉script标签,防止xss攻击!!! 
使用正则可以,使用 bs4模块 更容易!!略.

from django.shortcuts import render, redirect, HttpResponse
from app01 import models


def add_article(request):
    if request.method == "POST":
        title = request.POST.get('title')
        content = request.POST.get('content')
        cate = request.POST.get('cate')
        tag_list = request.POST.getlist('tag')  # -- 接收多个
        desc = content[0:100]
        # -- 这里完善点,还需要分类的id和站点id,略.
        article_obj = models.Article.objects.create(
            title=title,
            desc=desc,
            content=content,
        )
        # -- 手动给第三张表添加数据,因为用不了add、set等方法
        article_obj_list = []
        # 批量添加.
        # 当然可以一个个的添加
        # models.Article2Tag.objects.create(article=article_obj, tag_id=i)
        # models.Article2Tag.objects.create(article_id=article_obj.pk, tag_id=i)
        for i in tag_list:
            obj = models.Article2Tag(article=article_obj, tag_id=i)
            article_obj_list.append(obj)
        models.Article2Tag.objects.bulk_create(article_obj_list)
        return redirect('/app02/article_list/')

    # -- 用username=request.session.get('username')来筛选也行,但用主键更快.
    userinfo = models.UserInfo.objects.filter(pk=request.session.get('id')).first()
    # -- 必须得登陆
    if not userinfo:
        return render(request, 'error.html')
    cate_list = models.Category.objects.filter(site__pk=userinfo.site.pk).all()
    tag_list = models.Tag.objects.filter(site__pk=userinfo.site.pk).all()
    return render(request, "admin/add_article.html", locals())


def article_list(request):
    return HttpResponse('list')

template/admin/add_article.html
添加内容那里可以使用富文本编辑框: kindeditor、百度富文本
去官网下载安装包,阅读使用文档进行相关的配置!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    {% load static %}
    <script src="{% static 'layer-v3.5.1/layer/layer.js' %}"></script>
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2 class="text-center">添加文章</h2>
            <form action="" method="post">
                {% csrf_token %}
                <p>标题: <input type="text" name="title" class="form-control"></p>
                <p>内容: <textarea name="content" id="" cols="30" rows="10"></textarea></p>
                <p>分类:
                    {% for cate in cate_list %}
                        {# 若不写value属性的值 选择后发送到后端的都是on,就不知道选的是哪个 #}
                        <input type="radio" name="cate" value="{{ cate.pk }}">{{ cate.name }}
                    {% endfor %}
                </p>
                <p>标签:
                    {% for tag in tag_list %}
                        {# 若不写value属性的值 选择后发送到后端的都是on,就不知道选的是哪个 #}
                        <input type="checkbox" name="tag" value="{{ tag.pk }}">{{ tag.name }}
                    {% endfor %}
                </p>
                <input type="submit" class="btn btn-success" value="发表">
            </form>
        </div>
    </div>
</div>
</body>
</html>

---