BBS 项目（六）

 

img

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 = `
                              
  • 
                                
     ${username}
    
                                
    
                                   
    
                                       @${parent_name}--${parent_content}
                                    
    
                                 ${res_content}
                                
    
                            
    • \`
                                `    
                        }
                        else {
                            res = `
                            
  • 
                                
     ${username}
    
                                
    
                                 ${res_content}
                                
    
                            
    • `    
                        }


                        //把这个字符串追加到
                        $('.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='<a href="http://www.baicu.com">点我看美女'
        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

     

    img

    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 = `
                              
  • 
                                
     ${username}
    
                                
    
                                   
    
                                       @${parent_name}--${parent_content}
                                    
    
                                 ${res_content}
                                
    
                            
    • \`
                                `    
                        }
                        else {
                            res = `
                            
  • 
                                
     ${username}
    
                                
    
                                 ${res_content}
                                
    
                            
    • `    
                        }


                        //把这个字符串追加到
                        $('.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='<a href="http://www.baicu.com">点我看美女'
        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
    Django练习BBS

    相关

    linux LNMP架构 uwsgi协议|uwsgi协议部署django|uwsgi协议部署bbs项目

    BBS项目（三）

    BBS 项目（四）

    BBS 项目（五）

    BBS项目（一）

    bbs项目(部分讲解)

    标签