直播网站程序源码，实现邮箱验证码登录(代码部分)

代码实现

前端部分

<!DOCTYPE html><br><html><br>    <head><br>        <meta charset="utf-8"><br>        <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><br>        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui"><br>        <title>馅饼研究所</title><br>        <link rel="icon" href="../images/favico.ico"><br>        <!--不同屏幕尺寸根字体设置--><br>        <script src="../js/base.js"></script><br>        <!--element-ui的样式--><br>        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" /><br>        <!--引入vant样式--><br>        <link rel="stylesheet" href="../styles/vant.min.css"/><br>        <!-- 引入样式  --><br>        <link rel="stylesheet" href="../styles/index.css" /><br>        <!--本页面内容的样式--><br>        <link rel="stylesheet" href="../styles/login.css" /><br>      </head><br>    <body><br>        <div id="login" v-loading="loading"><br>            <div>登录</div><br>            <div><br>                <el-input placeholder=" 请输入邮箱" v-model="form.phone"  maxlength='30'/></el-input><br>                <div></div><br>                <el-input placeholder=" 请输入验证码" v-model="form.code"  maxlength='20'/></el-input><br>                <span @click='getCode' :disabled="canClick">{{ verifyCode }}</span><br>            </div><br>            <div v-if="msgFlag">邮箱格式输入不正确，请重新输入</div><br>            <el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">登录</el-button><br>        </div><br>        <!-- 开发环境版本，包含了有帮助的命令行警告 --><br>        <script src="../../backend/plugins/vue/vue.js"></script><br>        <!-- 引入组件库 --><br>        <script src="../../backend/plugins/element-ui/index.js"></script><br>        <!-- 引入vant样式 --><br>        <script src="../js/vant.min.js"></script><br>        <!-- 引入axios --><br>        <script src="../../backend/plugins/axios/axios.min.js"></script><br>        <script src="../js/request.js"></script><br>        <script src="../api/login.js"></script><br>    </body><br>    <script><br>        new Vue({<br>            el:"#login",<br>            data(){<br>                return {<br>                    form:{<br>                        phone:'',<br>                        code:''<br>                    },<br>                    msgFlag:false,<br>                    loading:false,<br>                    verifyCode : '发送验证码',<br>                    totalTime: 60,<br>                    canClick: false<br>                }<br>            },<br>            computed:{},<br>            created(){},<br>            mounted(){},<br>            methods:{<br>                getCode(){<br>                    if (this.canClick) return<br>                    this.form.code = ''<br>                    //验证手机号<br>                    // const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;<br>                    //验证邮箱<br>                    const regex = /^(\w|-|_)+@\w+\.([a-zA-Z]{2,4})$/;<br>                    if (regex.test(this.form.phone)) {<br>                        this.msgFlag = false<br>                        //this.form.code = (Math.random()*1000000).toFixed(0)<br>                        sendMsgApi({phone:this.form.phone})<br>                    }else{<br>                        this.msgFlag = true<br>                    }<br>                    this.canClick = true<br>                    this.verifyCode = this.totalTime + 's后重新发送'<br>                    let clock = window.setInterval(() => {<br>                     //倒计时功能<br>                        this.totalTime--<br>                        this.verifyCode = this.totalTime + 's后重新发送'<br>                        if (this.totalTime < 0) {<br>                            window.clearInterval(clock)<br>                            this.verifyCode = '重新获取验证码'<br>                            this.totalTime = 60<br>                            this.canClick = false<br>                        }<br>                    }, 1000)<br>                },<br>                async btnLogin(){<br>                    if(this.form.phone && this.form.code){<br>                        this.loading = true<br>                        const res = await loginApi(this.form)<br>                        this.loading = false<br>                        if(res.code === 1){<br>                            sessionStorage.setItem("userPhone",this.form.phone)<br>                            window.requestAnimationFrame(()=>{<br>                                window.location.href= '/front/index.html'<br>                            })                           <br>                        }else{<br>                            this.$notify({ type:'warning', message:res.msg});<br>                        }<br>                    }else{<br>                        this.$notify({ type:'warning', message:'请输入手机号码'});<br>                    }<br>                }<br>            }<br>        })<br>    </script><br></html>

前端部分实现并不难，一开始我使用的是手机号作为登录验证，后来才改回的邮箱，所以变量名才是phone，我这里就不再改了，不影响使用。为了交互友好性，我这里引入了一个简单的倒计时功能，让用户在60秒之后才能第二次获取验证码，以防止用户恶意点击造成验证码频繁发送。

后端部分

2.1：工具类

