杂乱知识点补充

Posted 2022-05-10 1624413646hxy

1  在前端渲染页面时如果想要在form表单点击文字就可以指定到输入框中，以注册输入框为例，可以给文字套上一个label标签

  <form id="my_form" novalidate>
                 % csrf_token %
                 % for foo in form_obj %
                     <div class="form-group">
                         <label for=" foo.auto_id "> foo.label </label>
                          foo 
                         <span class="pull-right" style="color: red"></span>
                     </div>
                 % endfor %

在注册过程中选择头像后实时将默认头像换成我们选择的头像：

$("#id_file").change(function () 
        // 获取文件对象
        var fileObj = $(this)[0].files[0];
        // 利用内置对象 文件阅读器 FileReader
        var fileReader = new FileReader();
        // 将文件对象交给文件阅读器 生成文件对象的二进制数据
        fileReader.readAsDataURL(fileObj);  // 异步
        // DOM操作 修改img标签的src属性值
        fileReader.onload = function ()
            $(‘#id_img‘).attr(‘src‘,fileReader.result)
        
    );

当我们的前台页面使用form组件渲染生成的时候，如果我们选择用ajax来提交数据，是不好取到input框中的值的

这时候可以使用$.each(),括号里面固定传入两个数据，一个是将要被循环的对象，一个是固定的function函数

这种方法只是可以添加普通的键值对

 $.each($(‘#myform‘).serializeArray(),function (index,obj)   // $.each(你想要被循环的对象，函数(索引，单个单个的对象))
            // console.log(index,obj)
            formData.append(obj.name,obj.value)  // 仅仅是将普通的键值对添加进去
        );

input框获取焦点事件

 $(‘input‘).focus(function () 
        // 将当前input所在的div移除has-error属性 并将下面的span标签内的内容也移除了
        $(this).next().html(‘‘).parent().removeClass(‘has-error‘)
    )

如何生成登录时的动态验证码

前台src书写格式 这是利用src接收二进制数据形式的图片的特性来实现的，所以直接写url地址拿到数据生成图片

  <img src="/app01/get_code/" alt="" width="310" height="35" id="id_img">

后台逻辑代码：

想要生成动态的验证码需要借助一个第三方的模块 pillow

安装：pip3 install pillow
需要用到其中三个方法：

from PIL import Image,ImageDraw,ImageFont
#imag用来生成图片，draw在图片上写字，font控制字体样式

这里生成图片对象后需要先保存在再以二进制形式读出才会发送到前台去，再使用一个模块

from io import BytesIO
#可以保存数据，并且以二进制取出

我们生成图片文件需要使用到3个参数： ‘RGB‘，图片尺寸（前台定好的尺寸，元组形式传入），图片颜色，图片颜色可以三参数来随机生成（三参数都是0到255之间），可使用random生成，

def get_random():
    return random.randint(0,255),random.randint(0,255),random.randint(0,255)

图片对象生成后交给 ImageDraw 

从字体库下载一种字体，到本地文件中，并使用

    img_obj = Image.new(‘RGB‘,(310,35),get_random())
    img_draw = ImageDraw.Draw(img_obj)
    img_font = ImageFont.truetype(‘static/ttf/111.ttf‘,25)

一切就绪后生成io对象，使用保存方法，一定要在后方指定格式，最后返回时，使用io对象的getvalue方法，以二进制形式发送给前端

io_obj = BytesIO()
    img_obj.save(io_obj,‘png‘)
    return HttpResponse(io_obj.getvalue())

整体代码实现：

def get_code(request):
    #图片颜色动态变化，图片存放不在以来与文件
    # img_obj = Image.new(‘RGB‘,(310,35),get_random())
    #生成一个BytesIO对象
    # io_obj= BytesIO()
    # img_obj.save(io_obj,‘png‘)
    # return  HttpResponse(io_obj.getvalue())


    img_obj = Image.new(‘RGB‘,(310,35),get_random())
    img_draw = ImageDraw.Draw(img_obj)
    img_font = ImageFont.truetype(‘static/ttf/111.ttf‘,25)
    code = ‘‘
    #随机验证码
    for i in range(5):
        random_int = str(random.randint(0,9))
        random_lower = chr(random.randint(97,122))
        random_upper = chr(random.randint(65,90))

        res = random.choice([random_int,random_upper,random_lower])
        img_draw.text((20+i*45,5),res,get_random(),img_font,)
        code += res
    print(code)
    request.session[‘code‘] = code
    io_obj = BytesIO()
    img_obj.save(io_obj,‘png‘)
    return HttpResponse(io_obj.getvalue())

media文件配置

网站所要用到的静态文件资源 默认都放在了static文件夹下
用户上传的静态文件也需要单独找一个文件夹存放(media文件夹)
    静态资源两类
        1.网站用到的静态资源(static)
        2.用户上传的静态资源(自定义文件夹名 用来存储用户上传的静态资源文件)
        

media配置
    settings文件中配置MEDIA_ROOT
        MEDIA_ROOT = os.path.join(BASE_DIR,‘media‘)
    urls.py手动添加路由
        from django.views.static import serve
        from BBS import settings

        # media相关路由配置
        url(r‘^media/(?P<path>.*)‘,serve,‘document_root‘:settings.MEDIA_ROOT)
    media配置可以暴露后端任意文件资源 在配置的时候一定要小心
    

图片防盗链

为了防止其他网站盗用本网站资源
当请求是从其他网站来的话 我就直接拒绝
只有当请求是从我自己的网站发出的时候 我才正常响应

refer 用来表示你上一次所在的路径
UserAgent 表示你是否是个浏览器