Django-choices字段值對應關係（性別）-MTV與MVC科普-Ajax發json格式與文件格式數據-contentType格式-Ajax搭配sweetalert實現刪除確認彈窗-自定義分頁器

目錄

• models 字段補充
  • choices 參數/字段（用的不少）
• MTV與MVC模型 科普
• Ajax
  • 發送 GET、POST 請求的幾種常見方式
  • 用 Ajax 作一個小案例
    • 準備工做
    • 動手用 Ajax 實現效果
  • contentType 先後端傳輸數據編碼格式
  • ajax 提交數據
    • ajax發 json 格式數據
    • ajax 傳文件
    • 序列化組件
• 利用 sweetalert 搭建頁面（彈窗）
  • 彈窗中文支持不太好，手動修改樣式
    • 頁面數據沒刷新的問題
  • 自定義分頁器
    • 批量插入測試數據 bulk_create
    • 分頁
    • 使用最終版的實現分頁器

models 字段補充

choices 參數/字段（用的不少）

用戶性別、用戶學歷、工做狀態、婚否（可限範圍內能夠羅列出來的，均可用）

app01/models.py

from django.db import models


# Create your models here.
class User(models.Model):
    username = models.CharField(max_length=32)
    age = models.IntegerField()
    choices = (
        (1, '男'), (2, '女'), (3, '其餘')
    )
    gender = models.IntegerField(choices=choices)

    """
    1 存choice裏面羅列的數字與中文對應關係
         print(user_obj.get_gender_display())
            只要是choices字段 在獲取數字對應的註釋 固定語法
            get_choices字段名_display()

    2 存沒有羅列遲來的數字
        不會報錯 仍是展現數字
    """


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

同步到數據庫，並加幾條測試數據

在測試文件中試

只要是choice字段，在獲取數字對應的註釋，固定語法：

get_choices字段名_display()，存沒有羅列的數字，不會報錯，仍是展現數字

取值特色

• 有對應關係就拿出對應關係

• 若是沒有對應關係，那就直接把原來的值拿出來

常見案例 CRM 中

MTV與MVC模型 科普

django 自稱是 MTV 框架（本質其實也是 MVC）

• M：models

• T：templates

• V：views

MVC

• M：models
• V：views
• C：controller 控制器（urls）

Ajax

AJAX（Asynchronous Javascript And XML 異步的Javascript和XML）

特色：異步提交，局部刷新

例如：github 註冊用戶時，用戶名是否存在的即時校驗

發送 GET、POST 請求的幾種常見方式

a 標籤的 href 屬性                   GET請求
直接在瀏覽器窗口輸入 url 敲回車       GET請求
form 表單提交                       GET/POST
ajax 提交                           GET/POST

下面主要經過 ajax 來發送請求

ajax 這門技術是 Javascript 中的，可是原生的 Javascript 操做比較繁瑣，咱們這裏爲了方便使用，直接上手 jQuery 的 ajax

Ajax 最大的優勢：在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。（這一特色給用戶的感受是在不知不覺中完成請求和相應過程）

用 Ajax 作一個小案例

頁面上有三個 input 框，在前兩個 input 框中輸入數字，點擊按鈕發送 ajax 請求，在不刷新頁面的狀況下，在第三個框中自動填寫兩數之和

我們這裏是 jQuery 的 ajax，別忘了先引入 jQuery

準備工做

• 新建一個項目，完成基本配置
  • 由於要用到 post 請求，因此先暫時把 settings 裏的 csrf 中間件註釋掉
• 先寫一個 url 匹配用戶瀏覽器輸入的地址
• 再實現視圖函數把頁面發給瀏覽器，渲染成頁面，返回一個頁面給用戶輸入框內內容。

day57/settings.py

