BBS第四天之文章详情,点赞点踩,根子评论,后台展示,文章添加(富文本编辑器)

其他 2019-08-25 18:44:46 阅读次数: 0

一.文章详情

路由url.py:

    url(r'^(?P<username>\w+)/article/(?P<pk>\d+)$', views.article_detail),

点击个人站点文章title即可关联到文章详情路由找到其视图函数

views.py:

def article_detail(request,username,pk):
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    blog = user.blog
    category_ret=models.Category.objects.all().filter(blog=blog).annotate(cou=Count('article__nid')).values_list('title','cou','nid')
    tag_ret=models.Tag.objects.all().filter(blog=blog).annotate(cou=Count('article__nid')).values_list('title','cou','nid')
    year_ret=models.Article.objects.all().annotate(month=TruncMonth('create_time')).values('month').annotate(c=Count('nid')).values_list('month','c')

    article=models.Article.objects.filter(nid=pk).first()
    # commit_list=article.commit_set.all()   前台模板渲染也可获取评论列表
    return render(request,'article_detail.html',locals())

ps: 通过有名分组拿到用户名和文章id,找到该文章对象渲染到article_detail.html (用到了母版base.html)

base.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ blog.title }}的个人站点</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <script src="/static/jquery-3.3.1.js"></script>
    {% block mycss %}

    {% endblock %}
