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

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);
} 

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

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);
}