BBS项目之 点赞点踩 评论 编辑 文章详情展示 编辑文章 评论后发送邮件 后台管理页面搭建 富文本编辑器的使用

BBS项目之 点赞点踩 评论  编辑 文章详情展示  编辑文章 

文章详情前端

{% extends 'base.html' %}

{% block title %}
    {{ article.title }}
{% endblock %}

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


{% block content %}
    <div>
        <h3 class="text-center">{{ article.title }}</h3>
        <hr>
        <div>
            {{ article.content|safe }}
        </div>
        <!--
        点赞点踩
        -->
        <div class="clearfix">
            <div id="div_digg">
                <div class="diggit action">
                    <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
                </div>
                <div class="buryit action">
                    <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>
        <hr>
        <!--
        评论列表和评论输入框
        #1楼 2018-03-22 13:33 Yif.Z     回复
        峰哥，什么视频时候这个在线上班更新啊
        -->
        <div>
            评论列表
            <ul class="list-group">
                {% for comment in comment_list %}
                    <li class="list-group-item">
                        <div>
                            <span>#{{ forloop.counter }}楼</span>
                            <span>{{ comment.create_time|date:'Y-m-d H-i-s' }}</span>
                            <span><a href="/{{ comment.user.username }}">{{ comment.user.username }}</a></span>
                            <span class="pull-right id_replay" username="{{ comment.user.username }} "
                                  parent="{{ comment.pk }}"><a>回复</a></span>
                        </div>
                        <hr>
                        <div>
                            {% if comment.commit_id_id %}
                                <p>@{{ comment.commit_id.user.username }}</p>
                                <p>{{ comment.content }}</p>
                            {% else %}
                                {{ comment.content }}
                            {% endif %}

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

        </div>
        {% if request.user.is_authenticated %}
            <div>
                <p class="glyphicon glyphicon-copyright-mark">发表评论</p>
                <p><textarea name="" id="id_text" cols="180" rows="10"></textarea></p>
                <p>
                    <button class="btn btn-success" id="id_comment">发表评论</button>
                </p>
            </div>
        {% else %}
            <div>
                登录后才能发表评论，立即 <a href="/login/">登录</a> 或 <a href="/register/">注册</a>， 访问 网站首页
            </div>
        {% endif %}


    </div>
{% endblock %}

