用户注册与忘记密码邮箱激活

桃扇骨 2021-10-01 03:02 482阅读 0赞

###     Django Forms 实现用户注册     ###

分析：用户注册的信息包含了一个用户的帐号、密码、邮箱以及一个图片性质的头像。

实现文件上传的相关配置

用户模型的设计models.py

class UserInfo(AbstractUser): """继承AbstractUser表并向里加几条数据""" phone = models.CharField(max\_length=11, null=True, unique=True, verbose\_name="手机号码") avatar = models.FileField(upload\_to="media/avatars", default="static/img/touxiang.jpg", verbose\_name="头像") create\_time = models.DateTimeField(auto\_now\_add=True, verbose\_name="用户角色创建时间") class Meta: verbose\_name = "用户" verbose\_name\_plural = verbose\_name<wiz\_code\_mirror>

class UserInfo(AbstractUser):

"""继承AbstractUser表并向里加几条数据"""

phone = models.CharField(max_length=11, null=True, unique=True, verbose_name="手机号码")

avatar = models.FileField(upload_to="media/avatars", default="static/img/touxiang.jpg", verbose_name="头像")

create_time = models.DateTimeField(auto_now_add=True, verbose_name="用户角色创建时间")

class Meta:

verbose_name = "用户"

verbose_name_plural = verbose_name

settings.py

MEDIA\_URL = '/media/' MEDIA\_ROOT = os.path.join(BASE\_DIR, 'media') \# 继承auth模块 AUTH\_USER\_MODEL = "blog.UserInfo"<wiz\_code\_mirror>

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# 继承auth模块

AUTH_USER_MODEL = "blog.UserInfo"

####         <form>表单提交实现用户上传文件功能         ####

##### 简单的文件上传加写入 #####

html：

<form action="\{% url 'register' %\}" method="post" enctype="multipart/form-data"> \{% csrf\_token %\} <input type="file" name="file\_obj"> <input type="submit"> </form><wiz\_code\_mirror>

{% csrf_token %}

</form>

注意这里文件上传的两要素：

1、form标签里面的属性enctype="multipart/form-data"

2、input type="file" name="file\_obj"

![Image 1][]

后端接收、写入：

def register(request): if request.method == "POST": value = request.FILES.get("file\_obj") with open(value.name, 'wb') as f: \# value.name 给文件起的名字 for line in value: f.write(line) return HttpResponse("上传成功") return render(request, 'register.html') ---------------用django提供的chunks方法----------------- def register(request): if request.method == "POST": value = request.FILES.get("file\_obj") with open(value.name, 'wb') as f: for chunks in request.FILES.get('file\_obj').chunks(): f.write(chunks) return HttpResponse("上传成功") return render(request, 'register.html')<wiz\_code\_mirror>

def register(request):

if request.method == "POST":

value = request.FILES.get("file_obj")

with open(value.name, 'wb') as f:    # value.name 给文件起的名字

for line in value:

f.write(line)

return HttpResponse("上传成功")

return render(request, 'register.html')

---------------用django提供的chunks方法-----------------

def register(request):

if request.method == "POST":

value = request.FILES.get("file_obj")

with open(value.name, 'wb') as f:

for chunks in request.FILES.get('file_obj').chunks():

f.write(chunks)

return HttpResponse("上传成功")

return render(request, 'register.html')

![Image 1][]

##### 用户头像文件的上传与实时预览 #####

![Image 1][]

<form class="form-horizontal" method="post" action="\{% url 'register' %\}" novalidate enctype="multipart/form-data"> \{% csrf\_token %\} <div class="form-group"> <label class="col-sm-2 control-label">头像</label> <div class="col-sm-10"> <label for="avatar"> <img src="\{% static '/img/touxiang.jpg' %\}" id="avatar-img"> </label> <input type="file" id="avatar" style="display: none" name="file\_obj"> </div> </div> <input type="submit" class="btn btn-default"> </form><wiz\_code\_mirror>

{% csrf_token %}

</label>

</div>

</form>

![Image 1][]

点击头像就能选择要上传的头像了，但是这里并不能实时预览，所以要用JS将选择的图片放到头像位置：详见代码

// 头像预览功能实现 // 绑定一个change事件 仅适用于文本域（text field），以及 textarea 和 select 元素。 $("\#avatar").change(function () \{ // 1.创建一个文件读取对象（必须的） var fileReader = new FileReader(); // 取到当前选中的头像文件为一个对象，所以取值要加0 // console.log(this.files\[0\]); fileReader.readAsDataURL(this.files\[0\]); fileReader.onload = function () \{ // 2.等读取完文件之后在把图片加载到img标签中 $("\#avatar-img").attr("src", fileReader.result); \}; \});<wiz\_code\_mirror>

