django - 总结 - cnblog 知识点

1、图像预览
点击头像------>点击input
img和input重合;   img在label,input-->display:none

$("#avatar").change(function(){
    // 获取用户选中文件对象
    file_obj=$(this)[0].files[0];
    // 获取文件对象
    var reader=new FileReader();
    reader.readAsDataURL(file_obj);①
    // 并不会有返回值，而是存放在对象里
    //修改图片src属性,  对应文件的路径
    reader.onload=function(){
          $("#avatar_img").attr("src",reader.result)②
    }
    read.resualt
}) 

①②异步，并不会顺序执行完毕
注意：window.onload=function(){
// 文档加载完毕后，在执行
}

 input select textarea 这三个可以 取 .val() 赋值 .val('')

js得截取方法：（charAt  indexOf  slice）
    var s = "hello world";
    console.log(s.charAt(4));      // o 索引找字符
    console.log(s.indexOf('e'));   // 1 字符找索引
    console.log(s.slice(1,4));     // ell  切片

ajax显示评论：
    var floor = $('.comment_list .comment_item').length+1;
    var ctime = data.time;        // 时间字符串 因为时间对象json传不过来。
    var username = $('#hid_username').val();
    var content =  data.content;  // content 应该从库里取，不应该直接拿前端得数据！因为前端得content是经过 过滤转义 特殊字符后才存到数据库中。
    var pname = data.pidname;
    if(data.pid){  // 子评论
         var s ='<li class="list-group-item comment_item"><div><a href="">#'+floor+'楼</a>&nbsp;&nbsp;&nbsp; ' +
             '<span>'+ ctime+ ' </span>&nbsp;&nbsp;<a href="">'+ username +'</a> </div> <div> ' +
             ' <div class="parent_comment_info well">\n' +
             ' <a href="">@'+pname+'</a>&nbsp;&nbsp;\n' +
             ' </div><p>'+content+'</p> </div> </li>';
    }else{
         // 应该有 2 套 s
         var s ='<li class="list-group-item comment_item"><div><a href="">#'+floor+'楼</a>&nbsp;&nbsp;&nbsp;' +
             ' <span>'+ ctime+ ' </span>&nbsp;&nbsp;<a href="">'+ username +'</a> </div>' +
             ' <div> <p>'+content+'</p> </div> </li>';
    }

    $('.comment_list').append(s);

  <div class="comment_tree">
        <script>
            (function () {
                $.ajax({
                    url:'/blog/get_comment_tree/'+$('#hid_article_pk').val(),
                    success:function (comment_list) {

                        var comment_html = "";
                        $.each(comment_list,function (index,comment) {
                            var username = comment.user__username;
                            var content = comment.content;
                            var pk = comment.pk;
                            var pid = comment.parent_comment_id;
                            console.log(comment);
                            var s = '<div class="comment_tree_item" id="'+pk+'"><span>'+username+'</span><span>'+content+'</span> </div>'

                             if(pid){   // 子评论
                                $('#'+pid).append(s)

                             }else{     // 父评论
                                 $('.comment_tree').append(s)
                             }
                        })
                    }
                })
            })()

        </script>
    </div>

文本编辑器 kindeditor  本质上就是（css+js）
官网：
    http://kindeditor.net/demo.php
    http://kindeditor.net/doc.php

使用：
　　kindeditor
    <script src="/static/kindeditor/kindeditor-all.js"></script>

    <textarea name="article_con" id="article_box" cols="30" rows="10"></textarea>

    KindEditor.ready(function (k) {
        window.editor = k.create('#article_box')
        ...
    })

    KindEditor会覆盖textarea, 注意 id

　　初始化 参数
        http://kindeditor.net/docs/option.html

xss

Article:
    nid, title, desc, create_time, comment_count, up_count, down_count, category, user, tags,
ArticleDetail:
    nid,content,article

注意点：
    title = request.POST.get('title')
    article_con = request.POST.get('article_con')        

    0.防止XSS攻击：引入 （BeautifulSoup）
        https://www.cnblogs.com/yuanchenqi/articles/7617280.html
        http://beautifulsoup.readthedocs.io/zh_CN/latest/

        简单来说，Beautiful Soup是python的一个库，最主要的功能是从网页解析数据。

        。。。详细使用。。。

        pip3 install beautifulsoup4
        from bs4 import BeautifulSoup
        soup = BeautifulSoup(article_con,'html.parser')

        # 过滤 script
        for tag in soup.find_all():
            if tag.name == 'script':
                tag.decompose()    # 删除了所有的script标签及内容 

    获取desc
    1.
        if  desc = article_con[0:150]
        会有问题：article_con 内容中含有标签，截取会截不全，导致有的标签没有闭合，样式错乱！
    2.
        图片代码不截，只截文本 soup.text[0:150] 会有一点问题：
        引入：beautifulsoup 针对标签，字符串，做过滤查询。

        soup = BeautifulSoup(article_con,'html.parser')
        desc = soup.text[0:150]
        but: 有一点问题  soup.text   # text 把转义的字符又返回去了！！
        eg: <script>alert(555)</script>
            转为：<script>alert(555)</script>，存到库里有问题的！
            所以：
                desc = soup.text[0:150]
                desc = desc.replace('<', '&lt;').replace('>', '&gt;')

        <p>{{ article.desc|safe }}</p>
　　3.soup.prettify()