springboot+vue实现邮箱登录

导入依赖

 <!--邮箱-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-mail</artifactId>
        </dependency>

配置 application.properties

# QQ邮箱配置-固定的
spring.mail.host=smtp.qq.com
#发件人QQ邮箱地址
spring.mail.username=xxx@qq.com
#QQ邮箱授权码-到qq邮箱获取
spring.mail.password=xxx
#以下三项不用改动
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.starttls.required=true 

UserDTO

package com.chen.controller.dto;

import lombok.Data;

/**接受用户数据
 * 接受前端登录请求的参数
 * @author
 * @date 2022/3/9 20:51
 */
@Data
public class UserDTO {
    private String username;
    private String password;
    private String email;

}

UserVoToUser

package com.chen.pojo.vo;

/**
 * @author 
 * @date 2022/2/26 17:14
 */

import com.chen.controller.dto.UserDTO;
import com.chen.pojo.Users;

/**
 * 将表单中的对象转化为数据库中存储的用户对象（剔除表单中的code）
 * @param
 * @return
 */
public class UserVoToUser {

    /**
     * 将表单中的对象转化为数据库中存储的用户对象（剔除表单中的code）
     * @param userVo
     * @return
     */
    public static Users toUser(UserDTO userVo) {

        //创建一个数据库中存储的对象
        Users user = new Users();

        //传值
        user.setUsername(userVo.getUsername());
        user.setPassword(userVo.getPassword());
        user.setEmail(userVo.getEmail());

        // 返回包装后的对象
        return user;
    }
}

编写邮件类发送邮件
MailService.java

package com.chen.service.Impl;

import com.chen.common.Result;

import com.chen.mapper.UsersMapper;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.MailException;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.Random;

/**
 * @author
 * @date 2022/2/26 17:11
 */
@Service
public class MailService {
    public static  String codes;
    @Autowired
    private JavaMailSender mailSender;//一定要用@Autowired


    @Resource
    private UsersMapper userMapper;//注入UserMapper，交给bena

    //application.properties中已配置的值
    @Value("${spring.mail.username}")
    private String from;

    /**
     * 给前端输入的邮箱，发送验证码
     * @param email
     * @param
     * @return
     */
    public Result sendMimeMail(String email, String code) {
        try {
            SimpleMailMessage mailMessage = new SimpleMailMessage();

            mailMessage.setSubject("验证码邮件");//主题
            //生成随机数
             code = randomCode();
             codes=code;

            //将随机数放置到session中
        /*    session.setAttribute("email",email);
            session.setAttribute("code",code);*/

            mailMessage.setText("您收到的验证码是："+code);//内容
            System.out.println(code);

            mailMessage.setTo(email);//发给谁

            mailMessage.setFrom(from);//你自己的邮箱

            try {
                mailSender.send(mailMessage);//发送
            } catch (MailException e) {
                e.printStackTrace();
            }
            return  Result.success("成功");
        }catch (Exception e){
            e.printStackTrace();
            return  Result.error(20000,"成功");
        }
    }

    /**
     * 随机生成6位数的验证码
     * @return String code
     */
    public String randomCode(){
        StringBuilder str = new StringBuilder();
        Random random = new Random();
        for (int i = 0; i < 6; i++) {
            str.append(random.nextInt(10));
        }
        return str.toString();
    }

    /**
     * 检验验证码是否一致
     * @param userVo
     * @param session
     * @return
     */
   /* public Result loginUser(UserDTO userVo, HttpSession session){
        //获取session中的验证信息
        String email = (String) session.getAttribute("email");
        String code = (String) session.getAttribute("code");

        //获取表单中的提交的验证信息
        String voCode = userVo.getCode();

        //如果email数据为空，或者不一致，注册失败
        if (email == null || email.isEmpty()){
            //return "error,请重新注册";
            return Result.error(2,"数据为空");
        }else if (!code.equals(voCode)){
            //return "error,请重新注册";
            return Result.error(-1,"验证码错误");
        }

        //保存数据
        Users user = UserVoToUser.toUser(userVo);

        //将数据写入数据库
        userMapper.insert(user);

        //跳转成功页面
        return Result.success();
    }

    *//**
     * 通过输入email查询password，然后比较两个password，如果一样，登录成功
     * @param email
     * @param password
     * @return
     */


}

实现类

public Result<?> login(UserDTO user) {
        QueryWrapper<Users> queryWrapper = new QueryWrapper();
        queryWrapper.eq("email", user.getEmail());
        queryWrapper.eq("password", user.getPassword());
//        queryWrapper.eq("code", MailService.codes);
        Users res = users1Mapper.selectOne(queryWrapper);
        System.out.println(user.getCode());
        if (!user.getCode().equals(MailService.codes)){
            System.out.println(MailService.codes);
            return Result.error(-1,"验证码错误");


        }
        if (res==null){
            return Result.error(0,"密码错误");
        }
        return Result.success();
    }

controller层

发送邮件
    @PostMapping("/sendEmail/{email}")
    public Result<?> sendEmail(@PathVariable("email") String email,  String code){
        System.out.println(email);

        return mailService.sendMimeMail(email, code);
    }

@PostMapping("/login")
    @ApiOperation("登录")
    public Result login(@RequestBody UserDTO userDTO) {
        return users1Service.login(userDTO);
    }

vue
Login.vue

<template>
    <div class="wrapper">
        <div style="margin: 200px auto; background-color: #fff; width: 350px; height: 300px; padding: 20px; border-radius: 10px">
            <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>登 录</b></div>
            <el-form :model="user" :rules="rules" ref="userForm">
                <el-form-item prop="email">
                    <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.email"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.code"></el-input>
                    <el-button  size="small"  autocomplete="off" @click="send" :disabled="flag">{{ codeMsg }}</el-button>
                </el-form-item>
                <el-form-item style="margin: 10px 0; text-align: right">
                    <el-button type="primary" size="small"  autocomplete="off" @click="login">登录</el-button>
                    <el-button type="warning" size="small"  autocomplete="off">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data() {
            const validateEmail = (rule, value, callback) => {
                const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                this.flag = !reg.test(value)
                if (this.flag) {
                    callback()
                }  else {
                    callback(new Error('请输入正确的邮箱地址'))
                }
            }
            return {
                second: 5,
                codeMsg:'发送',
                flag:true,
                user: {code:''},
                rules: {
                    email: [
                        {validator: validateEmail, trigger: 'blur'}
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                },
                timer: null
            }
        },
        methods: {
            countDown() {

                this.flag = true
                this.timer = setInterval(() => {
                    if (this.second > 0) {
                        this.second--
                        this.codeMsg = this.second
                    } else {
                         clearInterval(this.timer)
                        this.timer = null
                        this.flag = false
                        this.codeMsg = '发送'
                        this.second = 5
                    }
                }, 1000)
            },
            send(){
                this.countDown();
                this.request.post("/sys/sendEmail/"+this.user.email,this.user.code).then(res=>{
                    alert("发送成功")
                })
            },
            login() {
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {  // 表单校验合法
                        this.request.post("/sys/login", this.user).then(res => {
                            if(res.code===20000) {
                                this.$message.success("登录成功")
                            }else if(res.code===0){
                                this.$message.error("用户名或密码错误")
                            }
                            else {
                                // this.$router.push("/")
                                this.$message({
                                    type:"success",
                                    message:res.msg
                                })
                            }
                        })
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
    .wrapper {
        height: 100vh;
        background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB);
        overflow: hidden;
    }
</style>