Django - 文件上传、Django组件 - 分页器（paginator）

一、文件上传准备知识 - Content-Type

1、请求头 - Content-Type

Content-Type指的是请求体的编码类型，常见的类型共有3种：

1）application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么默认就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

    POST http://www.example.com HTTP/1.1
    Content-Type: application/x-www-form-urlencoded;charset=utf-8
 
    user=yuan&age=22

示例：ajax以application/x-www-form-urlencoded方式提交数据（实现一个简单计算器）

　　　　模板部分：

　　　　<div>
　　　　　　<input type="text" id="num1"> +
　　　　　　<input type="text" id="num2"> =
　　　　　　<input type="text" id="res">
　　　　　　<input type="button" class="calbtn" value="提交">
　　　　</div>
 
　　　　<script>
　　　　　　// ajax默认发送发送格式也是urlencoded
　　　　　　$(".calbtn").click(function () {
 
　　　　　　　　var num1 = $("#num1").val()
　　　　　　　　var num2 = $("#num2").val()
 
　　　　　　　　$.ajax({
　　　　　　　　　　url:"/cal/",
　　　　　　　　　　type:"post",
　　　　　　　　　　data:{
                    num1: num1,
                    num2: num2,
                    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
　　　　　　　　　　},
　　　　　　　　　　success:function (response) {
                    console.log(response);
                    $("#res").val(response)
　　　　　　　　　　}
　　　　　　　　})
　　　　　　});
    </script>

　　　　视图部分：

　　　　def cal(request):
          # Django将接收到的urlencoded格式数据拆包成字典形式放到request.POST中
          num1 = request.POST.get("num1")
          num2 = request.POST.get("num2")
          sum = int(num1) + int(num2)
          return HttpResponse(str(sum))

2）multipart/form-data

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。直接来看一个请求示例：

　　　　POST http://www.example.com HTTP/1.1
    　 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
 
    　 ------WebKitFormBoundaryrGKCBY7qhFd3TrwA
    　 Content-Disposition: form-data; name="user"
 
    　 yuan
    　 ------WebKitFormBoundaryrGKCBY7qhFd3TrwA
    　 Content-Disposition: form-data; name="file"; filename="chrome.png"
    　 Content-Type: image/png
 
    　 PNG ... content of chrome.png ...
    　 ------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。关于 multipart/form-data 的详细定义，请前往 rfc1867（http://www.ietf.org/rfc/rfc1867.txt） 查看。

这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。

上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生 <form> 表单也只支持这两种方式（通过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。

随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。

3）application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify()，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

示例：ajax发送json格式数据（实现一个简单的计算器）

模板部分：

　　<script>
　　　　$(".calbtn").click(function () {
 
　　　　　　var num1 = $("#num1").val()
　　　　　　var num2 = $("#num2").val()
 
　　　　　　$.ajax({
　　　　　　　　url:"/cal/",
　　　　　　　　type:"post",
　　　　　　　　contentType:"json",     // 需要客户端告诉服务端发送的是json格式
　　　　　　　　data:JSON.stringify({
　　　　　　　　　　num1: num1,
　　　　　　　　　　num2: num2,
　　　　　　　　　　// csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
　　　　　　　　　　// 这时csrfmiddlewaretoken不能再这样发，下面说明解决办法
　　　　　　　　}),
　　　　　　　　success:function (response) {
　　　　　　　　　　console.log(response);
　　　　　　　　　　$("#res").val(response)
　　　　　　　　}
　　　　　　})
　　　　});
　　</script>

视图部分：

　　def cal(request):
　　　　print(request.body)  # b'{"num1":"11","num2":"22"}'
　　　　data_json = request.body.decode("utf8")
　　　　import json
　　　　data_dict = json.loads(data_json)
 
　　　　num1 = data_dict.get("num1")
　　　　num2 = data_dict.get("num2")
　　　　sum = int(num1) + int(num2)
　　　　return HttpResponse(str(sum))

总结：form表单请求不能提交json格式数据，ajax请求可以支持提交以上三种数据格式，但用于json最多。

二、文件上传示例

1、基于form表单的文件上传

模板部分：

　　<form action="" method="post" enctype="multipart/form-data">
　　　　用户名<input type="text" name="user">
　　　　文件名<input type="file" name="file_obj">
　　　　<input type="submit">
　　　　{% csrf_token %}
　　</form>

视图部分：

　　import os
　　from mybms import settings
 
　　def fileput_form(request):
　　　　print(request.body)  # 原始的请求体数据(只有post请求才有请求体,所以只有post请求时request.body才有值)
　　　　print(request.GET)  # GET请求数据
　　　　print(request.POST)  # POST请求数据
　　　　print(request.FILES)  # 上传的文件数据
　　　　# <MultiValueDict: {'file_obj': [<InMemoryUploadedFile: Desert.jpg (image/jpeg)>]}>
　　　　file_obj = request.FILES.get("file_obj")  # 获取文件对象，即该文件句柄
　　　　# 文件对象有一个name属性，获取文件名称字符串
　　　　print(file_obj.name)  # Desert.jpg
　　　　path = file_obj.name
 
　　　　path = os.path.join(settings.BASE_DIR,"media","img",path)
　　　　with open(path,"wb") as f:
　　　　　　for line in file_obj:  # 读文件
　　　　　　　　f.write(line)   # 写文件
 
　　　　return HttpResponse("OK")

2、基于ajax的文件上传

模板部分：

　　<div>
　　　　姓名<input type="text" id="user">
　　　　文件<input type="file" name="file_obj" id="file">
　　　　<input type="button" class="filebtn" value="提交">
　　　　<p class="msg"></p>
　　</div>
 
