任务描述

通过发送短信和邮箱重置密码

场景描述

​ 有一天领导给我布置了一个任务，要我完成一个功能“通过发送短信和邮箱重置密码”。前端页面css已经写好但是HTML代码在蓝湖上面需要我自己拼成html页面。但是发送短信、邮箱按钮失效，刷新图形验证码失效，只给我一个页面的空壳。页面分成三个阶段，

  1. 第一个是选择重置密码方式页面，
  2. 第二个是通过发送邮箱、发送短信重置密码的页面，
  3. 第三个是重置密码页面。如图所示。其中黄色的是按钮，黑色框的是填写的内容
image-20211005093503259
image-20211005093537444
image-20211005093552408
image-20211005093607354

需求分析

​ 因为前端只给我了一个网站的空壳，大部分事情是我一个做【页面的跳转，短信、邮箱验证码的发送，密码一致性判断】，首先给上图4个页面取一个简单易懂的名字。再规定页面上每一个按钮发送的url。这样整体的流程框架就出来了。如下图

image-20211005133315726

发送手机验证码按钮分析

​ 点击“发送手机验证码”按钮页面不会跳转到下个页面。此时若发送成功这按钮会变成倒计时状态，若发送手机验证码失败就在验证码输入框下提示具体原因。要给“获取手机验证码”按钮一个点击事件onclick="sendResetPwdMsg"俩控制验证发送的前提和结果展示。大概流程如下

  • 判断是否能够发送手机验证码

    ​ 1. 当员工号没有填写时不能发送【并提示请填写员工号】

    ​ 2. 当手机号没有填写时不能发送【并提示请填写手机号】

  • 发送手机验证码是个ajax请求，参数是员工号和手机号

    ​ 1. 发送sendResetPwdMsg请求，

    ​ 2. controller层ResetPwdAction类的sendResetPwdMsg()接收到此请求会判断手机号是否匹配和员工是否存在，只有这2个条件成立才会发送邮箱。并把发送短信成功失败的结果返回。并展示在toResetPwdPageBySendTextMsg.ftl页面

流程图如下

image-20211005153631122

短信倒计时和动态图验证码我忘记怎么实现了

在toResetPwdPageBySendTextMsg页面点击“下一步”分析

​ 此时已经能接收到手机验证码了，可以从2个方面分析“下一步”按钮。

  • 点击“下一步”按钮的前提
    • 因为form表单中包含了员工号、手机号、手机验证码、图形验证码、这4个填写框和一个“下一步”按钮，点击此按钮，form表单的所有参数都以post请求发送了。url="checkResetPwdMsg.htm",所以规定4个输入框里必须填写好内容才能点击“下一步”。
  • 表单发送成功后的checkResetPwdMsg（）方法
    • 方法的参数是form表单里4个input输入框里面的值还是Model记录错误信息站在toResetPwdPageBySendTextMsg.ftl页面，返回值是string，若验证通过跳转到输入新密码页面。

流程图如下

image-20211005165321025

image-20211005171627409