前后端傳輸數(shù)據(jù)的編碼格式(contentType)

# 提示: 主要研究post請(qǐng)求數(shù)據(jù)的編碼格式.
'''
get請(qǐng)求數(shù)據(jù)就是直接放在url?號(hào)后面的每個(gè)參數(shù)之間用&符連接, 如下:url?username=jason&password=123
'''# 可以朝后端發(fā)送post請(qǐng)求的方式1 .form表單2. ajax請(qǐng)求# 基于post請(qǐng)求. 前后端傳輸數(shù)據(jù)的3種編碼格式urlencodedform-datajson# 基于post請(qǐng)求. form表單傳輸數(shù)據(jù)的編碼格式默認(rèn):  默認(rèn)的數(shù)據(jù)編碼格式是urlencoded數(shù)據(jù)格式: username=jason&password=123結(jié)論: django后端針對(duì)符合urlencoded編碼格式的數(shù)據(jù)都會(huì)自動(dòng)幫你解析封裝到request.POST中. 如下所示:username=jason&password=123	>>> request.POST!!!注意!!!: 我們這里指的是符合. 如果你指定的是form-data編碼格式, 針對(duì)普通的鍵值對(duì)還是解析到request.POST中, 而文件將會(huì)解析到request.FILES中# 基于post請(qǐng)求. ajax傳輸數(shù)據(jù)的編碼格式默認(rèn):  默認(rèn)的數(shù)據(jù)編碼格式是urlencoded數(shù)據(jù)格式: username=jason&password=123結(jié)論: django后端針對(duì)符合urlencoded編碼格式的數(shù)據(jù)都會(huì)自動(dòng)幫你解析封裝到request.POST中. 如下所示:username=jason&age=20	>>> request.POST

Ajax發(fā)送json格式數(shù)據(jù)

