django-模型層之ajax續、批量插入、分頁器

今日內容概要

• 先後端傳輸數據的編碼格式(contentType)
• ajax發送json格式數據
• ajax發送文件數據
• ajax結合sweetalert實現刪除按鈕的二次確認
• django自帶的序列化組件(drf作鋪墊)
• 批量插入
• 本身寫一個分頁器(只須要掌握分頁器的推導思路便可)
• 自定義分頁器的使用(簡單幾行代碼便可 須要掌握)

今日內容詳細

先後端傳輸數據的編碼格式(contentType)

 1 # 咱們主要研究post請求數據的編碼格式
 2 """
 3 get請求數據就是直接放在url後面的
 4 url?username=jason&password=123
 5 """
 6 
 7 # 能夠朝後端發送post請求的方式
 8     """
 9     1.form表單
10     2.ajax請求
11     """
12 
13   
14 """
15 先後端傳輸數據的編碼格式
16     urlencoded
17     
18     formdata
19     
20     json
21 """
22 # 研究form表單
23     默認的數據編碼格式是urlencoded
24   數據格式:username=jason&password=123
25   django後端針對符合urlencoded編碼格式的數據都會自動幫你解析封裝到request.POST中
26       username=jason&password=123    >>> request.POST
27   
28   若是你把編碼格式改爲formdata，那麼針對普通的鍵值對仍是解析到request.POST中而將文件解析到request.FILES中
29   
30   form表單是沒有辦法發送json格式數據的
31  
32 
33 # 研究ajax
34     默認的編碼格式也是urlencoded
35   數據格式:username=jason&age=20
36     django後端針對符合urlencoded編碼格式的數據都會自動幫你解析封裝到request.POST中
37       username=jason&age=20    >>> request.POST

ajax發送json格式數據

 1 """
 2 先後端傳輸數據的時候必定要確保編碼格式跟數據真正的格式是一致的
 3 不要騙人家!!!
 4 
 5 {"username":"jason","age":25}  
 6     在request.POST裏面確定找不到
 7     
 8     django針對json格式的數據 不會作任何的處理 
 9     
10 request對象方法補充
11     request.is_ajax()
12         判斷當前請求是不是ajax請求 返回布爾值
13 
14 """
15 
16 <script>
17     $('#d1').click(function () {
18         $.ajax({
19             url:'',
20             type:'post',
21             data:JSON.stringify({'username':'jason','age':25}),
22             contentType:'application/json',  // 指定編碼格式
23             success:function () {
24 
25             }
26         })
27     })
28 </script>
29 
30         json_bytes = request.body   # 獲取瀏覽器發送過來的原生的二進制數據
31         json_str = json_bytes.decode('utf-8')
32         json_dict = json.loads(json_str)
33 
34         # json.loads括號內若是傳入了一個二進制格式的數據那麼內部自動解碼再反序列化
35         json_dict = json.loads(json_bytes)
36         
37 """
38 ajax發送json格式數據須要注意點
39     1.contentType參數指定成:application/json
40     2.數據是真正的json格式數據
41     3.django後端不會幫你處理json格式數據須要你本身去request.body獲取並處理
42 """

ajax發送文件

 1 """
 2 ajax發送文件須要藉助於js內置對象FormData
 3 
 4 """
 5 <script>
 6     // 點擊按鈕朝後端發送普通鍵值對和文件數據
 7     $('#d4').on('click',function () {
 8         // 1 須要先利用FormData內置對象
 9         let formDateObj = new FormData();
10         // 2 添加普通的鍵值對
11         formDateObj.append('username',$('#d1').val());
12         formDateObj.append('password',$('#d2').val());
13         // 3 添加文件對象
14         formDateObj.append('myfile',$('#d3')[0].files[0])
15         // 4 將對象基於ajax發送給後端
16         $.ajax({
17             url:'',
18             type:'post',
19             data:formDateObj,  // 直接將對象放在data後面便可
20 
21             // ajax發送文件必需要指定的兩個參數
22             contentType:false,  // 不需使用任何編碼 django後端可以自動識別formdata對象
23             processData:false,  // 告訴你的瀏覽器不要對你的數據進行任何處理
24 
25             success:function (args) {
26             }
27         })
28 
29 
30     })
31 </script>
32 
33 def ab_file(request):
34     if request.is_ajax():
35         if request.method == 'POST':
36             print(request.POST)
37             print(request.FILES)
38     return render(request,'ab_file.html')
39   
40 """
41 總結:
42     1.須要利用內置對象FormData
43                 // 2 添加普通的鍵值對
44         formDateObj.append('username',$('#d1').val());
45         formDateObj.append('password',$('#d2').val());
46         // 3 添加文件對象
47         formDateObj.append('myfile',$('#d3')[0].files[0])
48     2.須要指定兩個關鍵性的參數
49                 contentType:false,  // 不需使用任何編碼 django後端可以自動識別formdata對象
50         processData:false,  // 告訴你的瀏覽器不要對你的數據進行任何處理
51     3.django後端可以直接識別到formdata對象而且可以將內部的普通鍵值自動解析並封裝到request.POST中 文件數據自動解析並封裝到request.FILES中
52 """