"""
Django settings for day57 project.

Generated by 'django-admin startproject' using Django 1.11.11.

For more information on this file, see
https://docs.djangoproject.com/en/1.11/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'p0d7eiqh64wgd#!!rso@!wv#4w(%-)6%hb6q^4ci=+h54h@syx'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',  # 1.檢查 APP 是否已註冊
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',  # 2.檢查 csrf中間件 是否已註釋掉
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'day57.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,  # 3.檢查 templates 文件夾是否已註冊
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'day57.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',  # 4.檢查 數據庫配置信息(本文打算採用 django 自帶的 sqlite3 進行測試，就不額外配置數據庫了（__init__.py 文件裏也就不配了）)
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

LOGGING = {  # 5.添加數據庫操做語句打印（一有數據庫操做就會在 pycharm 控制檯打印對應的 SQL 語句）
    'version': 1,
    'disable_existing_loggers': False,
    'handlers': {
        'console':{
            'level':'DEBUG',
            'class':'logging.StreamHandler',
        },
    },
    'loggers': {
        'django.db.backends': {
            'handlers': ['console'],
            'propagate': True,
            'level':'DEBUG',
        },
    }
}

# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [  # 6.配置靜態資源路徑（方便使用靜態資源路徑動態解析）
    os.path.join(BASE_DIR, 'static')
]

把 bootstrap 放到在項目根目錄下 新建的 static 文件夾下

配置 url，本文采用路由分發（多多練習嘛）

day57/urls.py

"""day57 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url, include  # 下面用到了 include ，要本身導入這個模塊
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^user/', include('app01.urls')),  # 寫成字符串就會根據配置信息自動去查找，就不須要本身導模塊過來了
]

app01/urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^index/', views.index, name='user_index'),  # 匹配路由並取別名，方便後期反向解析 url
]

app01/views.py

from django.shortcuts import render


