django - 總結 - cnblog 知識點

一、圖像預覽
點擊頭像------>點擊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()