46.Djano07

开局签到Python基础

于 2021-08-20 19:47:02 发布

阅读量160

点赞数

分类专栏： Python学习

风

本文链接：https://blog.csdn.net/qq_46137324/article/details/119830445

版权

Python学习专栏收录该内容

47 篇文章 3 订阅

订阅专栏

1.Ajax

异步提交，局部刷新。

网站的注册：动态的获取用户输入，实时的与后端确定，并实时展示到前端（局部刷新）。

Ajax最大的优点：在不重新加载整个页面的情况下，可以与服务器交互数据并更新网页内内容。
（给银狐的感觉，在不知不觉完成请求和响应过程）

80% 前后端交互都是Ajax,模块不一样，内容一样。
Ajax不是新的编程语言是一种使用现有的标识的新方法。
（使用学习过编程语言写的一个功能）

朝地址栏法请求的方式“
1. 浏览器url        GET请求
2. a便签 href属性   GET请求
3. form表单        GET/POST请求
4. Ajax           GET/POST请求

使用的不是原生的Ajax。
使用jQuery封装之后的版本，使用我们在前端页面使用Ajax时需要先导入jQuery。
ps：并不是只有jQuery能够实现ajax，其他框架也可以，原理一样。

2.语法

 $.ajax({
     // 1.指定向哪个后端发送数据
     url:'', // 默认向当前url地址栏提交
     // 2.请求方式 get/post
     type:'post',  
     // 3.数据
     data:{'username':'kid', 'password':123},
     // 异步回调机制
     success:function (args){
         """
         在利用ajax进行前后端交互的时候
         后端无论返回什么，都自会被回调函数接受，而不在影响页面
         
         """
    }
 })

3.Ajax案例

案例：
页面上有三个input款
在前端中输入数字，点击按钮,超后端发送ajax请求。
后端计算结果，在返回给前端动态展示到第三个框中，页面不许刷新。

# urls.py   
    url(r'^ab_ajax/', views.ab_ajax)

# ab_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <script src="JQuery.js"></script>
</head>
<body>
    <input type="text" id="d1"> +
    <input type="text" id="d2"> =
    <input type="text" id="d3">
    <p>
        <button id="btn">计算</button>
    </p>

    <script>
        // 先给 案件绑定点击事件
        $('#btn').click(function (){
            // 给后端ajax发送请求
            $.ajax({
                // 1.指定向哪个后端发送数据
                url:'', // 默认向当前url地址栏提交
                // 2.请求方式
                type:'post',
                // 3.数据
                //data:{'username':'kid', 'password':123},
                data:{'i1':$('#d1').val(), 'i2': $('#d2').val()},
                // 4.回调函数,当后端给你放回结果的时候会自动触发，args接受后端的放回结果

                success:function (args){
                     // alert(args)
                     // 通过DOM操作动态渲染到第三个input框里面
                     $('#d3').val(args)  /// .val() 获取值，没有值就传递进去
                }
            })
        })
    </script>
</body>
</html>

# views.py
from django.shortcuts import render, HttpResponse

import json

def ab_ajax(request):
    if request.method == 'POST':
        print(request.POST)
        # <QueryDict: {'username': ['kid'], 'password': ['123']}>
   
        # 获取的值是字符串
        i1 = request.POST.get('i1')
        i2 = request.POST.get('i2')
        i3 = int(i1) + int(i2)
        print(i3)
        
        return HttpResponse(json.dumps(i3))

    return render(request, 'index.html')

如果后端直接用JsonResponse返回的数据 回调函数会自动动帮你后序列化。
后端如果用HttpResponse返回数据，回调函数不会自动帮你反序列化。

i1 = request.POST.get('i1')
i2 = request.POST.get('i2')
i3 = int(i1) + int(i2)

return HttpResponse(i3)

据解决方式：

