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

  1. 下载sweetalert插件，导入dist文件夹中css和js文件
  2. 挑选弹出框样式，https://lipis.github.io/bootstrap-sweetalert/
  3. 通过自定义标签属性传输数据
  4. 通过标签的查找删除标签，达到删除的作用
<!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批量插入数据

  1. bulk_create用于批量插入数据，解决大量插入数据耗时长的问题
  2. 先用列表生成数据，再通过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）用法

  1. 应用中创建utils文件夹
  2. 文件夹中创建mypage.py文件
  3. 视图函数中导入该文件
  4. 当前页：current_page
  5. 数据总个数：all_count
  6. 实例化对象：page_obj
  7. 切片
# 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>

  1. 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. 获取外键表数据时，不会再访问数据库

      第一个方法联表操作比较耗时、第二个方法访问数据库比较耗时

  2. choices参数

    1. 提前定义好对应关系
    2. 再通过字段的choices参数指定关系
    3. get_字段名_display：获取对应关系

  3. MTC和MVC模型

    1. MTC

      1. Models
      2. Templates
      3. Views

    2. MVC

      1. Models
      2. Views
      3. Controller

      django自称是MTV，本质上还是MVC

  4. AJAX

    1. 异步提交
    2. 局部刷新

  5. AJAX基本语法结构

    1. url：后端的地址，特性和action一样
  6. type：请求方式
    1. data：传输数据

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

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

      }
      })
  8. 前后端数据传输编码格式
    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格式数据
  9. ajax发送json格式数据
    1. contenType:'application/json'
    2. JSON.stringify({'username':'wick'$'password':123})
    3. django针对json格式数据不会自动处理，会封装在requerst.body内，需要手动反序列化
  10. 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）八、删除框、批量创建、分页器组件的更多相关文章

  1. Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07

    目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...

  2. 【PyQt5 学习记录】009：批量创建组件并查找

    这里需要在创建组件时使用 setObjectName() 为其添加 objectName 属性,再通过 findChild() 或者 findChildren() 函数来查找. 举个栗子,批量创建10 ...

  3. 【shell脚本】创建账户及删除账户，批量创建账户及批量删除账户===autoCreateUser.sh

    一.字符串运算符 二.创建账户 1.提示用户输入用户名和密码,脚本自动创建相应的账户及配置密码.如果用户不输入账户名,则提示必须输入账户名并退出脚本;如果用户不输入密码,则统一使用默认的 123456 ...

  4. Linux 批量创建user和批量删除用户

    Linux 批量创建user和批量删除用户 以下为批量创建用户: #首先我们需要创建一个xxx.txt文件,把需要的我们创建的用户写在这个文本里面来,注意:每写完一个用户都需要换行. vim user ...

  5. [Django高级之批量插入数据、分页器组件]

    [Django高级之批量插入数据.分页器组件] 批量插入数据 模板层models.py from django.db import models class Books(models.Model): ...

  6. django中的分页器组件

    目录 django的组件-分页器 引入分页器 分页器demo 创建数据库模型 url控制器 views视图函数 templates模板 为什么要用分页器 导入分页器 分页器优化1 分页器优化2 有多少 ...

  7. C#创建COM组件

    本文详细阐述如何用C#创建COM组件,并能用VC6.0等调用. 附:本文适用任何VS系列工具. 在用C#创建COM组件时,一定要记住以下几点: 1.所要导出的类必须为公有: 2.所有属性.方法也必须为 ...

  8. SweetAler弹框插件与分页器插件

    目录 SweetAlert插件 自定义分页器 使用Django向数据库批量插入数据 自定义分页器的思路 自定义分页器组件 SweetAlert插件 sweetalert是一款基于Bootstrap的专 ...

  9. 本文详细阐述如何用C#创建COM组件，并能用VC6.0等调用。

    本文详细阐述如何用C#创建COM组件,并能用VC6.0等调用. 附:本文适用任何VS系列工具. 在用C#创建COM组件时,一定要记住以下几点: 1.所要导出的类必须为公有: 2.所有属性.方法也必须为 ...

  10. SERVER 2012 R2 core域环境下批量创建用户

      Write by xiaoyang 转载请注明出处 步骤一:创建域 基本配置 1.         输入命令进入配置 2.         输入8进入网络配置 3.         选择要配置的网 ...

随机推荐

  1. deepin/debian 安装docker

    简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会 ...

  2. linux 头文件路径

    linux 头文件路径 /usr/include

  3. LeetCode解题笔记 - 4. Median of Two Sorted Arrays

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  4. Note | 用Hugo搭建博客并部署到GitHub Pages

    目录 1. 本地搭建 1.1 安装Hugo 1.2 创建站点 1.3 新建页面和文章 1.4 使用主题 1.5 修改配置文件 1.6 预览 2. 部署 之前担心过现有博客平台(如博客园,CSDN)突然 ...

  5. RestTemplate调用接口（附有账号密码）

    private JSONObject Post(String url, String payload, String username, String password) { RestTemplate ...

  6. spider-通过scrapyd网页管理工具执行scrapy框架

    1.首先写一个scrapy框架爬虫的项目 scrapy startproject 项目名称 # 创建项目 cd 项目名称 scrapy genspider 爬虫名称 爬虫网址(www.xxxx) #生 ...

  7. 【STM32H7教程】第30章 STM32H7的USART应用之八个串口FIFO实现

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第30章       STM32H7的USART应用之八个串口 ...

  8. NOI2019退役记 upd:2019.12.1

    (我把原来写的东西全部删掉了) AFO. 我退役了,\(\mbox{yyb}\)退役了. 至少,在接下来的日子里,我得投身到文化课,度过快乐的高三生活了. 这两年的\(OI\)生涯给了我很多,让我学会 ...

  9. Jenkins 在 Tomcat 运行访问路径设置

    问题 最近用 Tomcat 搭建了个 Jenkins ,但是访问的时候需要端口加 /jenkins/ 才能进行访问.我们是直接将 Jenkins.war 包放在 webapps下的. 我们想直接通过不 ...

  10. 如何真正实现由文档驱动的API设计？

    前言 本文主要介绍了一种新的开发思路:通过反转开发顺序,直接从API文档中阅读代码.作者认为通过这种开发方式,你可以更清楚地知道文档表达出什么以及它应该如何实现. 如果单从API文档出发,由于信息量不 ...