BBS項目複習

註冊功能
forms組件
models是models forms是forms 二者沒有任何關係
只是咱們認爲用forms組件校驗models裏面的數據

一般是用來校驗模型表的數據   ModelForm
        1.渲染標籤
        2.校驗數據
        3.展現信息
    from django import forms
    class MyForm(forms.Form):
        username = forms.CharField(...)
        
    將數據當作字典傳入類中
    is_valid()  校驗數據多傳不校驗少傳默認下不行的 
    cleaned_data
    errors
    
    渲染標籤三種方式(render渲染)
        form_obj = MyForm()  # get請求和post變量名必須是同樣的
        if request.method == "POST":
            form_obj = MyForm(request.POST)
        return render(request,'...html',locals())

        1.{{ form_obj.as_p }}
        2.{{ form_obj.username.label }}{{ form_obj.username }}
        3.{% for foo in form_obj %}
                {{foo.label}}{{foo}}
                {{foo.errors.0}}
            {%endfor%}
    鉤子函數
        
    
註冊功能
    1.利用forms組件渲染前端頁面
        1.局部鉤子 校驗用戶名是否存在
        2.全局鉤子 校驗密碼是否一致
    2.本身寫前端獲取用戶頭像
        1.利用label標籤可以自動指向指定的input
        2.將img標籤放入了label標籤中，將默認的type=file框隱藏了
    3.用戶選擇頭像以後動態展現出來
        """
        img標籤的src的值
            1.圖片的路徑地址
            2.圖片的二進制數據
            3.後端url
        """
        1.利用ajax給input綁定了一個change事件
        2.利用內置對象FileReader讀取文件 
            var fileReader = new FileReader();
            var fileObj = $('input[type="file"]')[0].files[0];
            # 交給文件閱讀器讀取文件內容
            fileReader.readAsDataURL(fileObj)  # 異步操做
            # 等待文件閱讀器讀取完畢
            fileReader.onload = function(){
                $('#img_avatar').attr('src',fileReader.result)
            }
        3.利用ajax提交post請求
            1.當用戶點擊提交按鈕你須要作的事
                1.利用form標籤的內置的可序列化方法將普通獲取用戶輸入的文本框鍵值對自動獲取出來
                $('#myform').serializeArray()  # 獲取到的是一個數組內部是一個個自定義對象
                2.利用each循環循環取出自定義對象裏面的鍵值對(username,password,confirm_password,email,csrfmiddlewaretoken)
                3.既要傳文件有要傳數據 利用內置的FormData對象
                    循環普通鍵值對
                    var formData = new FormData();
                    formData.append('','')
                    # 添加文件數據
                    formData.append('my_avatar',$('input[type="file"]')[0].files[0])
                4.發送formdata類型的數據  應該考慮 先後端傳輸數據的編碼格式
                    ps:1.urlencoded(form與ajax默認的提交數據編碼格式)，2.formdata，3.application/json
                    
                    data:formData
                    contentType:false,
                    processData:false,
                
        4.post請求後端邏輯
            1.將reuqest.POST中的數據直接交給forms組件校驗
            2.若是校驗經過 cleaned_data   ps:在存儲數據的時候models.Userinfo.objects.create(username='',password='')
            3.向將多餘的鍵值對的去除 將文件鍵值對手動添加進去
            4.直接將字典打散傳入 
            
            
            5.當數據校驗不經過 返回錯誤信息
                錯誤信息(form_obj.errors)以json的形式返回給ajax的回調函數
                forms組件在渲染input框的時候 id值有固定格式   id_字段名
            6.回調函數中利用each循環手動拼接input框的id值
                將錯誤渲染到對應的input下面的span標籤中
            7.健壯性功能  用戶再次輸入的時候 將報錯信息移除
                $('input').focus(function(){
                    $(this).next().html('').parent().removeClass('has-error')
                })
        

