07--choices参数 MTV和MVC模型 Ajax 前后端数据的编码格式 利用ajax传文件 序列化组件 ajax结合sweetalert的使用 分页器
Choices参数：
class User(models.Model): username = models.CharField(max_length=32) age = models.IntegerField() choices = ( (1,'男'),(2,'女'),(3,'其他') ) gender = models.IntegerField(choices=choices)
使用:
user_obj = models.User.objects.filter(pk=7).first() # print(user_obj.gender) 会展示存入的数字 print(user_obj.get_gender_display()) # 展示数字对应的值 """ 1 存choice里面罗列的数字与中文对应关系: print(user_obj.get_gender_display()) 只要是choices字段 在获取数字对应的注释 固定语法 get_choices字段名_display() 2 存没有罗列迟来的数字 不会报错 还是展示你存入的数字 """
MTV与MVC模型
"""
MTV: django框架 自称为是MTV框架 M:models T:templates V:views MVC: M:models V:views C:controller 控制器(urls路由匹配关系) 本质:MTV其实也是MVC """
Ajax相关介绍:
""" 简介： 首先,ajax这门技术是js中的,但是原生的js操作ajax比较繁琐,我们这里为了提高效率 直接使用jQuery封装版本的ajax，AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 """ """ 特点： 异步提交 局部刷新 请求方式 GET POST a标签href属性 GET请求 浏览器窗口输入url GET请求 form表单 GET/POST ajax GET/POST """
小练习:
#页面上有三个input框： #在前两个input框中输入数字 #点击按钮 发送ajax请求 不刷新页面的情况下 #第三个框中自动算出两数之和
Ajax基本使用：
$('#b1').on('click',function () {
// 点击按钮 朝后端发送post请求
$.ajax({
url:'', // 控制发送给谁 不写就是朝当前地址提交
type:'post', // 发送方式是post请求
data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, // 发送的数据
success:function (data) { // data形参用来接收异步提交的结果
// 将后端计算好的结果 通过DOM操作 渲染到第三个input框中
$('#i3').val(data)
}
})
}
)
前后端传输数据编码格式：
contentType可以指定前后端传输数据编码格式:
前后端传输数据编码格式: 1.urlencoded 2.formdata 3.json
form表单提交数据:
# 默认使用的编码格式:urlencoded # 发送的数据格式:name=jason&pwd=123 # django后端针对urlencoded编码格式的数据会自动解析并放到request.POST中供用户获取. # 传文件:需要指定编码格式为enctype="multipart/form-data"，之后后端将把文件解析到request.FILES中 # 总结:前后端传输数据的时候，要保证传输的数据格式与你的编码格式是一致的。
ajax提交json格式的数据:
ajax默认数据提交方式:urlencoded # 提交json格式数据需要修改编码格式: # contentType:'application/json', // 告诉后端你这次的数据是json格式 # 提交的数据需要用json编码: # data:JSON.stringify({'username':'jason','password':123}), // 发送的数据 # 总结:django后端针对json格式的数据并不会自动解析,而是将它原封不动的放在request.body中了。
ajax传输文件:
// ajax传输文件 $('#b1').on('click',function () { // ajax传输文件 建议使用内置对象formdata var formData = new FormData(); // 既可以传普通的键值对 也可以传文件 // 添加普通键值 formData.append('username','jason'); formData.append('password','123'); // 传文件 // 如何获取文件标签所存储的文件对象? 固定语法 // 1.先用jQery查找到存储文件的input标签 // 2.将jQuery对象转成原生js对象 // 3.利用原生js对象的方法 .files[0]获取到标签内部存储的文件对象 // 4.一定要指定两个参数都为false formData.append('my_file',$('#d1')[0].files[0]); $.ajax({ url:'', // 控制发送给谁 不写就是朝当前地址提交 type:'post', // 发送方式是post请求 data:formData, // 发送的数据 // ajax发送文件需要指定两个额外的参数 processData:false, // 告诉前端不要处理数据 contentType:false, // 不适用任何编码 因为formdata对象自身自带编码 django后端也能够识别formdata对象 success:function (data) { // data形参用来接收异步提交的结果 // 将后端计算好的结果 通过DOM操作 渲染到第三个input框中 $('#i3').val(data) } }) })
序列化组件:
作用:将后台的quaryset对象的信息处理为json格式的带有详细信息的大字典，并返回给前端。
from django.core import serializers # django自带的一个小型的序列化工具 def reg(request): user_list = models.User.objects.all() res = serializers.serialize('json',user_list) # 传入格式，quaryset对象 return render(request,'index.html',locals())
前台拿到的结果:
[{ "model": "app01.user", "pk": 1, "fields": { "username": "jason", "age": 18, "gender": 1 } }, { "model": "app01.user", "pk": 2, "fields": { "username": "tank", "age": 24, "gender": 3 } }]
sweetalert插件的使用：
下载地址:https://github.com/lipis/bootstrap-sweetalert
使用:需要先引入bootstrap,jQuary,dist中的sweetalert插件
$('.del').click(function () {
// 获取当前标签对象
var $btnEle = $(this);
swal({
title: "是否确定删除?",
text: "你正在执行删除操作!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确认删除！",
cancelButtonText: "取消删除!",
closeOnConfirm: false,
showLoaderOnConfirm: true // 执行过程等待时加载动画
},
function(){
// 朝后端发送ajax请求
$.ajax({
url:'',
type:'post',
data:{'delete_id':$btnEle.attr('user_id')},
success:function (data) { // 后端发字典过来 前端不需要你手动转 会自动帮你转换成js自定义对象
if (data.code == 100){
{#window.location.href = ''; // 不写就是条到当前页面跳转#}
// 通过DOM操作 实时改变页面
// 将被点击的删除按钮所在的那一行直接从DOM树中删掉
$btnEle.parent().parent().remove();
swal("删掉成功!", "赶紧回去收拾行李吧,准备跑路!", "success");
}else{
swal('发生了未知的错误','估计是有bug了','info')
}
}
});
});
})
自定义分页器的使用：
批量插入数据:
# 批量插入数据对比: # 普通方式插入数据 for i in range(1000): models.Book.objects.create(title='第%s本书'%i) # 这种方式 效率极低 # bulk_create() 批量插入数据 l = [] for i in range(10000): l.append(models.Book(title='第%s本书'%i)) models.Book.objects.bulk_create(l) # 批量插入数据，效率很高
自己推导的过程:
current_page = request.GET.get("page",1) # 获取用户想访问的页码 如果没有 默认展示第一页 current_page = int(current_page) per_page_num = 10 # 规定每页展示10条数据 start_page = (current_page - 1) * per_page_num end_page = current_page * per_page_num book_list = models.Book.objects.all()[start_page:end_page] all_count = models.Book.objects.all().count() page_num,more = divmod(all_count,per_page_num) if more: page_num += 1 # 在后端生成分页器代码 然后传递给前端 html = '' current_page_num = current_page if current_page < 6: current_page_num = 6 for i in range(current_page_num -5,current_page_num +6): if i == current_page: html += '<li class="active"><a href="?page=%s" >%s</a></li>'%(i,i) else: html += '<li><a href="?page=%s">%s</a></li>' % (i, i)
使用自己封装的:
class Pagination(object): def __init__(self, current_page, all_count, per_page_num=2, pager_count=11): """ 封装分页相关数据 :param current_page: 当前页 :param all_count: 数据库中的数据总条数 :param per_page_num: 每页显示的数据条数 :param pager_count: 最多显示的页码个数 用法: queryset = model.objects.all() page_obj = Pagination(current_page,all_count) page_data = queryset[page_obj.start:page_obj.end] 获取数据用page_data而不再使用原始的queryset 获取前端分页样式用page_obj.page_html """ try: current_page = int(current_page) except Exception as e: current_page = 1 if current_page < 1: current_page = 1 self.current_page = current_page self.all_count = all_count self.per_page_num = per_page_num # 总页码 all_pager, tmp = divmod(all_count, per_page_num) if tmp: all_pager += 1 self.all_pager = all_pager self.pager_count = pager_count self.pager_count_half = int((pager_count - 1) / 2) @property def start(self): return (self.current_page - 1) * self.per_page_num @property def end(self): return self.current_page * self.per_page_num def page_html(self): # 如果总页码 < 11个： if self.all_pager <= self.pager_count: pager_start = 1 pager_end = self.all_pager + 1 # 总页码 > 11 else: # 当前页如果<=页面上最多显示11/2个页码 if self.current_page <= self.pager_count_half: pager_start = 1 pager_end = self.pager_count + 1 # 当前页大于5 else: # 页码翻到最后 if (self.current_page + self.pager_count_half) > self.all_pager: pager_end = self.all_pager + 1 pager_start = self.all_pager - self.pager_count + 1 else: pager_start = self.current_page - self.pager_count_half pager_end = self.current_page + self.pager_count_half + 1 page_html_list = [] # 添加前面的nav和ul标签 page_html_list.append(''' <nav aria-label='Page navigation>' <ul class='pagination'> ''') first_page = '<li><a href="?page=%s">首页</a></li>' % (1) page_html_list.append(first_page) if self.current_page <= 1: prev_page = '<li class="disabled"><a href="#">上一页</a></li>' else: prev_page = '<li><a href="?page=%s">上一页</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="#">下一页</a></li>' else: next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,) page_html_list.append(next_page) last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,) page_html_list.append(last_page) # 尾部添加标签 page_html_list.append(''' </nav> </ul> ''') return ''.join(page_html_list)
# 自定义分页器的使用
from app01.utils.mypage import Pagination
#后端代码: book_list = models.Book.objects.all() current_page = request.GET.get("page",1) all_count = book_list.count() page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10,pager_count=5) page_queryset = book_list[page_obj.start:page_obj.end] # 前端代码: {% for book in page_queryset %} <p>{{ book.title }}</p> {% endfor %} {{ page_obj.page_html|safe }} # 直接渲染后端发过来的html代码
