runsong911
runsong911

自学Python第二十二天- Django框架(三) AJAX、文件上传、多APP开发、iframe、验证码、分页器、类视图、中间件、信号、日志、缓存、celery异步

Django官方文档

django 使用 AJAX

django 项目中也可以使用 ajax 技术

前端

前端和其他 web 框架一样，需要注意的是，django 接收 POST 请求时，需要 csrf_token 进行验证，而在 ajax 中获取 csrf_token 比较麻烦。所以通常会在后端免除 csrf_token 验证。

绑定事件方式

{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <h1>任务管理h1>
        <input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>
    div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
        function clickMe() {
            $.ajax({
                url: "/test/ajax/",
                type: "get",
                data: {
                	type:'add',
                    n1:123,
                    n2:456
                },
                success: function (res) {
                    console.log(res);
                }
            })
        }
    script>
{% endblock %}

以 jQuery 方式

{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <h1>任务管理h1>
        <input type="button" class="btn btn-primary" value="点击" id="btn1" />
    div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
        $(function (){
            // 页面框架加载完成后代码自动执行
            bindBtn1Event();        // 绑定事件
        })
        function bindBtn1Event(){
            $("#btn1").click(function (){       // 绑定到 btn1 的 click 事件的函数
                $.ajax({
                    url: "/task/ajax/",
                    type: "POST",
                    data: $("#addForm").serialize(),
                    dataType:'JSON',
                    success: function (res) {
                        console.log(res);
                        // console.log(res.res_add)
                        // console.log(res['res_add'])
                    }
                })
            })
        }
    script>
{% endblock %}

后端

后端部分只要将响应请求 url 绑定视图函数，则可以在视图函数中进行处理

def task_ajax(request):
    """测试ajax"""
    return HttpResponse('成功')

从请求体中获取数据

对于 request.POST 在使用中有一些限制：

  • 只能用于 POST 请求，对于 PUT、DELETE 等非 POST 请求不能使用
  • 只能用于表单数据，即 content-type 为 application/x-www-form-urlencoded 类型的请求

对于其他数据，必须从请求体中获取。因为 request.body 中的数据是字节型，所以需要先解析。

import json

def data_form_body(request):
	req_dict = json.loads(request.body)
	category = req_dict.get('category)

返回 json 数据

可以使用 json 的 dumps 方法将字典转为 json 并返回

import json

def task_ajax(request):
	res_dict = {'res':'ok', 'data':{'k1': 'v1', 'k2': 'v2'}}
	res_dict = json.dumps(res_dict)
    return HttpResponse(res_dict)

也可以直接使用 JsonResponse 返回数据

from django.http import JsonResponse

def task_ajax(request):
	res_dict = {'res':'ok', 'data':{'k1': 'v1', 'k2': 'v2'}}
    return JsonResponse(res_dict)

禁用 csrf 校验检查

前端发送 post 请求时如果不加载 csrf_token，则后端需要禁用 csrf 校验检查

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def task_ajax(request):
	return HttpResponse('成功')

或在注册路由时注明

from django.views.decorators.csrf import csrf_exempt

urlpatterns = [
	path('goods/', csrf_exempt(views.goods), name='goods'),
]

或在settings.py 的中间件中取消 csrf 中间件(不推荐)。

Ajax 结合 ModelForm

Ajax 结合 ModelForm 在前端实际上几乎没有改变，要注意的也就是按钮绑定 Ajax 函数和不用 csrf_token。

在后端，ModelForm 其实接收到的数据也是 form 的字典格式，包含校验、保存等处理方式没有变化，只是在返回值时有了变化。

处理重定位信息

因为 Ajax 是接收处理数据，所以后端返回 重定位 信息是无法跳转的。如果希望跳转，则需要返回一个 json ，ajax 收到了这个特定的 json 数据后使用 js 进行页面跳转。

处理表单错误信息

另外返回 ModelForm 错误信息时，form.字段.errors 获取的是一个字典，可以整理成 json 格式返回给 ajax 处理。


<form id="addForm" novalidate>
    <div class="clearfix">
        {% for field in form %}
            
            <div class="col-xs-6">
                <div class="form-group">
                    <label>{{ field.label }}label>
                    {{ field }}
                    
                    
                    <span style="color: red">span>
                div>
            div>
        {% endfor %}
        <div class="col-xs-12">
            <button type="button" id="btnAdd" class="btn btn-primary">添加button>
        div>
    div>
form>
<script type="text/javascript">
    $(function () {
        // 页面框架加载完成后代码自动执行
        bindBtnAddEvent();
    })
    function bindBtnAddEvent() {
        $("#btnAdd").click(function () {
        	$(".error-msg").empty();        // 清空上一次的错误信息
            $.ajax({
                url: "/task/add/",
                type: "POST",
                data: $("#addForm").serialize(),
                dataType: 'JSON',
                success: function (res) {
                    if(res.status){
                        alert("添加成功！");
                    }else{
                        console.log(res);
                        $.each(res.error,function (name,data){      // 循环每一个错误，获取键值
                            // 拼接 id_ 和 name，获取对应文本框的 id
                            // 查找文本框元素的下一个元素(span)，使其文本(text)为错误信息
                            $("#id_" + name).next().text(data[0]);
                        })
                    }
                }
            })
        })
    }
script>

文件上传

简单的文件上传

前端会将文件以 post 请求发送至后端，后端可以使用 request.FILES 来接收。需要注意的是 form 需要 enctype 属性。

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="filename">
    <input type="file" name="file">
    <input type="submit" value="提交">
form>

file_obj = request.FILES.get('file')  # 获取上传文件的对象
filename = request.POST.get('filename', file_obj.name)      # 获取设置的文件名，如果没有则为原文件名。
with open(filename, mode='wb') as f:
    for chunk in file_obj.chunks():  # 将上传文件分块读取
        f.write(chunk)
    f.flush()	# 文件写入完成，冲刷缓冲区

ajax 上传文件

ajax 上传文件和发送 json 的不同在于，发送的数据是一个 FormData 对象，创建这个对象时可以将表单 form 的 dom 对象传入。

$("#upload").click(function () {
   var formData = new FormData($('#uploadForm')[0]);
   // 或使用 FormDate 对象添加文件对象的方式
   // var formData = new FormData();
   // formDate.append('file', this.file[0]);		//这里的 this 指向上传文件的 input 标签的dom对象
   // formDate.append('key', value);		// 可以添加其他的数据
   $.ajax({
    type: 'post',
    url: "https://****:****/fileUpload", //上传文件的请求路径必须是绝对路劲
     data: formData,
     cache: false,
     processData: false,
     contentType: false,
      }).success(function (data) {
        console.log(data);
        alert("上传成功"+data);
        filename=data;
      }).error(function () {
         alert("上传失败");
     });
    });

后端接收时，注意接收字段是前端定义的 name ,文件从 requests.FILES 里获取

uid = requests.POST.get('uid')		# 获取数据
file = requests.FILES.get('file')	# 获取文件
# files = requests.FILES.getlist('files')	# 获取多个文件

使用 Form 组件上传文件

使用 Form 时可以定义文件字段 FileField ，定义后就能够上传文件了。

class UpForm(forms.Form):
	name = forms.CharField(label='姓名')
	age = forms.IntegerField(label='年龄')
	img = forms.FileField(label='头像')

def upload_form(request):
	form = UpForm(data=request.POST, files=request.FILES)
	if form.is_valid():
		print(form.cleaned_data)
		# 文件在 form.cleaned_data 的相应字段(img)内
		img = form.cleaned_data.get('img')
		file_path = os.path.join('app01', 'static', 'img', img.name)	# 拼接文件路径
		with open(file_path,'wb') as f:		# 写入文件
			for chunk in img.chunks():
				f.write(chunk)

	else:
		return render(request, 'upload.html', {'form': form})

<form method="post" enctype="multipart/form-data" novalidate>
	.
	.
	.
form>

文件上传至上传目录 media

通常使用的静态资源都在 static 文件夹内，如果想要用户上传文件到一个特定文件夹，例如项目根目录下的 media 文件夹，则需要在 urls.py 中进行设置启用。首先引入一些资源，再在 urls.py 文件的 urlpatterns 字段添加：

from django.views.static import serve
from django.urls import path, re_path
from django.conf import settings

re_path(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),

然后在 settings.py 中进行配置：

import os

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')		# 项目根目录下的 media 目录
MEDIA_URL = '/media/'

此时上传文件保存的路径可以写为

media_file_path = os.path.join('media', image_obj.name)

这样将用户上传的文件放在 media 目录下，也可以通过 /media/文件名 的 url 来访问，例如 http://127.0.0.1:8000/media/001.png

使用 ModelForm 组件上传文件

ModelForm 组件可以自动上传文件，并存储保存路径到数据库，不用再写相应保存的代码，且能够自动进行重名处理。只是需要设置了上传保存目录。

需注意的是，保存到数据库中的文件路径也是 media 下的相对路径，并且不包含 media ，使用时候注意添加 media。

# models.py

class City(models.Model):
	"""城市"""
	name = models.CharField(verbose_name='名称', max_length=32)
	count = models.IntegerField(verbose_name='人口')

	# 本质上数据库存储的是文件路径，也是CharField，可以自动保存数据
	# upload_to 指的就是上传文件到哪个目录，是 media 目录下的相对路径
	img = models.FileField(verbose_name='logo', max_length=128, upload_to='city/')

# views.py

class UpModelForm(forms.ModelForm)
	class Meta:
		model = models.City
		fields = '__all__'
	
def upload_modal_form(request):
	form = UpModelForm(data=request.POST, files=request.FIELS）
	if form.is_valid():
		# 保存文件，保存 form 字段信息和文件路径并写入数据库
		form.save()
		return HttpResponse('成功')

多 app 开发

django 多人协作开发时，每人开发不同的 app 也可能会遇到一些问题：对于相同名称的模板或静态资源的使用问题。因为 django 搜索静态资源和模板是安装 app 注册的顺序，在各 app 目录下查找模板或静态资源文件。如果有相同名称的模板或静态资源文件，后注册的 app 就会使用先注册 app 的同名文件了。

所以对于模板文件来说，在各自 app 下的 templates 文件夹下建立 app 名称的文件夹，再建立模板文件，使得各模板文件引用时会加入各自 app 的名称，这样就不会出现引用路径相同的问题了。

对于静态资源文件，因为涉及公共静态资源，所以需要注册静态资源路径。

# settings.py

STATIC_URL = '/static/'		
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, "static"),			# 主静态文件目录
  os.path.join(BASE_DIR, "main", "static"),		# main app 静态文件目录
  os.path.join(BASE_DIR, "login", "static"),	# login app 静态文件目录
]

然后可以在每个APP下的static下建立以APP名相同的文件夹，比如在 login/static/login/ 放入样式JS CSS等

调用时使用 static 结构，加上 app 名称

{% static 'main/img/firefox-logo-small.jpg' %}

{% static 'login/img/name.png' %}

另外对于静态文件的打包整合可以参考这篇文章：

解决django多个app下的静态文件无法访问问题

使用 iframe

django 使用 iframe 时，可能浏览器会出现错误，根据提示信息发现是因为 X-Frame-Options=deny 导致的。

Refused to display xxx in a frame because it set 'X-Frame-Options' to 'deny'.

官方文档中关于点击劫持保护

点击劫持保护

The X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 ,