# 強(qiáng)調(diào): 前后端傳輸數(shù)據(jù)的時(shí)候一定要確保編碼格式跟數(shù)據(jù)真正的格式是一致的. 比如: 你的編碼格式指定的是json格式. 那么你的data數(shù)據(jù)必須也要是json格式.
# request對(duì)象方法補(bǔ)充: request.is_ajax()  判斷當(dāng)前請(qǐng)求是否是ajax請(qǐng)求 返回布爾值
# 前后提交json格式數(shù)據(jù)給后端流程:
'''
1. 前端頁(yè)面ajax中指定參數(shù)(注意: 都是基于post請(qǐng)求方式提交數(shù)據(jù))1.1 指定數(shù)據(jù)編碼格式: contentType: application/json1.2 對(duì)發(fā)送給后端的數(shù)據(jù)進(jìn)行序列化: data: JSON.stringify({'username': 'egon', 'age': 18})
2. 后端2.1 json格式的數(shù)據(jù)django后端不會(huì)不會(huì)做任何的處理. 需要我們手動(dòng) 通過(guò)request.body獲取二進(jìn)制格式的json數(shù)據(jù)2.2 后端有2種方式將這種格式反解成python數(shù)據(jù)類(lèi)型第一種: 先使用decode解碼成str類(lèi)型. 再使用json.loads反序列化成python數(shù)據(jù)類(lèi)型
'''# 前端
$('#d1').click(function () {$.ajax({url:'',type:'post',{#data:{'username':'jason','age':25},#}data:JSON.stringify({'username':'jason','age':25}),contentType:'application/json',  // 指定編碼格式success:function () {}})
})# 后端
def ab_json(request):
if request.is_ajax():print(request.is_ajax())  # Trueprint(request.POST)       # <QueryDict: {}>print(request.FILES)      # <MultiValueDict: {}>print(request.body)       # b'{"username":"jason","age":25}'# 手動(dòng)處理json格式數(shù)據(jù): 先反序列化, 再解碼'''json_bytes = request.bodyjson_str = json_bytes.decode('utf-8')json_dict = json.loads(json_str)print(json_dict, type(json_dict))  # {'username': 'jason', 'age': 25} <class 'dict'>'''# 由loads內(nèi)部自動(dòng)處理: json.loads括號(hào)內(nèi)如果傳入了一個(gè)二進(jìn)制格式的數(shù)據(jù)那么內(nèi)部自動(dòng)解碼再反序列化'''json_bytes = request.bodyjson_dict = json.loads(json_bytes)  # {'username': 'jason', 'age': 25} <class 'dict'>print(json_dict, type(json_dict))  # {'username': 'jason', 'age': 25} <class 'dict'>'''
return render(request, 'ab_json.html')

?

Ajax發(fā)送文件

# 提示: ajax發(fā)送文件需要借助于js內(nèi)置對(duì)象FormData
# 前端發(fā)送文件對(duì)象步驟:
'''
1. new一個(gè)FormData對(duì)象let formDataObj = new FormData()
2. 添加數(shù)據(jù)的2種方式第一種: 添加普通鍵值對(duì)formDataObj.append(key, value)第二種: 添加文件對(duì)象formDataObj.append(key, $('#file')[0].files[0])
3. ajax中參數(shù)指定data: formDataObj,  // 指定發(fā)送的數(shù)據(jù). 直接放對(duì)象contentType: false, // 編碼類(lèi)型不指定. django后端能夠自動(dòng)識(shí)別form-data對(duì)象格式發(fā)送processData: false, // 指定處理數(shù)據(jù)為false. 讓瀏覽器不要格外的處理data中的數(shù)據(jù).
'''
# 后端接收文件對(duì)象步驟
'''
提示: django后端能夠直接識(shí)別到form-data對(duì)象并且能夠?qū)?nèi)部的普通鍵值自動(dòng)解析并封裝到request.POST中 文件數(shù)據(jù)自動(dòng)解析并封裝到request.FILES中
1. 使用request.is_ajax()判斷是否是一個(gè)ajax請(qǐng)求
2. 使用request.method判斷是否是POST請(qǐng)求
3. 使用request.FIlES獲取到文件對(duì)象
'''# 前端
// 點(diǎn)擊按鈕朝后端發(fā)送普通鍵值對(duì)和文件數(shù)據(jù)
$('#d4').on('click',function () {// 1 需要先利用FormData內(nèi)置對(duì)象let formDateObj = new FormData();// 2 添加普通的鍵值對(duì)formDateObj.append('username',$('#d1').val());formDateObj.append('password',$('#d2').val());// 3 添加文件對(duì)象formDateObj.append('myfile',$('#d3')[0].files[0]);// 4 將對(duì)象基于ajax發(fā)送給后端$.ajax({url:'',type:'post',data:formDateObj,  // 直接將對(duì)象放在data后面即可// ajax發(fā)送文件必須要指定的兩個(gè)參數(shù)contentType:false,  // 不需使用任何編碼 django后端能夠自動(dòng)識(shí)別form-data對(duì)象processData:false,  // 告訴你的瀏覽器不要對(duì)你的數(shù)據(jù)進(jìn)行任何處理success:function (args) {}})
})# 后端
def ab_file(request):if request.is_ajax():if request.method == 'POST':print(request.POST)print(request.FILES)return render(request, 'ab_file.html')

?Django自帶的序列化組件

# 前提: 前后端分離. django中無(wú)法直接使用模板語(yǔ)法
# 使用: 使用django自帶的序列化方法serializers自動(dòng)幫我們序列化
'''
from django.core import serializers
user_queryset = models.User.objects.all()
res = serializers.serialize('json', user_queryset)第一個(gè)參數(shù)指定需要序列化的類(lèi)型第二個(gè)參數(shù)指定需要序列化的數(shù)據(jù)返回結(jié)果: 返回一個(gè)列表套字典的序列化以后的數(shù)據(jù)格式.
'''
# 注意: 使用serializers自動(dòng)幫我么序列化的數(shù)據(jù)格式中, 指定choices參數(shù)得字段gender拿到的是存儲(chǔ)的格式. 沒(méi)有自動(dòng)幫我們'對(duì)象.get_gender_display()'處理展示, 因此需要寫(xiě)一個(gè)接口文檔 交代交代def ab_ser(request):
# 1. 當(dāng)前后端不分離的清空下后端的數(shù)據(jù)提交給前端通過(guò)模板語(yǔ)法即可
'''
user_queryset = models.User.objects.all()
return render(request, 'ab_ser.html', locals())
'''# 2. 當(dāng)前后端分離的情況下: 通過(guò)手動(dòng)序列化數(shù)據(jù)格式將序列化好的接口提交給前端即可
'''
user_queryset = models.User.objects.all()
# [{},{},{},{},{}]
user_list = []
for user_obj in user_queryset:tmp = {'pk': user_obj.pk,'username': user_obj.username,'age': user_obj.age,'gender': user_obj.get_gender_display()}user_list.append(tmp)
from django.http import JsonResponse
return JsonResponse(user_list, safe=False)
'''# 3. 當(dāng)前后端分離的情況下: 通過(guò)django自帶的自動(dòng)序列化數(shù)據(jù)格式的方法serializers實(shí)現(xiàn)
from django.core import serializers
user_queryset = models.User.objects.all()
res = serializers.serialize('json', user_queryset)
"""會(huì)自動(dòng)幫你將數(shù)據(jù)變成json格式的字符串 并且內(nèi)部非常的全面"""
return HttpResponse(res)# 手動(dòng)序列化數(shù)據(jù)格式
"""
[{"pk": 1, "username": "jason", "age": 25, "gender": "male"},{"pk": 2, "username": "egon", "age": 31, "gender": "female"},{"pk": 3, "username": "kevin", "age": 32, "gender": "others"},{"pk": 4, "username": "tank", "age": 40, "gender": 4}]
"""# 利用serializers自動(dòng)序列化數(shù)據(jù)格式
# 注意: 使用serializers自動(dòng)幫我么序列化的數(shù)據(jù)格式中, 指定choices參數(shù)得字段gender拿到的是存儲(chǔ)的格式. 沒(méi)有自動(dòng)幫我們'對(duì)象.get_gender_display()'處理展示, 因此需要寫(xiě)一個(gè)接口文檔 交代交代
"""
[
{   "model": "app01.user","pk": 1,"fields": {"username": "jason", "age": 25, "gender": 1}},{   "model": "app01.user","pk": 2,"fields": {"username": "egon", "age": 31, "gender": 2}},{   "model": "app01.user","pk": 3,"fields": {"username": "kevin", "age": 32, "gender": 3}},{   "model": "app01.user","pk": 4,"fields": {"username": "tank", "age": 40, "gender": 4}}
]
"""

Ajax結(jié)合sweetAlert

# 步驟流程:
'''
# 前端
1. 第一步: 刪除按鈕使用button而不是用a標(biāo)簽. 這里因?yàn)槭莂jax含有url, 使用a標(biāo)簽的href會(huì)沖突. 然后去指定要聲明刪除的數(shù)據(jù)行的的主鍵del_id, 是為了后端filter可以定位到這條記錄. 然后可以刪除<button class="btn btn-xs btn-danger del_btn" del_id="{{ user_obj.pk }}">刪除</button>
2. 第二步: 使用JQ查找定位綁定點(diǎn)擊事件將會(huì)觸發(fā)swal (提示: 使用sweetAlert可以下載下來(lái)以后配置static靜態(tài). 也可以使用bootCdn)
3. 在isConfirm中使用ajax
4. 二種方式傳遞主鍵:第一種: 在url中  my_user_list/'+currentBtn.attr('del_id')第二種: 在data中 JSON.stringify({'del_id': currentBtn.attr('del_id')}# 后端
1. is_ajax + method判斷處理請(qǐng)求
2. 定制返回客戶端的字段數(shù)據(jù)格式stat_dic. 里面包含自定義的狀態(tài)碼. 以及信息等
3. 如果需要配合sweetAlert中的'showLoaderOnConfirm: true'一起使用. 后端就通過(guò)import time模擬網(wǎng)絡(luò)延遲# 前端
1. 通過(guò)后端return的參數(shù). ajax回調(diào)函數(shù)中agrs參數(shù)拿到. 判斷狀態(tài)碼. 不同的狀態(tài)碼做不同的邏輯處理
2. 刪除成功以后畢動(dòng)態(tài)刷新.  2種方式方式一: 直接刷新當(dāng)前頁(yè)面     window.location.reload()方式二: 利用DOM操作 動(dòng)態(tài)刷新 currentBtn.parent().parent().remove();
'''# 前端
<style>div.sweet-alert h2 {padding-top: 10px;  /*處理swal輸入中文出現(xiàn)展示補(bǔ)全的現(xiàn)象 --> swal("刪除完畢", `你目前把${args.msg}刪除了`, "success");*/}
</style>
<script>$(".del_btn").on('click', function () {{#alert($(this).attr('del_id'));#}// 先將當(dāng)前標(biāo)簽對(duì)象存儲(chǔ)起來(lái). 如果不存儲(chǔ)起來(lái). 下面在回調(diào)函數(shù)success中使用this代指的就是回調(diào)函數(shù)這個(gè)對(duì)象. 而不是我們執(zhí)行點(diǎn)擊事件的對(duì)象.let currentBtn = $(this);swal({title: "你正在執(zhí)行刪除操作",text: "你確定要?jiǎng)h除嗎?",type: "warning",showCancelButton: true,confirmButtonClass: "btn-danger",confirmButtonText: "確定",cancelButtonText: "取消",closeOnConfirm: false,closeOnCancel: false,showLoaderOnConfirm: true,},function (isConfirm) {if (isConfirm) {$.ajax({{#url: 'my_user_list/'+currentBtn.attr('del_id'),#}  // 1. 傳遞主鍵值方式一: 放在url中. (注意: 傳遞到后端是str類(lèi)型需要轉(zhuǎn))url: '',type: 'post',data: JSON.stringify({'del_id': currentBtn.attr('del_id')}),  // 2. 傳遞主鍵值方式二: 放在url中. 我們這里使用json格式傳輸數(shù)據(jù). 方便數(shù)據(jù)的交互. 省略了后端拿主鍵值只拿到str類(lèi)型時(shí)需要轉(zhuǎn)換. 以及后端傳輸int類(lèi)型的狀態(tài)碼等等. (提示: 這里的狀態(tài)碼可以是字符串格式的定義傳輸過(guò)來(lái))contentType: 'application/json',success: function (args) {// 判斷響應(yīng)狀態(tài)碼 然后做不同的處理  {'stat_code': 1001, 'msg': del_username}if (args.stat_code === 1000) {swal("刪除完畢", `你目前把${args.msg}刪除了`, "success");// 1. 刪除數(shù)據(jù)完畢動(dòng)態(tài)刷新方式一: lowb版本 直接刷新當(dāng)前頁(yè)面// window.location.reload()// 2. 刪除數(shù)據(jù)完畢動(dòng)態(tài)刷新方式二: 利用DOM操作 動(dòng)態(tài)刷新currentBtn.parent().parent().remove();{#console.log(this);#}{#console.log(currentBtn);#}} else {swal("刪除錯(cuò)誤", `刪除${args.msg}出現(xiàn)不可抗力的力量!`, "warning");}}});} else {swal("再見(jiàn)啊朋友", "下此再來(lái)吧!", "error");}});})
</script># 后端
import json
from django.http import JsonResponsedef my_user_list(request):if request.is_ajax():if request.method == 'POST':del_id = json.loads(request.body).get('del_id')if del_id:del_queryset = models.User.objects.filter(pk=del_id)del_username = del_queryset.first().username# stat = {'stat_code': 1001, 'msg': del_username}# del_queryset.delete()import timetime.sleep(1)  # 模擬操作數(shù)據(jù)的延遲stat = {'stat_code': 1000, 'msg': del_username}return JsonResponse(stat, json_dumps_params={'ensure_ascii': False})user_queryset_obj = models.User.objects.all()return render(request, 'my_user_list.html', locals())

批量插入

'''
提示: 當(dāng)你想要批量插入數(shù)據(jù)的時(shí)候 使用orm給你提供的bulk_create能夠大大的減少操作時(shí)間.
'''import time
def ab_pl(request):
# 普通插入create: 先給Book插入一千條數(shù)據(jù). 再將所有的數(shù)據(jù)查詢并展示到前端頁(yè)面
'''
start_time = time.time()for i in range(1000):models.Book.objects.create(title='第%s本書(shū)' % i)
book_queryset = models.Book.objects.all()stop_time = time.time()
print(stop_time-start_time)  # 90.015675783157349
return render(request, 'ab_pl.html', locals())
'''# 批量插入bulk_create: 當(dāng)你想要批量插入數(shù)據(jù)的時(shí)候 使用orm給你提供的bulk_create能夠大大的減少操作時(shí)間
start_time = time.time()'''
book_list = []
for i in range(1000):book_obj = models.Book(title='第%s本書(shū)' % i)   // 注意: ORM查詢語(yǔ)句的惰性原則, 沒(méi)有執(zhí)行就不會(huì)走數(shù)據(jù)庫(kù)book_list.append(book_obj)
models.Book.objects.bulk_create(book_list)
'''
# 使用列表不太合理我們下面使用生成器
book_generator = (models.Book(title='第%s本書(shū)' % i) for i in range(1000))
models.Book.objects.bulk_create(book_generator)
book_queryset = models.Book.objects.all()stop_time = time.time()
print(stop_time-start_time)   # 0.14934825897216797
return render(request, 'ab_pl.html', locals())

分頁(yè)器

1. 分頁(yè)器思路

"""
總數(shù)據(jù)100 每頁(yè)展示10 需要10
總數(shù)據(jù)101 每頁(yè)展示10 需要11
總數(shù)據(jù)99 每頁(yè)展示10  需要10如何通過(guò)代碼動(dòng)態(tài)的計(jì)算出到底需要多少頁(yè)？在制作頁(yè)碼個(gè)數(shù)的時(shí)候 一般情況下都是奇數(shù)個(gè)		符合中國(guó)人對(duì)稱(chēng)美的標(biāo)準(zhǔn)
"""
# 分頁(yè)book_list = models.Book.objects.all()# 想訪問(wèn)哪一頁(yè)current_page = request.GET.get('page',1)  # 如果獲取不到當(dāng)前頁(yè)碼 就展示第一頁(yè)# 數(shù)據(jù)類(lèi)型轉(zhuǎn)換try:current_page = int(current_page)except Exception:current_page = 1# 每頁(yè)展示多少條per_page_num = 10# 起始位置start_page = (current_page - 1) * per_page_num# 終止位置end_page = current_page * per_page_num# 計(jì)算出到底需要多少頁(yè)all_count = book_list.count()page_count, more = divmod(all_count, per_page_num)if more:page_count += 1page_html = ''xxx = current_pageif current_page < 6:current_page = 6for i in range(current_page-5,current_page+6):if xxx == i:page_html += '<li class="active"><a href="?page=%s">%s</a></li>'%(i,i)else:page_html += '<li><a href="?page=%s">%s</a></li>'%(i,i)book_queryset =  book_list[start_page:end_page]"""
django中有自帶的分頁(yè)器模塊 但是書(shū)寫(xiě)起來(lái)很麻煩并且功能太簡(jiǎn)單
所以我們自己想法和設(shè)法的寫(xiě)自定義分頁(yè)器我們基于上述的思路 已經(jīng)封裝好了我們自己的自定義分頁(yè)器 
之后需要使用直接拷貝即可
"""

2. 自定義分頁(yè)器的拷貝及使用

2.1 第一步: 新建utils文件夾. 自定義.py文件. 我們這里以: pager.py

當(dāng)我們需要使用到非django內(nèi)置的第三方功能或者組件代碼的時(shí)候, 我們一般情況下會(huì)創(chuàng)建一個(gè)名為utils文件夾 在該文件夾內(nèi)對(duì)模塊進(jìn)行功能性劃分, 而utils這個(gè)文件夾可以在每個(gè)應(yīng)用下創(chuàng)建 具體結(jié)合實(shí)際情況

class Pagination(object):def __init__(self, current_page, all_count, per_page_num=10, pager_count=7):"""封裝分頁(yè)相關(guān)數(shù)據(jù):param current_page: 當(dāng)前頁(yè):param all_count:    數(shù)據(jù)庫(kù)中的數(shù)據(jù)總條數(shù):param per_page_num: 每頁(yè)顯示的數(shù)據(jù)條數(shù):param pager_count:  最多顯示的頁(yè)碼個(gè)數(shù)"""try:current_page = int(current_page)except Exception as e:current_page = 1if current_page < 1:current_page = 1self.current_page = current_pageself.all_count = all_countself.per_page_num = per_page_num# 總頁(yè)碼all_pager, tmp = divmod(all_count, per_page_num)if tmp:all_pager += 1self.all_pager = all_pagerself.pager_count = pager_countself.pager_count_half = int((pager_count - 1) / 2)@propertydef start(self):return (self.current_page - 1) * self.per_page_num@propertydef end(self):return self.current_page * self.per_page_numdef page_html(self):# 如果總頁(yè)碼 < 11個(gè)：if self.all_pager <= self.pager_count:pager_start = 1pager_end = self.all_pager + 1# 總頁(yè)碼  > 11else:# 當(dāng)前頁(yè)如果<=頁(yè)面上最多顯示11/2個(gè)頁(yè)碼if self.current_page <= self.pager_count_half:pager_start = 1pager_end = self.pager_count + 1# 當(dāng)前頁(yè)大于5else:# 頁(yè)碼翻到最后if (self.current_page + self.pager_count_half) > self.all_pager:pager_end = self.all_pager + 1pager_start = self.all_pager - self.pager_count + 1else:pager_start = self.current_page - self.pager_count_halfpager_end = self.current_page + self.pager_count_half + 1page_html_list = []# 添加前面的nav和ul標(biāo)簽page_html_list.append('''<nav aria-label='Page navigation>'<ul class='pagination'>''')first_page = '<li><a href="?page=%s">首頁(yè)</a></li>' % (1)page_html_list.append(first_page)if self.current_page <= 1:prev_page = '<li class="disabled"><a href="#">上一頁(yè)</a></li>'else:prev_page = '<li><a href="?page=%s">上一頁(yè)</a></li>' % (self.current_page - 1,)page_html_list.append(prev_page)for i in range(pager_start, pager_end):if i == self.current_page:temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)else:temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)page_html_list.append(temp)if self.current_page >= self.all_pager:next_page = '<li class="disabled"><a href="#">下一頁(yè)</a></li>'else:next_page = '<li><a href="?page=%s">下一頁(yè)</a></li>' % (self.current_page + 1,)page_html_list.append(next_page)last_page = '<li><a href="?page=%s">尾頁(yè)</a></li>' % (self.all_pager,)page_html_list.append(last_page)# 尾部添加標(biāo)簽page_html_list.append('''</nav></ul>''')return ''.join(page_html_list)

2.2 第二步: 視圖層views.py中使用

from utils.pager import Paginationcurrent_page = request.GET.get('page', 1)
book_queryset = models.Book.objects.all()
all_count = book_queryset.count()# 1. 傳值生成對(duì)象
page_obj = Pagination(current_page=current_page, all_count=all_count)
# 2. 直接對(duì)總數(shù)據(jù)進(jìn)行切片操作
page_queryset = book_queryset[page_obj.start:page_obj.end]
# 3. 將page_queryset傳遞到頁(yè)面. 這就是當(dāng)前所展示的頁(yè)面部分
return render(request, 'ab_pl.html', locals())

2.3 第三步: 模板層中使用

'''
我們自定義的分頁(yè)器是基于bootstrap樣式來(lái)的 所以你需要提前導(dǎo)入bootstrap. 而bootstrap的js部分內(nèi)部通過(guò)jq封裝的, 我們先導(dǎo)入jq.
導(dǎo)入流程:jQuery.min.js  --> bootstrap.min.js
版本要求:bootstrap 版本 v3jQuery    版本 v3
'''

{% for book_obj in page_queryset %}<p>{{ book_obj.title }}</p>    {# 分頁(yè)的內(nèi)容部分 #}
{% endfor %}{#利用自定義分頁(yè)器直接顯示分頁(yè)器樣式#}
{{ page_obj.page_html|safe }}