1.前端利用JSON.parse()
	success:function (args){
	$('#d3').val(JSON.parse(args))	
		···
2.在ajax前配置一个参数 dataType:'json',
    $.ajax({
        ···
        dataType:'json',
        ···

4.前后端传输数据的编码格式

get ：
请求数据就是直接放在url后面：
url?username=kid&password=123

post：
可以向后端发送post请求的方式
1. form表单
2. ajax请求

编码格式：
1. urlencoded
2. formdata
3. json

4.1form表单

1.urlencoded格式

urlencoded是form表单默认的提交方式。

# urls.py
url(r'^index/', views.index)

# views.py
def index(request):
    return render(request, 'index.html')

# index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="JQuery.js"></script>
</head>
<form action="" method="post">
    <p>username: <input type="text" name="'username" class="form-control"></p>
    <p>password: <input type="text" name="password", class="form-control"></p>
    <input type="submit" class="btn btn-success">
</form>

</body>
</html>

输入账户密码,向后端发送请求。在浏览器中查看index的数据格式。

在这里插入图片描述

Form Data 中字典不是真正的数据，真正的数据在view source中
点开后看到的数据格式：%27username=kid&password=123

2.formdata

multipart/formdata，是文件传输必须设置的。
后端使用request.FILES接收文件。
在form表单中设置一个input标签。

<form action="" method="post" enctype="multipart/form-data">
    <p>username: <input type="text" name="'username" class="form-control"></p>
    <p>password: <input type="text" name="password", class="form-control"></p>
    <input type="file" name="file" >
    <input type="submit" class="btn btn-success">
</form>

def index(request):
    if request.method == 'POST':
        print(request.POST)
        print(request.FILES)
    return render(request, 'index.html')

<QueryDict: {"'username": ['kid'], 'password': ['123']}>
<MultiValueDict: {'file': [<InMemoryUploadedFile: 1.jpg (image/jpeg)>]}>

# 浏览器中显示的格式
Conten t-Type: multipart/form-data; boundary=----WebKitFormBoundaryDRlTkP2zKWD57WTZ

# 将enctype="multipart/form-data"去掉
# 浏览器中显示的格式
Content-Type: application/x-www-form-urlencoded

3.总结

form表单提交数据
默认的数据编码格式是urlencoded


django后端针对符合urlencoded 编码格式的数据都会自动帮你解析到封装到request.POST中。
如果该为formdata 针对普通的值还是解析到request.POST中，而文件则解析解析到request.FILES中。
form表单是没有办法发送json格式数据的。

4.2Ajax

1.urlencoded

<body>
<form action="" method="post">
    <p>username: <input type="text" name="'username" class="form-control"></p>
    <p>password: <input type="text" name="password", class="form-control"></p>
    <input type="file" name="file" >
    <input type="submit" class="btn btn-success">
    <input type="button" class="btn btn-danger" value="按钮" id="d1">
</form>

<script>
    $('#d1').click(function (){
        $.ajax(
            {
                url:'',
                type:'post',
                data:{'username': 'kid', 'age': 20},
                success:function (args){
                }
            }
        )
    })
</script>

# 浏览器查看格式
Content-Type: application/x-www-form-urlencoded
# 数据格式  
username=kid&age=20
默认的编码格式也是urlencoded。所有Ajax提交POST请求，还是解析到request.POST中。

2.json

前后端传数据的时候一定要保证编码格式的数据真正的一致。
数据和编码格式一致。

url(r'^ab_json/', views.ab_json)

def ab_json(request):
    return render(request, 'ab_json.html')

<body>
    <button class="btn btn-danger" id="d1">按钮</button>

    <script>
        $('#d1').click(function () {
            $.ajax({
                url:'',
                type:'post',
                data:{'username':'kid', 'age': 20},
                contentType:'application/jsom', //指定编码格式
                success:function () {
                }
            })
        })
    </script>
</body>

contentType:'application/jsom', //指定编码格式
浏览器中查看
Content-Type: application/jsom
数据格式
username=kid&age=20
指定了传输的格式当时传的是字典、

// 转换为json格式
data:JSON.stringify({'username':'kid', 'age': 20}),

浏览器中查看
Content-Type: application/jsom
数据格式
{"username":"kid","age":20}

前端获取数据
request.is_ajax() 判断当前请求是否为ajax请求
json格式的数据存放在requuest.body中。

def ab_json(request):
    print(request.is_ajax())  # 判断当前请求是否为ajax请求
    if request.is_ajax(): #True
        print(request.body)  # 二进制格式的json格式字符串
        # b'{"username":"kid","age":20}'
    return render(request, 'ab_json.html')

针对json格式数据需要你自己动手处理

import json
def ab_json(request):
    print(request.is_ajax())  # 判断当前请求是否为ajax请求
    if request.is_ajax(): #True
        print(request.body)  # 二进制格式的json格式字符串
        # b'{"username":"kid","age":20}'
        json_bytes = request.body
        json_str = json_bytes.decode('utf-8')
        json_dict = json.loads(json_str)
        print(json_dict) # {'username': 'kid', 'age': 20}

    return render(request, 'ab_json.html')

json.laods()括号内如果传入了一个二进制的数据格式那么内部会自动解码在反序列化。   
可以省略掉解码。

 json_bytes = request.body
 json_dict = json.loads(json_bytes)

ajax发送json格式注意点：
1. contenTYPE参数指定为application/json
2. 数据是真正的json格式数据
3. django后端帮你处理sjon格式数据，需要自己去request.body中获取并处理。

5.ajax发送文件

ajax发送文件需要借助于js内置对象ForData。

url(r'^ab_file/', views.ab_file)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="JQuery.js"></script>
</head>
<body>
    <p>username: <input type="text" id="d1"></p>
    <p>password: <input type="text" id="d2"></p>
    <p><input type="file" id="d3"></p>
    <button class="btn btn-info" id="d4">提交</button>


    <script>
        // 点击按钮向后端发送普通的键值对和文件数据
        $('#d4').on('click', function(){
            // 1.先；利用formdata内置对象
            let formDataobj = new FormData();
            // 2.添加普通的键值对
            formDataobj.append('username', $('#d1').val());
            formDataobj.append('password', $('#d2').val());
            // 3.添加文件对象
            formDataobj.append('myfile', $('#d3')[0].files[0])
            // 4.将对象基于ajax发送给后端
            $.ajax({
                url:'',
                type:'post',
                data:formDataobj,  // 直接将对象放在打他后面
                // ajax发送文件必须要指定两个参数
                contentType:false,  // 不需要任何编码django能自动识别fordata对象
                processData:false,  // 告诉浏览器不要对数据进行任何处理
                success:function (args){
                }
            })
        })
    </script>
</body>
</html>

def ab_file(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request, 'ab_file.html')

总结：

1.需要利用FormData内置对象

let formDataobj = new FormData();
// 2.添加普通的键值对
formDataobj.append('username', $('#d1').val());
formDataobj.append('password', $('#d2').val());
// 3.添加文件对象
formDataobj.append('myfile', $('#d3')[0].files[0])

2.需要指定两个关键性参数
// ajax发送文件必须要指定两个参数
contentType:false,  // 不需要任何编码django能自动识别fordata对象
processData:false,  // 告诉浏览器不要对数据进行任何处理

3.django后端能直接识别带formdata对象并将
普通的键值对自动解析并封装到request.POST中文件自动解析并封装到request.FILES中。

6.django自动序列化组件

先制作一张表。手动添加一些数据。

from django.db import models

# Create your models here.

class User(models.Model):
    username = models.CharField(max_length=32)
    age = models.IntegerField()

    gender_choices = (
        (1, '男'),
        (2, '女'),
        (3, '其他'),
    )
    gender = models.IntegerField(choices=gender_choices)

使用默认的数据库
执行数据库迁移命令：
python manage.py makemigrations
python manage.py migrate

1. 在前端获取到后端用户列表里面的所有数据，并且是列表套字典。

解决编码问题和序列化非dict对象，请将safe参数设置为False。   

return JsonResponse(user_list,safe=False)

from app01 import models
from django.http import JsonResponse
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.gender
        }
        user_list.append(tmp)
    return JsonResponse(user_list, safe=False)

[
{"pk": 1, "username": "kid", "age": 18, "gender": 1}, 
{"pk": 2, "username": "qz", "age": 18, "gender": 2}, 
{"pk": 3, "username": "qq", "age": 19, "gender": 3}
]

前后端分离的项目，后端开发时一般将数据处理成列表套字段的格式，
序列化放回给后端，在写一个接口文档，告诉前端每个字段代表的以上。
这个上面的操作成为接口。

serializers序列化模块将上述代码简化。

def ab_ser(request):
    user_queryset = models.User.objects.all()
    # 自动将数据变成  json 格式的字符串
    res = serializers.serialize('json', user_queryset)
    return HttpResponse(res)

[
{"model": "app01.user",
"pk": 1, "fields": 
{"username": "kid", "age": 18, "gender": 1}}, 
{"model": "app01.user",
"pk": 2, "fields": 
{"username": "qz", "age": 18, "gender": 2}},
{"model": "app01.user", 
"pk": 3, "fields": 
{"username": "qq", "age": 19, "gender": 3}}
]
写接口就是理由序列化组件渲染数据然后再写一个接口文档，写一些描述信息。
1对应男
2对应女
···

7.ajax结合sweetalert实现二次确认

    # 二次确认
    url(r'^user/list/', views.user_list),
    # 删除
    url(r'^delete/user/', views.delete_user)

建立static文件夹
复制dist文件夹到该目录下

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

建立一张表，自己添加写数据。

from django.db import models

# Create your models here.

class User(models.Model):
    username = models.CharField(max_length=32)
    age = models.IntegerField()

    gender_choices = (
        (1, '男'),
        (2, '女'),
        (3, '其他'),
    )

    gender = models.IntegerField(choices=gender_choices)

执行数据库迁移命令。

def user_list(request):
    user_queryset = models.User.objects.all()
    return render(request, 'user_list.html', locals())


from django.http import JsonResponse
import time
def delete_user(request):
    """
    前后端在用ajax进行交互的时候，
    后端通常给ajax的回调函数放回一个字典格式的数据
    """
    if request.is_ajax():
        if request.method == 'POST':
            # 设置一个状态码与放回信息
            balk_dic = {'code': 666, 'msg': ''}
            del_id = request.POST.get('del_id')
            time.sleep(3)
            models.User.objects.filter(pk=del_id).delete()
            balk_dic['msg'] = '完成删除'
            print(balk_dic)
            return JsonResponse(balk_dic)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二次确认</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="JQuery.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <script src="{% static 'dist/sweetalert.js' %}"></script>
    <style>
        div.sweet-alert h2 {
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <h1 class="text-center">数据展示</h1>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table-striped table table-hover ">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>username</th>
                            <th>age</th>
                            <th>gender</th>
                            <th>actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for user_obj in user_queryset %}
                         <tr>
                             <td>{{ user_obj.pk }}</td>
                             <td>{{ user_obj.username }}</td>
                             <td>{{ user_obj.age }}</td>
                             <td>{{ user_obj.get_gender_display }}</td>
                            <td>
                                <button class="btn btn-primary btn-xs">编辑</button>
                                <button class="btn btn-danger btn-xs del" del_id="{{ user_obj.pk }}">删除</button>
                            </td>
                        </tr>
                          {% endfor %}
                     </tbody>
                </table>
             </div>
        </div>
    </div>
    <script>
        $('.del').on('click', function () {
            // 二次确认弹框
            let currentBtn = $(this)
            swal({
                  title: "你确定要删吗?",
                  text: "你可要考虑清楚哦，",
                  type: "warning",
                  showCancelButton: true,
                  confirmButtonClass: "btn-danger",
                  confirmButtonText: "是的确定删除！",
                  cancelButtonText: "撤销操作",
                  closeOnConfirm: false,
                  closeOnCancel: false,
                // ··· 特效
                    showLoaderOnConfirm:true
                },
                function(isConfirm) {
                  if (isConfirm) {
                    // 向后端发送ajax请求删除数据，之后再弹下面的提示框
                    $.ajax({
                        // url:'/delete/user' + currentBtn.attr('del_id'),  // 传递主键值方式1
                        // 方式2放在请求体内
                        url:'/delete/user/',
                        type:'post',
                        data:{'del_id': currentBtn.attr('del_id')},
                        success: function (args) {   // 返回一个code的字典
                        // 判断code

                            if(args.code === 666){
                                swal("删除!", args.msg, "success");
                                // 删除后刷新版本
                                // 方式1 window.location.reload()
                                // 方式2利用DOM操作动态刷新 当前标签的父标签的父标签
                                currentBtn.parent().parent().remove()

                            }
                            else {
                                swal("出错了", '未知错误', "info");
                            }
                        }
                    })
                  } else {
                    swal("不删除", "已撤销删除 :)", "error");
                  }
                });
        })
    </script>

</body>
</html>

字体被覆盖,解决方式：
1. 在浏览器中设置
2. 源代码中修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhQmImaG-1629459931589)(https://i.loli.net/2021/08/19/orw1jTWOSGP5U7M.png)]

    <style>
        div.sweetalert h2{
            padding-top: 10px;
        }
    </style>

在后端中设置
time.sleep(3)
前端的sweetalert设置
showLoaderOnConfirm:true  // 显示等待

8.批量插入数据

class Book(models.Model):
    title = models.CharField(max_length=32)

执行数据库迁移命令：
python manage.py makemigrations
python manage migrate

# 批量插入数据
url(r'^ab_pl', views.ab_pl)

class Book(models.Model):
    title = models.CharField(max_length=32)

def ab_pl(request):

    # 批量插入
    book_lsit = []
    for i in range(10000):
        book_obj = models.Book(title='第%s本书' % i)
        book_lsit.append(book_obj)
    book_queryset = models.Book.objects.bulk_create(book_lsit)
    return render(request, 'ab_pl.html', locals())

# 特慢的插入
for i in range(1000):
    models.Book.objects.create(title='第%s本书' % i)
book_queryset = models.Book.objects.all()
return render(request, 'ab_pl.html', locals())

<body>
{% for book_obj in book_queryset %}
    <p>{{ book_obj.title }}</p>
{% endfor %}
</body>

orm内置bulk_create能够减少操作时间。

9.自定义分页

制作测试环境。

import os
if __name__ == "__main__":
    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "djangoAjax.settings")
    import django
    django.setup()
    from app01 import models
    # 将大于100的都删除
    models.Book.objects.filter(pk__gt=100).delete()

分析：
1. 想访问那一页
使用get请求携带访问页码  127.0.0.1:8000/？page=1
current_page = request.GET.get('page', 1)    如果获取不到当前页面就展示第一页

2. 每页展示多少条 
QuerySet对象支持切片操作
展示10条数据
per_page_num = 10
起始位置 start_page = 0
终止位置 end_page = 10
[start_page:end_page]
book_queryset = models.Book.objects.all()[start_page:end_page]

  一页十条
per_page_num = 10
	页码               起始          终止
current_page        start_page     end_page
	1				 0		       10
	2				 10			   20
	3				 20		       30
	
start_page = (current_page - 1) * per_page_num
end_page   = current_page * per_page_num

# viess.py  分页，手动复制page=xxx
def ab_pl(request):
    # 获取的是字符串
    current_page = request.GET.get('page', 1)
    try:  # 输入的不是纯数字的字符串时为 1
        current_page = int(current_page)
    except Exception:
        current_page = 1
    per_page_num = 10
    start_page = (current_page - 1) * per_page_num
    end_page = current_page * per_page_num
    book_queryset = models.Book.objects.all()[start_page:end_page]
    return render(request, 'ab_pl.html', locals())

http://127.0.0.1:8000/ab_pl?page=2   访问第二页
http://127.0.0.1:8000/ab_pl?page=2ss 访问第一页

总数据 100条  每页10 需要 10页
总数据 99条  每页10 需要 10页
总数据 101条  每页10 需要 11页

通过代码动态的计算出多少页，
divmod() 函数 
divmod(100, 10)
商 余数
(10, 0)

divmod(101, 10)
(10, 1)

divmod(99, 10)
(9, 9)

余数不为0加一页

在制作页面的时候一般都是奇数个符合对称审美。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="JQuery.js"></script>
</head>
<body>
{% for book_obj in book_queryset %}
    <p>{{ book_obj.title }}</p>
{% endfor %}
    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
            {{ page_html |safe }}
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
</body>
</html>

# viess.py  通过点击按钮进入对应的页
def ab_pl(request):
    # 获取的是字符串
    current_page = request.GET.get('page', 1)
    try:  # 输入的不是纯数字的字符串时为 1
        current_page = int(current_page)
    except Exception:
        current_page = 1

    book_queryset = models.Book.objects.all()

    all_count = book_queryset.count()
    per_page_num = 10
    all_count, more = divmod(all_count, per_page_num)
    if more:
        all_count += 1

    page_html = ''
    for i in range(current_page-2, current_page+3)
    # for i in range(1, all_count+1):
        page_html += '<li><a href="?page=%s">%s</a></li>' % (i, i)

    start_page = (current_page - 1) * per_page_num
    end_page = current_page * per_page_num
    book_queryset = book_queryset[start_page: end_page]

    return render(request, 'ab_pl.html', locals())

page_html = ''
for i in range(1, all_count+1):
	page_html += '<li><a href="?page=%s">%s</a></li>' % (i, i)
在前端写页面，后端 {{ page_html |safe }}让前端渲染这个页面
展示所有的页面，在后端在多了
设置只展示5个， current_page为当前页码。
for i in range(current_page-2, current_page+3)

# 设置当前页高亮,current_page为当前页码。
for i in range(current_page-2, current_page+3):
	if current_page == 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)