　　<script src="/static/js/jquery.min.js"></script>
　　<script>
        // 发送文件
        $(".filebtn").click(function () {
 
            var formdata=new FormData();
            formdata.append("file_obj",$("#file")[0].files[0]);
            formdata.append("user",$("#user").val());
 
            $.ajax({
                url:"/fileput/",
                type:"post",
 
                // Ajax上传文件必备参数
                processData: false,    // 不处理数据
                contentType: false,    // 不设置内容类型
 
                data:formdata,
                success:function (response) {
                    console.log(response);
                    if (response=="OK"){
                        $(".msg").html("提交成功！")
                    }
                }
            })
        })
　　</script>

视图部分和form表单的视图一样即可。

3、补充

　　ajax以post请求方式发送json格式数据时，解决csrf_token的forbidden的方法是什么？

　　了解原理：Django服务器获取csrfmiddlewaretoken与后边的随机字符串这个键值对有两种方式，一个是我们之前所学的去request.POST中取，还有另外一种方式，Django会去请求头中去找，而ajax以post请求方式发送json格式数据时，request.POST中没有这个键值对，所以我们可以用如下方式解决，即在发送ajax请求时，加一个请求头，代码如下：

　　首先要引入一个jquery.cookie.js文件，这是jquery操作cookie的文件，如下：

　　<script src="/static/js/jquery.cookie.js"></script>
 
　　$.ajax({
　　　　headers:{
　　　　　　"CSRFToken":$.cookie('csrftoken')
　　　　},
　　})

三、Django组件 - 分页器（paginator）

1、视图（views.py）

　　from django.shortcuts import render,HttpResponse
 
　　# Create your views here.
　　from app01.models import Book  # 假设models中有一个书籍表
　　from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
　　def index(request):
        '''
        批量导入数据:
        booklist = []
        for i in range(100):
            booklist.append(Book(title="book"+str(i), price=30+i*i))
        Book.objects.bulk_create(booklist)
        '''
        '''
        分页器的使用:
        book_list = Book.objects.all()
        paginator = Paginator(book_list, 10)   # 实例化对象，每页有10条数据
 
        print("count:", paginator.count)           # 数据总数
        print("num_pages", paginator.num_pages)    # 总页数
        print("page_range", paginator.page_range)  # 页码的列表
 
        page1 = paginator.page(1)  # 第1页的page对象
        for i in page1:          # 遍历第1页的所有数据对象
            print(i)
        print(page1.object_list)  # 第1页的所有数据
 
        page2 = paginator.page(2)  # 第2页的page对象
 
        print(page2.has_next())            # 是否有下一页
        print(page2.has_previous())        # 是否有上一页
        print(page2.next_page_number())    # 下一页的页码
        print(page2.previous_page_number()) # 上一页的页码
 
        # 抛错
        # page = paginator.page(12)   # 超出范围的错误类型，error:EmptyPage
        # page = paginator.page("z")   # error:PageNotAnInteger
 
        '''
        book_list = Book.objects.all()
        paginator = Paginator(book_list, 10)
 
        current_page_num = request.GET.get('page', 1)
 
        try:
        currentPage = int(current_page_num)
            book_list = paginator.page(current_page_num)
        except (PageNotAnInteger, ValueError):
            book_list = paginator.page(1)   # 页码不是数字字符串，返回第一页
        currentPage = 1
        except EmptyPage:
            book_list = paginator.page(paginator.num_pages)  # 超范围，返回最后一页
        currentPage = paginator.num_pages
 
        return render(request, "index.html", {"book_list": book_list, "paginator": paginator, "currentPage": currentPage})

2、模板（index.html）

　　<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>paginator</title>
　　　　<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
　　</head>
　　<body>
 
　　<div class="container">
        <h4>分页器</h4>
        <ul>
            {% for book in book_list %}
                 <li>{{ book.title }} ----- {{ book.price }}</li>
            {% endfor %}
        </ul>
 
        <ul class="pagination" id="pager">
            {% if book_list.has_previous %}
                <li class="previous"><a href="/index/?page={{ book_list.previous_page_number }}">上一页</a></li>
            {% else %}
                <li class="previous disabled"><a href="#">上一页</a></li>
            {% endif %}
 
            {% for num in paginator.page_range %}
                {% if num == currentPage %}
                    <li class="item active"><a href="/index/?page={{ num }}"> {{ num }} </a></li>
                {% else %}
                    <li class="item"><a href="/index/?page={{ num }}"> {{ num }} </a></li>
                {% endif %}
            {% endfor %}
 
            {% if book_list.has_next %}
                <li class="next"><a href="/index/?page={{ book_list.next_page_number }}">下一页</a></li>
            {% else %}
                <li class="next disabled"><a href="#">下一页</a></li>
            {% endif %}
        </ul>
　　</div>
 
　　</body>
　　</html>

3、分页扩展

　　def index(request):
        book_list = Book.objects.all()
        paginator = Paginator(book_list, 15)
        page = request.GET.get('page',1)
        currentPage = int(page)
 
        #  如果页数十分多时，换另外一种显示方式
        if paginator.num_pages>11:
            if currentPage - 5 < 1:
                pageRange = range(1,11)
            elif currentPage + 5 > paginator.num_pages:
                pageRange = range(currentPage - 5, paginator.num_pages + 1)
            else:
                pageRange = range(currentPage - 5, currentPage + 5)
        else:
            pageRange = paginator.page_range
 
        try:
            book_list = paginator.page(page)
        except PageNotAnInteger:
            currentPage = 1
            book_list = paginator.page(1)
        except EmptyPage:
            book_list = paginator.page(paginator.num_pages)
            currentPage = paginator.num_pages
 
        return render(request,"index.html",locals())