• DAY 62 django17


    1 左侧过滤,统一了路由
    2 inclusion_tag的使用
    3 点赞点踩功能

    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这个文本中第一个 的位置
                   let count=content.indexOf(' ')+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+' ').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', {
    '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发送邮件

    https://www.cnblogs.com/liuqingzheng/articles/10072695.html
    # 配置文件
    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"])
  • 相关阅读:
    foreach在引用时的陷阱
    宝塔ngnix配置tp5
    三维空间建模方法之LOD模型算法
    Weblogic部署项目三种方式
    WebLogic使用总结
    SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)
    BIM特点及格式文件说明
    BIM与GIS
    三维模型格式
    单点登录
  • 原文地址:https://www.cnblogs.com/DEJAVU888/p/14893705.html
Copyright © 2020-2023  润新知