黑马瑞吉外卖之移动端验证码登录使用qq邮箱

hi，我是兰舟千帆，本次更文还是将瑞吉外卖的笔记完善一下。每一篇都写得很认真哦，希望需要的人可以得到帮助，谢谢你们的阅读。

说明

pc端的后台管理我们剩下有订单明细还没有进行开发，由于订单这边需要移动端下单后才可以看到订单，所以我们需要去先在移动端开发一些功能后，再回过头让订单这边进行一个展示。

首先移动端开发的话，我们首先遇到的应该就是登录的问题。移动端登录这边我们验证码发送的话我们这边采用qq邮箱的验证码进行登录。

既然是用户登录这里的话，其实我们还需要这样对应的数据模型。我们先看前端页面代码
这里给到的登录页面这里，其实我们可以稍微修改一下，之前这里是提示的输入的手机号码，我们这里要用qq邮箱验证登录的话，其实我们可以要求输入邮箱。

然后的话，其实自己可以找一个邮箱验证的方式，看看邮箱格式是否正确。
下面这个标准是不统一的，可以按照规则去规定这一段正则。

我们去引入数据模型。User对象。这里就不给出来了。这都是课程前给到的数据模型实体类。

我记得我后来用这个数据模型，但是发现其实这个数据模型里面的一些字段还没有用到。

不过我们需要把这样的数据模型设计出来。

用qq邮箱进行验证码发送

如何使用qq邮箱进行这样的操作呢？首先我们登录进qq邮箱点击设置，然后点到账户这里。

这里要开启，开启的话，会让你发一个提示，让你去开启这个服务，按照这个流程去做。

然后我们就会收到一个授权码，这个授权码要复制下来，我们需要去用。

我们打开我们的项目，在pom中导入这样的依赖。

  <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-mailartifactId>
        dependency>


1
2
3
4
5
6

然后我们在yml配置当中写一些信息。这些配置有好多种写法，我们这样去写就可以。

 mail:
    host: smtp.qq.com
    username: 你的用户名，就是发送者的邮箱地址
    password: 你的授权码
    port: 587
    default-encoding: UTF-8
    properties:
      mail:
        smtp:
          socketFactoryClass: javax.net.ssl.SSLSocketFactory
#          开启debug以后，邮件发送过程的日志会在控制台上打印出来
        debug: true
1
2
3
4
5
6
7
8
9
10
11
12

这样配置好后，我们基本就可以使用了。
从这里开始，找到这个按钮绑定的方法

然后就是下面这里

在这里呢，我进行了一个判断，改变了一下。
下面这主要就是对后端返回值的进行了一个处理，发送失败和成功我们都要提示。

   getCode(){
                    this.form.code = ''
                    //这里改为了邮箱的正则表达验证
                    const regex = /^([\w\.\-]+)\@(\w+)(\.([\w^\_]+)){1,2}$/;
                    if (regex.test(this.form.phone)) {
                        this.msgFlag = false
                        //this.form.code = (Math.random()*1000000).toFixed(0)
                        sendMsgApi({phone:this.form.phone}).then((res)=>{
                            if (res.code === 1){
                                this.$message(
                                    {
                                        message: "^-^验证码已经发送，请注意查收",
                                        type: 'success'
                                    }
                                )
                            }
                            else {
                                this.$message(
                                    {
                                        message: "验证码发送失败,请输入正确邮箱",
                                        type: 'failed'
                                    }
                                )
                            }
                        });



                    }else{
                        this.msgFlag = true
                    }
                },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

所以我们要点到这个里面去看具体的请求路径。


ok,基本就是这样的一个逻辑。
那么我们就直接去后端接收处理提交过来的这些数据。这里是发送验证码，

用户输入邮箱，点击获取验证码，然后这个前端就会给后端发送请求。

