瑞吉外卖手机验证码登录部分解决空指针和前端问题及如何使用阿里云发送验证码短信

短信部分我会放到分割线后进行讲解，首先是前端问题，之后是空指针，最后是短信发送

瑞吉外卖中前段部分应该进行如下修改

在resources\static\front\api\login.js里添加如下

function sendMsgApi(data) {
    return $axios({
        'url': '/user/sendMsg', //请求路径
        'method': 'post',  //请求方式
        data   //请求携带的参数
    })
}

在\resources\static\front\page\login.html里进行如下修改

在脚本部分的方法里进行修改，这样就可以达成手机号第一位是1，第二位是3578开头，剩下的位数0-9随意。

methods:{
                getCode(){
                    this.form.code = ''
                    const regex = /^1[3578]\d{9}$/;
                    console.log(this.form)
                    if (regex.test(this.form.phone)) {
                        alert(this.form.phone)
                        this.msgFlag = false
                        sendMsgApi({phone:this.form.phone})
                    }else{
                        this.msgFlag = true
                    }
                },
                async btnLogin(){
                    if(this.form.phone && this.form.code){
                        this.loading = true
                        const res = await loginApi({data:this.form})
                        this.loading = false
                        if(res.code === 1){
                            sessionStorage.setItem("userPhone",this.form.phone)
                            window.requestAnimationFrame(()=>{
                                window.location.href= '../index.html'
                            })                           
                        }else{
                            this.$notify({ type:'warning', message:res.msg});
                        }
                    }else{
                        this.$notify({ type:'warning', message:'请输入手机号码'});
                    }
                }
            }

在SMSUtils工具类下删除短信发送成功，这个会进入session，虽无大碍，但是用起来别扭 

---

在UserController里产生空指针异常可能有以下几种情况

第一种：没有添加注解

  

 

 第二种：注意要把phone改为带双引号

 

如果想查看session中的数据可以使用如下方法，复制粘贴进去即可，注意要放在session.setAttribute("phone",code)之后

//
//该部分用于打印session里的值
//
 获取session中所有的键值
//            Enumeration<?> enumeration = session.getAttributeNames();
 遍历enumeration中的
//            while (enumeration.hasMoreElements()) {
 获取session键值
//                String name = enumeration.nextElement().toString();
//                // 根据键值取session中的值
//                Object value = session.getAttribute(name);
//                // 打印结果
//                System.out.println("<B>" + name + "</B>=" + value + "<br>/n");
//            }

 接下来需要修改login中的代码，修改如下，复制粘贴使用即可，此方法是把map的转换为json数据进行存取，因为前端传来的json格式有问题，所以需要在以下代码进行优化处理

@PostMapping("/login")
    public R<User> login(@RequestBody Map userMap,HttpSession session){
        log.info(userMap.toString());
        JSONObject json = new JSONObject(userMap);
        log.info(json.toString());
        //获取手机号
        //String phone = userMap.get("phone").toString();
        String phone = (String) json.getJSONObject("data").get("phone");
        log.info(phone);
        //获取验证码   用户提交的验证码
        //String code = userMap.get("code").toString();
        String code = (String) json.getJSONObject("data").get("code");
        log.info(code);
        log.info(session.toString());
        for (Enumeration e = session.getAttributeNames(); e.hasMoreElements(); )
        {
            System.out.println(e.nextElement());
        }
        //获取session里的验证码  短信发送的验证码
        String sessionCode = session.getAttribute("phone").toString();

        //验证码对比
        if ( !(phone != null && code.equals(sessionCode)) ){
            return R.error("登录失败,用户名或密码不正确!");
        }else {
            //登录成功
            LambdaQueryWrapper<User> qw = new LambdaQueryWrapper<>();
            //添加条件查询数据库字段和当前字段是否相同
            qw.eq(User::getPhone,phone);
            //通过getOne获取唯一对象便于以后的注册存储
            User user = userService.getOne(qw);
            //判断当前是否为新用户
            if (user == null){
                //注册
                User userNew = new User();
                userNew.setPhone(phone);
                userNew.setStatus(1);
                userService.save(userNew);
                session.setAttribute("user",userNew.getId());
                return R.success(userNew);
            }
            else {
                //不是新用户
                session.setAttribute("user",user.getId());
                return R.success(user);
            }

        }
    }

---

接下来是如何发送阿里云短信

首先在阿里云进行注册，然后点击控制台

 之后点击黄色部分三条线

 搜索关键词短信服务，点击快速学习和测试

绑定测试手机号码

 

找到个人中心下有个Access Key管理，之后点击使用子账户

依次执行 创建用户组，添加权限，搜索SMS，两项全选，然后创建用户，创建后在用户里创建Access Key，之后再用户组添加用户，记得Access Key要在一个记事本记住，他只会出现一次，如果丢失了那么就重新创建一个Access key ，把丢失的那个禁用删除，这是很重要的

 

 

 

 上面部分弄完后接下来是代码部分

在SMSutils设置

 

public static void sendMessage(String signName, String templateCode,String phoneNumbers,String param){
		DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou",
				"你的Access Key",
				"你的Access Key的密码");
		IAcsClient client = new DefaultAcsClient(profile);

		SendSmsRequest request = new SendSmsRequest();
		request.setSysRegionId("cn-hangzhou");
		request.setPhoneNumbers(phoneNumbers);
		request.setSignName("阿里云短信测试");
		request.setTemplateCode("在调用API那里的自己修改");
		request.setTemplateParam("{\"code\":\""+param+"\"}");
		try {
			SendSmsResponse response = client.getAcsResponse(request);
			//System.out.println("短信发送成功");
		}catch (ClientException e) {
			e.printStackTrace();
		}
	}

将这几个参数填入就可以流畅登录了，按照我的步骤和代码一点问题也不会有，如果还有什么问题请在下方评论留言，看到了我会解答，第一次创作，创作不易，如果帮助到你希望可以点个赞。