云健康项目之移动端开发快速登录

在移动互联网时代，用户对登录便捷性的需求日益提升，传统用户名密码登录方式因需记忆密码、操作繁琐等问题，逐渐难以满足用户高效使用的诉求。手机快速登录功能应运而生，它以短信验证码为核心验证手段，让用户无需记忆密码，仅通过输入手机号、获取并填写验证码即可完成登录，大幅简化登录流程，提升用户体验。​
该功能在体检预约类平台中尤为重要，作为用户进入系统、享受体检服务的首要入口，其稳定性与便捷性直接影响用户对平台的第一印象。通过优化登录环节，既能降低用户操作门槛，减少因密码遗忘导致的登录障碍，又能依托短信验证的安全性，保障用户账号信息安全，为后续体检预约、订单查询等核心业务的顺畅开展奠定基础，是提升平台用户留存率与使用满意度的关键功能模块。

需求分析

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

2. 手机快速登录

2.1 页面调整

登录页面为/pages/login.html

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

<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

//手机快速登录时发送手机验证码
@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_LOGIN,
                                5 * 60,
                                code.toString());
  //验证码发送成功
  return new Result(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);
}

2.1.2 提交登录请求

为登录按钮绑定事件

<div class="btn yes-btn"><a @click="login()" href="#">登录</a></div>

//登录
login(){
  var telephone = this.loginInfo.telephone;
  if (!checkTelephone(telephone)) {
    this.$message.error('请输入正确的手机号');
    return false;
  }
  axios.post("/member/login.do",this.loginInfo).then((response) => {
    if(response.data.flag){
      //登录成功,跳转到会员页面
      window.location.href="member.html";
    }else{
      //失败，提示失败信息
      this.$message.error(response.data.message);
    }
  });
}

2.2 后台代码

2.2.1 Controller

在health_mobile工程中创建MemberController并提供login方法进行登录检查，处理逻辑为：

1、校验用户输入的短信验证码是否正确，如果验证码错误则登录失败

2、如果验证码正确，则判断当前用户是否为会员，如果不是会员则自动完成会员注册

3、向客户端写入Cookie，内容为用户手机号

4、将会员信息保存到Redis，使用手机号作为key，保存时长为30分钟

/**
 * 会员登录
 */
@RestController
@RequestMapping("/member")
public class MemberController {
    @Reference
    private MemberService memberService;
    @Autowired
    private JedisPool jedisPool;
  
    //使用手机号和验证码登录
    @RequestMapping("/login")
    public Result login(HttpServletResponse response,@RequestBody Map map){
        String telephone = (String) map.get("telephone");
        String validateCode = (String) map.get("validateCode");
        //从Redis中获取缓存的验证码
        String codeInRedis = 
            jedisPool.getResource().get(telephone+RedisMessageConstant.SENDTYPE_LOGIN);
        if(codeInRedis == null || !codeInRedis.equals(validateCode)){
            //验证码输入错误
            return new Result(false,MessageConstant.VALIDATECODE_ERROR);
        }else{
            //验证码输入正确
            //判断当前用户是否为会员
            Member member = memberService.findByTelephone(telephone);
            if(member == null){
                //当前用户不是会员，自动完成注册
                member = new Member();
                member.setPhoneNumber(telephone);
                member.setRegTime(new Date());
                memberService.add(member);
            }
            //登录成功
            //写入Cookie，跟踪用户
            Cookie cookie = new Cookie("login_member_telephone",telephone);
            cookie.setPath("/");//路径
            cookie.setMaxAge(60*60*24*30);//有效期30天
            response.addCookie(cookie);
            //保存会员信息到Redis中
            String json = JSON.toJSON(member).toString();
            jedisPool.getResource().setex(telephone,60*30,json);
            return new Result(true,MessageConstant.LOGIN_SUCCESS);
        }
    }
}

2.2.2 服务接口

在MemberService服务接口中提供findByTelephone和add方法

public void add(Member member);
public Member findByTelephone(String telephone);

2.2.3 服务实现类

在MemberServiceImpl服务实现类中实现findByTelephone和add方法

//根据手机号查询会员
public Member findByTelephone(String telephone) {
  return memberDao.findByTelephone(telephone);
}
//新增会员
public void add(Member member) {
  if(member.getPassword() != null){
    member.setPassword(MD5Utils.md5(member.getPassword()));
  }
  memberDao.add(member);
}

2.2.4 Dao接口

在MemberDao接口中声明findByTelephone和add方法

public Member findByTelephone(String telephone);
public void add(Member member);

2.2.5 Mapper映射文件

在MemberDao.xml映射文件中定义SQL语句

<!--新增会员-->
<insert id="add" parameterType="com.yunhe.pojo.Member">
  <selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
    SELECT LAST_INSERT_ID()
  </selectKey>
  insert into t_member
  (fileNumber,name,sex,idCard,phoneNumber,regTime,password,email,birthday,remark)
  values 
  (#{fileNumber},#{name},#{sex},#{idCard},#{phoneNumber},#{regTime},#{password},#{email},#{birthday},#{remark})
</insert>
<!--根据手机号查询会员-->
<select id="findByTelephone" parameterType="string" resultType="com.yunhe.pojo.Member">
  select * from t_member where phoneNumber = #{phoneNumber}
</select>

小结

手机快速登录功能采用前后端分离架构，前端基于 Vue 框架实现交互逻辑，后端以 SpringMVC+MyBatis 为核心支撑业务处理。

前端登录页面（/pages/login.html）为 “获取验证码” 按钮绑定事件，校验手机号格式后启动 30 秒倒计时，同时发请求至 /validateCode/send4Login 接口；后端 ValidateCodeController 生成 6 位验证码，通过短信服务发送并缓存至 Redis（有效期 5 分钟）。​
提交登录时，前端校验手机号后请求 /member/login 接口；后端 MemberController 先从 Redis 校验验证码，正确则判断用户是否为会员（非会员自动注册），随后写入 Cookie（有效期 30 天）并将会员信息缓存至 Redis（有效期 30 分钟）。

整体技术栈融合 Vue、Axios、Redis、短信服务，实现 “验证码发送 - 校验 - 登录 - 用户状态维持” 的完整闭环，兼顾便捷性与安全性。