</head>
<body>
<div class="head">
    {{ blog.site_name }}
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-danger">
                <div class="panel-heading">我的标签</div>
                <div class="panel-body">
                    {% for tag in tag_ret %}
                        <p><a href="/{{ user.username }}/tag/{{ tag.2 }}">{{ tag.0 }}({{ tag.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">随笔分类</h3>
                </div>
                <div class="panel-body">
                    {% for category in category_ret %}
                        <p>
                            <a href="/{{ user.username }}/category/{{ category.2 }}">{{ category.0 }}({{ category.1 }})</a>
                        </p>

                    {% endfor %}
                </div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">随笔档案</h3>
                </div>
                <div class="panel-body">
                    {% for year in year_ret %}
                        <p>
                            <a href="/{{ user.username }}/archive/{{ year.0|date:"Y-m" }}">{{ year.0|date:"Y年m月" }}({{ year.1 }})</a>
                        </p>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-md-9">
            {% block content %}

            {% endblock %}
        </div>
    </div>
</div>
</body>
</html>

article_detail.html:

{% extends 'base.html' %}

{% block mycss %}
    <link rel="stylesheet" href="/static/css/commoncss.css">
{% endblock %}


{% block content %}
    <div>
        <h4>{{ article.title }}</h4>
        <div>
            {{ article.content|safe }}
        </div>
        <div class="clearfix">
            <div id="div_digg">
                <div class="diggit upanddown">
                    <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
                </div>
                <div class="buryit upanddown">
                    <span class="burynum" id="bury_count">{{ article.down_num }}</span>
                </div>
                <div class="clear"></div>
                <div class="diggword" id="digg_tips" style="color: red;"></div>
            </div>
        </div>

        <div>
            {#评论相关#}
            <div>
                {#评论列表#}
                <p>评论列表</p>
                <ul class="list-group commit_content">
                    {% for commit in article.commit_set.all %}
                        <li class="list-group-item">
                            <p>
                                <span>#{{ forloop.counter }} 楼</span>
                                <span>{{ commit.create_time|date:"Y-m-d H:i" }}</span>
                                <span>{{ commit.user.username }}</span>
                                <span class="pull-right reply" username="{{ commit.user.username }}"
                                      commit_id="{{ commit.pk }}"><a>回复</a></span>
                            </p>
                            {% if commit.parent %}
                                <p class="well">@{{ commit.parent.user.username }}----{{ commit.parent.content }}</p>
                            {% endif %}
                            {{ commit.content }}


                        </li>
                    {% endfor %}
                </ul>

            </div>
            <div>
                {#发表评论#}
                <p>发表评论</p>
                <p>
                    昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                              value="{{ request.user.username }}">
                </p>
                <p>评论内容</p>
                <textarea name="" id="id_textarea" cols="80" rows="10">

                </textarea>
                <p>
                    <button class="btn btn-success" id="btn_submit">提交</button>
                </p>
            </div>


        </div>


    </div>
    <script>
        var parent_id = ''
        //评论相关
        $("#btn_submit").click(function () {
            var content = $("#id_textarea").val()

            if (parent_id) {
                //有值，截取前面的@姓名
                //indexof 截取 \n的索引位置
                var index = content.indexOf('\n') + 1
                content = content.slice(index)
            }
            //谁对那篇文章评论了什么内容
            $.ajax({
                url: '/commit/',
                type: 'post',
                data: {
                    article_id: '{{article.pk}}',
                    content: content,
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    parent_id: parent_id
                },
                success: function (data) {
                    console.log(data)
                    //清除输入框的数据
                    $("#id_textarea").val("")
                    if (data.code == 100) {
                        var username = data.username
                        var reply_content = data.reply_content
                        //往后追加内容
                        if (parent_id) {
                            var parent_name = data.parent_name
                            var s = `
                                <li class="list-group-item">
                                <p>
                                    <span>${username}</span>
                                </p>
                                    <p class="well">@${parent_name}</p>
                                    ${reply_content}
                                </li>
                        `
                        } else {
                            //追加根评论的内容
                            //es6的字符串替换

                            var s = `
                                <li class="list-group-item">
                                <p>
                                    <span>${username}</span>
                                </p>
                                    ${reply_content}
                                </li>
                        `
                        }


                        $(".commit_content").append(s)
                    }

                }
            })

        })
        //回复相关
        $(".reply").click(function () {
            var username = '@' + $(this).attr('username') + '\n'
            parent_id = $(this).attr('commit_id')
            //光标聚焦到该控件上

            $("#id_textarea").focus()
            $("#id_textarea").val(username)

        })


        //点赞点踩相关
        $(".upanddown").click(function () {
            //当前点击控件有没有diggit 这个类
            var is_up = $(this).hasClass('diggit')
            //拿到当前点击控件子控件的span标签对象
            var cu_span = $(this).children('span')
            //alert(is_up)
            //谁对哪篇文章点赞或点踩
            $.ajax({
                url: '/diggit/',
                type: 'post',
                data: {article_id: '{{article.pk}}', is_up: is_up, csrfmiddlewaretoken: '{{ csrf_token }}'},
                success: function (data) {
                    console.log(data)
                    $("#digg_tips").html(data.msg)
                    if (data.code == 100) {
                        {#cu_span.text(cu_span.text()+1)#}
                        //在当前点击的div下的span标签上数字加以
                        cu_span.text(Number(cu_span.text()) + 1)
                    }
                }
            })

        })
    </script>
{% endblock %}

文章详情展示了以下内容:  文章title,  文章content (传html文件,用safe转义),点赞点踩,评论列表,评论内容:

a.点赞点踩:

        <div class="clearfix">
            <div id="div_digg">
                <div class="diggit upanddown">
                    <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
                </div>
                <div class="buryit upanddown">
                    <span class="burynum" id="bury_count">{{ article.down_num }}</span>
                </div>
                <div class="clear"></div>
                <div class="diggword" id="digg_tips" style="color: red;"></div>
            </div>
        </div>

js:

 //点赞点踩相关
        $(".upanddown").click(function () {
            //当前点击控件有没有diggit 这个类
            var is_up = $(this).hasClass('diggit')
            //拿到当前点击控件子控件的span标签对象
            var cu_span = $(this).children('span')
            //alert(is_up)
            //谁对哪篇文章点赞或点踩
            $.ajax({
                url: '/diggit/',
                type: 'post',
                data: {article_id: '{{article.pk}}', is_up: is_up, csrfmiddlewaretoken: '{{ csrf_token }}'},
                success: function (data) {
                    console.log(data)
                    $("#digg_tips").html(data.msg)
                    if (data.code == 100) {
                        {#cu_span.text(cu_span.text()+1)#}
                        //在当前点击的div下的span标签上数字加以
                        cu_span.text(Number(cu_span.text()) + 1)
                    }
                }
            })

 点赞点踩视图函数: 开启事务,将点赞点踩表创建记录的同时,把文章表的点赞或点踩数也加一

import json
from django.db.models import F
def diggit(request):
    response={'code':100,'msg':None}
    #当前登陆用户id
    if request.user.is_authenticated():
        user_id=request.user.nid
        is_up=request.POST.get('is_up')
        print(type(is_up))
        print(is_up)
        is_up=json.loads(is_up)
        print(type(is_up))
        print(is_up)
        article_id=request.POST.get('article_id')
        up_ret=models.UpAndDown.objects.filter(user_id=user_id,article_id=article_id).first()
        if up_ret:
            response['code'] = 102
            response['msg'] = '您已经点过了'
        else:
            #事务性的操作
            from django.db import transaction
            #开启事务
            with transaction.atomic():
                models.UpAndDown.objects.create(article_id=article_id,user_id=user_id,is_up=is_up)
                if is_up:
                    #文章表点赞字段加一
                    models.Article.objects.filter(pk=article_id).update(up_num=F('up_num')+1)
                    response['msg'] = '点赞成功'
                else:
                    models.Article.objects.filter(pk=article_id).update(down_num=F('down_num')+1)
                    response['msg'] = '点踩成功'

    else:
        response['code']=101
        response['msg']='请先登陆'
    return JsonResponse(response,safe=False)

b.评论列表:

        <div>
            {#评论相关#}
            <div>
                {#评论列表#}
                <p>评论列表</p>
                <ul class="list-group commit_content">
                    {% for commit in article.commit_set.all %}
                        <li class="list-group-item">
                            <p>
                                <span>#{{ forloop.counter }} 楼</span>
                                <span>{{ commit.create_time|date:"Y-m-d H:i" }}</span>
                                <span>{{ commit.user.username }}</span>
                                <span class="pull-right reply" username="{{ commit.user.username }}"
                                      commit_id="{{ commit.pk }}"><a>回复</a></span>
                            </p>
                            {% if commit.parent %}
                                <p class="well">@{{ commit.parent.user.username }}----{{ commit.parent.content }}</p>
                            {% endif %}
                            {{ commit.content }}


                        </li>
                    {% endfor %}
                </ul>

            </div>

c.发表评论:

            <div>
                {#发表评论#}
                <p>发表评论</p>
                <p>
                    昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                              value="{{ request.user.username }}">
                </p>
                <p>评论内容</p>
                <textarea name="" id="id_textarea" cols="80" rows="10">

                </textarea>
                <p>
                    <button class="btn btn-success" id="btn_submit">提交</button>
                </p>
            </div>

js:

        var parent_id = ''
        //评论相关
        $("#btn_submit").click(function () {
            var content = $("#id_textarea").val()

            if (parent_id) {
                //有值，截取前面的@姓名
                //indexof 截取 \n的索引位置
                var index = content.indexOf('\n') + 1
                content = content.slice(index)
            }
            //谁对那篇文章评论了什么内容
            $.ajax({
                url: '/commit/',
                type: 'post',
                data: {
                    article_id: '{{article.pk}}',
                    content: content,
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    parent_id: parent_id
                },
                success: function (data) {
                    console.log(data)
                    //清除输入框的数据
                    $("#id_textarea").val("")
                    if (data.code == 100) {
                        var username = data.username
                        var reply_content = data.reply_content
                        //往后追加内容
                        if (parent_id) {
                            var parent_name = data.parent_name
                            var s = `
                                <li class="list-group-item">
                                <p>
                                    <span>${username}</span>
                                </p>
                                    <p class="well">@${parent_name}</p>
                                    ${reply_content}
                                </li>
                        `
                        } else {
                            //追加根评论的内容
                            //es6的字符串替换

                            var s = `
                                <li class="list-group-item">
                                <p>
                                    <span>${username}</span>
                                </p>
                                    ${reply_content}
                                </li>
                        `
                        }


                        $(".commit_content").append(s)
                    }

                }
            })

        })
        //回复相关
        $(".reply").click(function () {
            var username = '@' + $(this).attr('username') + '\n'
            parent_id = $(this).attr('commit_id')
            //光标聚焦到该控件上

            $("#id_textarea").focus()
            $("#id_textarea").val(username)

        })

评论视图函数:开启事务,在评论表添加记录的同时,也在文章表添加评论数

def commit(request):
    response = {'code': 100, 'msg': None}
    # 当前登陆用户id
    if request.user.is_authenticated():
        user_id = request.user.nid
        article_id = request.POST.get('article_id')
        content=request.POST.get('content')
        parent_id=request.POST.get('parent_id')
        # 事务性的操作
        from django.db import transaction
        # 开启事务
        with transaction.atomic():
            ret=models.Commit.objects.create(article_id=article_id,content=content,user_id=user_id,parent_id=parent_id)
            models.Article.objects.filter(pk=article_id).update(comment_num=F('comment_num') + 1)
            response['username']=ret.user.username
            response['reply_content']=ret.content
            if parent_id:
                response['parent_name'] = ret.parent.user.username
            response['msg'] = '评论成功'



    else:
        response['code'] = 101
        response['msg'] = '请先登陆'
    return JsonResponse(response, safe=False)

二.后台展示,添加文章

路由url.py:

    # 后台管理首页
    url(r'^backend/', views.home_backend),

视图函数:

from django.contrib.auth.decorators import login_required
@login_required(login_url='/login/')
def home_backend(request):
    #查询该人的所有文章
    ariticle_list=models.Article.objects.filter(blog=request.user.blog)
    return render(request,'backend/home_backend.html',locals())

前端渲染母版backend_base.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<div class="head" style="height: 60px;background-color: #2b669a">
    <p>后台管理</p>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                               aria-expanded="true" aria-controls="collapseOne">
                                文章管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="/add_article/">添加文章</a>
                            跳到添加文章路由

                        </div>
                    </div>
                    <div id="xxx" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">添加随笔</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                              data-toggle="tab">文章</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                               data-toggle="tab">随笔</a>
                    </li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                               data-toggle="tab">交友</a>
                    </li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                                               data-toggle="tab">相册</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                       {% block content %}

                       {% endblock %}


                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">随笔</div>
                    <div role="tabpanel" class="tab-pane" id="messages">交友</div>
                    <div role="tabpanel" class="tab-pane" id="settings">相册</div>
                </div>

            </div>


        </div>
    </div>
</div>

</body>
</html>

后台管理前端home_backend.html:

{% extends 'backend/backend_base.html' %}

{% block content %}
    <table class="table table-striped">
        <thead>
        <tr>
            <th>标题</th>
            <th>评论数</th>
            <th>点赞数</th>
            <th>操作</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for ariticle in ariticle_list %}
            <tr>
                <td><a href="/{{ request.user.username }}/article/{{ ariticle.pk }}">{{ ariticle.title }}</a></td>
                 跳到文章详情路由
                <td>{{ ariticle.commit_num }}</td>
                <td>{{ ariticle.up_num }}</td>
                <td><a href="">删除</a></td>
                <td><a href="">编辑</a></td>
            </tr>
        {% endfor %}


        </tbody>


    </table>
{% endblock %}

 添加文章路由:

    # 添加文章
    url(r'^add_article/', views.add_article),

添加文章视图函数:(用bs4来解析html文档,删除script标签内容来防止xss

@login_required(login_url='/login/')
def add_article(request):
    if request.method=='GET':
        return render(request,'backend/add_article.html')
    else:
        title=request.POST.get('title')
        text_content=request.POST.get('text_content')
        #通过bs4 处理xss攻击，html文档解析库
        #pip3 install beautifulsoup4
        from bs4 import BeautifulSoup
        soup=BeautifulSoup(text_content,'html.parser')
        #查找所有的标签
        tags=soup.find_all()
        for tag in tags:
            if tag.name=='script':
                #从文档中删除该标签
                tag.decompose()
        #soup.text 文档的内容，不包含标签
        desc=soup.text[0:150]
        models.Article.objects.create(title=title,desc=desc,content=str(soup),blog=request.user.blog)
        return redirect('/backend/')

 添加文章add_article.html(借助富文本编辑器):

{% extends 'backend/backend_base.html' %}

{% block content %}

    <div>
        <p>添加文章</p>
        <form action="/add_article/" method="post">
            {% csrf_token %}
            <div class="form-group">
                <label for="id_name">文章标题</label>
                <input type="text" name="title" id="id_title" class="form-control">
            </div>
            <p>内容(KindEditor编辑器，不支持拖放/粘贴上传图片) </p>
            <textarea name="text_content" id="editor_id" cols="30" rows="10"></textarea>
            <p>
                <button class="btn btn-success">提交</button>
            </p>
        </form>

    </div>
    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>

    <script>

        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '100%',
                height: '400px',
                resizeType: 0,
                {#items: [#}
                {#    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',#}
                {#    'plainpaste', 'wordpaste', '|'#}
                {#]#}
                uploadJson: '/uploadimg/',
                extraFileUploadParams: {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                }

            });
        });
    </script>
{% endblock %}

在富文本编辑器中上传图片,图片地址放在media/file下即可:

@login_required(login_url='/login/')
def uploadimg(request):
    response={
        "error" : 0,
        "url" : None
    }
    fil=request.FILES.get('imgFile')
    with open('media/file/'+fil.name,'wb') as f:
        for line in fil:
            f.write(line)
        response['url']='/media/file/'+fil.name
    return JsonResponse(response)

猜你喜欢

转载自www.cnblogs.com/sima-3/p/11402823.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022