三、注册功能
# views.py文件
def register(request):
back_dic = {'code': 100, 'msg': ''}
form_obj = myforms.MyForm()
if request.method == 'POST':
# print("进入了POST！！")
# 前端传来了数据，现在要去校验了
form_obj = myforms.MyForm(request.POST)
# 自动校验，校验结果保存在 is_valid 中
if form_obj.is_valid():
data = form_obj.cleaned_data # 可以看做，经过清洗的数据，键值形式存放，不知道是对象还是字典类型
# print(type(data))
# 将confirm_password去掉
data.pop('confirm_password')
# 获取用户上传的文件对象，因为上面的data里面是没有的
# 上传的头像文件是放在request.FILES里面
file_obj = request.FILES.get('myfile')
# 判断用户是否上传了自己的头像，因为设置的是可以不上传头像
# 如果不上传头像的话，会使用默认的头像
if file_obj:
# 上传了头像，那么就将路径添加到data中去
data['avatar'] = file_obj
# 用create_user --> 密码会保存成密文
models.UserInfo.objects.create_user(**data)
back_dic['msg'] = '恭喜你，注册成功！'
back_dic['url'] = '/login/'
else:
back_dic['code'] = '101'
back_dic['msg'] = form_obj.errors
return JsonResponse(back_dic)
return render(request, 'register.html', locals())
<!--register.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BBS论坛</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h2 class="text-center"> 用户注册 </h2>
{# 使用ajax向后端提交数据 #}
<form id="myform">
{% csrf_token %}
{% for form in form_obj %}
<div class="form-group">
<label for="{{ form_obj.auto_id }}">{{ form.label }}</label>
{{ form }}
{# 下面用来显示错误信息的 #}
<span class="errors pull-right" style="color: red;"></span>
</div>
{% endfor %}
</form>
<div class="form-group">
<label for="id_myfile">头像
<img src="/static/img/1.jpg" alt="" width="100" style="margin-left: 20px" id="id_img">
</label>
<input type="file" name="myfile" id="id_myfile" style="display: none">
</div>
<button class="btn btn-success btn-lg" id="id_submit">注册</button>
</div>
</div>
</div>
<script>
$('#id_myfile').change(function () {
// 获取用户上传的文件对象
let fileObj = this.files[0];
// 生成一个内置对象
let fileReader = new FileReader();
// 将文件对象传递给内置对象
fileReader.readAsDataURL(fileObj);
// 将读取出文件对象替换到img标签
fileReader.onload = function(){ //等文件阅读器读取完毕再渲染图片
$('#id_img').attr('src', fileReader.result)
}
});
// ajax提交数据
$('#id_submit').click(function(){
// 生成一个FormData对象
let formData = new FormData();
// 往FormData对象中添加键值
$.each($('#myform').serializeArray(), function (index, obj) {
formData.append(obj.name, obj.value)
});
// 手动添加文件数据
formData.append('myfile', $('#id_myfile')[0].files[0]);
$.ajax({
url: '',
type:'post',
data: formData,
//指定两个参数
processData: false,
contentType: false,
success: function (data){
if (data.code === 100){
//跳转到登录界面
console.log("ok!");
location.href = data.url;
}else{
$.each(data.msg, function (index, obj) {
let targetId = '#id_' + index; // id_username, id_password...
$(targetId).next().html(obj[0]).parent().addClass('has-error')
})
}
}
});
});
$('input').focus(function () {
$(this).next().html('').parent().removeClass('has-error')
})
</script>
</body>
</html>