django自帶的序列化組件(先後端分離)(drf作鋪墊)

 1 """
 2 若是發現你能夠直接使用MySQL可是沒法使用sqlite3
 3 不要慌張不要恐懼 你只須要按照以前MySQL的操做將sqlite3的驅動裝一下便可
 4 """
 5 # 需求:在前端給我獲取到後端用戶表裏面全部的數據 而且要是列表套字典
 6 import json
 7 from django.http import JsonResponse
 8 from django.core import serializers
 9 def ab_ser(request):
10     user_queryset = models.User.objects.all()
11     # [{},{},{},{},{}]
12     # user_list = []
13     # for user_obj in user_queryset:
14     #     tmp = {
15     #         'pk':user_obj.pk,
16     #         'username':user_obj.username,
17     #         'age':user_obj.age,
18     #         'gender':user_obj.get_gender_display()
19     #     }
20     #     user_list.append(tmp)
21     # return JsonResponse(user_list,safe=False)
22     # return render(request,'ab_ser.html',locals())
23 
24     # 序列化
25     res = serializers.serialize('json',user_queryset)
26     """會自動幫你將數據變成json格式的字符串 而且內部很是的全面"""
27     return HttpResponse(res)
28 """
29 [
30  {"pk": 1, "username": "jason", "age": 25, "gender": "male"}, 
31  {"pk": 2, "username": "egon", "age": 31, "gender": "female"},
32  {"pk": 3, "username": "kevin", "age": 32, "gender": "others"}, 
33  {"pk": 4, "username": "tank", "age": 40, "gender": 4}
34  ]
35 先後端分離的項目
36     做爲後端開發的你只須要寫代碼將數據處理好
37     可以序列化返回給前端便可 
38         再寫一個接口文檔 告訴前端每一個字段表明的意思便可
39         
40         
41 [
42 {   "model": "app01.user", 
43     "pk": 1, 
44     "fields": {"username": "jason", "age": 25, "gender": 1}}, 
45     
46 {   "model": "app01.user", 
47     "pk": 2, 
48     "fields": {"username": "egon", "age": 31, "gender": 2}}, 
49     
50 {   "model": "app01.user", 
51     "pk": 3, 
52     "fields": {"username": "kevin", "age": 32, "gender": 3}},
53      
54 {   "model": "app01.user", 
55     "pk": 4, 
56     "fields": {"username": "tank", "age": 40, "gender": 4}}
57 ]
58 寫接口就是利用序列化組件渲染數據而後寫一個接口文檔 該交代交代一下就完事
59 """

