• django13


    昨日回顾

    1 ajax:异步的javascript的xml,同时可以发出很多ajax的请求,局部刷新
    2 本质就是使用javascript这门语言发送http请求(异步),jquery的ajax方法,以后用axios   # 浏览器中的Network里的XHR里的东西都是一堆ajax请求  node就是js的解释器,本来js的解释器在浏览器内置,但是被单独拿出来了就弄成了node,可以装到操作系统上,因此可以用node写后端(其实就是用js写),由此就导致了前端工程化的火爆场面
    # 以前使用render返回的是用模板语言替换好的整个页面,现在用ajax,直接先拿回来一个空页面,然后发起ajax请求,拿回数据,通过js,用dom操作放到对应的地方,这是前后端分离的雏形;前后端完全分离(模板语言就不需要),前端就是一个前端项目,后端就是一个后端项目,后端直接返回json格式的数据,前端自己拼接。前后端分离将压力分担给了客户端,服务端不要每次都将整个页面渲染完成才返回给客户端。
    
    3 如何使用(借助于jquery)   # ajax请求可以使用get请求,只不过请求的数据从get请求对应的位置取
    	# 默认编码方式是urlencoded
    	$.ajax({
            url:/books/?name=lqz,
            method:'post/get',
            data:{name:'lqz',age:19},
            success:function (data){
                打印,弹窗,渲染页面(js dom操作,修改页面)
            }
        })
    #如果用urlencoded编码,在post请求传递json格式字符串,后端是可以接收到数据的,但是,数据有问题,如果传递Json.stringify({name:'lqz',age:19})的数据,到达后端以后,从request.POST中取出的数据是{'{"name":"lqz","age":18}':['']},原因:这样写会把数据原封不动的放到body中,但是django识别到提交的数据是以urlencoded编码方式提交,则会将数据name=lqz&age=19以&和=进行切分,所以只切出了{name:'lqz',age:19}放到key中,value中为[''],然后转到字典中;从body体中取出的数据是b'{"name":"lqz","age":18}',这是一个二进制的json格式
    # 如果使用contentType编码,数据使用json格式数据传递,传递的数据是{name:'lqz',age:19},因为django框架只会在urlencoded和formdata的时候进行处理,因此request.POST中取出的数据为{},而从body中取出的数据为b'name=lqz&age=19'是因为django进行了预处理数据,默认将字典中数据处理成了以上的格式,所以必须将数据传承json格式,否则就会进行预处理数据(详解p15-d72-v1-21)
    
    4 上传文件
    	var formdata=new Formdata()
        formdata.append('name','lqz')    # 可以append值,也可以文件
        formdata.append('myfile',$('#id_file')[0].files[0])  # 不一定是myfile,这个地方只是key值
    	$.ajax({
            url:/books/?name=lqz,
            method:'post/get',
            processData:false,
            contentType:false,
            data:formdata,
            success:function (data){
                打印,弹窗,渲染页面(js dom操作,修改页面)
            }
        })
        # 后端代码写一套即可:使用form表单传,postman,ajax传,都是一样的
            
    5 上传json格式
    	$.ajax({
            url:/books/?name=lqz,
            method:'post/get',
            contentType:'application/json',
            data:字符串(json格式),
            success:function (data){
                打印,弹窗,渲染页面(js dom操作,修改页面)
            }
        })
        
    6 后端返回数据
    	-HttpResponse:它没有指定响应编码,默认用的text/html
        -JsonResponse:它指定了响应编码:application/json
        -ajax方法:会去看响应编码是什么,如果是application/json,自动调用JSON.parser(),如果不是json格式,就不处理
        -于是:success:function (data)  可能是个字符串,也可能是个对象,响应编码决定的
          
    7 js中json序列化和反序列化
    	-JSON.parser()
        -JSON.stringify(data)
          
    8 django内置的序列化器(转出来会将表模型的名字也放进去了,如果内部含有日期类型,就会报错,只能转数字和字符串类型(网上有解决方案,如何转其他类型不报错))
    	-需要会自己转(把对象转成json格式)
        -自己写(局限性,以后再转publish,还得再写一遍,不通用)
            ll=[]
            for book in book_list:
                ll.append({'name':book.name,'age':book.age})
            return JsonResponse(ll,safe=False)
        
        {name:lqz,age:18,hobbys:[{hobbyname:'篮球',hobbyid:1},{hobbyname:'足球',hobbyid:2}]}
        
        [{name:lqz,age:18},{name:egon,age:18},{name:zs,age:18}]
    

    今日内容

    1 分页器组件介绍

    1 项目数据量大了以后,比如涉及到分页,一页一页的加载显示
    2 django中分页器组件,把分页常用的东西,封装到一个类中
    3 实例化得到一个对象,对象里有属性和方法
    

    2 分页器的简单使用

    视图函数中批量插入数据
    # 第一种方式  批量插入数据,同时写了多次数据库(不用)
        for i in range(100):
            models.Book.objects.create(name='书籍%s'%i,price = i+1)
    # 方式二 一次性生成数据后放入数据库
        lis = []
        for i in range(0,100):
            book = models.Book.objects.create(name='书籍%s' % i, price=i + 1)
            lis.append(book)
        models.Book.objects.bulk_create(lis, 10)   # bulk_create后面参数,第一个要求必须是对象第二个参数表示的是每一次插入多少条数据,即这条语句的意思是将lis中的100条数据,每次插入10条,故总共需要插入10次
    # 注意在批量插入的时候由于没有排序,因此可能会导致数据插入时出现重复,因此django会报错,需要在models中,写元类信息
    class Book(models.Model):
        id = models.AutoField(primary_key=True)
        name = models.CharField(max_length=32)
        price = models.DecimalField(max_digits=5, decimal_places=2)
        class Meta:
            ordering=('id', ) # 元类信息,默认以id排序,或者写成['id',],即ordering后面必须跟元组,或者列表,因为有可能会根据id排序完成后还要根据某字段排序即 ordering=('id', 'price')
    
    #######1 Paginator对象的属性和方法
    # 首先导入  from django.core.paginator import Paginator 
        book_list=models.Book.objects.all()   # 拿出所有数据,由于本身里面limit限制,所以内部实际上是每次拿回一定的数据,否则一次拿回大量数据,可能会直接卡死
    
        paginator=Paginator(book_list,10)  # 实例化得到对象,第一个参数:要分页的数据,book_list,第二个参数:每页显示的条数
        # Paginator对象的属性和方法
        print(paginator.per_page) # 每页显示的条数
        print(paginator.count) # 总条数,总共要分页多少条数据
        print(paginator.num_pages) # 总页码数
        print(paginator.page_range) # 页码的生成器 [1,2,3,4,5,6,7,8,9,10]
        
    ######3 Page对象的属性和方法
        # Page类 的对象
        page=paginator.page(2)   #  此表示第2页的对象 
        # 每一页的对象,属性和方法
        print(page.has_next())      # 有没有下一页
        print(page.next_page_number()) # 下一页的页码(当前页如果是最后一页,则没有下一页)
        print(page.has_previous())  # 是否有上一页
        print(page.previous_pazege_number()) # 上一页页面 (当前页如果是第一页,则没有上一页)
        print(page.object_list)       # 当前页的所有数据
        print(page.number)           # 当前页的页码数
        
        
    ##### 4 表模型中默认以id排序
        class Meta:
            ordering=('id', ) # 默认以id排序
    

    视图

    def index(request):
        # 需要的第三个参数
        page_num_int=int(request.GET.get('page',1))
        book_list = models.Book.objects.all()
        paginator = Paginator(book_list, 10)
    
        # 需要的第一个参数:页码的生成器 [1,2,3,4,5,6,7,8,9,10]
        page_range = paginator.page_range
        # 需要的第二个参数,去到某一页的page对象
        page = paginator.page(page_num_int)
        return render(request, 'index.html', {'page_range':page_range,'page':page,'page_num_int':page_num_int})
    # django处理xss攻击的底层原理是通过将<>等标签替换成特殊字符,类似&raquo
    

    模板(重要)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
        <title>Title</title>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>名字</th>
                        <th>价格</th>
                    </tr>
                    </thead>
                    <tbody>
    
                    {% for book in page.object_list %}   
                        <tr>
                            <td>{{ book.id }}</td>
                            <td>{{ book.name }}</td>
                            <td>{{ book.price }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    
                </table>
                <div class="text-center">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
    
                            {% if page.has_previous %}
                                <li>
                                    <a href="/?page={{ page.previous_page_number }}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% else %}
                                <li class="disabled">
                                    <a href="" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% endif %}
    
                            {% for page_num in page_range %}
                                {% if page_num_int == page_num %}
                                    <li class="active"><a href="/?page={{ page_num }}">{{ page_num }}</a></li>
                                {% else %}
                                    <li><a href="/?page={{ page_num }}">{{ page_num }}</a></li>
                                {% endif %}
                            {% endfor %}
    
    
                            {% if page.has_next %}
                                <li>
                                    <a href="/?page={{ page.next_page_number }}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% else %}
                                <li class="disabled">
                                    <a href="" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    

    3 分页器的进阶使用

    # 最多显示前5 后5 和当前,总共11个页码,如果少于11,全部显示出来
    
    #逻辑分析 
    	显示左5,右5,总共11个页,
        1 如果总页码大于11
            1.1 if 当前页码减5小于1,要生成1到12的列表(顾头不顾尾,共11个页码)
                page_range=range(1,12)
            1.2 elif 当前页码+5大于总页码,生成当前页码减10,到当前页码加1的列表(顾头不顾尾,共11个页码)
                page_range=range(paginator.num_pages-10,paginator.num_pages+1)
            1.3 else 生成当前页码-5,到当前页码+6的列表
                page_range=range(current_page_num-5,current_page_num+6)
        2 其它情况,生成的列表就是pageinator的page_range
            page_range=paginator.page_range
    
    

    视图

    def index(request):
        # 需要的第三个参数
        page_num_int = int(request.GET.get('page', 1))
        book_list = models.Book.objects.all()
        paginator = Paginator(book_list, 10)
    
        # 需要的第一个参数:页码的生成器 [1,2,3,4,5,6,7,8,9,10]
        # page_range = paginator.page_range
        if paginator.num_pages > 11:
            # 当前条件符合了以后,有三种情况
            if page_num_int - 5 < 1:    # 当前页码数-5<1
                page_range = range(1, 11)   # 共10个
            elif page_num_int + 5 > paginator.num_pages:  # 当前页码数+5>总页码数
                page_range = range(paginator.num_pages - 10, paginator.num_pages + 1)  # 总页码-10,总页码+1  因为range前取后不取,共11个
            else:
                page_range = range(page_num_int - 5, page_num_int + 5) # 共10个
        else:
            page_range = paginator.page_range   # 共10个
        # 需要的第二个参数,去到某一页的page对象
        page = paginator.page(page_num_int)
        return render(request, 'index.html', {'page_range': page_range, 'page': page, 'page_num_int': page_num_int})
    

    模板

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
        <title>Title</title>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>名字</th>
                        <th>价格</th>
                    </tr>
                    </thead>
                    <tbody>
    
    
                    {% for book in page.object_list %}
                        <tr>
                            <td>{{ book.id }}</td>
                            <td>{{ book.name }}</td>
                            <td>{{ book.price }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
    
                </table>
    
                <div class="text-center">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
    
                            {% if page.has_previous %}
                                <li>
                                    <a href="/?page={{ page.previous_page_number }}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% else %}
                                <li class="disabled">
                                    <a href="" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% endif %}
    
    
    
                            {% for page_num in page_range %}
                                {% if page_num_int == page_num %}
                                    <li class="active"><a href="/?page={{ page_num }}">{{ page_num }}</a></li>
                                {% else %}
                                    <li><a href="/?page={{ page_num }}">{{ page_num }}</a></li>
                                {% endif %}
    
                            {% endfor %}
    
    
                            {% if page.has_next %}
                                <li>
                                    <a href="/?page={{ page.next_page_number }}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% else %}
                                <li class="disabled">
                                    <a href="" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    

    4 forms组件介绍

    1 注册功能,登录功能,前端需要校验(字段长度,邮箱是否合法。。。)
    2 前端校验可以没有,后端校验是必须的,使用传统方式  if判断写的很多
    3 借助于forms组件,可以快速实现字段的校验
    	from django.forms import Form,因为一般还需要使用forms里面的其他类,所以一般导入from django import forms
    

    5 forms校验字段功能

    ### 1 写一个类,类里写要校验的字段,一般在app里重新建一个py文件写这个类  导入from django import forms,
    class MyForm(forms.Form):
        # 校验这个字段,最大长度是32,最小长度是3
        name = forms.CharField(required=False, max_length=32, min_length=3,label='用户名')  # required=True,则表示校验的时候必须要传name字段过来,如果不写required默认会是True
        email = forms.EmailField(label='邮箱')  #如果不写required默认会是True
        age=forms.IntegerField(max_value=200,min_value=0,label='年龄')   # max_value最大值
        
    ### 2 视图函数中使用
    导入自己写的校验字段的类 from app1 import myforms
    def register(request):
        # 数据可以是从前端传过来的,也可以是自己后台的数据
        # 现在有以下数据
        data={'name':'lqz','email':'33333@qq.com','age':900}
        # data={'email':'33333@qq.com','age':100}
        # data={'age':100}
        # 校验数据是否合法
        # 实例化得到form对象,把要校验的数据传入
        form=myforms.MyForm(data)
        # 校验数据:form.is_valid() 返回布尔类型
    
        if form.is_valid():
            print('校验通过')
            print(form.cleaned_data)  # 校验通过的数据 不一定是上面传入的数据,因为如果没有校验某些字段,那么该字段也不会出现在此数据中
        else:
            print(form.cleaned_data) # 如果校验失败了,里面也会有校验成功的数据
            print('校验失败')
            # 哪个字段失败了?失败的原因是什么
            print(form.errors)   # 校验失败会打印出带有ul标签的字符串,写成带有标签的字符串是为了渲染模板用的
            print(type(form.errors))   # type一下,然后就可以看它是源自于哪个类,在from django.forms.utils import ErrorDict ,重写了__str__,所以导致最后打印错误的信息时候输出特定的信息
            print(form.errors.as_json()) 
            print(form.errors.as_data())
    # 以上两个是打印的真正的错误信息
            # form.errors.as_ul()  # 是为了渲染模板
        return HttpResponse('ok')
    '''
    调用is_valid()后,才有form.errors和form.cleaned_data
    form.cleaned_data不敢成功与失败,都会有值,不一定是传入的值
    form.errors源码里面继承了字典,但是重写了一些方法,该类里面有as_data,as_ul,as_json,as_text,__str__
    '''
    

    6 forms渲染模板功能

    ## 视图函数
    def register(request):
        if request.method=='GET':
            form=myforms.MyForm()
            return render(request,'register.html',{'form':form})
        elif request.method=='POST':
            # 数据校验
            form=myforms.MyForm(request.POST)
            if form.is_valid():
                print('校验通过,存数据库')
            else:
                print(form.errors.as_data())
                print('校验失败,返回错误')
            return HttpResponse('ok')
        
        
     ## 模板
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <hr>
    # <h1>手动创建模板</h1>
    <form action="" method="post">
        <p>用户名:<input type="text" name="name"></p>
        <p>邮箱:<input type="text" name="email"></p>
        <p>年龄:<input type="text" name="age"></p>
        <p><input type="submit" value="提交"></p>
    </form>
    
    <hr>
    #<h1>半自动渲染模板1</h1>
    <form action="" method="post">
        <p>用户名:{{ form.name }}</p>
        <p>邮箱:{{ form.email }}</p>
        <p>年龄:{{ form.age }}</p>
        <p><input type="submit" value="提交"></p>
    </form>
    
    # <h1>半自动渲染模板2(用的最多)</h1>
    <form action="" method="post">
        <p>{{ form.name.label }}--{{ form.name }}</p>  # label在自己写的校验数据的类中的对应字段里面要添加label='用户名'
        <p>{{ form.email.label }}---{{ form.email }}</p> # 添加label='邮箱'
        <p>{{ form.age.label }}---{{ form.age }}</p> # 添加label='年龄'
        <p><input type="submit" value="提交"></p>
    </form>
     
    # <h1>半自动渲染模板3(用的最多)</h1>
    <form action="" method="post">
        {% for foo in form %}
           <p>{{ foo.label }} :{{ foo }}</p>
        {% endfor %}
    
        <p><input type="submit" value="提交"></p>
    </form>
    
    <h1>全自动(了解)</h1>
    <form action="" method="post">
    {#    {{ form.as_ul }}#}
        {{ form.as_p }}
    {#    <table>#}
    {#        {{ form.as_table }}#}
    {#    </table>#}
    
        <p><input type="submit" value="提交"></p>
    </form>
    </body>
    </html>
    
  • 相关阅读:
    每月碎碎念 | 2019.7
    聊聊HTML5中的Web Notification桌面通知
    Python的海龟绘图法小知识
    面向对象是什么意思?通俗易懂
    HTML实体
    gcc错误[Error] ld returned 1 exit status
    Markdown怎么使用制表符TAB键?为什么TAB失灵了?
    力扣题解——2的幂
    Jquery中的Ajax
    7个你可能不认识的CSS单位
  • 原文地址:https://www.cnblogs.com/feiguoguobokeyuan/p/13964782.html
Copyright © 2020-2023  润新知