// 头像预览功能实现

// 绑定一个change事件 仅适用于文本域（text field），以及 textarea 和 select 元素。

$("#avatar").change(function () {

// 1.创建一个文件读取对象（必须的）

var fileReader = new FileReader();

// 取到当前选中的头像文件为一个对象，所以取值要加0

// console.log(this.files[0]);

fileReader.readAsDataURL(this.files[0]);

fileReader.onload = function () {

// 2.等读取完文件之后在把图片加载到img标签中

$("#avatar-img").attr("src", fileReader.result);

};

});

##### **DjangoForm 字段 forms.py的设计** #####

import re from django import forms from django.core.exceptions import ValidationError from app01.models import \* def mobile\_validate(value): """自定义手机号码校验规则""" \# re.compile() mobile\_re = re.compile(r'^(13\[0-9\]|15\[012356789\]|17\[678\]|18\[0-9\]|14\[57\])\[0-9\]\{8\}$') \# .match() if not mobile\_re.match(value): raise ValidationError('手机号码格式错误') class RegForm(forms.Form): username = forms.CharField( max\_length=16, min\_length=8, label="用户名", error\_messages=\{ "required": "用户名不能为空", "min\_length": "用户名不能小于8位", "max\_length": "用户名不能查过16位", \}, widget=forms.widgets.TextInput( attrs=\{"class": "form-control"\} ) ) password = forms.CharField( max\_length=16, min\_length=8, label="密码", error\_messages=\{ "required": "用户名不能为空", "min\_length": "用户名不能小于8位", "max\_length": "用户名不能查过16位", \}, widget=forms.widgets.PasswordInput( attrs=\{"class": "form-control"\} ) ) re\_password = forms.CharField( max\_length=16, label="确认密码", error\_messages=\{ "required": "密码不能为空", "max\_length": "密码不能超过16位", \}, widget=forms.widgets.PasswordInput(attrs=\{ "class": "form-control", \}), ) mobile = forms.CharField(validators=\[mobile\_validate, \], label="手机号", error\_messages=\{'required': '手机不能为空'\}, widget=forms.widgets.TextInput(attrs=\{'class': "form-control", 'placeholder': u'手机号码'\})) \# email = forms.CharField( \# label="邮箱", \# error\_messages=\{ \# 'required': '邮箱不能为空' \# \}, \# widget=forms.widgets.EmailInput(attrs=\{ \# "class": "form-control", \# \}), \# ) def clean\_username(self): username = self.cleaned\_data.get("username", "") if UserInfo.objects.filter(username=username).exists(): raise forms.ValidationError("用户名已经存在！") return username \# 在判断一个邮箱是否已存在之类的。。。代码与上面的一致 def clean\_re\_password(self): password = self.cleaned\_data.get("password", "") re\_password = self.cleaned\_data.get("re\_password", "") if password != re\_password: raise forms.ValidationError("两次输入的密码不一致") \# 再往下走的话就是捕获错误异常 \# 添加异常给errors return re\_password<wiz\_code\_mirror>

import re

from django import forms

from django.core.exceptions import ValidationError

from app01.models import *

def mobile_validate(value):

"""自定义手机号码校验规则"""

# re.compile()

mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$')

# .match()

if not mobile_re.match(value):

raise ValidationError('手机号码格式错误')

class RegForm(forms.Form):

