BBB-登录注册
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 += '?')
