注冊功能實作
- forms組件進行表單驗證；
- 用戶頭像前端實時展示；
- ajax發送post請求；
應用forms組件實作用戶輸入資訊的校驗，首先在app目錄下創建一個myform.py的檔案，
- 如果你的專案至始至終只用到一個forms組件那么你可以直接建一個py檔案書寫即可，
- 但是如果你的專案需要使用多個forms組件，那么你可以創建一個myforms檔案夾在檔案夾內，根據forms組件功能的不同創建不同的py檔案，
regform.pyloginform.pyuserform.pyorderform.py
......
# 書寫針對用戶表的forms主鍵代碼
from django import forms
from app01 import models
class MyRegForm(forms.Form):
username = forms.CharField(label='用戶名',min_length=3,max_length=8,
error_messages={
'required':'用戶名不能為空',
'min_length':'用戶名最少3位',
'max_length':'用戶名最大8位'
},
# 還需要讓標簽有Bootstrap樣式
widget=forms.widgets.TextInput(attrs={'class':'form-control'})
)
password = forms.CharField(label='密碼',min_length=3,max_length=8,
error_messages={
'required':'密碼不能為空',
'min_length':'密碼最少3位',
'max_length':'密碼最大8位'
},
# 還需要讓標簽有Bootstrap樣式
widget=forms.widgets.PasswordInput(attrs={'class':'form-control'})
)
confirm_password = forms.CharField(label='確認密碼',min_length=3,max_length=8,
error_messages={
'required':'確認密碼不能為空',
'min_length':'確認密碼最少3位',
'max_length':'確認密碼最大8位'
},
# 還需要讓標簽有Bootstrap樣式
widget=forms.widgets.PasswordInput(attrs={'class':'form-control'})
)
email = forms.EmailField(label='郵箱',
error_messages={
'required': '郵箱不能為空',
'invalid':'郵箱格式不正確',
},
widget=forms.widgets.EmailInput(attrs={'class':'form-control'})
)
# 鉤子函式
# 區域鉤子：校驗用戶名是否已存在
def clean_username(self):
username = self.cleaned_data.get('username')
# 去資料庫中校驗
is_exist = models.UserInfo.objects.filter(username=username)
if is_exist:
# 提示資訊
self.add_error('username','用戶名已存在')
return username
# 全域鉤子：校驗兩次密碼是否一致
def clean(self):
password = self.cleaned_data.get('password')
confirm_password = self.cleaned_data.get('confirm_password')
if not password == confirm_password:
self.add_error('confirm_password','兩次密碼不一致')
return self.cleaned_data
然后在urls.py中配置注冊頁的路由資訊，
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('register/',views.register,name='reg'),
]
在視圖函式views.py中撰寫forms組件檢驗、ajax發送的post請求獲取資料、呼叫django orm功能存盤資料、將后端的處理結果回傳給前端進行校驗，
from app01.myforms import MyRegForm
from app01 import models
from django.http import JsonResponse
# Create your views here.
def register(request):
form_obj = MyRegForm()
if request.method == 'POST':
# 定義回傳給前端的js資料結果
back_dic = {"code": 1000, 'msg': ''}
# 校驗資料是否合法
form_obj = MyRegForm(request.POST)
# 判斷資料是否合法
if form_obj.is_valid():
# form_obj.cleaned_data：{'username': 'zhangsan', 'password': '123456', 'confirm_password': '123456', 'email': '[email protected]'}
# 將校驗通過的資料字典賦值給一個變數
clean_data = https://www.cnblogs.com/traininglxl/archive/2021/02/04/form_obj.cleaned_data
# 將字典里面的confirm_password鍵值對洗掉
clean_data.pop('confirm_password') # {'username': 'zhangsan', 'password': '123456', 'email': '[email protected]'}
# 注意用戶頭像是一個圖片的檔案，request.POST中只有鍵值對的資料
file_obj = request.FILES.get('avatar')
"""
針對用戶頭像一定要判斷是否傳值，不能直接添加到字典里面去
否則file_obj=None，會將資料庫中默認的圖片路徑覆寫，
"""
if file_obj:
# 向字典資料clean_data中增加一個圖片頭像的欄位
clean_data['avatar'] = file_obj
# 操作資料庫保存資料
models.UserInfo.objects.create_user(**clean_data)
# 注冊成功則跳轉到登錄頁面
back_dic['url'] = '/login/'
else:
back_dic['code'] = 2000 # 校驗存在錯誤
back_dic['msg'] = form_obj.errors
# 將字典型別的資料封裝成json回傳到前端
return JsonResponse(back_dic)
return render(request,'register.html',locals())
前端的注冊頁面：register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<title>用戶注冊</title>
</head>
<body>
<div >
<div >
<div >
<h1 >注冊</h1>
<form id="myform"> <!--這里我們不用form表單提交資料 知識單純的用一下form標簽而已-->
{% csrf_token %}
{% for form in form_obj %}
<div >
<label for="{{ form.auto_id }}">{{ form.label }}</label>
{{ form }}
<span style="color: red" ></span>
</div>
{% endfor %}
<div >
<label for="myfile">頭像
{% load static %}
<img src="https://www.cnblogs.com/traininglxl/archive/2021/02/04/{% static'img/default.jpg' %}" id='myimg' alt="" width="100" style="margin-left: 10px">
</label>
<input type="file" id="myfile" name="avatar" style="display: none" >
</div>
<input type="button" value="https://www.cnblogs.com/traininglxl/archive/2021/02/04/注冊" id="id_commit">
</form>
</div>
</div>
</div>
</body>
</html>
【重難點】在于書寫JS處理邏輯：包括了圖片上傳加載、ajax發送的post請求以及后端注冊結果的資訊處理，
<script>
$("#myfile").change(function () {
// 檔案閱讀器物件
// 1 先生成一個檔案閱讀器物件
let myFileReaderObj = new FileReader();
// 2 獲取用戶上傳的頭像檔案
let fileObj = $(this)[0].files[0];
// 3 將檔案物件交給閱讀器物件讀取
myFileReaderObj.readAsDataURL(fileObj) // 異步操作 IO操作
// 4 利用檔案閱讀器將檔案展示到前端頁面 修改src屬性
// 等待檔案閱讀器加載完畢之后再執行
myFileReaderObj.onload = function(){
$('#myimg').attr('src',myFileReaderObj.result)
}
})
$('#id_commit').click(function () {
// 發送ajax請求 我們發送的資料中即包含普通的鍵值也包含檔案
let formDataObj = new FormData();
// 1.添加普通的鍵值對
{#console.log($('#myform').serializeArray()) // [{},{},{},{},{}] 只包含普通鍵值對#}
$.each($('#myform').serializeArray(),function (index,obj) {
{#console.log(index,obj)#} // obj = {}
formDataObj.append(obj.name,obj.value)
});
// 2.添加檔案資料
formDataObj.append('avatar',$('#myfile')[0].files[0]);
// 3.發送ajax請求
$.ajax({
url:"",
type:'post',
data:formDataObj,
// 需要指定兩個關鍵性的引數
contentType:false,
processData:false,
success:function (args) {
if (args.code==1000){
// 跳轉到登陸頁面
//window.location.href = https://www.cnblogs.com/traininglxl/archive/2021/02/04/args.url
}else{
// 如何將對應的錯誤提示展示到對應的input框下面
// forms組件渲染的標簽的id值都是 id_欄位名
$.each(args.msg,function (index,obj) {
{#console.log(index,obj) // username ["用戶名不能為空"]#}
let targetId = '#id_' + index;
$(targetId).next().text(obj[0]).parent().addClass('has-error')
})
}
}
})
})
// 給所有的input框系結獲取焦點事件
$('input').focus(function () {
// 將input下面的span標簽和input外面的div標簽修改內容及屬性
$(this).next().text('').parent().removeClass('has-error')
})
</script>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/256209.html
標籤：其他
上一篇：Soul網關限流插件Sentinel和Resilience4J掃盲
下一篇：mysql進階學習一之知識點總結