目录
1. choice参数
class User(models.Model):
username = models.CharField(max_length=32)
password = models.IntegerField()
choices = (
(1,'male'),
(2,'female'),
(3,'others'),
)
gender = models.IntegerField(choices=choices)
"""
1.如果存的是上面元组中数字会怎么样
2.如果存的数字不在元组范围内又会怎样
数字没有对应关系 是可以存的
"""
from app01 import models
user_obj = models.User.objects.filter(pk=4).first()
print(user_obj.username)
print(user_obj.gender) # 获取的是对应的数字
# 针对choices字段 如果你想要获取数字所对应的中文 你不能直接点字段
# 固定句式 数据对象.get_字段名_display() 当没有对应关系的时候 该句式获取到的还是数字
print(user_obj.get_gender_display())
2. MTV与MVC模型
django号称是MTV框架,其实他还是MVC框架
MTV：
M：models(模型): 负责业务对象与数据库的对象(ORM)
T: templates(模版): 负责如何把页面展示给用户
V: views(视图): 负责业务逻辑，并在适当的时候调用Model和Template
MVC：
M：models(模型): 业务对象与数据库的对象(ORM)
V: views(视图): 与用户的交互(页面)
C: contronner(路由匹配): 接受用户的输入调用模型和视图完成用户的请求
3. ajax
1.异步提交
同步异步：描述的任务的提交方式
同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿
异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制
阻塞非阻塞：程序的运行状态
程序运行的三状态图
2.局部刷新
一个页面 不是整体刷新 而是页面的某个地方局部刷新
Ajax是一门js的技术，基于原生js开发的，但是用原生的js写代码过于繁琐
用jQuery实现ajax
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
4. jQuery实现的AJAX
# 展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求 页面不刷新的情况下 完成数字的加法运算
# views.py
def index(request):
if request.is_ajax():
if request.method == 'POST':
t1 = request.POST.get('t1')
t2 = request.POST.get('t2')
res = eval(t1) + eval(t2)
return HttpResponse(res)
return render(request,'index.html')
index.html
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
<button id="b1">计算</button>
</p>
<script>
$('#b1').on('click',function () {
// 朝后端提交post数据
$.ajax({
// 1.到底朝后端哪个地址发数据
url:'', // 专门用来控制向后端提交数据的地址,不写默认就是朝当前地址提交
// 2.到底发送什么请求
type:'post', // 专门指定ajax发送的请求方式
// 3.发送的数据到底是什么
data:{'t1':$('#t1').val(),'t2':$('#t2').val()},
// 4.异步提交的任务 需要通过回调函数来处理
success:function (data) { // data形参指代的就是异步提交的返回结果
// 通过DOM操作将内容 渲染到标签内容上
$('#t3').val(data)
}
})
})
</script>
5. Ajax传json格式数据
'''
django后端针对json格式的数据 不会自动帮你解析 会直接原封不动的给你放到request.body中
你可以手动处理 获取数据
'''
def index(request):
if request.is_ajax():
if request.method == 'POST':
json_bytes = request.body
json_str = json_bytes.decode('utf-8')
json_dit = json.loads(json_str)
print(json_dit,type(json_dit))
return render(request,'index.html')
'''
index.py
$('#b1').on('click',function () {
$.ajax({
url:'',
type:'post',
// 告诉后端你当前的数据格式 到底是什么类型
contentType:'application/json',
data:JSON.stringify({'username':'wzh','password':123}),
success:function (data) {
alert(data)
}
})
})
'''
6. AJAX传文件
# AJAX传文件需要利用内置对象 Formdata
# 该对象既可以传普通的键值 也可以传文件
# views.py
def ajax_file(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return HttpResponse('收到了')
return render(request,'ajax_file.html')
ajax_file.html
<input type="text" name="username" id="t1">
<input type="password" name="password" id="t2">
<input type="file" name="myfile" id="t3">
<button id="b1">提交</button>
<script>
$('#b1').on('click', function () {
// 1.先生成一个formdata对象
var myFormData = new FormData();
// 2.朝对象中添加普通的键值
myFormData.append('username',$('#t1').val());
myFormData.append('password',$('#t2').val());
// 3.朝对象中添加文件数据
// 1.先通过jquery查找到该标签
// 2.将jquery对象转换成原生的js对象
// 3.利用原生js对象的方法 直接获取文件内容
myFormData.append('myfile',$('#t3')[0].files[0]);
$.ajax({
url: '',
type: 'post',
data: myFormData, // 直接丢对象
// ajax传文件 一定要指定两个关键性的参数
contentType: false, // 不用任何编码 因为formdata对象自带编码 django能够识别该对象
processData: false, // 告诉浏览器不要处理我的数据 直接发就行
success: function (data) {
alert(data)
}
})
})
<!--
jax传文件需要注意的事项:
1.利用formdata对象 能够简单的快速传输数据 (普通键值 + 文件)
2.参数:
data:formdata对象
contentType:false
processData:false
-->
7. contentType前后端传输数据编码格式
'''
form表单 默认的提交数据的编码格式是urlencoded
urlencoded
username=admin&password=123这种就是符合urlencoded数据格式
django后端针对username=admin&password=123的urlencoded数据格式会自动解析,将结果打包给request.POST 用户只需要从request.POST即可获取对应信息
formdata
django后端针对formdata格式类型数据 也会自动解析,但是不会放到request.POST中而是给你放到了request.FILES中
ajax ajax默认的提交数据的编码格式也是urlencoded
username=jason&password=123
总结:django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法
前后端在做数据交互的时候 一定一定要表明你所发的的数据到底是什么格式
前段后交互，你的数据是什么格式 你就应该准确无误告诉别人是什么格式
'''
8. 序列化组件
# 将用户表的数据 查询出来 返回给前端
# 给前端的是一个大字典 字典里面的数据的一个个的字段
from app01 import models
from django.core import serializers
def ser(request):
user_queryset = models.User.objects.all()
# user_list = []
# for user_obj in user_queryset:
# user_list.append({
# 'username':user_obj.username,
# 'password':user_obj.password,
# 'gender':user_obj.get_gender_display(),
# })
res = serializers.serialize('json',user_queryset)
print(res)
return render(request,'ser.html',locals())
9. ajax + sweetalert
"""
当你是用ajax做前后端 交互的时候
你可以考虑返回给前端一个大字典
"""
# views.py
from django.http import JsonResponse
def sweet(request):
if request.method == 'POST':
back_dic = {'core':1000,'msg':''}
delete_id = request.POST.get('delete_id')
models.User.objects.filter(pk=delete_id).delete()
back_dic['msg']='后端传的：删除成功'
return JsonResponse(back_dic)
user_queryset = models.User.objects.all()
return render(request,'sweet.html',locals())
sweet.html
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">用户数据</h1>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user_obj in user_queryset %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ user_obj.username }}</td>
<td>{{ user_obj.password }}</td>
<td>{{ user_obj.get_gender_display }}</td>
<td>
<a href="#" class="btn btn-primary btn-sm">编辑</a>
<a href="#" class="btn btn-danger btn-sm cancel" delete_id="{{ user_obj.pk }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
$('.cancel').on('click',function () {
var $btn = $(this)
swal({
title: "确定删除嘛?",
text: "你会失去这条数据!",
type: "warning",
showCancelButton: true, // 是否显示取消按钮
confirmButtonClass: "btn-danger", // 确认按钮的样式类
confirmButtonText: "删除它!", // 确认按钮文本
cancelButtonText: "不删了!", // 取消按钮文本
closeOnConfirm: false, // 点击确认按钮不关闭弹框
showLoaderOnConfirm: true // 显示正在删除的动画效果
},
function () {
$.ajax({
url:'',
type: 'post',
data:{'delete_id':$btn.attr('delete_id')},
success:function (data) {
if (data.core == 1000){
swal(data.msg, "你已成功删除数据", "success");
// 1.直接刷新页面
{#window.location.reload()#}
// 2.通过DOM操作 实时删除
$btn.parent().parent().remove()
}else {
swal("发生未知错误","未知哪里有错",'info')
}
}
})
});
})
</script>