在django部分，如果你写代码的时候报错了
1.pycharm窗口提示，前端console界面
2.仔细核对代码(单词写错写多)
3.浏览器缓存没有清除
4.端口号可能冲突了，一直跑的是之前的项目
5.重启你的计算机
今日内容概要
- 前后端传输数据的编码格式(contentType)
- ajax发送json格式数据
- ajax发送文件数据
- ajax结合sweetalert实现删除按钮的二次确认
- django自带的序列化组件(drf做铺垫)
- 批量插入
- 自己写一个分页器(只需要掌握分页器的推导思路即可)
- 自定义分页器的使用(简单几行代码即可 需要掌握)
- forms组件
今日内容详细
前后端传输数据的编码格式(contentType)
前后端传输数据的编码格式
urlencoded
formdata
json
get请求数据就是直接放在url后面的
url?username=jason&password=123
可以朝后端发送post请求的方式
form表单
ajax请求
form表单
默认的数据编码格式是urlencoded
数据格式:username=jason&password=123
django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
username=jason&password=123 >>> request.POST
编码格式改成formdata，
针对普通的键值对还是解析到request.POST中而将文件解析到request.FILES中
form表单是没有办法发送json格式数据的
ajax
默认的编码格式也是urlencoded
数据格式:username=jason&age=20
django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
username=jason&age=20 >>> request.POST
ajax发送json格式数据
前后端传输数据的时候 一定要确保 编码格式 跟 数据真正的格式 是一致的
{"username":"jason","age":25} 在request.POST里面肯定找不到
ajax发送json格式数据需要注意点
1.contentType参数指定成:application/json
2.数据是真正的json格式数据
3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理
django针对json格式的数据 不会做任何的处理
request.is_ajax()
判断当前请求是否是ajax请求 返回布尔值
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post'
,
data:JSON.stringify({'username':'jason','age':25}), 数据的格式
contentType:'application/json', // 指定编码格式
success:function (视图函数的返回值) {
回调函数
}
})
})
</script>
# 获取json的数据
json_bytes = request.body
json_str = json_bytes.decode('utf-8')
json_dict = json.loads(json_str)
# json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
json_dict = json.loads(json_bytes)
ajax发送文件
ajax发送文件需要借助于js内置对象FormData
总结:
1.需要利用内置对象FormData
2 添加普通的键值对
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
3 添加文件对象
formDateObj.append('myfile',$('#d3')[0].files[0])
2.需要指定两个关键性的参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉你的浏览器不要对你的数据进行任何处理
3.django后端能够直接识别到formdata对象
并且能够将内部的普通键值自动解析并封装到request.POST中
文件数据自动解析并封装到request.FILES中
<script>
$('#d4').on('click',function () {
// 1 需要先利用FormData内置对象
let formDateObj = new FormData();
// 2 添加普通的键值对
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
// 3 添加文件对象
formDateObj.append('myfile',$('#d3')[0].files[0])
// 4 将对象基于ajax发送给后端
$.ajax({
url:'',
type:'post',
data:formDateObj, // 直接将对象放在data后面即可
// ajax发送文件必须要指定的两个参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉你的浏览器不要对你的数据进行任何处理
success:function (args) {
}
})
})
</script>
django自带的序列化组件(drf做铺垫)
需求:在前端获取到后端用户表里面所有的数据 并且要是列表套字典
import json
from django.http import JsonResponse
from django.core import serializers
def ab_ser(request):
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)
return JsonResponse(user_list,safe=False)
自己形成列表的数据
[
{"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}
]
前后端分离
return render(request,'ab_ser.html',locals())
序列化组件serializers形成的数据
[
{ "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}}
]
# 序列化
res = serializers.serialize('json',user_queryset)
"""会自动帮你将数据变成json格式的字符串 并且内部非常的全面"""
return HttpResponse(res)
作为后端开发的你只需要写代码将数据处理好
能够序列化返回给前端即可
再写一个接口文档 告诉前端每个字段代表的意思即可
写接口就是利用序列化组件渲染数据然后写一个接口文档 该交代交代一下就完事
ajax结合sweetalert
<script>
$('.del').on('click',function () {
// 先将当前标签对象存储起来
let currentBtn = $(this);
// 二次确认弹框
swal({
},
function(isConfirm) {
if (isConfirm) {
// 朝后端发送ajax请求删除数据之后 再弹下面的提示框
$.ajax({
url:'/delete/user/' + currentBtn.attr('delete_id'),
传递主键值方式1
url:'/delete/user/', // 2 放在请求体里面
type:'post',
data:{'delete_id':currentBtn.attr('delete_id')},
success:function (args) {
// args = {'code':'','msg':''}
// 判断响应状态码 然后做不同的处理
if(args.code === 1000){
swal("删了!", args.msg, "success");
// 1.lowb版本 直接刷新当前页面
window.location.reload()
// 2.利用DOM操作 动态刷新
currentBtn.parent().parent().remove()
}else{
swal('完了','出现了位置的错误','info')
}
}
})
} else {
swal("怂逼", "不要说我认识你", "error");
}
});
})
</script>
批量插入
def ab_pl(request):
for i in range(10000):
models.Book.objects.create(title='第%s本书'%i)
book_queryset = models.Book.objects.all()
# 批量插入
book_list = []
for i in range(100000):
book_obj = models.Book(title='第%s本书'%i)
book_list.append(book_obj)
models.Book.objects.bulk_create(book_list)
当你想要批量插入数据的时候 使用orm给你提供的bulk_create能够大大的减少操作时间
return render(request,'ab_pl.html',locals())
分页器
# 分页
book_list = models.Book.objects.all()
# 想访问哪一页
current_page = request.GET.get('page',1) # 如果获取不到当前页码 就展示第一页
# 数据类型转换
try:
current_page = int(current_page)
except Exception:
current_page = 1
# 每页展示多少条
per_page_num = 10
# 起始位置
start = (current_page - 1) * per_page_num
# 终止位置
end = current_page * per_page_num
# 计算出到底需要多少页
all_count = book_list.count()
page_count, more = divmod(all_count, per_page_num)
if more:
page_count += 1
page_html = ''
xxx = current_page
if current_page < 6:
current_page = 6
for 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:end]
"""
django中有自带的分页器模块 但是书写起来很麻烦并且功能太简单
所以我们自己想法和设法的写自定义分页器
我们基于上述的思路 已经封装好了我们自己的自定义分页器
之后需要使用直接拷贝即可
"""