后台管理菜單 + 母板[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
分頁:
封裝成了一個組件然后去操作
文件上傳:
XSS:
默認我們從后台反饋的所有字符串都按照字符串進行渲染,防止XSS攻擊[比如有人評論我們的博客是,寫的是一段JS代碼,如果瀏覽器直接執行此代碼的話,我們的頁面會奔潰]
xss問題提出:
xss問題解決:
1. 后台控制
2. 前台控制
知識點回顧
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、模板語言進行渲染的時候,調用函數不需要帶括號()
模版引擎渲染字典
6、包含和不包含的使用:
7、JQuery和DOM對象之間的轉換
8、關於實現前台展示教師以及選擇的班級:
$('#sel').val() --> 再開一個select,將這些內容在放入一次
后台取出數據后 --> 再開一個select,將這些內容selected一次
利用DOM的selectedoptions和Jquery的appendTO方法結合
9、模版語言獲取數組內容:
10、form表單的onclick
11、三元運算符復習
文件上傳
文件上傳一:基於Form表單:只要已上傳,頁面就會刷新
未添加:
添加后:
文件上傳位置:
瀏覽器直接訪問:因為Django里面進行了設置,static默認指引到statics目錄下
所以我們只需要在數據庫內保存文件的路徑即可。
【引申】
創建IMG的model,里面有path參數,然后migtations創建數據庫
將文件寫入本地的同時將路徑寫入數據庫,下次訪問的時候取數據庫內取數據
<img src="/{{ imgItem }}">
文件上傳二:Ajax上傳
要求:
悄悄上傳文件 [1. xmlHttpRequest對象實現原生Ajax 2.jQuery實現Ajax]
特別推薦:利用FormDate對象來傳遞數據。
后顯示文件內容
文件上傳三:基於form表單和iframe自己實現Ajax上傳
兼容性好,因為早期的瀏覽器不支持formdata