一、ajax结合sweetalert实现删除按钮的动态效果
二、bulk_create批量插入数据
三、自定义分页器
- （一）手动推导
- （二）自定义分页器
  - （1）模板
  - （2）用法

一、ajax结合sweetalert实现删除按钮的动态效果

下载sweetalert插件，导入dist文件夹中css和js文件
挑选弹出框样式，https://lipis.github.io/bootstrap-sweetalert/
通过自定义标签属性传输数据
通过标签的查找删除标签，达到删除的作用

<!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 'dist/sweetalert.min.js' %}></script>
    <script src={% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table-striped table table-bordered table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for user in user_queryset %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ user.username }}</td>
                        <td>{{ user.age }}</td>
                        <td>{{ user.get_gender_display }}</td>
                        <td>
                            <a href="" class="btn btn-success btn-sm">编辑</a>
                            <!--通过自定义标签属性传输user_id-->
                            <a href="#" class="cancel btn btn-danger btn-sm" userId= {{ user.pk }}>删除</a>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    $('.cancel').click(function () {
        var $btn = $(this);
        console.log($(this))

        swal({
                title: "Are you sure?",
                text: "You will not be able to recover this imaginary file!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel plx!",
                closeOnConfirm: false,
                closeOnCancel: false
            },

            function (isConfirm) {
                if (isConfirm) {
                    console.log($(this))

                    $.ajax({

                        url: '',
                        type: 'post',
                        // 通过标签自定义属性传输数据
                        data: {'user_id': $btn.attr('userId')},
                        success: function (data) {
                            if (data.code === 1000) {
                                swal("Deleted!", data.msg, "success");
                                // 通过标签的查找删除标签
                                $(this).parent().parent().remove()

                            } else {
                                swal("Cancelled", "Your imaginary file is safe :)", "warning");

                            }
                        }
                    })
                } else {
                    swal("Cancelled", "Your imaginary file is safe :)", "error");
                }
            });
    })
</script>

</body>
</html>

# views.py
from django.shortcuts import render
from django.http import JsonResponse
from app01 import models
# Create your views here.
def home(request):
    if request.is_ajax():
        user_id = request.POST.get('user_id')
        models.User.objects.filter(pk=user_id).delete()
        return JsonResponse({'code':1000,'msg':'删除成功'})
    user_queryset = models.User.objects.all()
    return render(request,'home.html',locals())

二、bulk_create批量插入数据

bulk_create用于批量插入数据，解决大量插入数据耗时长的问题
先用列表生成数据，再通过bulk_create批量插入数据

def index(request):
    book_list = []
    for i in range(10000):
        book_list.append(models.Book(title=f'第{i}本书'))
    # 批量插入数据
  models.Book.objects.bulk_create(book_list)
    book_queryset = models.Book.objects.all()
    return  render(request,'index.html',locals())

三、自定义分页器

（一）手动推导

def index(request):
    book_queryset = models.Book.objects.all()
    all_page_count = book_queryset.count()  # 数据总个数
    per_page_count = 10  # 每页要展示的数据数目
    page_num,mod = divmod(all_page_count,per_page_count)
    if mod:
        page_num +=1  # 总页数

    current_page = request.GET.get('page',1)  # 默认第一页
    current_page = int(current_page)

    xxx = current_page
    # 前六页和后六页
    if current_page < 6:
        xxx = 6
    elif current_page < page_num and current_page > page_num-6:
        xxx = page_num-6

    html = ''
    for i in range(xxx-5,xxx+6):
        if i==current_page:
            html += f'<li class="active"><a href="?page={i}">{i} <span class="sr-only">(current)</span></a></li>'
        else:
            html+= f'<li class=""><a href="?page={i}">{i} <span class="sr-only">(current)</span></a></li>'

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

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

<!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 'dist/sweetalert.min.js' %}></script>
    <script src={% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            {% for book_obj in book_queryset %}
                <p>{{ book_obj }}</p>
            {% endfor %}

            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {{ html|safe }}
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>

（二）自定义分页器

（1）模板

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)

（2）用法

应用中创建utils文件夹
文件夹中创建mypage.py文件
视图函数中导入该文件
当前页：current_page
数据总个数：all_count
实例化对象：page_obj
切片