登錄功能
    1.手動搭建獲取用戶登陸的前端頁面 用戶名 密碼 驗證碼
    
    2.驗證碼功能
        ps:利用的是img標籤src屬性可以支持後端url書寫 自動訪問該url
        1.直接將後端一個圖片以二進制形式發送
        2.利用pillow模塊 動態生成圖片
            pip3 install pillow
            from PIL import Image,ImageDraw,ImageFont
            # 生成圖片Image.new('RGB',(280,40),'red')/Image.new('RGB',(280,40),(255,255,255))
            # 生成畫筆對象 將生成好的圖片對象傳入ImageDraw.draw(img_obj)
            # 生成字體對象 將字體文件(.ttf)和字體大小傳入ImageFont.truetype(字體文件,字體大小)
            
            # 如何生成隨機驗證碼
            ps:chr,ord
            import random
            code = ''
            for i in range(5):
                upper_str = chr(random.randint(65,90))
                lower_str = chr(random.randint(97,122))
                random_int = str(random.randint(0,9))
                # 隨機獲取上面的一個   寫到圖片上
                res = random.choice([upper_str,lower_str,random_int])
                draw_obj.text((20+i*45,20),res,get_random(),font_obj)
                code += res
            # 須要將驗證碼存入session中以便後續的校驗
            request.session['code'] = code
            """
            1.自動生成一個隨機字符串
            2.將鍵值對存入django本身建立session表中
                ps:django session默認的超時時間 兩週 
            3.將生成好隨機字符串返回給瀏覽器保存
            """
            
    3.ajax提交數據
        1 先校驗驗證碼是否一致
        2 在校驗用戶名和密碼是否正確(auth模塊自動auth.authenticate(username='',password=''))
        3.登錄成功以後記錄用戶狀態 auth.login(request,user_obj)
            

主頁
    1.將網站全部的文章都展現出來
        藉助於django admin快速錄入數據
            1.createsuperuser
            2.將須要操做的模型表註冊到對應的應用下的admin.py文件中
                admin.site.register(models.Userinfo)
            3.錄入數據的時候 關係綁定必定要考慮周全
                eg:用戶與我的站點你得手動去綁定
    2.網站用的靜態的資源默認放在static文件夾下
        用戶上傳的靜態文件應該單獨再開一個文件夾存放(media)
    
    3.去settings.py中配置路徑
        MEDIA_ROOT = os.path.join(BASE_DIR,'media')
        # 用戶上傳的文件就會自動方法media文件夾
    
    4.將media文件夾暴露給用戶
        手動開路由
        from django.views.static import serve
        from BBS import settings
        url(r'^media/(?P<path>.*)',serve,{'document_root':settins.MEDIA_ROOT})
    5.media配置能夠暴露後端任意文件夾中的資源

我的站點
    1.展現的是當前用戶本身寫的全部文章
    2.側邊欄展現
    
        article_list  # 當前用戶全部的文章
        1.文章標籤
            # 查詢當前用戶下的每個標籤及標籤下的文章數
            models.Tag.objects.filter(blog=blog).annotate(c=Count('article__id')).values_list('c','tag_name')
        2.文章分類
            # 同上 理
        3.日期歸檔
            # 參考的是官方文檔
    3.側邊欄篩選功能
        1.視圖函數 共用site
            url(r'^(?P<username>\w+)/(?P<condition>category|tag|archive)/(?P<params>.*)/',views.site)
        2.site視圖函數形參修改
            site(request,username,**kwargs)
        3.基於當前用戶全部的文章再作一層篩選 利用queryset對象能夠無限制的調用queryset方法
            1.判斷kwargs有沒有值
            2.獲取kwargs裏面的值
                condition = kwargs.get('condition')
                params = kwargs.get('params')
            3.判斷condition從而決定按照什麼條件篩選
                category_id
                tag__id
                基於雙下滑線 __year,__month
                
