BBS 项目（六）

转x33g5p2x  于2022-03-18 转载在 其他  
字(7.3k)|赞(0)|评价(0)|浏览(117)

评论的render显示、 根评论的ajax提交和显示、子评论ajax提交和显示、后台管理首页文章显示、新增文章（富文本编辑器，xss攻击）、富文本编辑器上传图片、django发送邮件👆

1 评论的render显示

1.1 后端

def article_detail(request, username, id):
    article = models.Article.objects.filter(id=id).first()

    comment_list=article.commit_set.all()
    return render(request, 'article.html', {'article': article, 'username': username,'comment_list':comment_list})

1.2 前端

<div>
            <h3>评论列表</h3>
            <div>
                <ul class="list-group">
                    {% for comment in comment_list %}

                        <li class="list-group-item">
                            <div style="margin-bottom: 5px">
                                <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"><a href="">回复</a></span>
                            </div>
                            <div>

                                {% if comment.commit_id %}
                                    <div class="well well-sm">
                                        <p>@{{ comment.commit_id.user.username }}</p>
                                        <p>{{ comment.commit_id.content }}</p>
                                    </div>
                                {% endif %}

                                {{ comment.content }}

                            </div>

                        </li>
                    {% endfor %}

                </ul>
            </div>

        </div>

2 根评论的ajax提交和显示