# views.py
from app01.utils.mypage import Pagination
def index(request):
    current_page = request.GET.get('page',1)
    all_count = book_queryset.count()
    page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10,pager_count=5)
    page_queryset = book_queryset[page_obj.start:page_obj.end]
    return render(request,'index.html',locals())

<!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-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            {% for book in page_queryset %}
                <p>{{ book }}</p>
            {% endfor %}
            {{ page_obj.page_html|safe }}
        </div>
    </div>
</div>

</body>
</html>

orm查询优化
1. only和defer
  1. only
    1. only返回的是queryset对象，本质就是列表套数据对象
    2. 该对象内只含有only括号内指定的属性，但是其他属性也可以获取，会自动从数据库重新获取
  2. defer
    1. defer返回的是queryset对象，本质就是列表套数据对象
    2. 该对象内只含有除了defer括号内所指定的其他属性，指定属性也可获取，也会自动从数据库重新获取
2. select_related和prefetch_related
  1. select_related
    1. 括号内只能放外键字段，并且外键字段的类型只能是一对多或者多对多
    2. 内部是联表操作，返回的是一个queryset列表套数据对象
    3. 获取外键表数据时，不会再访问数据库
  2. prefetch_related
    1. 内部是子查询，括号内外键字段无限制
    2. 内部是联表操作，返回的是一个queryset列表套数据对象
    3. 获取外键表数据时，不会再访问数据库
  第一个方法联表操作比较耗时、第二个方法访问数据库比较耗时
choices参数
1. 提前定义好对应关系
2. 再通过字段的choices参数指定关系
3. get_字段名_display：获取对应关系
MTC和MVC模型
1. MTC
  1. Models
  2. Templates
  3. Views
2. MVC
  1. Models
  2. Views
  3. Controller
  django自称是MTV，本质上还是MVC
AJAX
1. 异步提交
2. 局部刷新
AJAX基本语法结构
1. url：后端的地址，特性和action一样
type：请求方式
1. data：传输数据

success：基于ajax，后端返回的结果（HttpResponse）会被回调函数捕获，不会影响整个页面

      // 基于Jquery封装好的ajax，确保jQuery导入
      $.ajax({
          url:'',
          type:'post',
          data:{'username':'wick'}
          success:function(data){

      }
      })

前后端数据传输编码格式
1. urlencoded
  1. 数据格式：usernamewick&password=123
  2. django针对符合urlencoded编码格式的数据，会自动解析并封装到request.POST中
2. formdata
  1. form表单发送文件必须要指定的编码格式
  2. 可以发文件也可以发普通键值对
  3. django后端会自动识别，将内部符合urlencoded编码格式的数据，会自动东借西并封装到request.FILES中
3. application/json
  1. 用来发送json格式数据
  2. 目前只有ajax能发送jaon格式数据
ajax发送json格式数据
1. contenType:'application/json'
2. JSON.stringify({'username':'wick'$'password':123})
3. django针对json格式数据不会自动处理，会封装在requerst.body内，需要手动反序列化
ajax发送文件数据
1. 先生成一个内置对象：var MyFormData=new FormData()
2. 通过append向对象内添加数据（可以是普通键值对，也可以是文件）
  1. 普通键值对：MyFormData.append('name','wick')
  2. 文件数据：MyFormData.append('file',$('input')[0].file[0])
3. 额外指定两个参数
  1. contentType:false
  2. processData:false