username = forms.CharField(

max_length=16,

min_length=8,

label="用户名",

error_messages={

"required": "用户名不能为空",

"min_length": "用户名不能小于8位",

"max_length": "用户名不能查过16位",

widget=forms.widgets.TextInput(

attrs={
                "class": "form-control"}

)

password = forms.CharField(

max_length=16,

min_length=8,

label="密码",

error_messages={

"required": "用户名不能为空",

"min_length": "用户名不能小于8位",

"max_length": "用户名不能查过16位",

widget=forms.widgets.PasswordInput(

attrs={
                "class": "form-control"}

)

re_password = forms.CharField(

max_length=16,

label="确认密码",

error_messages={

"required": "密码不能为空",

"max_length": "密码不能超过16位",

widget=forms.widgets.PasswordInput(attrs={

"class": "form-control",

}),

)

mobile = forms.CharField(validators=[mobile_validate, ],

label="手机号",

error_messages={
                'required': '手机不能为空'},

widget=forms.widgets.TextInput(attrs={
                'class': "form-control",

'placeholder': u'手机号码'}))

# email = forms.CharField(

#     label="邮箱",

#     error_messages={

#         'required': '邮箱不能为空'

#     },

#     widget=forms.widgets.EmailInput(attrs={

#         "class": "form-control",

#     }),

# )

def clean_username(self):

username = self.cleaned_data.get("username", "")

if UserInfo.objects.filter(username=username).exists():

raise forms.ValidationError("用户名已经存在！")

return username

# 在判断一个邮箱是否已存在之类的。。。代码与上面的一致

def clean_re_password(self):

password = self.cleaned_data.get("password", "")

re_password = self.cleaned_data.get("re_password", "")

if password != re_password:

raise forms.ValidationError("两次输入的密码不一致")

# 再往下走的话就是捕获错误异常

# 添加异常给errors

return re_password

##### 后端代码 #####

def register(request): if request.method == "POST": reg\_form = RegForm(request.POST) if reg\_form.is\_valid(): \# 验证通过 print(reg\_form.cleaned\_data) reg\_form.cleaned\_data.pop("re\_password") mobile = reg\_form.cleaned\_data.get("mobile", None) username = reg\_form.cleaned\_data.get("username", None) password = reg\_form.cleaned\_data.get("password", None) avatar\_img = request.FILES.get("head\_logo"， None) UserInfo.objects.create\_user(username=username, avatar=avatar\_img, phone=mobile, password=password) \# 这个时候就要发送邮箱验证码提醒用户激活帐号！ return HttpResponse('恭喜您注册成功！') \# else: \# 存在异常, 这里存在异常的话前端直接可以 reg\_form.mobile.errors.0 取到，else下面的语句不用执行 else: reg\_form = RegForm() context = \{\} context\['reg\_form'\] = reg\_form return render(request, 'register.html', context)<wiz\_code\_mirror>

def register(request):

if request.method == "POST":

reg_form = RegForm(request.POST)

if reg_form.is_valid():

# 验证通过

print(reg_form.cleaned_data)

reg_form.cleaned_data.pop("re_password")

mobile = reg_form.cleaned_data.get("mobile", None)

username = reg_form.cleaned_data.get("username", None)

password = reg_form.cleaned_data.get("password", None)

avatar_img = request.FILES.get("head_logo"， None)

UserInfo.objects.create_user(username=username, avatar=avatar_img, phone=mobile, password=password)

# 这个时候就要发送邮箱验证码提醒用户激活帐号！

return HttpResponse('恭喜您注册成功！')

# else:

# 存在异常, 这里存在异常的话前端直接可以 reg_form.mobile.errors.0 取到，else下面的语句不用执行

else:

reg_form = RegForm()

context = {}

context['reg_form'] = reg_form

return render(request, 'register.html', context)

##### 完整的注册代码 前端 #####

![Image 1][]

<!DOCTYPE html>

{% load staticfiles %}

<head>

<title>Title</title>

<style>

.panel {

margin-top: 50px;

}

</style>

</head>

<body>

{% csrf_token %}

<label for="{
                 { reg_form.username.id_for_label }}"

class="col-sm-2 control-label">{
                { reg_form.username.label }}</label>

{
                { reg_form.username }}

<span class="has-error">{
                { reg_form.username.errors.0 }}</span>

</div>

...  ... ...

</label>

</div>

</div>

</form>

</div>

// 头像预览功能实现

$("#avatar").change(function () {

// 1.创建一个文件读取对象

var fileReader = new FileReader();

// 取到当前选中的头像文件

// console.log(this.files[0]);

// 读取选到的对象

fileReader.readAsDataURL(this.files[0]);

// 2.等读取完文件之后在把图片加载到img标签中

fileReader.onload = function () {

$("#avatar-img").attr("src", fileReader.result);

};

});

</script>

</body>

</html>

####         Ajax提交文件数据 ####

Ajax提交带文件的数据也是有坑的

![Image 1][]

formDate.append("avatar", $("\#avatar")\[0\].files\[0\]); // 取input file文件里面的文件<wiz\_code\_mirror>

formDate.append("avatar", $("#avatar")[0].files[0]);    // 取input file文件里面的文件

后台接收到的是Ajax提交过来的数据，所以

avatar = request.FILES.get('avatar', None) \# 这里的avatar是Ajax提交过来的数据<wiz\_code\_mirror>

avatar = request.FILES.get('avatar', None)      # 这里的avatar是Ajax提交过来的数据

##### 视图函数 #####

def register(request): if request.method == "POST": reg\_form = RegForm(request.POST) ret = \{'status': False, 'msg': ""\} if reg\_form.is\_valid(): \# 取出清洗过的数据保存至数据库中 username = reg\_form.cleaned\_data.get('username', '') \# 这个密码需要加密 password = reg\_form.cleaned\_data.get('password', '') mobile = reg\_form.cleaned\_data.get('mobile', '') avatar = request.FILES.get('avatar', None) \# 这里的avatar是Ajax提交过来的数据 print(avatar) UserInfo.objects.create\_user(username=username, password=password, phone=mobile, avatar=avatar) \# 用户注册信息保存成功返回JsonResponce ret\['status'\] = True ret\['msg'\] = "/login/" return JsonResponse(ret) else: \# 用户填写的字段有问题 ret\['msg'\] = reg\_form.errors return JsonResponse(ret) context = \{\} context\['reg\_form'\] = RegForm() return render(request, 'register.html', context)<wiz\_code\_mirror>

def register(request):

if request.method == "POST":

reg_form = RegForm(request.POST)

ret = {
                'status': False, 'msg': ""}

if reg_form.is_valid():

# 取出清洗过的数据保存至数据库中

username = reg_form.cleaned_data.get('username', '')

# 这个密码需要加密

password = reg_form.cleaned_data.get('password', '')

mobile = reg_form.cleaned_data.get('mobile', '')

avatar = request.FILES.get('avatar', None)      # 这里的avatar是Ajax提交过来的数据

print(avatar)

UserInfo.objects.create_user(username=username, password=password, phone=mobile, avatar=avatar)

# 用户注册信息保存成功返回JsonResponce

ret['status'] = True

ret['msg'] = "/login/"

return JsonResponse(ret)

else:

# 用户填写的字段有问题

ret['msg'] = reg_form.errors

return JsonResponse(ret)

context = {}

context['reg_form'] = RegForm()

return render(request, 'register.html', context)

##### 前端代码 #####

<!DOCTYPE html> \{% load staticfiles %\} <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="\{% static "bootstrap-3.3.7-dist/css/bootstrap.min.css" %\}"> <link rel="stylesheet" href="\{% static 'my-style.css' %\}"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-xs-offset-3">  <div class="panel panel-default"> <div class="panel-body"> <form class="form-horizontal" method="post" novalidate enctype="multipart/form-data"> \{% csrf\_token %\} <div class="form-group form"> <label for="\{ \{ reg\_form.username.id\_for\_label \}\}" class="col-sm-2 control-label">\{ \{ reg\_form.username.label \}\}</label> <div class="col-sm-10"> \{ \{ reg\_form.username \}\} <span class="has-error">\{ \{ reg\_form.username.errors.0 \}\}</span> </div> </div> ... ... ... <div class="form-group form"> <label class="col-sm-2 control-label">头像</label> <div class="col-sm-10"> <label for="avatar"> <img src="/static/img/touxiang.jpg/" id="avatar-img"> </label> <input type="file" id="avatar" style="display: none" name="head\_logo"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input type="button" value="提交" class="btn btn-default pull-right" id="reg\_btn"> </div> </div> </form> </div> </div> </div> </div> </div> <script src="\{% static 'jquery-1.12.4.min.js' %\}"></script> <script src="\{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %\}"></script> <script> // 上传的头像图片实时预览 $("\#avatar").change(function () \{ // 新建一个文件读取对象 var fileReader = new FileReader(); // 用FileReader里面的readAsDataURL（）方法取到url路径 fileReader.readAsDataURL(this.files\[0\]); fileReader.onload = function () \{ $("\#avatar-img").attr("src", fileReader.result); \} \}); // Ajax提交数据给后台 $("\#reg\_btn").click(function () \{ // 为提交按钮绑定点击事件，我们这次提交的是带图片的文件所以需特殊处理 var formDate = new FormData(); formDate.append("username", $("\#id\_username").val()); formDate.append("password", $("\#id\_password").val()); formDate.append("re\_password", $("\#id\_re\_password").val()); formDate.append("mobile", $("\#id\_mobile").val()); formDate.append("avatar", $("\#avatar")\[0\].files\[0\]); // 取input file文件里面的文件 formDate.append("csrfmiddlewaretoken", $("\[name='csrfmiddlewaretoken'\]").val()); $.ajax(\{ url: "/register/", type: 'POST', // 必须加上这两句 processData: false, contentType: false, data: formDate, success: function (data) \{ console.log(data); // 如果成功了，就给我跳转至某个页面， if (data.status)\{ location.href = data.msg; \}else\{ // 如果失败，找到具体的某个字段的错误值就将失败的信息展示出来 $.each(data.msg, function (k, v) \{ // k是键，v是错误的值 $("\#id\_" + k).next("span").text(v\[0\]).parent().parent().addClass("has-error") \}) \} \} \}); \}); </script> </body> </html> <wiz\_code\_mirror>

<!DOCTYPE html>

{% load staticfiles %}

<head>

<title>Title</title>

</head>

<body>

{% csrf_token %}

<label for="{
                 { reg_form.username.id_for_label }}"

class="col-sm-2 control-label">{
                { reg_form.username.label }}</label>

{
                { reg_form.username }}

<span class="has-error">{
                { reg_form.username.errors.0 }}</span>