$('#id_btn_submit').click(function () {
            $.ajax({
                url: '/comment/',
                method: 'post',
                data: {article_id:'{{ article.id }}',content:$('#id_textarea').val(), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                success:function (data) {
                    console.log(data)
                    if(data.status==100){
                        let username=data.username
                        let res_content=data.res_content
                        let res=`
                            <li class="list-group-item">
                                <div class="glyphicon glyphicon-headphones"><span>&nbsp;${username}</span></div>
                                <div>
                                 ${res_content}
                                </div>
                            </li>`
                        //把这个字符串追加到
                        $('.list-group').append(res)
                        //清空输入框
                        $('#id_textarea').val('')
                    }

                }
            })

        })

3 评论后端

def comment(request):
    if request.is_ajax():
        article_id=request.POST.get('article_id')
        content=request.POST.get('content')
        res=models.Commit.objects.create(user=request.user,article_id=article_id,content=content)
        return JsonResponse({'status':100,'msg':'评论成功','username':request.user.username,'res_content':res.content})

4 子评论ajax提交和显示

4.1 后端

def comment(request):
    if request.is_ajax():
        respone = {'status': 100, 'msg': '评论成功'}
        article_id = request.POST.get('article_id')
        content = request.POST.get('content')
        parent_id = request.POST.get('parent_id')

        res = models.Commit.objects.create(user=request.user, article_id=article_id, content=content,
                                           commit_id_id=parent_id)
        respone['username'] = request.user.username,
        respone['res_content'] = res.content
        if parent_id:
            respone['parent_name'] = res.commit_id.user.username
            respone['parent_content'] = res.commit_id.content
        return JsonResponse(respone)

4.2 前端

var parent_id=''       
$('#id_btn_submit').click(function () {
            let content=$('#id_textarea').val()
            if(parent_id){
                //子评论
                //找content这个文本中第一个\n的位置
                let count=content.indexOf('\n')+1
                //从这个位置往后截断
                content=content.slice(count)
                console.log(content)
            }
            $.ajax({
                url: '/comment/',
                method: 'post',
                data: {
                    article_id: '{{ article.id }}',
                    content:content ,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'parent_id':parent_id

                },
                success: function (data) {
                    console.log(data)
                    if (data.status == 100) {
                        let username = data.username
                        let res_content = data.res_content
                        let res=''
                        if(parent_id){
                            let parent_name=data.parent_name
                            let parent_content=data.parent_content
                            res = `
                              <li class="list-group-item">
                                <div class="glyphicon glyphicon-headphones"><span>&nbsp;${username}</span></div>
                                <div>
                                   <div class="well">
                                       @${parent_name}--${parent_content}
                                    </div>
                                 ${res_content}
                                </div>
                            </li>\`
                            `
                        }
                        else {
                            res = `
                            <li class="list-group-item">
                                <div class="glyphicon glyphicon-headphones"><span>&nbsp;${username}</span></div>
                                <div>
                                 ${res_content}
                                </div>
                            </li>`
                        }

                        //把这个字符串追加到
                        $('.list-group').append(res)
                        //清空输入框
                        $('#id_textarea').val('')
                        //把parent_id置空
                        parent_id=''
                    }

                }
            })

        })

$('.reply_span').click(function () {
            let username=$(this).attr('username')
            $('#id_textarea').val('@'+username+'\n').focus()
            parent_id=$(this).attr('parent_id')
})

5 后台管理首页文章显示

5.1 前端

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

{% block article %}

    <table class="table table-striped">
      <thead>
        <tr>
          <th>文章id</th>
          <th>文章标题</th>
          <th>文章作者</th>
          <th>点赞数</th>
          <th>点踩数</th>
          <th>操作</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
{% for article in  article_list%}
         <tr>
          <th scope="row">{{ article.id }}</th>
          <td><a href="/{{ article.blog.userinfo.username }}/articles/{{ article.id }}.html">{{ article.title }}</a></td>
          <td>{{ article.blog.userinfo.username }}</td>
          <td>{{ article.up_num }}</td>
          <td>{{ article.down_num }}</td>
          <td><a href="">删除</a></td>
          <td><a href="">编辑</a></td>
        </tr>

{% endfor %}

      </tbody>
    </table>
{% endblock %}

5.2 后端

@login_required(login_url='/login/')
def backend(request):
    article_list = models.Article.objects.filter(blog=request.user.blog)
    return render(request, 'backend/backend_index.html', locals())

6 新增文章（富文本编辑器，xss攻击）

@login_required(login_url='/login/')
def add_article(request):
    if request.method == 'GET':

        # ss='&lt;a href="http://www.baicu.com">点我看美女</a>'
        category_list = models.Category.objects.filter(blog=request.user.blog)
        tag_list = models.Tag.objects.filter(blog=request.user.blog)
        return render(request, 'backend/add_article.html', locals())
    else:

        title = request.POST.get('title')
        content = request.POST.get('content')

        # 第一个参数是要解析的html文档内容（str）
        # 第二个参数是使用的解析器（html.parser和lxml）
        soup = BeautifulSoup(content, 'html.parser')
        # 去掉所有标签后的文本内容
        desc = soup.text[:250]
        # 找出文档中所有script标签（）
        script_list = soup.find_all('script')
        for script in script_list:
            print('删了一个')
            script.decompose()  # 把当前标签对象，从文档中删除
        category_id = request.POST.get('category')
        tag_ids = request.POST.getlist('tag')
        article = models.Article.objects.create(title=title, desc=desc, content=str(soup), blog=request.user.blog,
                                                category_id=category_id)
        # 手写的第三张表，这个已经没有了
        # article.tag.add()
        # 手动操作
        # for tag_id in tag_ids:
        #     models.TagToArticle(article_id=article.id,tag_id=tag_id)

        # 批量插入
        tag_list = []
        for tag_id in tag_ids:
            tag_list.append(models.TagToArticle(tag_id=tag_id, article_id=article.id))
        models.TagToArticle.objects.bulk_create(tag_list)

        return redirect('/backend/')

7 富文本编辑器上传图片

7.1 前端

KindEditor.ready(function (K) {
            window.editor = K.create('#id_textarea', {
                width: '100%',
                height: '600px',
                resizeType: 1,
                uploadJson:'/upload_img/',
                extraFileUploadParams : {
                        csrfmiddlewaretoken:'{{ csrf_token }}'
                }

            });
        });

7.2 后端

# @csrf_exempt
def upload_img(request):
    print(request.FILES)
    try:
        myfile = request.FILES.get('imgFile')
        path = os.path.join(settings.MEDIA_ROOT, 'img')
        with open('%s/%s' % (path, myfile.name), 'wb') as f:
            for line in myfile:
                f.write(line)
        return JsonResponse({"error": 0, "url": '/media/img/'+myfile.name})
    except Exception as e:
        return JsonResponse({"error": 1,"message": str(e)})

8django发送邮件

# 配置文件
EMAIL_HOST = 'smtp.qq.com'  # 如果是 163 改成 smtp.163.com
EMAIL_PORT = 465
EMAIL_HOST_USER = '306334678@qq.com'  # 帐号
EMAIL_HOST_PASSWORD = ''  # 密码
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER
#这样收到的邮件，收件人处就会这样显示
# DEFAULT_FROM_EMAIL = '暗示法司法'
EMAIL_USE_SSL = True   #使用ssl
#EMAIL_USE_TLS = False # 使用tls

# 视图函数
from django.core.mail import send_mail
send_mail("邮件标题" ,'邮件内容',settings.EMAIL_HOST_USER,["2277194535@qq.com"])

https://www.cnblogs.com/liuqingzheng/articles/10072695.html

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://www.cnblogs.com/48xz/p/16022806.html

内容来源于网络，如有侵权，请联系作者删除！

BBS 项目（六）

相关文章

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com