ajax結合sweetalert

 1 """
 2 要學會如何拷貝
 3 學會基於別人的基礎之上作修改
 4 研究各個參數表示的意思 而後找葫蘆畫瓢
 5 """
 6 <script>
 7     $('.del').on('click',function () {
 8         // 先將當前標籤對象存儲起來
 9         let currentBtn = $(this);
10         // 二次確認彈框
11         swal({
12           title: "你肯定要刪嗎?",
13           text: "你可要考慮清除哦，可能須要拎包跑路哦!",
14           type: "warning",
15           showCancelButton: true,
16           confirmButtonClass: "btn-danger",
17           confirmButtonText: "是的，老子就要刪!",
18           cancelButtonText: "算了,算了!",
19           closeOnConfirm: false,
20           closeOnCancel: false,
21           showLoaderOnConfirm: true   #刪除延時
22         },
23         function(isConfirm) {
24           if (isConfirm) {
25                 // 朝後端發送ajax請求刪除數據以後 再彈下面的提示框
26                 $.ajax({
27                     {#url:'/delete/user/' + currentBtn.attr('delete_id'),  // 1 傳遞主鍵值方式1#}
28                     url:'/delete/user/',  // 2 放在請求體裏面
29                     type:'post',
30                     data:{'delete_id':currentBtn.attr('delete_id')},
31                     success:function (args) {  // args = {'code':'','msg':''}
32                         // 判斷響應狀態碼 而後作不一樣的處理
33                         if(args.code === 1000){
34                             swal("刪了!", args.msg, "success");
35                             // 1.lowb版本 直接刷新當前頁面
36                             {#window.location.reload()#}
37                             // 2.利用DOM操做 動態刷新
38                             currentBtn.parent().parent().remove()
39                         }else{
40                             swal('完了','出現了位置的錯誤','info')
41                         }
42                     }
43 
44                 })
45 
46           } else {
47             swal("慫逼", "不要說我認識你", "error");
48           }
49         });
50     })
51 
52 </script>
53 
54 
55 
56 import time
57 from django.http import JsonResponse
58 def delete_user(request):
59     """
60     先後端在用ajax進行交互的時候 後端一般給ajax的回調函數返回一個字典格式的數據
61     :param request:
62     :return:
63     """
64     if request.is_ajax():
65         if request.method == 'POST':
66             back_dic = {"code":1000,'msg':''}
67             time.sleep(3)  # 模擬操做數據的延遲
68             delete_id = request.POST.get('delete_id')
69             models.User.objects.filter(pk=delete_id).delete()
70             back_dic['msg'] = '數據已經刪了，你趕忙跑路!'
71             # 咱們須要告訴前端咱們操做的結果
72             return JsonResponse(back_dic)

批量插入

 1 def ab_pl(request):
 2     # 先給Book插入一萬條數據
 3     # for i in range(10000):
 4     #     models.Book.objects.create(title='第%s本書'%i)
 5     # # 再將全部的數據查詢並展現到前端頁面
 6     book_queryset = models.Book.objects.all()
 7 
 8     # 批量插入
 9     # book_list = []
10     # for i in range(100000):
11     #     book_obj = models.Book(title='第%s本書'%i)
12     #     book_list.append(book_obj)
13     # models.Book.objects.bulk_create(book_list)
14     """
15     當你想要批量插入數據的時候 使用orm給你提供的bulk_create可以大大的減小操做時間
16     :param request: 
17     :return: 
18     """
19     return render(request,'ab_pl.html',locals())

分頁器

 1 """
 2 總數據100 每頁展現10 須要10
 3 總數據101 每頁展現10 須要11
 4 總數據99 每頁展現10  須要10
 5 
 6 如何經過代碼動態的計算出到底須要多少頁？
 7 
 8 
 9 在製做頁碼個數的時候 通常狀況下都是奇數個        符合中國人對稱美的標準
10 """
11 # 分頁
12     book_list = models.Book.objects.all()
13 
14     # 想訪問哪一頁
15     current_page = request.GET.get('page',1)  # 若是獲取不到當前頁碼 就展現第一頁
16     # 數據類型轉換
17     try:
18         current_page = int(current_page)
19     except Exception:
20         current_page = 1
21     # 每頁展現多少條
22     per_page_num = 10
23     # 起始位置
24     start_page = (current_page - 1) * per_page_num
25     # 終止位置
26     end_page = current_page * per_page_num
27 
28     # 計算出到底須要多少頁
29     all_count = book_list.count()
30 
31     page_count, more = divmod(all_count, per_page_num)
32     if more:
33         page_count += 1
34 
35     page_html = ''
36     xxx = current_page
37     if current_page < 6:
38         current_page = 6
39     for i in range(current_page-5,current_page+6):
40         if xxx == i:
41             page_html += '<li class="active"><a href="?page=%s">%s</a></li>'%(i,i)
42         else:
43             page_html += '<li><a href="?page=%s">%s</a></li>'%(i,i)
44 
45 
46 
47     book_queryset =  book_list[start_page:end_page]
48     
49 """
50 django中有自帶的分頁器模塊 可是書寫起來很麻煩而且功能太簡單
51 因此咱們本身想法和設法的寫自定義分頁器
52 
53 上述推導代碼你無需掌握 只須要知道內部邏輯便可
54 
55 咱們基於上述的思路 已經封裝好了咱們本身的自定義分頁器 
56 以後須要使用直接拷貝便可
57 """

做業

"""
必作
1.整理今日內容到博客
2.熟練掌握ajax發送json數據和文件數據代碼
3.本身完成按鈕的二次確認操做(ajax+sweetalert)
4.嘗試理解自定義分頁器邏輯，本身推導出簡易版本代碼
選作
1.閱讀博客，預習自定義分頁器封裝版本使用方式
"""