Python實例---基於頁面的后台管理[簡單版]


image

后台管理菜單 + 母板[css/content/js]


向后台提交數據[2種]:   
   1.  模態對話框(數據少操作,且Js復雜):
        form表單 :優點:簡單,前端提交后后台處理完成后直接redirect;
                    缺點:無法顯示錯誤信息
        Ajax提交 : 
            - 有錯誤,顯示錯誤;無錯誤,通過js的 location.relad() 刷新頁面
            - 有錯誤,顯示錯誤;無錯誤,自己局部添加
                  [Jquery的委托綁定 $('父集').on('click','子集',function(){})]
            - 注意后台返回給Ajax的數據以及是字符串[需要轉換為JSON]
            - 注釋掉settings.py里面的CSRF
    2. 單獨頁面提交數據(數據多,數據大操作):
        form表單: ..
分頁
    Django分頁: 有一個類,定義好了方法
    自定義分頁:   
        - 數據從數據庫來
        -
編輯數據:
    模態對話框: 有一個隱藏ID
        PS:通過for循環和自定義屬性實現動態的賦值
    可以根添加用一個對話框,在編輯的時候,需要把內容放在value里,id放入隱藏的標簽內,點擊提交后提交到編輯的URL
    也可以通過單獨的URL來進行編輯,需要動態傳值[推薦]

簡單講有2中方式:

數據量小: 對話框  --》判斷格式,是否為空

數據量大; 新URL

因為前端瀏覽器可以禁用,或者不用瀏覽器來進行后台的數據訪問,所以所有的限制最好是在后台進行操作。

 sql:   update tbl set caption='' where id = 1
 
 orm:  models.Classes.objects.filter(id=1).update(caption='XXX')


刪除:
      彈出框 + 獲取到ID后刪除

[在模態對話框框的刪除編輯頁面內寫一個input來獲取當前的ID然后在后台進行刪除]

JS有一個綁定事件方法onclick():
Jquery的on,on表示事件委托,點擊的時候綁定事件類型然后執行某個函數[3個參數]
    模板左側菜單:
    注意樣式 ,CSS + Content + JS

分頁:
    封裝成了一個組件然后去操作

文件上傳:

image
XSS:
默認我們從后台反饋的所有字符串都按照字符串進行渲染,防止XSS攻擊[比如有人評論我們的博客是,寫的是一段JS代碼,如果瀏覽器直接執行此代碼的話,我們的頁面會奔潰]

xss問題提出:

image

image

xss問題解決:

1. 后台控制

image

2.  前台控制

image

知識點回顧

1、數據庫操作
    - 單表操作
        - all
        - filter  
            models.tb.objects.filter(id=123)           
            dic = {'id': 123, 'age__gt': 3}
            models.tb.objects.filter(**dic)
        - count
        - order_by
        ...
    - 一對多
        # id     name
          1      河北
          2      廣東
          3      山東
        class Province(models.Model):
            name = models.CharField(max_length=32,)
            # nid = models.Intergar(unique=True) # 唯一
       
        # id     name      pro
           1     東莞       2
           2     深圳       2
           3     惠州       2
           4     河源       2
           5     泰安       3
           6     青島       3
           7     濟南       3
           8     張家口     1
           9     邢台       1
        class City(models.Model):
            name = models.CharField(max_length=32)
            pro = models.ForeignKey("Province", to_filed='id')
       
        ############故意寫錯參數字段然瀏覽器可以告訴我們字段       
        ############正向反向都是根據left join來進行關聯的
        1、 正向查找【具有外鍵字段,3種方式】
            result = models.City.objects.all()     --> 對象.XXX  取值
            result[0].pro.name
            # 2個下划線表示關聯下一個表
            models.City.objects.all().values('id','name','pro_id','pro__id','pro__name')    --> 拿到的是字典
            models.City.objects.all().values_list('id','name','pro_id','pro__id','pro__name')  --> 拿到的是元組
        2、反向查找【3種方式】
            result = models.Province.objects.values('id','name', 'city__name')       
            result = models.Province.objects.all()  # 多個數據
            result[0]                  #  獲取某個省
          result[0].city_set       #  QuerySet類型. 返回None,因為我們可能獲取全部也可以只獲取部分
            result[0].city_set.all()   #  獲取河北下的所有市 張家口 、邢台
          result[0].city_set.filter(id__lt=4)   #  獲取河北下的所有市 張家口 、邢台

            for pro in result:
                a1 = pro.id
                a2 = pro.name
                a3 = pro.city_set.all()
                print(a1,a2,a3)
            =====> 多對多即使基於一對多來構造           
    多對多【看1.5/1.6章節內容】
2、cookie,session必須要會
3、分頁
4、    def index(request):
        request.POST.get('k')
        # checkbox  --注意name相同,
        # select[multiple]的多選 --name可以不同
        request.POST.getlist('k')    # 獲取全部的前台內容   
5、模板語言進行渲染的時候,調用函數不需要帶括號()

image

模版引擎渲染字典

image

image

image

6、包含和不包含的使用:

image

7、JQuery和DOM對象之間的轉換

image

8、關於實現前台展示教師以及選擇的班級:

$('#sel').val()     --> 再開一個select,將這些內容在放入一次

后台取出數據后  --> 再開一個select,將這些內容selected一次

利用DOM的selectedoptions和Jquery的appendTO方法結合

image

9、模版語言獲取數組內容:

image

10、form表單的onclick

image

11、三元運算符復習

image

文件上傳

image

文件上傳一:基於Form表單:只要已上傳,頁面就會刷新

未添加:

image

添加后:

image

文件上傳位置:

image

瀏覽器直接訪問:因為Django里面進行了設置,static默認指引到statics目錄下

所以我們只需要在數據庫內保存文件的路徑即可。

【引申】

創建IMG的model,里面有path參數,然后migtations創建數據庫

將文件寫入本地的同時將路徑寫入數據庫,下次訪問的時候取數據庫內取數據

<img src="/{{ imgItem }}">

imageimage

文件上傳二:Ajax上傳

要求:

悄悄上傳文件   [1. xmlHttpRequest對象實現原生Ajax    2.jQuery實現Ajax]image

特別推薦:利用FormDate對象來傳遞數據。

image

image

后顯示文件內容

文件上傳三:基於form表單和iframe自己實現Ajax上傳

兼容性好,因為早期的瀏覽器不支持formdata

其他

代碼學習


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM