黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第八章 一 [打印本页]

---

作者: 我是楠楠    时间: 2019-11-7 11:37
标题: 【郑州校区】传智健康项目讲义第八章 一

【郑州校区】传智健康项目讲义第八章 一

1. 需求分析
手机快速登录功能，就是通过短信验证码的方式进行登录。这种方式相对于用户名密码登录方式，用户不需要记忆自己的密码，只需要通过输入手机号并获取验证码就可以完成登录，是目前比较流行的登录方式。


2. 手机快速登录
2.1 页面调整
登录页面为/pages/login.html
2.1.1 发送验证码
为获取验证码按钮绑定事件，并在事件对应的处理函数中校验手机号，如果手机号输入正确则显示30秒倒计时效果并发送ajax请求，发送短信验证码

[AppleScript] 纯文本查看 复制代码

<div class="input‐row">

<label>手机号</label>

<div class="loginInput">

<input v‐model="loginInfo.telephone" id='account' type="text"

placeholder="请输入手机号">

<input id="validateCodeButton"

@click="sendValidateCode()" type="button" style="font‐size:

12px"

value="获取验证码">

</div>

</div> 

[AppleScript] 纯文本查看 复制代码

<script>

var vue = new Vue({

el:'#app',

data:{

loginInfo:{}//登录信息

},

methods:{

//发送验证码

sendValidateCode(){

var telephone = this.loginInfo.telephone;

if (!checkTelephone(telephone)) {

this.$message.error('请输入正确的手机号');

return false;

}

validateCodeButton = $("#validateCodeButton")[0];

clock = window.setInterval(doLoop, 1000); //一秒执行一次

axios.

post("/validateCode/send4Login.do?telephone=" + telephone).

then((response) => {

if(!response.data.flag){

//验证码发送失败

this.$message.error('验证码发送失败，请检查手机号输入是否正确');

}

});

}

}

});

</script>

在ValidateCodeController中提供send4Login方法，调用短信服务发送验证码并将验证码保存到redis

[AppleScript] 纯文本查看 复制代码

//手机快速登录时发送手机验证码

@RequestMapping("/send4Login")

public Result send4Login(String telephone){

Integer code = ValidateCodeUtils.generateValidateCode(6);//生成6位数字验

证码

try {

//发送短信

SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE,telephone,code.toString(

));

} catch (ClientException e) {

e.printStackTrace();

//验证码发送失败

return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);

}

System.out.println("发送的手机验证码为：" + code);

//将生成的验证码缓存到redis

jedisPool.getResource().setex(telephone+RedisMessageConstant.SENDTYPE_LOG

IN,

5 * 60,

code.toString());

//验证码发送成功

return new Result(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);

} 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2