# Create your views here.
def index(request):
    return render(request, 'index.html')  # 用戶訪問 http://127.0.0.1:8000/user/index/ 直接給他返回 index.html 這個頁面

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試頁</title>
{#    爲了測試方便，這裏就用網上的 jquery 了，用 CDN 的形式引入#}
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
{#    下面練習一下靜態資源路徑動態解析，而且 boostrap 放在本地會有語法提示，能夠加快開發效率#}
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
{#隨便搭一個頁面#}
    <div class="container">
        <div class="row">
            <div class="text-center">
                <input type="text"> +
                <input type="text"> =
                <input type="text">
                <button class="btn btn-primary">計算</button>
            </div>
        </div>
    </div>
</body>
</html>

瀏覽器訪問測試是否基本工做準備完畢（成功）

動手用 Ajax 實現效果

思路分析

咱們是輸入信息，而後點擊 計算按鈕，由 ajax 向後端發起請求，後端拿到請求而後返回數據給前端，前端把數據填到結果框中

能夠看出，咱們的突破口是 計算按鈕 的點擊事件

app01/urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^index/', views.index, name='user_index'),
    url(r'^compute/', views.compute, name='user_compute'),  # 用來處理用戶的計算請求
]

app01/views.py

from django.shortcuts import render, HttpResponse


# Create your views here.
def index(request):
    return render(request, 'index.html')  # 用戶訪問 http://127.0.0.1:8000/user/index/ 直接給他返回 index.html 這個頁面


from django.http import JsonResponse  # 下面發json數據要用到


def compute(request):
    # 判讀是不是 ajax 請求
    if request.is_ajax():
        # 定義一個空的字典，用來存放一下子的返回信息
        back_dic = {

        }
        # 前端 ajax採用的是 post 請求，因此這裏這樣獲取數據
        num1 = request.POST.get('num1')
        num2 = request.POST.get('num2')
        # 判斷數據格式是否正確
        if num1.isdigit() and num2.isdigit():
            try:
                res = int(num1) + int(num2)
                back_dic['status'] = 200
                back_dic['res'] = res
            except Exception as e:
                print(e)
                back_dic['status'] = 100
                back_dic['err'] = e
        # 格式不正確返回錯誤信息
        else:
            back_dic['status'] = 100
            back_dic['err'] = '請輸入合法數字！'
        # 用 JsonResponse 將字典打包成 json 格式數據返回給前端
        #   json 格式的數據前端能夠直接解析成 前端的自定義對象
        return JsonResponse(back_dic)

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試頁</title>
    {#    爲了測試方便，這裏就用網上的 jquery 了，用 CDN 的形式引入#}
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {#    下面練習一下靜態資源路徑動態解析，而且 boostrap 放在本地會有語法提示，能夠加快開發效率#}
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
{#隨便搭一個頁面#}
<div class="container">
    <div class="row">
        <div class="text-center">
            <input type="text" id="num1"> +
            <input type="text" id="num2"> =
            <input type="text" id="res">
            <button class="btn btn-primary" id="button1">計算</button>
        </div>
    </div>
</div>
<script>
    {#    1.爲了可以獲取到對應輸入框和按鈕以及輸入框的值，咱們須要先給他們加上 id #}
    $('#button1').click(function (e) {  {# 2.給咱們的 計算 按鈕綁定點擊事件，點擊時用 ajax 發送請求，而後後端計算並返回數值，放在 id 爲 res 的 input 裏 #}
        $.ajax({  {# 3.Jquery 的 ajax，須要下面幾個參數，記得寫上（Ajax 的括號內是一個大括號，而後再寫的參數） #}
            url: '{% url "user_compute" %}', {# 4.寫 ajax 發送請求的地址，這裏用的 url 反向解析 #}
            type: 'post', {# 5.採用 post 請求發送數據 #}
            data: {  {# 6.把要發送過去的數據打包 #}
                'num1': $('#num1').val(),  {# 7.獲取到 id 爲 num1 的標籤的 value值 #}
                'num2': $('#num2').val()
            },
            success: function (data) {  {# 8.請求成功的回調函數 #}
                if (data.status == 200) {  {# 9.後端手動設置的碼， 200 表示數據類型沒問題 #}
                    $('#res').val(data.res);  {# 數據沒問題就打印出來 #}
                } else {  {# 10.碼不是 200 表示數據類型有誤等，彈窗提示錯誤信息 #}
                    alert(data.err);
                }
            }
        })
    })
</script>
</body>
</html>

請求頁面查看效果

request.is_ajax() 用來判斷當前請求方式是不是 ajax 請求（不論是 get 仍是 post ，只要是 ajax 提交的，都能識別出來）

經過 ajax 提交的 post 請求，標籤沒有 name 屬性也不要緊，咱們本身已經指定了鍵值對的鍵（name 在 form 表單中的主要做用）

contentType 先後端傳輸數據編碼格式

先後端傳輸數據的編碼格式（常見的）

1. application/x-www-form-urlencoded
   • form 表單默認的編碼格式
     • 數據格式：name=jason&pwd=123
   • django 後端針對 urlencoded 編碼格式的數據會自動解析並放到 request.POST 中供用戶獲取（傳文件的時候就拿到了文件名）
2. multipart/form-data
   • django後端針對只要是符合 urlencoded 編碼格式的數據會自動解析並放到 request.POST 中，只要你指定的編碼是 formdata 就會自動解析並放到 request.FILES 中，供用戶獲取
3. json

總結：先後端傳輸數據的時候，必定要保證數據格式和你的編碼格式是一致的，不能亂來，否則很差拿數據

ajax 提交數據

ajax 默認數據提交方式也是 urlencoded

不符合格式就不要了，先後端編碼和數據格式一致就不會出現這個問題

ajax發 json 格式數據

django 後端針對 json 格式的數據，並不會自動解析放到 request.POST 或 request.FILES 裏面，它並不會解析 json 格式數據，而是將它原封不動地放在 request.body 裏了

$('#b1').on('click',function () {
    // 點擊按鈕 朝後端發送post請求
    $.ajax({
        url: '',  // 控制發送給誰 不寫就是朝當前地址提交
        type: 'post',  // 發送方式是post請求
        data: JSON.stringify({'username': 'jason', 'password': 123}),  // 發送的數據
        contentType: 'application/json',  // 告訴後端你此次的數據是json格式

        success: function (data) {  // data形參用來接收異步提交的結果
            // 將後端計算好的結果 經過DOM操做 渲染到第三個input礦中
            $('#i3').val(data)
        }
    })
})

後端須要手動去 request.body 中獲取 json 格式數據，本身處理

from django.shortcuts import render,HttpResponse
from app01 import models
# Create your views here.
def index(request):
    # 驗證先後端傳輸數據的編碼格式
    if request.method == 'POST':
        print(request.body)
        # 後端 須要手動去request.body中獲取json格式數據  本身處理
        json_str = request.body
        import json
        s = json_str.decode('utf-8')
        ral_d = json.loads(s)
        print(ral_d, type(ral_d))
        return HttpResponse('OK')
    return render(request, 'index.html')

ajax 傳文件

如何獲取文件標籤所存儲的文件對象？

1. 先用 jQuery 查找到存儲文件的 input 標籤
2. 將 jQuery 對象轉成原生 js 對象
3. 利用 原生 js 對象 的方法 .files[0] 獲取到標籤內部存儲的文件對象
4. 必定要指定兩個參數（processData、contentType）都爲 false

// ajax傳輸文件
$('#b1').on('click',function () {
    // ajax 傳輸文件 建議使用內置對象 formdata
    var formData = new FormData();  // 既能夠傳普通的鍵值對 也能夠傳文件
    // 添加普通鍵值（後續能夠改爲 for 循環填充）
    formData.append('username','jason');
    formData.append('password','123');
    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形參用來接收異步提交的結果
            {# alert(data) #}
            // 將後端計算好的結果 經過DOM操做 渲染到第三個input礦中
            $('#i3').val(data)
        }

    })
})

序列化組件

先後端分離的知識點

模擬先後端分離，給前端傳遞一個 json 格式的大字典

from django.core import serializers  # django自帶的一個小型的序列化工具
from app01 import models
import json


def reg(request):
    user_list = models.User.objects.all()
    # 將全部的數據都組織成一個符合 json 格式的一個個的字典
    # user_l = []
    # for user_obj in user_list:
    #     user_l.append(
    #         json.dumps({
    #             'username': user_obj.username,
    #             'age': user_obj.age,
    #             'gender': user_obj.get_gender_display()
    #         })
    #     )
    res = serializers.serialize('json', user_list)  # 指定序列化格式爲 json
    return render(request, 'index.html', locals())

前段收到的 json 格式數據

[{
    "model": "app01.user",
    "pk": 1,
    "fields": {
        "username": "jason",
        "age": 18,
        "gender": 1
    }
}, {
    "model": "app01.user",
    "pk": 2,
    "fields": {
        "username": "tank",
        "age": 24,
        "gender": 3
    }
}, {
    "model": "app01.user",
    "pk": 3,
    "fields": {
        "username": "egon",
        "age": 73,
        "gender": 2
    }
}, {
    "model": "app01.user",
    "pk": 7,
    "fields": {
        "username": "kevin",
        "age": 29,
        "gender": 4
    }
}]

若是格式比較亂都成一行了，能夠找個工具網站幫忙解析一下（在線 json 校驗格式化）

目前小型的 序列化模塊 serializers

還有更好的，rest_framework 。。。後面會涉及到

from app01 import models
from django.core import serializers  # django 自帶的一個小型的序列化工具

def reg(request):
    user_list = models.User.objects.all()
    res = serializers.serialize('json', user_list)
    return render(request, 'index.html', locals())

利用 sweetalert 搭建頁面（彈窗）

• 先確保靜態資源文件配置 settings.py
• 把 sweetalert 下過來，放到 static 下
• 動態解析頁面上引入對應的內容：jq、bootstrap(css/js)、sweetalert(css/js)（咱們用的依賴於bootstrap）

下面的按鈕還沒寫好，還要綁定 id 等

彈窗中文支持不太好，手動修改樣式

調整一下樣式，谷歌瀏覽器看層級關係，而後手寫樣式覆蓋掉（這樣不會影響其餘地方的）

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

sweetalert 官網 找樣式過來，放在 script 裏，給某個按鈕綁定事件，觸發它

cancelButtonText 修改取消文本（本身加的）

給按鈕添加自定義屬性，綁定 user_id，彈窗確認刪除那裏寫 ajax 獲取到 user_id 發 ajax 過去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'dist/sweetalert.min.js' %}"></script>

    <style>
        div.sweet-alert h2{
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">數據展現</h2>
            <table class="table-striped table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>序號</th>
                        <th>主鍵</th>
                        <th>用戶名</th>
                        <th>年齡</th>
                        <th>性別</th>
                        <th>操做</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in user_list %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ user.pk }}</td>
                            <td>{{ user.username }}</td>
                            <td>{{ user.age }}</td>
                            <td>{{ user.get_gender_display }}</td>
                            <td>
                                <button class="btn btn-primary btn-sm">編輯</button>
                                <button class="btn btn-danger btn-sm del" user_id="{{ user.pk }}">刪除</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    $('.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')
                    }
                }
            });

        });
    })
</script>

</body>
</html>

後端把字典用JsonResponse 發送，前端能夠拿到並自動解析成自定義對象，能夠直接用 點語法操做它的屬性

from django.http import JsonResponse
import time
def userlist(request):
    if request.is_ajax():
        time.sleep(3)
        """
        通常狀況下 針對ajax請求 後端一般都是返回一個字典
        """
        back_dic = {'code':100,'msg':''}
        # 直接獲取用戶想刪除的數據的id值
        delete_id = request.POST.get('delete_id')
        # 直接利用queryset方法 批量刪除
        models.User.objects.filter(pk=delete_id).delete()
        # 要給前端ajax返回一個消息(字典)
        back_dic['msg'] = '真的刪除了!'
        return JsonResponse(back_dic)


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

頁面數據沒刷新的問題

直接刷新是最偷懶的辦法

這個方法不太好（彈窗的第二段動畫還沒放完它就刷新頁面了）

刪除整行

獲取父標籤（整行），而後經過 DOM 操做 把它從 DOM 樹中移除掉 $btnEle.parent().parent().remove()

序號沒有連續先無論，不是這裏的重點（--> 1,3,4,5）

自定義分頁器

批量插入測試數據 bulk_create

效果和一條一條插入，快的不是一點點（一條條插入1000條，要一分多鐘，批量秒插）

l = []

for i in range(10000):
    l.append(models.Book(title=f'書籍{i}'))
models.Book.objects.bulk_create()  # 批量插入數據

分頁

有這麼幾個關鍵參數：每頁多少條、起始頁、開始條數、結束條數

推導它們的關係規律

"""
per_page_num = 10

current_page                start_page                  end_page
    1                           0                           10
    2                           10                          20
    3                           20                          30  
    4                           30                          40

per_page_num = 5

current_page                start_page                  end_page
    1                           0                           5
    2                           5                           10
    3                           10                          15  
    4                           15                          20

start_page = (current_page - 1) * per_page_num
end_page =  current_page* per_page_num


10000
10

1000


10001
10

1001

"""

能夠用 內置函數 divmod(101, 10) --> 10 1 來計算頁數

在後端用循環來渲染 html 標籤（前端作不了）

頁碼的邊界判斷

使用最終版的實現分頁器

通常第三方通用的文件都會新建一個 utils 文件夾，而後把 python 代碼 放到裏面

後端

建立文件夾與文件，把分頁代碼放進去，導入過來，使用

app01/utils/mypage.py 寫好的分頁類，直接拿來用就行了

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)

在 app01/views.py 中使用

# ...其餘代碼
from app01.utils.mypage import Pagination
def book(request):
    # 使用封裝好的自定義分頁器
    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)
    page_queryset = book_list[page_obj.start:page_obj.end]

    return render(request, 'booklist.html', locals())
# ...其餘代碼

templates/booklist.html 頁面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'dist/sweetalert.min.js' %}"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            {% for book in page_queryset %}
                <p>{{ book.title }}</p>
            {% endfor %}
            {{ page_obj.page_html|safe }}  {# 支持轉義，讓 html 格式的字符串能夠渲染出來 #}
        </div>
    </div>
</div>
</body>
</html>