public class UserController {
    @Autowired
    private UserService userService;
    @Resource
    private JavaMailSender javaMailSender;//我们需要用这个进行邮件发送
    //注意这里我们将发送者从配置文件注入进来
    @Value("${spring.mail.username}")
    private String from;

    @PostMapping("/sendMsg")
    private R_<String> sendMsg(@RequestBody User user, HttpSession session) {
//        这里用qq邮箱去发送验证码
//获取到前端提交过来的qq号
        String phone = user.getPhone();
        //这里工具类判是否为空
        if (StringUtils.isNotEmpty(phone)) {
//            这里用到生成验证码的工具类
            String code = ValidateCodeUtils.generateValidateCode(4).toString();//生成四位的验证码
            log.info("code={}", code);
//            构建一个邮件的对象
            SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
//          设置邮件发件者
            simpleMailMessage.setFrom(from);
//            设置邮件接受者
            simpleMailMessage.setTo(phone);
//            设置有纪念的主题
            simpleMailMessage.setSubject("登录验证码");
//            设置邮件的征文
            String text = "^-^道哥（兰舟千帆）给您的验证码为" + code + "请勿泄露";
            simpleMailMessage.setText(text);



//将生成的验证码保存到Session
//            将我们生成的手机号和验证码放到session里面，我们后面用户填入验证码之后，我们验证的时候就从这里去取然后进行比对
//这里我们需要一个异常捕获
            session.setAttribute(phone, code);
//            return R_.success("手机验证码短信发送成功");

            try {
                javaMailSender.send(simpleMailMessage);
                return R_.success("手机验证码短信发送成功");
            } catch (MailException e) {
                e.printStackTrace();
            }


       }

        }
        return R_.error("手机验证码发送失败");

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

然后这样验证码就发送完成了，验证码发送成功后，用户邮箱就会收到验证码，然后就会在前端将这个数据填入。这样就又是另外的一次请求。

然后这里又是一个按钮，同样是绑定了方法。

我们走到这个方法,这个方法里面也有一些处理逻辑。然后我们关注到这里面主要的请求方法

然后点进去这个方法

然后我们后端这样去写就好了。

 //    移动应用登录端
    @PostMapping("/login")
//    这里使用map来接收前端传过来的值
    private R_<User> login(@RequestBody Map map, HttpSession session) {
        log.info(map.toString());
//        使用map来接收参数,接收键值参数、
//        编写处理逻辑
//        获取到手机号
//        获取到验证码
//        从Session中获取到保存的验证码
//     将session中获取到的验证码和前端提交过来的验证码进行比较，这样就可以实现一个验证的方式
//        比对页面提交的验证码和session中
//判断当前的手机号在数据库查询是否有记录，如果没有记录，说明是一个新的用户，然后自动将这个手机号进行注册
        String phone = map.get("phone").toString();
        String code = map.get("code").toString();
//获取session中phone字段对应的验证码
        Object codeInSession = session.getAttribute(phone);
//        下面进行比对
        if (codeInSession != null && codeInSession.equals(code)) {
            LambdaQueryWrapper<User> userLambdaQueryWrapper = new LambdaQueryWrapper<>();
//            在表中根据号码来查询是否存在该邮箱用户
            userLambdaQueryWrapper.eq(User::getPhone, phone);
            User user = userService.getOne(userLambdaQueryWrapper);
            if(user == null){
                //判断当前手机号对应的用户是否为新用户，如果是新用户就自动完成注册
                user = new User();
                user.setPhone(phone);
                user.setStatus(1);
                userService.save(user);
            }
//            这里我们将user存储进去，后面各项操作，我们会用，其中拦截器那边会判断用户是否登录，所以我们将这个存储进去，
            session.setAttribute("user",user.getId());

            return R_.success(user);



            }


        return R_.error("验证失败");
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

这样怎么验证码发送给已经验证登录的功能就开发完成了。

后端这里成功返回数据后，然后我们就可以跳转到主页面了。

后续待更。。