<br>package com.my.reggie.util;<br>import org.apache.commons.mail.HtmlEmail;<br>/**<br> * 发送邮箱验证码工具类<br> */<br>public class SendEmailUtils {<br>    /**<br>     * 发送验证码<br>     * @param email  接收邮箱<br>     * @param code   验证码<br>     * @return  void<br>     */<br>    public static void sendAuthCodeEmail(String email,String code) {<br>        try {<br>            HtmlEmail mail = new HtmlEmail();<br>            /*发送邮件的服务器 126邮箱为smtp.126.com,163邮箱为163.smtp.com，QQ为smtp.qq.com*/<br>            mail.setHostName("smtp.qq.com");<br>            /*不设置发送的消息有可能是乱码*/<br>            mail.setCharset("UTF-8");<br>            /*IMAP/SMTP服务的密码 username为你开启发送验证码功能的邮箱号 password为你在qq邮箱获取到的一串字符串*/<br>            mail.setAuthentication("666@qq.com", "rtyhushbaeg");<br>            /*发送邮件的邮箱和发件人*/<br>            mail.setFrom("666@qq.com", "馅饼研究所");<br>            /*使用安全链接*/<br>            mail.setSSLOnConnect(true);<br>            /*接收的邮箱*/<br>            mail.addTo(email);<br>            /*设置邮件的主题*/<br>            mail.setSubject("登录验证码");<br>            /*设置邮件的内容*/<br>            mail.setMsg("尊敬的用户:你好! 登录验证码为:" + code + "(有效期为一分钟)");<br>            mail.send();//发送<br>        } catch (Exception e) {<br>            e.printStackTrace();<br>        }<br>    }<br>}

2.2：UserController

<br>package com.my.reggie.controller;<br>import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;<br>import com.my.reggie.common.R;<br>import com.my.reggie.pojo.User;<br>import com.my.reggie.service.UserService;<br>import com.my.reggie.util.ValidateCodeUtils;<br>import lombok.extern.slf4j.Slf4j;<br>import org.springframework.beans.factory.annotation.Autowired;<br>import org.springframework.data.redis.core.StringRedisTemplate;<br>import org.springframework.web.bind.annotation.PostMapping;<br>import org.springframework.web.bind.annotation.RequestBody;<br>import org.springframework.web.bind.annotation.RequestMapping;<br>import org.springframework.web.bind.annotation.RestController;<br>import javax.annotation.Resource;<br>import javax.servlet.http.HttpServletRequest;<br>import javax.servlet.http.HttpSession;<br>import java.util.Map;<br>import java.util.concurrent.TimeUnit;<br>@Slf4j<br>@RestController<br>@RequestMapping("/user")<br>public class UserController {<br>    @Autowired<br>    private UserService userService;<br>    @Resource<br>    private StringRedisTemplate stringRedisTemplate;<br>    /**<br>     * 发送验证码<br>     *<br>     * @param user<br>     * @return<br>     */<br>    @PostMapping("/sendMsg")<br>    public R<String> sendMsg(@RequestBody User user, HttpSession session) {<br>        // 获取邮箱号<br>        String phone = user.getPhone();<br>        if (phone == null) {<br>            return R.error("邮箱号为空！");<br>        }<br>        // 随机生成4位验证码<br>        String code = String.valueOf(ValidateCodeUtils.generateValidateCode(4));<br>        log.info("验证码为：{}", code);<br>        //发送验证码到邮箱<br>        // SendEmailUtils.sendAuthCodeEmail(phone,code);<br>        // 将验证码保存到session<br>        // session.setAttribute("code", code);<br>        //将验证码缓存到Redis(有效时间为1分钟)<br>        stringRedisTemplate.opsForValue().set("code",code,1, TimeUnit.MINUTES);<br>        //将手机号保存到session<br>        session.setAttribute("phone",phone);<br>        return R.success("验证码发送成功！");<br>    }<br>    /**<br>     * 登录功能<br>     * @param map<br>     * @param session<br>     * @return<br>     */<br>    @PostMapping("/login")<br>    public R<User> login(@RequestBody Map<String, String> map, HttpSession session) {<br>        // 获取手机号<br>        String phone = map.get("phone");<br>        // 获取验证码<br>        String code = map.get("code");<br>        // 从session中获取验证码<br>        // String codeInSession = (String) session.getAttribute("code");<br>        // 从缓存中获取验证码<br>        String codeInRedis = stringRedisTemplate.opsForValue().get("code");<br>        //从session中获取请求验证码的手机号<br>        String phoneInSession = (String) session.getAttribute("phone");<br>        // 进行验证码比对<br>        if (codeInRedis == null || phoneInSession == null || !codeInRedis.equals(code) || !phoneInSession.equals(phone)) {<br>            return R.error("验证码错误");<br>        }<br>        // 判断该用户是否注册<br>        LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<>();<br>        lqw.eq(User::getPhone, phone);<br>        User user = userService.getOne(lqw);<br>        if (user == null) {<br>            // 用户还未注册，自动注册<br>            user = new User();<br>            user.setPhone(phone);<br>            userService.save(user);<br>        }<br>        //设置session<br>        session.setAttribute("user", user.getId());<br>        session.setMaxInactiveInterval(6*60*60);<br>        //删除验证码缓存<br>        stringRedisTemplate.delete("code");<br>        return R.success(user);<br>    }<br>    /**<br>     * 退出登录<br>     * @return<br>     */<br>    @PostMapping("/loginout")<br>    public R<String> logout(HttpServletRequest request){<br>        //清除session<br>        request.getSession().removeAttribute("user");<br>        request.getSession().removeAttribute("phone");<br>        // request.getSession().removeAttribute("code");<br>        return R.success("退出登录成功");<br>    }<br>}