BBS-登录注册

目录

• 1注册上传头像
• 2.登录图片验证码校验

1注册上传头像

创建admin管理员代码：python3 manage.py createsuperuser

1.在setting文件中配置，用户注册成功之后自动生成用户上传的静态文件,这里需要特别注意的是，如果我们在数据库设置了默认图片存放地址，我们需要与下面的地址保持一致，否知前端找不到默认头像。

# media配置，能够将用户上传的所有文件都统一指定到这个media文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

2.文件创建好了，我们需要将我们的文件开设访问接口，以便前端能够访问到;这里我们需要特别注意，这里的开始是不能随便开设的，以防数据后端数据泄露。

from django.views.static import serve
from BBS import settings
# 手动开设后端资源，将media文件夹下面所有的资源暴露给外界,
# media可以随便改，但是后面的是固定写法，不可改变，
url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),

3.前端：将头像图片加载到页面的时候，在img标签的src这样的写

<img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}/" alt="..." height="60">

4.前端加载头像图片和发送后端的时候我们需要注意些，

<script>
    //这里是对头像的事件做一些处理
    $('#mdd').on('change', function () {
        //在这里特别注意，需要用到一个内置对象，FileReader完成文件的读取操作
        let MyFileReader = new FileReader();
        //获取用户要上传的文件对象
        let fileObj = $(this)[0].files[0];
        //让文件阅读器读取文件
        MyFileReader.readAsDataURL(fileObj);//这里的操作是IO操作，属于异步
        //将读取之后的内容替换到img标间scr属性中
        MyFileReader.onload = function () {   //因为是异步操作所有这里我们要等待文件阅读完之后
            //再将结果替换到img标间中取
            $('#img').attr('src', MyFileReader.result)
        }
    });
    //提交按钮绑定事件
    $('#submit').click(function () {
        //第一步当点击事件触发后，将数据提交给后端
        //先定义一个函数,这里的FormData是form中的一个函数
        let MyFormData = new FormData();
        //接下来就是往里面添加键值对
        //普通的键值对添加完毕后
        // serializeArray序列化表单元素,返回 JSON 数据结构数据（就是利用form标签内部有一个自动序列化普通键值对的方法，，）
        $.each($('#myform').serializeArray(), function (index, obj) {
            //获取到的值是index是索引，obj是获取的对象
            //将获取到的对象添加到函数中
            MyFormData.append(obj.name, obj.value)
        });//刚刚我这里把  ''})''弄到后面去了，结果还是可以运行但是出现了添加了值却显示为空的现象
        //接下来手动添加文件数据
        MyFormData.append('avatar', $('#mdd')[0].files[0]);//以avatar定义为name，后面的值作为value
        //发送ajax请求
        $.ajax({
            url: '',
            type: 'post',
            data: MyFormData,
            //发送文件一定要指定两个参数
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.code == 1000) {
                    //注册成功，调转到登录页面，或你自己指定其他路径,
                    //从后端鞋垫到data中，前度直接从data中取
                    window.location.href = data.url
                } else {
                    $.each(data.msg, function (index, obj) {
                        //这里的index就是报错的字段，obj就是错的信息，数组的形式
                        //获取报错字段，手动拼接该字段对应的input的框的id值
                        let targetId = '#id_' + index;//+利用字符串拼接方式
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')//找到对应的input标签，
                                                                                        //然后通过next找到下面span给文本添加值
                                                                                        //并且给其添加属性

                    })
                }
            }
        })

    });
    //input框获取焦点事件
    $('input').focus(function () {
        //获取焦点后设置文本为空，父标签删除 class="has-error"
        $(this).next().text('').parent().removeClass('has-error')
    })
</script>

2.登录图片验证码校验

在登录的时候我们需要特别注意的是，这里我们需要做一个图片的验证码做校验。

1.这里我们需要引入一个特别重要的模块

from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO, StringIO

2.获取验证码背景颜色的三个色号:

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

3.获取图片相关的验证码:

def get_code(request):
    # 利用pillow模块自动生成图片
    # 生成图片对象
    img_obj = Image.new('RGB', (360, 35), get_random())
    # 将生成好的图片对象交给ImageDrawa在图片生成一个画笔
    img_draw = ImageDraw.Draw(img_obj)
    # 设置一个字体样式
    img_font = ImageFont.truetype('static/font/111.ttf', 30)

    # 随机字符串，大小写单词加数字，5位每一位都可以是大小写字母，小写字母或数字
    code = ''
    for i in range(5):
        upper_str = chr(random.randint(65, 90))
        lower_str = chr(random.randint(97, 122))
        random_int = str(random.randint(0, 9))
        # 随机取一个
        tmp = random.choice([upper_str, lower_str, random_int])
        # 朝图片上写一个,五个值设置不同的颜色、字体。在前端展示给用户
        img_draw.text((i * 60 + 60, 0), tmp, get_random(), img_font)
        code += tmp  # 把值添加到code中，然后保存到session中，用于校验前端提交的值

    # 把code添加到session中，这个验证码后面其他视图函数可能要用到  找个地方存储一下 并且这个地方全局的视图函数都能访问
    request.session['code'] = code
        # 生成一个二进制对象
    io_obj = BytesIO()
    # 保存二进制的图片对象，并以png格式，
    img_obj.save(io_obj, 'png')

    # 返回二进制图片的值
    return HttpResponse(io_obj.getvalue())

4.在前端的img的src写入函数的URL,这样就会自动在这个img标签中自动生成一张随机字符串的图片：

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

前端js处理图片的时候，有两种或更多情况，下面展示两种情况，一种是当点击图片的时候刷新验证码图片，第二种是登录错误的时候也需要刷新下验证码图片：

 //给验证码图片绑定一个点击一次就会更改一次事件
$('#id_img').click(function () {
    //获取当前img的路径
    var oldPath = $(this).attr('src');
    $(this).attr('src', oldPath += '?') //将oldPath路径通过+进行字符串拼接
});

//登录错误的时候也需要刷新下验证码图片
var oldPath = $('#id_img').attr('src');
$('#id_img').attr('src', oldPath += '?')