{% block script %}
    <script>
        //把parent_id定义成全局变量
        var parent_id = ''
        $(".action").click(function () {
            var is_up = $(this).hasClass('diggit')
            var span = $(this).children('span')
            $.ajax({
                url: '/upanddown/',
                method: 'post',
                data: {
                    article_id: '{{ article.id }}',
                    is_up: is_up,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (data) {
                    console.log(data)
                    $('#digg_tips').html(data.msg)
                    if (data.code == 100) {
                        //点赞或者点踩的数字加一
                        var num = Number(span.html()) + 1
                        span.html(num)
                    }

                }
            })

        })


        $('#id_comment').click(function () {

            let content = $('#id_text').val()
            if (parent_id) {
                //这表示子评论
                //取到字符串第一个
的位置索引，是一个数字
                let i = content.indexOf('
') + 1
                //从 
+1的位置开始截取，截取到最后
                content = content.slice(i)
            }
            $.ajax({
                url: '/comment/',
                method: 'post',
                data: {
                    article_id: '{{ article.id }}',
                    content: content,
                    parent: parent_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (data) {
                    console.log(data)


                    if (data.code == 100) {

                        let username = data.username
                        let res_content = data.content
                        let parent_name = data.parent_name

                        let ss = ``
                        if (parent_id) {
                            ss = `<li class="list-group-item">
                                <div>
                                    <span class="glyphicon glyphicon-comment">${username}</span>
                                </div>
                                <div>
                                <p>@${parent_name}</p>
                                    ${res_content}
                                </div>
                            </li>`
                        } else {
                            ss = `<li class="list-group-item">
                                <div>
                                    <span class="glyphicon glyphicon-comment">${username}</span>

                                </div>
                                <div>
                                    ${res_content}
                                </div>
                            </li>`
                        }

                        //清空输入框
                        $('#id_text').val('')
                        //把ss追加到评论列表的后面
                        $('.list-group').append(ss)
                        //把parent_id置空
                        parent_id = ''
                    }


                }
            })

        })

        $('.id_replay').click(function () {
            let username = $(this).attr('username')
            parent_id = $(this).attr('parent')

            $('#id_text').val('@' + username + '
').focus()
        })
    </script>
{% endblock %}

点赞 点踩前端

 <script>
      
        $(".action").click(function () {
            var is_up = $(this).hasClass('diggit')
            var span = $(this).children('span')
            $.ajax({
                url: '/upanddown/',
                method: 'post',
                data: {
                    article_id: '{{ article.id }}',
                    is_up: is_up,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (data) {
                    console.log(data)
                    $('#digg_tips').html(data.msg)
                    if (data.code == 100) {
                        //点赞或者点踩的数字加一
                        var num = Number(span.html()) + 1
                        span.html(num)
                    }

                }
            })

        })

点赞点踩后端

def upanddown(request):
    res = {'code': 100, 'msg': ''}
    if request.user.is_authenticated:
        # article表中数字加1，在点赞点踩表中记录一条
        # 这个人对该文章只能点赞或者点踩一次
        # 先查一下，如果有记录了，就不能再点了
        article_id = request.POST.get('article_id')
        user_id = request.user.id
        is_up = request.POST.get('is_up')  # is_up是一个字符串
        print(type(is_up))
        # if is_up=='true':
        #     is_up=True
        # else:
        #     is_up = False
        is_up = json.loads(is_up)
        print(type(is_up))
        res_1 = models.UpAndDown.objects.filter(article_id=article_id, user_id=user_id).count()
        if res_1:
            res['code'] = 101
            res['msg'] = '已经点过了'
        else:
            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)
                    res['msg'] = '点赞成功'
                else:
                    models.Article.objects.filter(pk=article_id).update(down_num=F('down_num') + 1)
                    res['msg'] = '点踩成功'

    else:
        res['code'] = 109
        res['msg'] = '请先<a href="/login/">登录</a>'
    return JsonResponse(res)

评论前端

<script>
        //把parent_id定义成全局变量
        var parent_id = ''
         $('#id_comment').click(function () {

            let content = $('#id_text').val()
            if (parent_id) {
                //这表示子评论
                //取到字符串第一个
的位置索引，是一个数字
                let i = content.indexOf('
') + 1
                //从 
+1的位置开始截取，截取到最后
                content = content.slice(i)
            }
            $.ajax({
                url: '/comment/',
                method: 'post',
                data: {
                    article_id: '{{ article.id }}',
                    content: content,
                    parent: parent_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (data) {
                    console.log(data)


                    if (data.code == 100) {

                        let username = data.username
                        let res_content = data.content
                        let parent_name = data.parent_name

                        let ss = ``
                        if (parent_id) {
                            ss = `<li class="list-group-item">
                                <div>
                                    <span class="glyphicon glyphicon-comment">${username}</span>
                                </div>
                                <div>
                                <p>@${parent_name}</p>
                                    ${res_content}
                                </div>
                            </li>`
                        } else {
                            ss = `<li class="list-group-item">
                                <div>
                                    <span class="glyphicon glyphicon-comment">${username}</span>

                                </div>
                                <div>
                                    ${res_content}
                                </div>
                            </li>`
                        }

                        //清空输入框
                        $('#id_text').val('')
                        //把ss追加到评论列表的后面
                        $('.list-group').append(ss)
                        //把parent_id置空
                        parent_id = ''
                    }


                }
            })

        })

        $('.id_replay').click(function () {
            let username = $(this).attr('username')
            parent_id = $(this).attr('parent')

            $('#id_text').val('@' + username + '
').focus()
        })
    </script>

评论后端

def comment(request):
    res = {'code': 100, 'msg': ''}
    if request.is_ajax():
        article_id = request.POST.get('article_id')
        content = request.POST.get('content')
        parent = request.POST.get('parent')
        if request.user.is_authenticated:
            article = models.Commit.objects.create(user=request.user, article_id=article_id, content=content,
                                                   commit_id_id=parent)
            models.Article.objects.filter(pk=article_id).update(commit_num=F('commit_num') + 1)
            res['msg'] = '评论成功'
            res['username'] = article.user.username
            res['content'] = article.content
            if parent:
                res['parent_name'] = article.commit_id.user.username

            # 发送邮件(同步操作) 课堂上使用的是这个
            from django.core.mail import send_mail
            # send_mail('您的文章:%s被评论了'%'git从入门到放弃','%s评论了%s'%(request.user.username,'写的真好'),settings.EMAIL_HOST_USER,
            #                                      ["1063926627@qq.com",'laichuangdelaoji@gmail.com'])


　　　　　　　　
            # 通过多线程,异步操作
            from threading import Thread
            t=Thread(target=send_mail,args=('您的文章:%s被评论了'%'git从入门到放弃','%s评论了%s'%(request.user.username,'写的真好'),settings.EMAIL_HOST_USER,["1063926627@qq.com",'laichuangdelaoji@gmail.com']))
            t.start()
        else:
            res['code'] = 109
            res['msg'] = '请先登录'

    return JsonResponse(res)

发送邮件后端settings配置

EMAIL_HOST = 'smtp.qq.com'  # 如果是 163 改成 smtp.163.com   以什么邮箱发送
EMAIL_PORT = 465    # 端口号
EMAIL_HOST_USER = '2209000808@qq.com'  # 帐号 发送者邮箱账号
EMAIL_HOST_PASSWORD = 'wikeggxagkmmdjdj'  # 密码 不是密码, 授权码
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER
EMAIL_USE_SSL = True   #使用ssl,qq只支持这种

新增文章前端代码

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


{% block content %}
    <div>
    <h4>新增文章</h4>
    <form action="" method="post">
        {% csrf_token %}
        <div class="form-group">
            <label> 标题</label>
            <input type="text" name="title" class="form-control">
        </div>
        <div class="form-group">
            <label for="">内容</label>
            <textarea name="content" id="editor_id" cols="80" rows="10" class="form-control"></textarea>
        </div>
        <div>
        个人分类
            {% for category in category_list %}
                <div class="radio">
                    <label for="">
                        <input type="radio" name="category" value="{{ category.id }}">
                        {{ category.name }}
                    </label>
                </div>

            {% endfor %}
        </div>
    <div>
        个人标签
        {% for tag in tag_list %}
            <div class="checkbox">
                <label for="">
                    <input type="checkbox" name="tag" value="{{ tag.id }}">
                    {{ tag.name }}
                </label>

            </div>

        {% endfor %}
    </div>
    <div class="text-center">
        <input type="submit" class="btn btn-success" value="提交">

    </div>
    </form>
    </div>
{% endblock %}


{% block script %}

    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
    <script>
    KindEditor.ready(function (k) {
        window.editor = k.create('#editor_id',{
            '100%',
            height:'500px',
            resizeType:'/upload_img/',
            filePostName:'myfile',
            //额外带的参数
            extraFileUploadParams:{
                csrfmiddlewaretoken: '{{ csrf_token }}',
            }
        })

    })

    </script>


{% endblock %}

富文本编辑器前端

<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
    <script>
    KindEditor.ready(function (k) {
        window.editor = k.create('#editor_id',{
            '100%',
            height:'500px',
            resizeType:'/upload_img/',
            filePostName:'myfile',
            //额外带的参数
            extraFileUploadParams:{
                csrfmiddlewaretoken: '{{ csrf_token }}',
            }
        })

    })

新增文章 后端代码

@login_required(login_url='/login/')
def new_article(request):
    if request.method == 'GET':
        category_list = models.Category.objects.filter(blog_id=request.user.blog)
        tag_list = models.Tag.objects.filter(blog=request.user.blog)
        print(category_list)
        return render(request, 'backend/add_article.html', locals())
    else:

        title = request.POST.get('title')
        content = request.POST.get('content')
        category = request.POST.get('category')
        tags = request.POST.getlist('tag')
        # desc = content[0:90] # 会带着标签
        soup = BeautifulSoup(content, 'html.parser')
        desc = soup.text[0:90]  # 去掉所有标签后的文本
        # 把script标签干掉
        res_script = soup.find_all('script')
        for script in res_script:
            script.decompose()  # 删除script标签

        article = models.Article.objects.create(title=title, content=str(soup), desc=desc, blog=request.user.blog,
                                                category_id=category)

        # 存tag(自动生成第三张表)
        # article.tag.add(*tag)
        # 手动做
        # for tag in tags:
        #     models.TagToArticle.objects.create(article_id=article.pk,tag_id=tag)

        # 批量插入
        ll = []
        for tag in tags:
            ll.append(models.TagToArticle(article_id=article.pk, tag_id=tag))
        models.TagToArticle.objects.bulk_create(ll)

        return redirect('/backend_index/')

上传图片后端代码

def upload_img(request):
    res = {'error':0}
    print(request.FILES)
    try:
        # 存图片
        file = request.FILES.get('myfile')
        print(file,'上传的图片')
        path = os.path.join(settings.BASE_DIR, 'media', 'avatar', file.name)
        with open(path, 'wb') as f:
            for line in file:
                f.write(line)
        res['url'] = '/media/avatar/' + file.name
    except Exception as e:
        res['error'] = 1
        res['message'] = str(e)
    return JsonResponse(res)

更新文章后端代码

from bs4 import BeautifulSoup

@login_required(login_url='/login/')
def update_article(request,id):
    if request.method == 'GET':
        article = models.Article.objects.get(id=id)
        category_list = models.Category.objects.filter(blog=request.user.blog)
        tag_list = models.Tag.objects.filter(blog=request.user.blog)
        # category_list = models.Category.objects.filter(blog=request.user.blog).annotate(
        #     num=Count('article__id')).values_list(
        #     'name', 'num', 'id'
        # )


        return render(request,'backend/update_article.html',locals())
    else:
        title = request.POST.get('title')
        content = request.POST.get('content')
        category = request.POST.get('category')
        tags = request.POST.getlist('tag')
        #desc = content[0:90]  #会带着标签
        soup = BeautifulSoup(content,'html.parser')
        desc = soup.text[0:90]  #去掉所有标签后的文本
        #把script标签干掉
        res_script = soup.find_all('script')

        for script in res_script:
            script.decompose()  #删除script标签

        article = models.Article.objects.filter(pk=id)
        article.update(title=title,content=str(soup),desc=desc,category_id=category)
        ll = []
        for tag in tags:
            ll.append(models.TagToArticle(article_id=article.first().pk, tag_id=tag))
        models.TagToArticle.objects.bulk_create(ll)
        return redirect('/backend_index/')

更新文章前端代码

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


{% block content %}
    <div>
    <h4>修改文章</h4>
        <form action="/update_article/{{ article.pk }}/" method="post">
        {% csrf_token %}
    <div class="form-group">
        <label for="">标题</label>
        <input type="text" name="title" class="form-control" value="{{ article.title }}">
            </div>
            <div class="form-group">
                <label for="">内容</label>
                <textarea name="content" id="editor_id" cols="80" rows="10" class="form-control">
                    {{ article.content }}
                </textarea>
            </div>
            <div>
                个人分类
                {% for category in category_list %}
                    <div class="radio">
                        <label>
                            <input type="radio" name="category" value="{{ category.id }}">
                            {{ category.name }}
                        </label>
                    </div>
                {% endfor %}

            </div>
            <div>
                个人标签
                {% for tag in tag_list %}
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="tag" value="{{ tag.id }}">
                            {{ tag.name }}
                        </label>
                    </div>
                {% endfor %}

            </div>
            <div class="text-center">
                <input type="submit" class="btn btn-success" value="提交">
            </div>
        </form>


    </div>
{% endblock %}
{% block script %}


    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                 '100%',
                height: '500px',
                resizeType: 1,
                uploadJson:'/upload_img/',
                filePostName:'myfile',
                //额外带的参数
                extraFileUploadParams : {
                      csrfmiddlewaretoken: '{{ csrf_token }}',

                }


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