三、注冊功能
# 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>