（day56）八、删除框、批量创建、分页器组件的更多相关文章

Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型科普 Ajax 发送 GET.POST 请求的几种常见方式用 Ajax 做一个小案例准备工作动手用 Aj ...
【PyQt5 学习记录】009：批量创建组件并查找
这里需要在创建组件时使用 setObjectName() 为其添加 objectName 属性,再通过 findChild() 或者 findChildren() 函数来查找. 举个栗子,批量创建10 ...
【shell脚本】创建账户及删除账户，批量创建账户及批量删除账户===autoCreateUser.sh
一.字符串运算符二.创建账户 1.提示用户输入用户名和密码,脚本自动创建相应的账户及配置密码.如果用户不输入账户名,则提示必须输入账户名并退出脚本;如果用户不输入密码,则统一使用默认的 123456 ...
Linux 批量创建user和批量删除用户
Linux 批量创建user和批量删除用户以下为批量创建用户: #首先我们需要创建一个xxx.txt文件,把需要的我们创建的用户写在这个文本里面来,注意:每写完一个用户都需要换行. vim user ...
[Django高级之批量插入数据、分页器组件]
[Django高级之批量插入数据.分页器组件] 批量插入数据模板层models.py from django.db import models class Books(models.Model): ...
django中的分页器组件
目录 django的组件-分页器引入分页器分页器demo 创建数据库模型 url控制器 views视图函数 templates模板为什么要用分页器导入分页器分页器优化1 分页器优化2 有多少 ...
C#创建COM组件
本文详细阐述如何用C#创建COM组件,并能用VC6.0等调用. 附:本文适用任何VS系列工具. 在用C#创建COM组件时,一定要记住以下几点: 1.所要导出的类必须为公有: 2.所有属性.方法也必须为 ...
SweetAler弹框插件与分页器插件
目录 SweetAlert插件自定义分页器使用Django向数据库批量插入数据自定义分页器的思路自定义分页器组件 SweetAlert插件 sweetalert是一款基于Bootstrap的专 ...
本文详细阐述如何用C#创建COM组件，并能用VC6.0等调用。
本文详细阐述如何用C#创建COM组件,并能用VC6.0等调用. 附:本文适用任何VS系列工具. 在用C#创建COM组件时,一定要记住以下几点: 1.所要导出的类必须为公有: 2.所有属性.方法也必须为 ...
SERVER 2012 R2 core域环境下批量创建用户
Write by xiaoyang 转载请注明出处步骤一:创建域基本配置 1. 输入命令进入配置 2. 输入8进入网络配置 3. 选择要配置的网 ...

随机推荐

【使用篇二】SpringBoot整合aop（13）
AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是Spring框架中的一个重要内容,它通 ...
HttpClient基本功能的使用 Get方式
一.GET 方法使用 HttpClient 需要以下 6 个步骤: 1. 创建 HttpClient 的实例 2. 创建某种连接方法的实例,在这里是 GetMethod.在 ...
【python爬虫】正则表达式
一.数据的分类 1.结构化数据特点:数据以行为单位,每一个数据表示一个实体.每一行数据的属性都是一样的. 举例:关系型数据库中的表就是结构化数据. 处理方法:sql 2.半结构化数据特点:结构化数 ...
git光速入门
git的使用和讲解版本控制说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景象! 1 2 3 4 5 6 7 8 9 10 11 毕业论文_初稿.doc ...
golang数据结构之冒泡排序
//BubbleSort 冒泡排序 func BubbleSort(arr *[]int) { ; i >= ; i-- { ; j-- { if (*arr)[j] > (*arr)[i ...
PHP 7.4.0 发布
近日,PHP 7.4.0 发布了,此版本标志着 PHP 7 系列的第四次特性更新. PHP 7.4.0 进行了许多改进,并带来了一些新特性,包括: Typed Properties 类型属性类属性 ...
IT兄弟连 Java语法教程算符运算符
Java提供了丰富的运算符环境.可以将大部分Java运算符划分为4组:算术运算符.位运算符.关系运算符以及逻辑运算符.Java还定义了一些用于处理某些特定情况的附加运算符.本章将介绍除类型比较运算符i ...
gcc原子操作测试
#include <stdio.h> #include <pthread.h> #include <stdlib.h> ; void *test_func(void ...
rpmbuild打包
安装: yum install -y rpm-build 目录介绍: 默认目录在 /root/rpmbuild BUILD :你要打包的文件将会在这里编译(编译rpm包的临时目录) BUILDRO ...
Python的定时执行
最近手把手教妹子写Python,被一篇博客误导了,这里记录一下. 妹子需要的是一个定时闹钟,到点往钉钉群里推个消息.她一顿搜索猛如虎,参照着其他人的博客,搞了一个while: target_time ...

（day56）八、删除框、批量创建、分页器组件

一、ajax结合sweetalert实现删除按钮的动态效果

二、bulk_create批量插入数据

三、自定义分页器

（一）手动推导

（二）自定义分页器

（1）模板

（2）用法

（day56）八、删除框、批量创建、分页器组件的更多相关文章

随机推荐

热门专题