node+mysql实现（账户密码，阿里云短信验证，QQ邮箱注册登录，短信验证密码重置，邮箱密码重置）之注册，登录密码重置总篇-CSDN博客

本文链接：https://blog.csdn.net/m0_46590717/article/details/140633075

node+mysql实现账户登录

- 注意

注意

项目中所用到的验证码模块都不是虚拟的，手机号短信验证调用的是阿里云的短信服务模块，QQ邮箱验证码是调用邮件服务模块

效果图

在这里插入图片描述

项目插件

layui ,layui消息通知插件（notify）

//Express
npm install express
//body-parser
npm install body-parser
//阿里云相关短信服务
npm install @alicloud/dysmsapi20170525
npm install @alicloud/openapi-client
npm install @alicloud/tea-util
//mysql2
npm install mysql2
//邮件
npm install nodemailer

代码参数说明

短信验证模块

在这里插入图片描述

邮箱验证模块

在这里插入图片描述

注册方式

在这里插入图片描述

登录方式

在这里插入图片描述

密码重置

在这里插入图片描述

前端页面部分

登录页面

账户登录页面（login.html)

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>暖意书栈登录</title>
  <!-- 设置系统图标 -->
   <link rel="shortcut icon" href="../icon/login.ico" type="image/x-icon" />
  <!-- 引用layui文件中layui.css -->
   <link rel="stylesheet" href="../layui/css/layui.css"  media="all"></link>
</head>
<style>
  .login-container{
     width: 320px; margin: 241px auto 0;}
  .reg-other .layui-icon{
     position: relative; display: inline-block; margin: 0 15px; top: 2px; font-size: 30px;}
  body {
     
    background-image: url(../image/login_index.jpg);
    background-size: cover;
    background-repeat: repeat;
  }
  .register-link-container {
     
    text-align: right; /* 右对齐文本 */
  }
  </style>
<body>
<form class="layui-form" id="loginForm">
  <div class="login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="number" name="account"  lay-verify="required|phone" placeholder="账户" lay-reqtext="请先填写账户" lay-vertype="tips" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password"  lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" lay-vertype="tips" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
      <a href="/rest" style="float: right; margin-top: 7px;color: #435594;">忘记密码？</a>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid layui-bg-black" lay-submit lay-filter="loginBtn">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
    </div>
    <div class="layui-form-item ">
      <a href="/sms" style="position: fixed;color: #435594;">短信快捷登录</a>
      <div class="register-link-container">
       <a href="/register" style="color: #435594;">注册帐号</a> 
      </div>
      <div style="display: flex; align-items: center;">
        <hr class="layui-border-green" style="height: 1px;  flex: 1; margin: 0 5px;">
        <span style="color: gray;font-size: 12px;">其他方式登录</span>
        <hr class="layui-border-green" style="height: 1px;  flex: 1; margin: 0 5px;">
      </div>
      <div class="reg-other">
        <a href="/emailLogin"title="使用QQ邮箱登录" ><i class="layui-icon layui-icon-login-qq" style="color: #1680eb;"></i></a>
        <a href="javascript:;" title="使用微信账号登录" onclick="layer.msg('功能设计开发中')"><i class="layui-icon layui-icon-login-wechat" style="color: #36761e;"></i></a>
        <a href="javascript:;" title="使用微博账号登录" onclick="layer.msg('功能设计开发中')"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
        <a href="javascript:;" title="使用GitHub账号登录" onclick="layer.msg('功能设计开发中')"><i class="layui-icon layui-icon-github" ></i></a>
        <a href="javascript:;" title="使用Windows账户登录" onclick="layer.msg('功能设计开发中')"><i class="layui-icon layui-icon-windows" style="color: #91b0d4;" ></i></a>
      </div>
    </div>
  </div>
</form>
  