文章詳情
    1.模板繼承 須要解決側邊欄展現的問題
    2.自定義inclusion_tag
        from django.template import Library
        register = Library()
        
        @register.inclusion_tag('left_menu.html')
        def left_menu(username):
            # 將我的站點視圖函數中側邊欄相關代碼直接拷貝過來 須要什麼補什麼
            ...
    3.使用 {% load my_tag %}   {% left_menu username %}
    4.點贊點踩
        1.拷貝博客園樣式(html+css)
        2.給贊和踩設置一個公共的類屬性 而後給這個類屬性綁定點擊事件
        3.經過$(this).hasClass()判斷用戶點擊的是贊仍是踩
        4.ajax發送
        5.後端接收
            1.is_up是一個字符串形式的js布爾值類型
                你能夠利用json直接轉成python布爾值
            2.首先判斷當前全球是不是ajax全球
            3.判斷用戶是否登錄request.user.is_authenticated()
            4.判斷當前文章是不是當前用戶本身寫的
                根據前端傳過來的id值 查詢出對應的文章對象
                文章對象獲取用戶對象跟request.user比較
            5.判斷當前文章是否已經被當前用戶點過
                只須要去點贊點踩查數據 若是有值就意味着 點過
                沒有 就沒有點過
            6.數據庫操做
                文章表裏面的普通字段
                        根據is_up判斷是up_num仍是down_num更新
                點贊點踩表記錄數據
                        user 
                        article
                        is_up
        6.前端渲染成功或者失敗的信息
            若是點贊點踩成功 你應該講 對應的數字加1  注意數字應該先轉成number類型再加一
            若是錯誤 找到span標籤 將信息填入便可
    5.評論
        1.根評論
            1.前端頁面搭建(參考博客園樣式)
            2.給提交按鈕綁點擊事件
                1.將用戶評論內容 當前文章id 發送給後端
                2.判斷是否登錄(login_required)
                    局部和全局配置
                    @login_required(login_url='/login/')
                    LOGIN_URL = '/login/'
                3.判斷是否ajax請求
                4.利用事務
                    """事務四大特性:ACID"""
                    from django.db import transaction
                    with transaction.atomic():
                        # 事務操做
            3.渲染評論樓
                render渲染
                    查詢當前文章全部的評論 
                    前端循環展現
                        forloop
                            counter0
                            counter
                            first
                            last
                        
                DOM臨時渲染
                    利用ecs6新語法 模板字符串
                    var userName = 'jason'
                    `my name is ${userName}`
            
            
            
            
            
        2.子評論
            1.parent字段設置的是null=True 因此在建立數據的時候該字段傳None也不會有問題
            2.點擊回覆按鈕要作的事情
                1.將回覆按鈕對應的評論的人名渲染到textarea中
                    @人名
                2.textarea自動聚焦 並換行
                    $('input').focus()
                ps:將評論對應的用戶名和評論id存到了回覆按鈕
                3.將全局parentID設值
                
            3.每次提交成功成功將parentId再次清空
            4.將子評論中的@人名文本去除
                1.前端利用slice去除
                2.後端
            5.render渲染子評論
                1.判斷當前評論對象是否有parant
                2.跨表查詢 利用parent跨本身查根評論的用戶名
    
6.後臺管理
    1.只有登陸的用戶才能看到本身的後臺管理
    2.羅列出當前用戶寫的全部的文章
    3.添加文章
        """
        XSS攻擊
        文章簡介
        """
        1.kindeditor編輯器
        2.直接利用form表單發送post請求
        3.文章標題 文章內容  文章簡介
            1.利用bs4模塊
            from bs4 import Beautifulsoup
            res = Beautifulsoup(content,'parser.html')
            res = res.find_all()
            for tag in res:
                print(tag.name)
                if tag.name == 'script':
                    tag.decompose()
            desc = res.text[0:150]
            models.Article.objects.create(...content=str(res))
    4.上傳圖片   去文檔裏面找指定方法
    
    5.編輯
    6.刪除
    
7.用戶頭像修改
    若是用queryset的update方法 不會自動拼接avatar前綴
    可使用對象點的方式修改