ssm项目笔记（十三）手机快速登录功能

淡淡的烟草味﹌ 2021-12-21 12:51 329阅读 0赞

## 前端页面 ##

### 发送验证码 ###

### 1.1绑定按钮事件（获取验证码） ###

![20190628111555829.png][]

### 1.2发送ajxa请求 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1][] ###

## 后端代码 ##

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

/**
         * 登录验证码生成 发送短信给用户
         * @param telephone
         * @return
         */
        @RequestMapping(value = "/send4Login", method = RequestMethod.POST)
        public Result send4Login(String telephone) {
            //在发送验证码之前 根据手机号码到redis中查询 验证码是否发送
            //如果已经发送过验证码，返回验证码操作过于频繁
    
            //1.生成验证码 调用工具类
            Integer code = ValidateCodeUtils.generateValidateCode(4);
            //2.发送验证码 调用阿里云短信接口
    
            //trace debug（开发阶段可以设置为此日志级别） info（生成环境可以设置为此级别） warn  error(优先级别最高)
            try {
                logger.info("info::::"+telephone); //输入 和 输出
    
                logger.warn("warn::::");//业务中警告
                //logger.trace("trace::::");
                logger.debug("debug::::");//开发阶段
                //System.out.println("发送短信验证码成功了。。。。");
                if(false) {
                    SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE, telephone, code.toString());
                }
                //3.存入redis中 后续体检预约前校验验证码是否正确  有效期为5分钟
               // System.out.println("手机号码：：：：："+telephone+"::::::"+code.toString());
                //key:手机号+业务唯一标识  value:code  seconds:秒
                jedisPool.getResource().setex(telephone+ RedisMessageConstant.SENDTYPE_LOGIN,5*60,code.toString());
    
                logger.info("结果：：："+telephone+"验证码：：：："+code.toString());
                return new Result(true, MessageConstant.SEND_VALIDATECODE_SUCCESS);
            } catch (ClientException e) {
                logger.error(e.getMessage());
                return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
            }
        }

## 前端页面 ##

## 登录 ##

### 1.1为登录按钮绑定事件 ###

![20190628120359452.png][]

### 1.2发送Ajax请求 ###

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

## 后台代码 ##

> 在healthmobile\_web工程中创建LoginController并提供check方法进行登录检查，处理逻辑为：
> 
> 1、校验用户输入的短信验证码是否正确，如果验证码错误则登录失败
> 
> 2、如果验证码正确，则判断当前用户是否为会员，如果不是会员则自动完成会员注册
> 
> 3、向客户端写入Cookie，内容为用户手机号

/**
         * 移动端-快速登录
         * 返回数据对象response：将cookie存入
         * @return
         */
        @RequestMapping(value = "/check", method = RequestMethod.POST)
        public Result check(HttpServletResponse response,@RequestBody Map map) {
            //判断验证码
            String telephone = (String)map.get("telephone");
            String validateCode = (String)map.get("validateCode");
            String redisCode = jedisPool.getResource().get(telephone + RedisMessageConstant.SENDTYPE_LOGIN);
            if(StringUtils.isEmpty(validateCode) || StringUtils.isEmpty(redisCode) || !validateCode.equals(redisCode)){
                return new Result(false, MessageConstant.VALIDATECODE_ERROR);
            }
            //根据手机号码查询是否是会员
            Member member = memberService.findByTelephone(telephone);
            //不是会员注册
            if(member == null){
                member = new Member();//除了手机号和注册日期，其余数据后续再完善
                member.setRegTime(new Date());
                member.setPhoneNumber(telephone);
                memberService.add(member);
            }
            //不管是不是会员最终都直接存cookie
            Cookie cookie = new Cookie(Member.LOGIN_MEMBER_TELEPHONE,telephone);
            cookie.setPath("/");
            cookie.setMaxAge(60*60*24*30);//有效期30天
            response.addCookie(cookie);//将cookie通过response对象返回
            return new Result(true, MessageConstant.LOGIN_SUCCESS);
        }
    }

### 1.3服务接口 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2][]

### 1.4服务实现类 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3][]

### 1.5Dao接口 ###

![20190628121527122.png][]

### 1.6Mapper映射文件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4][]

[20190628111555829.png]: /images/20211220/510855a5c04940099ea786abf61a1bcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70]: /images/20211220/22d50b7f379f4bc4ae8380773434931c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1]: /images/20211220/ed7f1fbc825f46538c1f818f2dea54fa.png
[20190628120359452.png]: /images/20211220/6d5aecb6fede4c4782fc54dd28e1fb54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2]: /images/20211220/ffa9119b04234c558f7aa80daa30913a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3]: /images/20211220/db874432714f417ca11883369c821be5.png
[20190628121527122.png]: /images/20211220/1bb62754a38b4c819547186c04e0bfa2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4]: /images/20211220/674752662ae44a08b43b7c4f44eb1603.png