创建forgetpwd.html的网页，用于在登录页面点击忘记密码后显示。修改网页样式css、images、js等的路径{% load staticfiles %},再添加错误提示
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<title>慕学网首页</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
</head>
<body>
<!--提示弹出框-->
<div class="successbox dialogbox" id="jsSuccessTips">
<h1>成功提交</h1>
<div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div>
<div class="cont">
<h2>您的需求提交成功！</h2>
<p></p>
</div>
</div>
<div class="resetpassbox dialogbox" id="jsSetNewPwd">
<h1>重新设置密码</h1>
<div class="close jsCloseDialog"><img src="{% static 'images/dig_close.png' %}"/></div>
<p class="green">请输入新密码</p>
<form id="jsSetNewPwdForm">
<div class="box">
<span class="word2">密 码</span>
<input type="password" name="password" id="jsResetPwd" placeholder="请输入新密码"/>
</div>
<div class="box">
<span class="word2">确 认 密 码</span>
<input type="password" name="password2" id="jsResetPwd2" placeholder="请再次输入新密码"/>
</div>
<div class="box">
<span class="word2">验 证 码</span>
<input type="text" name="code" id="jsResetCode" placeholder="请输入手机验证码"/>
</div>
<div class="error btns" id="jsSetNewPwdTips"></div>
<div class="button">
<input type="hidden" name="mobile" id="jsInpResetMobil" />
<input id="jsSetNewPwdBtn" type="button" value="提交" />
</div>
<input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' />
</form>
</div>
<div class="bg" id="dialogBg"></div>
<header>
<div class="c-box fff-box">
<div class="wp header-box">
<p class="fl hd-tips">慕学网，在线学习平台！</p>
<ul class="fr hd-bar">
<li>服务电话：<span>33333333</span></li>
<li><a href="login.html">[登录]</a></li>
<li class="active"><a href="/forgetpwd/">[忘记密码]</a></li>
</ul>
</div>
</div>
</header>
<section>
<div class="c-box bg-box">
<div class="login-box clearfix">
<div class="hd-login clearfix">
<a class="index-logo" href="index.html"></a>
<h1>忘记密码</h1>
<a class="index-font" href="index.html">回到首页</a>
</div>
<div class="fl slide">
<div class="imgslide">
<ul class="imgs">
<li><a href=""><img width="483" height="472" src="{% static 'images/57a801860001c34b12000460.jpg' %}" /></a></li>
<li><a href=""><img width="483" height="472" src="{% static 'images/57a801860001c34b12000460.jpg' %}" /></a></li>
<li><a href=""><img width="483" height="472" src="{% static 'images/57a801860001c34b12000460.jpg' %}" /></a></li>
</ul>
</div>
<div class="unslider-arrow prev"></div>
<div class="unslider-arrow next"></div>
</div>
<div class="fl form-box">
<h2>忘记密码</h2>
<form id="jsFindPwdForm" method="post" action="{% url 'forget_pwd' %}" autocomplete="off">
<input type='hidden' name='csrfmiddlewaretoken' value='mymQDzHWl2REXIfPMg2mJaLqDfaS1sD5' />
<div class="form-group marb20 {% if forget_form.errors.email %}errorput{% endif %}">
<label>帐 号</label>
<input type="text" id="account" name="email" value="{{ forget_form.email.value }}" placeholder="邮箱" />
</div>
<div class="form-group captcha1 marb38">
<label>验 证 码</label>
{{ forget_form.captcha }}
</div>
<div class="error btns" id="jsForgetTips">{% for key,error in forget_form.errors.items %}{{ error }}{% endfor %}{{ msg }}</div>
<input type="hidden" name="sms_type" value="1">
<input class="btn btn-green" id="jsFindPwdBtn" type="submit" value="提交" />
<p class="form-p" style="bottom:40px;">您还可以<a href="login.html"> [直接登录]</a></p>
<input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' />
{% csrf_token %}
</form>
</div>
</div>
</div>
</section>
<input id="isLogin" type="hidden" value="False"/>
<script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/unslider.js' %}" type="text/javascript"></script>
<script src="{% static 'js/validateDialog.js' %}" type="text/javascript"></script>
<script src="{% static 'js/login.js' %}" type="text/javascript"></script>
</body>
</html>
forms.py里
class ForgetForm(forms.Form):
email = forms.EmailField(required=True)
captcha = CaptchaField(error_messages={"invalid":"验证码错误"})
views.py响应函数与register差不多，先实例化个form
class ForgetPwdView(View):
def get(self,request):
forget_form = ForgetForm(request.POST)
return render(request,"forgetpwd.html",{"forget_form":forget_form})
def post(self,request):
forget_form = ForgetForm(request.POST)
if forget_form.is_valid():
email = request.POST.get("email","")
send_register_email(email, "forget")
return render(request, "login.html")
也需要发送验证邮件，调用send_register_email，但type是forget
urls.py：
from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
from users.views import LoginView, RegisterView,ActiveUserView,ForgetPwdView
import xadmin
urlpatterns = [
url(r'^xadmin/', xadmin.site.urls),
url('^$', TemplateView.as_view(template_name="index.html"),name="index"),
url('^login/$', LoginView.as_view(),name="login"), #as_view()方法判断是post还是get然后返回响应函数名
url('^register/$', RegisterView.as_view(),name="register"),
url(r'^captcha/', include('captcha.urls')),
url(r'^active/(?P<active_code>.*)/$', ActiveUserView.as_view(),name="user_active"),
url(r'^forget/$', ForgetPwdView.as_view(), name="forget_pwd"),
]
在login.html里配置超链接
<a class="fr" href="{% url 'forget_pwd' %}">忘记密码？</a>
send_email里
elif send_type == "forget":
email_title = "慕学在线网密码重置"
email_body = "请点击下面链接激活你的密码：http://127.0.0.1:8000/reset/{0}".format(code)
send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
if send_status:
pass
然后配置urls.py，响应重置密码的链接
url(r'^reset/(?P<active_code>.*)/$', ResetView.as_view(),name="reset_pwd"),
响应函数
class ResetView(View):
def get(self,request,active_code):
all_records = EmailVerifyRecord.objects.filter(code=active_code)
if all_records:
for record in all_records:
email =record.email
return render(request,"password_reset.html",{"email":email})
else:
return render(request,"active_fail.html")
return render(request, "login.html")
需要传递给前台email，告诉前台在修改哪个用户的密码,再由前台传递给后台，以input type=‘hidden’。password_reset.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>密码修改</title>
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/css/animate.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<body>
<div class="wp">
<div class="resetpassword" id="resetPwdForm">
<h1>修改密码</h1>
<p>已经通过验证，请设置新密码</p>
<form id="reset_password_form" action="{% url "modify_pwd" %}" method="post">
<ul>
<li>
<span class="">新 密 码 ：</span>
<input type="password" name="password1" id="pwd" placeholder="6-20位非中文字符">
<i></i>
</li>
<input type="hidden" name="email" value="{{ email }}">
<li>
<span class="">确定密码：</span>
<input type="password" name="password2" id="repwd" placeholder="6-20位非中文字符">
<i></i>
</li>
<li class="button">
<input type="submit" value="提交" onclick="reset_password_form_submit()">
</li>
</ul>
{% csrf_token %}
</form>
</div>
<div class="resetpassword" id="reset_password_tips" style="display:none;">
<h1>修改密码成功,请重新登录</h1>
<img class="fl" src="/static/images/check2.png">
<p class="successword">已经成功修改密码，请重新登录</p>
</div>
</div>
</body>
</html>
里面action="{% url "modify_pwd" %}"，意思是点提交后进入http://127.0.0.1:8000/modify_pwd/。如果还进入"reset_pwd"，则需要传入active_code，否则会报错。这里新建一个url "modify_pwd" 和响应函数，把刚进入此网页（get方法）和点击提交后（post方法）分开。
forms.py里
class ModifyPwdForm(forms.Form):
password1 = forms.CharField(required=True,min_length=5)
password2 = forms.CharField(required=True, min_length=5)
注意form里的变量名要和html的input 的name相同。响应函数
class ResetView(View):
def get(self,request,active_code):
all_records = EmailVerifyRecord.objects.filter(code=active_code)
if all_records:
for record in all_records:
email =record.email
return render(request,"password_reset.html",{"email":email})
else:
return render(request,"active_fail.html")
return render(request, "login.html")
class ModifyPwdView(View):
def post(self,request):
modify_form = ModifyPwdForm(request.POST)
if modify_form.is_valid():
pwd1 = request.POST.get("password1","")
pwd2 = request.POST.get("password2", "")
email = request.POST.get("email", "")
if pwd1 != pwd2:
return render(request,"password_reset.html",{"email":email,"msg":"密码不一致"})
user = UserProfile.objects.get(email=email)
user.password = make_password(pwd2)
user.save()
return render(request, "login.html")
else:
email = request.POST.get("email","")
return render(request, "password_reset.html",{"email":email,"modify_form":modify_form})
这样修改密码的功能就完成了。
网友评论