<!-- layui.js 地址 -->
<script src="../layui/layui.js"></script> 
<script src="../notify/notify.js"></script>
<script>
  layui.use(['notify'],function(){
     
    var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;
  var notify = layui.notify;

    // 方法2： 引用第三方消息通知组件进行表单提交事件
    form.on('submit(loginBtn)', function(data){
     
      var field = data.field; // 获取表单字段值
      if(field.password.length < 6){
     
        notify.info({
     msg:'密码长度不能小于6位',position:'vcenter',shadow:true, closable:false,duration:1000});
        return false;
      }
      /*
      加载提示：用法 notify.info({
                     msg:"提示",//提示信息
                    closable:true,//是否显示关闭按钮 默认是true
                    position:'vcenter',// 指定弹出位置:默认topCenter，可选值：bottomRight|bottomLeft|topRight|topLeft|topCenter|bottomCenter|vcenter"
                    shadow:true,//  是否显示阴影默认是false
                    duration:2000,//显示时间默认3000，为 0 时不自动关闭
                });
      */
      notify.loading({
     msg:'验证登录中，请稍后...',position:'vcenter',shadow:true, closable:false});//显示加载中
      setTimeout(function(){
     
        notify.destroyAll();//关闭所有通知
        $.ajax({
     
          url: '/user/login',
          type: 'post',
          data: {
     account:field.account,
                password:field.password,
                key:1 //1:账户手机号登录；2：短信验证登录；3：邮箱登录
          }, // 数据转换为JSON字符串
          success: function(res) {
     
            if(res.code == 0){
     
              //弹出成功提示
              notify.success({
     msg:res.msg,position:'vcenter',shadow:true, closable:false,duration:1000});
              //跳转到系统首页，延迟500毫秒
              setTimeout(function(){
     
                location.href = '/main';
              }, 500);
            }else{
     
              //弹出错误提示
              notify.error({
     msg:res.msg,position:'vcenter',shadow:true, closable:false,duration:1000});
            }
          }
        }).done(function () {
     
          setTimeout(function () {
     
              parent.location.reload();//重载页面
          }, 1500);
        });
      }, 2000);
      // 阻止表单跳转
      return false; //如果不加的话，表单不会跳转但不会进行登录操作
    });


  });
  </script>

 
</body>
</html>