# 左右两边不能超出范围,current_pag为 当前页码。
    if current_page < 3:
        current_page = 3
    if current_page > 8:
        current_page = 8
for i in range(page-2, page+3):
    ···

# viess.py
def ab_pl(request):
    # 获取的是字符串
    current_page = request.GET.get('page', 1)

    try:  # 输入的不是纯数字的字符串时为 1
        current_page = int(current_page)
    except Exception:
        current_page = 1

    book_queryset = models.Book.objects.all()
    all_count = book_queryset.count()


    # 左右两边不能超出范围,current_page为 当前页码。
    # --------------------------------------
    per_page_num = 10
    all_count, more = divmod(all_count, per_page_num)
    if more:
        all_count += 1

    page_html = ''
    page = current_page
    if current_page < 3:
        current_page = 3
    if current_page > 8:
        current_page = 8
    print('当前页：%s' % current_page)
    for i in range(current_page - 2, current_page + 3):
        if page == 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)
    # -----------------------------------------------------------
    start_page = (page - 1) * per_page_num
    end_page = page * per_page_num
    book_queryset = book_queryset[start_page: end_page]

    return render(request, 'ab_pl.html', locals())

10.制作分页模板

在使用非django内置的第三方功能或者组件的时候我们一帮情况下个会创建一个
utils文件夹，在该文件夹内对模块进行功能的划分。
utils文件夹也在每个单独的app下创建。
在后期封装代码的时候不在局限与函数，尽量使用面向对象去封装。
将下列代码复制到utils文件夹内的一个自创的文件中。

基于bootstrap样式，需要提前导入。

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:  最多显示的页码个数
        """
        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 utils.page import Pagination
def ab_pl(request):

    current_page = request.GET.get('page', 1)
    book_queryset = models.Book.objects.all()
    all_count = book_queryset.count()
    # 1 实例化
    #  current_page, all_count
    page_obj = Pagination(current_page=current_page,
                          all_count=all_count)
    # 2.对总数据进行切片操作

    page_queryset = book_queryset[page_obj.start:page_obj.end]

    # 将 page_queryset 传递到页面替换以前的 book_queryset
    return render(request, 'ab_pl.html', locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="JQuery.js"></script>
</head>
<body>
{% for page in page_queryset %}
    <p>{{ page.title }}</p>
    <nav aria-label="Page navigation"></nav>
{% endfor %}
{# 利用自动分页器 #}
{{ page_obj.page_html|safe}}
</body>
</html>