mxonline实战6 ， 忘记用户密码时进行重置

 

 

对应github地址：密码重置

 

原理: 

1. 一个需要输入用户邮箱和注册码的密码忘记页面

2. 点击提交后，用户邮箱收到一个邮件，包含重置密码的链接

3. 点击链接进入密码重置页面

 

所以我们需要2个html页面实现重置功能

 

 

一. 忘记密码页面

 

把forgetpasssword.html拷贝到template目录

 

1. 在users/forms.py中定义ForgetForm

 

 

2. 在users/views.py中定义ForgetPwdView的get函数

 

 

3. users/urls.py中配置URL

 

 

4. 替换login.html中忘记密码的href地址为urls.py中定义的URL模式名称

 

 

5. 修改forgetpwd.html

1）修改css，js，图片等静态资源的地址

前端中加入{% load staticfiles %}，然后修改css等地址如下

 

2）修改验证码图片，大概85行处

 

3）添加错误提示信息

 

为空时输入框标红

 

账号信息填写后提交错误时，信息回填，需要在账号的<input>标签中修改value值如下

 

 

 

6. 给ForgetPwdView添加POST方法

 

6.1. 在forgetpwd.html中修改<form>标签

大概80行处修改action地址为

添加{% csrf_token %}

 

6.2. 完善apps/utils/email_send.py中的密码忘记类型

 

 

 

 

 

二.  配置重置密码接口

 

先把重置密码页面password_reset.html放到templates目录

 

1. 因为password_reset.html中的<form>标签中有input输入框，因此我们需要编写form验证

users/forms.py中添加ModifyPwdForm

注意这里的passsword1，password2必须和password_reset.html中<form>标签中的name属性值一样

 

 

2. users/views中编写重置密码view的get函数

 

 

 

3. 修改password_reset.html中的<form>标签中添加一个隐藏的<input>标签，用来传递需要重置哪个用户的密码，因为是在未登录的状态下修改用户密码

修改<form>标签中的action，并添加{% csrf_token %}

(上面中的url模板会报错，后面修改）

 

 

4. 在users/urls.py中配置reset的URL

 

说明：

reset_pwd表示的这个URL模式有一个active_code的参数，而password_reset.html中把form表单的值传递给users:reset_pwd，后面并没有加active_code参数，按照URL匹配规则就会报错。

所以需要重新定义一个ModifyPwdView来处理password_reset.html中的post请求

 

 

5. 定义ModifyPwdView

 

 

6. users/urls.py中添加ModifyPwdView相应的URL

改写password_reset.html中<from>标签中的action地址为

 

 

7. 修改password_reset.html中<input>标签的type值为submit，否则提交不成功。原先为button