短信验证登录页面（smsLogin.html）

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>暖意书栈快捷账户登录</title>
    <!-- 设置系统图标 -->
    <link rel="shortcut icon" href="../icon/smslogin.ico" type="image/x-icon" />
  <!-- 引用该 layui.css 地址 -->
  <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<style>
  .reg-container{
     width: 320px; margin: 240px auto 0;}
  .reg-other .layui-icon{
     position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
  body {
     
      background-image: url(../image/login_index.jpg);
      background-size: cover;
      background-repeat: repeat;
    }
    .register-link-container {
     
    text-align: right; /* 右对齐文本 */
  }
  </style>
<body>
<form class="layui-form">
  <div class="reg-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon  layui-icon-cellphone"></i>
        </div>
        <input type="number" name="cellphone" value="" lay-verify="required|phone"  lay-vertype="tips" placeholder="手机号" lay-reqtext="请先填写手机号" autocomplete="off" class="layui-input" id="login-cellphone">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs7">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-vercode"></i>
            </div>
            <input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码"  lay-vertype="tips" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 11px;">
            <button type="button" class="layui-btn layui-btn-fluid layui-bg-cyan" lay-on="get-vercode">获取验证码</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid layui-bg-cyan" lay-submit lay-filter="loginBtn">登 &nbsp;&nbsp;&nbsp;&nbsp; 录</button>
    </div>
    <div class="layui-form-item reg-other">
        <label>其他账号登录</label>
      <span style="padding: 0 21px 0 6px;">
        <a href="/emailLogin"title="使用QQ邮箱登录" "><i class="layui-icon layui-icon-login-qq" style="color: #124e89;"></i></a>
        <a href="javascript:;" title="使用微信账号登录" onclick="layer.msg('功能设计开发中')"><i class="layui-icon layui-icon-login-wechat" style="color: #36761e;"></i></a>
        <ahref="javascript:;" title="使用微博账号登录" οnclick="layer.msg('功能设计开发中')"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
      或<a href="/" style="color: #435594;">返回账户登录</a>
    </div>
  </div>
</form>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../layui/layui.js"></script> 
<script src="../notify/notify.js"></script>
<script>
layui.use(function(){
     
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;
  
 
  
  // 提交事件
  form.on('submit(loginBtn)', function(data){
     
    var field = data.field; // 获取表单字段值
      notify.loading({
     msg:'验证登录中，请稍后...',position:'vcenter',shadow:true, closable:false});//显示加载中
      setTimeout(function(){
     
      notify.destroyAll();
      $.ajax({
     
        url: '/api/verifyCode',
        type: 'POST',
        data: {
     
              phoneNumber:field.cellphone,//手机号
              verificationCode:field.vercode,//验证码
              code:2//1代表注册;2:登录；3：密码重置
        }, // 数据转换为JSON字符串
        success: function(res) {
     
          if(res.success){
     
            //进行账户注册操作
            $.ajax({
     
              url: '/user/login',
              type: 'POST',
              data: {
     
                  account:field.cellphone,
                  key:2 //1:账户登录；2：短信登录；3：邮箱登录
              }, // 数据转换为JSON字符串
              success: function(res) {
     
                if(res.code == 0){
     
                   //弹出成功提示
                  notify.success({
     msg:res.msg,position:'vcenter',shadow:true, closable:false,duration:1000});
                  //跳转到系统首页，延迟500毫秒
                  setTimeout(function(){
     
                    location.href = '/main';
                  }, 500);
                }else if(res.code == 1){
     
                  notify.warning({
     msg:res.msg,position:'vcenter',shadow:true, closable:false,duration:1000})
                }else{
     
                  notify.error({
     msg:res.msg,position:'vcenter',shadow:true, closable:false,duration:1000})
                }
              }
            });
          }else{
     
            notify.error({
     msg:res.message,position:'vcenter',shadow:true, closable:false,duration:1000})
          }
        }
      }).done(function () {
     
          setTimeout(function () {
     
              parent.location.reload();//重载页面
          }, 1500);
        });
    },2000)

    return false; // 阻止默认 form 跳转
  });
  
  // 普通事件
  util.on('lay-on', {
     
    // 获取验证码
    'get-vercode': function(othis){
     
      var isvalid = form.validate('#login-cellphone'); // 主动触发验证，v2.7.0 新增 
      //获取输入框的手机号值
      var phoneNumber = $('#login-cellphone').val();
      //验证手机号是否是正确手机号
      if(phoneNumber!=''){
     
        if (!/^1[3456789]\d{9}$/.test(phoneNumber)) {
     
        notify.warning({
     msg:'请输入正确的手机号',position:'vcenter',shadow:true, closable:false,duration:1500});
        return false;
        }
      }
      // 验证通过
      if(isvalid){
     
        $.ajax({
     
          url: '/api/sendCode',
          type: 'POST',
          data: {
      phoneNumber:phoneNumber,//手机号
                  code:2//验证码类型
                },
          success: function(response) {
     
            if (response.success) {
     
              notify.success({
     msg:response.message,position:'vcenter',shadow:true, closable:false,duration:1200});
              // 按钮显示倒计时（60秒后重新获取）
              var countdown = 60; // 直接用秒数进行倒计时
              othis.attr('disabled', true); // 在开始倒计时前禁用按钮
              othis.text(countdown + '秒后重新获取');
              var interval = setInterval(function() {
     
                  if (countdown <= 0) {
      // 当倒计时小于等于0时
                      clearInterval(interval); // 清除倒计时定时器
                      othis.text('获取验证码'); // 恢复按钮文本
                      othis.removeAttr('disabled'); // 恢复按钮的可点击状态
                  } else {
     
                      othis.text(countdown + '秒后重新获取'); // 更新倒计时文本
                      countdown--; // 减少倒计时秒数
                  }
              }, 1000); // 每1000毫秒执行一次，即每秒倒计时递减
            } else {
     
              notify.error({
     msg:response.message,position:'vcenter',shadow:true, closable:false,duration:1000});
            }
          },
          error: function() {
     
            notify.error({
     msg:response.message,position:'vcenter',shadow:true, closable:false,duration:1000});
          }
        });
      }
    }
  });
});
</script>
 
</body>
</html>

邮箱登录页面（emailLogin.html）

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>暖意书栈邮箱登录</title>
  <!-- 设置系统图标 -->
  <link rel="shortcut icon" href="../icon/email.ico" type="image/x-icon" />
  <!-- 引用layui文件中layui.css -->
   <link rel="stylesheet" href="../layui/css/layui.css"  media="all"></link>
</head>
<style>
  .login-container{