移动端开发_手机快速登录

移动端开发_手机快速登录

第一章. 需求分析

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

第二章. 手机快速登录

【路径】

（1）发送验证码

1. 获得用户输入的手机号码
2. 生成动态验证码(4或者6位)
3. 使用阿里云发送短信验证码
4. 把验证码存到redis(存5分钟)
   （2）登录
5. 获得用户输入的信息(Map)
6. 取出redis里面的验证码和用户输入的验证码进行校验
7. 如果校验通过
   • 判断是否是会员, 不是会员, 自动注册为会员
   • 保存用户的登录状态( CAS(Central Authentication Service)或者自己手动签发token ，我们这里可以使用Cookie存储用户信息)

2.1. 前台代码

登录页面为/pages/login.html

2.1.1. 发送验证码

（1）为获取验证码按钮绑定事件，并在事件对应的处理函数中校验手机号，如果手机号输入正确则显示30秒倒计时效果并发送ajax请求，发送短信验证码

<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>

（2）调用sendValidateCode()方法

//发送验证码
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