QQ邮箱验证码简例，前后端node.js与axios的ajax.post方式信息交互，基于node.js与axios.js，附前后端源码

一、前端

1）前端准备

        1.HTML、CSS、JQuery.js、axios.js （文末附源码文件）

        2.重点注意引用axios.js，Jquery.js,请根据自己资源引用

2）实现内容

        1.登录方式选项卡，简单样式

        2.使用axios post方式向后端传参，提交表单

        3.连接后端 ，获取连接状态，后端邮件发送信息获取

3）重要方法函数

/**
 *      引用axios 
 *      <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 可以下载到本地 否则不能使用axios通信交互
 *      post 与get 使用有区别，
 * 
 * 
 */
/* 邮箱格式验证 手机没有写 */
function check(obj) {
    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/g; //邮箱验证
    console.log("输入的邮箱验证开始")
    console.log($(obj).val())
    if (reg.test($(obj).val())) {
        $(obj).css("border-color", "green");
        return true;
    } else {
        $(obj).css("border-color", "#5AA9DE");
        // $(obj).css("color", "red");
        return false;
    }
}
// 获取验证码btn ID
let get_check_codes = "get_check_codes"
/**
 * 验证码获取事件
 * @param {*} post_str  请求按钮
 * @param {*} input_str 输入用户
 */
function codeClick(post_str, input_str) {
    $("#" + post_str).click(() => {
        getemail(post_str, input_str)

    })
    /**
    * 倒计时
    * @param {*} time  倒计时时间
    * @param {*} _count  请求的元素dom
    * @param {*} post_str  请求的ID
    */
    function countTime(time, _count, post_str) {
        $("#" + post_str).attr("disabled", true);
        $("#" + post_str).val(time + "秒后获取");
        var timer = setInterval(function () {
            // 判断剩余秒数
            if (time == 0) {
                // 清除定时器和复原按钮
                clearInterval(timer);
                $('#' + post_str).removeAttr('disabled');
                $("#" + post_str).val("获取验证码");
            } else {
                $("#" + post_str).val(time + "秒后获取");
                console.log(_count)
                time = time - 1;
            }
        }, 1000);
    }

    function getemail(post_str, input_str) {

        countTime(5, $("#" + post_str), post_str)

        if (check($("#" + input_str))) {
            //获取邮箱验证事务
            let login_type = "get_Email_codes"
            let name = $('#' + input_str).val()
            console.log("用户" + name + "正在获取验证码")
            $.ajax({
                method: "post",
                data: { username: name, userpwd: "no! To_get_this_server_Email_codes", type_log: login_type },
                params: { username: name, userpwd: "no! To_get_this_server_Email_codes", type_log: login_t },
                url: "http://localhost:3000/checkCode",
                success: function (res) {
                    console.log(res)
                    if (res == "邮箱发送成功") {
                        console.log("验证成功！");
                    }
                    else {
                        console.log("验证失败！");
                    }
                },
                error: function (err) {
                    alert("连接异常，请检查客户端网络或者服务端状态！")
                    console.log(err);
                },
                timeout: 2000
            }).catch(function (error) {
                console.log(error);
            });

        } else {
            console.log("输入check_id");
        }

    }

}

// 获取验证码事务
codeClick(get_check_codes, "input_user_c")
/**
 * 登录密码/验证码验证
 * @param {*} login_id   登录ID
 * @param {*} passwords_id  输入密码ID
 * @param {*} user_id  输入用户ID
 */
function loginClick(login_id, passwords_id, user_id) {
    let login_type
    if (login_id == "logon_by_pass")
        login_type = "passwds"
    else
        login_type = "codes"
    $('#' + login_id).click(() => { login_post(passwords_id, user_id, login_type) })
    function login_post(passwords_id, user_id) {
        let name = $('#' + user_id).val()
        let pwd = $('#' + passwords_id).val()
        console.log(name + pwd)
        if (name == "" || pwd == "") {
            alert("帐号和密码不能为空")
        } else {
            //向服务器提交数据post
            $.ajax({
                method: "post",
                data: { username: name, userpwd: pwd, type_log: login_type },
                params: { username: name, userpwd: pwd, type_log: login_type },
                url: "http://localhost:3000/login",
                success: function (res) {
                    //返回结果与信息
                    console.log("登录连接成功！");
                    console.log(res)
                    if (res.static == true) {
                        console.log("登录成功！");
                    }
                    else {
                        console.log("登录失败！请重新输入密码");
                    }

                },
                error: function (err) {
                    if (err.readyState == 0) {
                        alert("连接异常，请检查客户端网络或者服务端状态！")
                    }
                    console.log(err);
                },
                timeout: 2000
            }).then(function (response) {
                //成功时服务器返回 response 数据
                // alert(response.data)
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
}
loginClick("logon_by_pass", "input_pass_p", "input_user_p")
loginClick("logon_by_codes", "input_pass_c", "input_user_c")

4）事务逻辑

        1.验证码获取  邮箱验证码事务 codeClick

        2.密码或验证码的验证    登录事务 loginClick

        注意： 本项目中后端没有使用params数据，用的是data，本人还没搞清楚具体区别

二、后端

1）后端准备

        1.开启邮箱服务， 获取SMTP授权码

        2.创建index.js （文末附源码文件）

        3.安装依赖模块有下面模块  文件ndex.js目录cmd 执行

 npm i 【模块Name】

/* 安装在电脑系统根目录下终端进行  不建议编译器下终端 */
//   axios应该也需要 npm i 【模块Name】
var nodemailer = require("nodemailer");
var express = require("express");
var session = require("express-session");
var bodyparser = require("body-parser");
const cors = require("cors");

         4.数据库的部署与查询，本人未做此步骤处理，仅做初步实验 

2）实现内容

        1.解决跨域问题

        2.处理post ，向前端反馈结果

        3.根据前端post用户，发送验证码

3）重要事务--发送邮件

/* 创建传输对象 */
var transporter = nodemailer.createTransport({//邮件传输
    host: "smtp.qq.com", //qq smtp服务器地址
    secureConnection: false, //是否使用安全连接，对https协议的
    port: 465, //qq邮件服务所占用的端口
    auth: {
        user: '******@qq.com', //用户名
        pass: '*******' // SMTP授权码
    }
});
//记录生成验证码 codes_Arr记录最新验证码 password假设数据库查询密码
let codes_Arr = [["原始验证码是啥子呢，因为你没有请求！"]]
let password = "10086qlssy"
// 接收以后发送 账号，接收密码   验证码 登录方式 并且发邮件//post 客户端post监听端口为:http://127.0.0.1:3000/checkCode
app.post("/checkCode", function (req, res) {
    //调用指定的邮箱给用户发送邮件
    let code = "";
    while (code.length < 5) {
        code += Math.floor(Math.random() * 10);
    }
    console.log(req.body)
    let uername = req.body.username
    var mailOption = {
        from: "*****@qq.com",
        to: uername,//收件人
        subject: '【黔灵山书院】请您验证', // 标题
        html: `
        <p>你好！</p>
        <p>您正在使用手机或邮箱登录社区账号</p>
        <p>你的验证码是：<strong style="color: #ff4e2a;">${code}</strong></p>
        <p>为了您的账户安全，请勿泄露你的验证码,请确认是你本人操作！</p>
        <p>***该验证码5分钟内有效***</p>` // html 内容
    };
    transporter.sendMail(mailOption, function (error, info) {
        if (error) {
            res.send("邮箱发送失败");
            return console.info(error);
        } else {
            req.session.yanzhengma = code;
            //储存验证码
            if (codes_Arr.length <= 1)
                codes_Arr.push([code, uername, req.body.type_log])
            else {
                codes_Arr[0] = codes_Arr[1]
                codes_Arr[1] = [code, uername, req.body.type_log]
            }
            console.log(codes_Arr)
            res.send("邮箱发送成功");
            console.info("Message send" + code);
        }
    })
})

三、前后端的连接 

        前后端分离，不同文件夹，模拟不同系统。由于第一次学习node.js与axios的ajax方式互相传参，因此有些理解不成熟，这里仅仅说我知道的形式正确。

1） 前端连接与其url 

        http://localhost:3000/login ,这个链接后端服务开启后也不可访问，我也不知道怎么可视化，只能控制台输出打印

$.ajax({
                method: "post",
                data: { username: name, userpwd: pwd, type_log: login_type },               
                url: "http://localhost:3000/login",
                success: function (res) {
                    //返回结果与信息
                    console.log("登录连接成功！");
                    console.log(res) 
                },
                error: function (err) {
                    if (err.readyState == 0) {
                        alert("连接异常，请检查客户端网络或者服务端状态！")
                    }
                    console.log(err);
                },
                timeout: 2000
            }).catch(function (error) {
                console.log(error);
            });

2）后端连接与url

“/login” 相对路径，建立了一个路径，我不知道可视化，只知道暂时无法访问，但是运行正常即可

app.post("/login", function (req, res) {
//req.body含有客户端传入的参数
//res.send 反馈客户端参数
})

端口号 3000

app.listen(3000, function (err) {
    if (err) {
        console.info(err);
    } else {
        console.info("服务器开启成功。。。");
        console.log("监听端口为:http://127.0.0.1:3000");
    }
})

http://127.0.0.1:3000/login就是客户端的需要post 连接地址url

为了业务清晰，本人邮箱服务使用/checkCode,登录验证使用/login

3）后端源码index.js [放入新建后端专用文件夹目录下]

目录下安装全部依赖 ，目录cmd  npm i  [name]

/* 安装在电脑系统根目录下终端进行  不建议编译器下终端 */
var nodemailer = require("nodemailer");
var express = require("express");
var session = require("express-session");
var bodyparser = require("body-parser");
const cors = require("cors");
var app = express();
app.use(cors()); //使用cors中间件,解决跨域

app.use(session({
    secret: 'keyboard cat',
    resave: true,
    saveUninitialized: true,
    cookie: { secure: false, maxAge: 1000 * 60 * 20 }
}));

//增加头部信息解决跨域问题
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");//设置响应头，*表示任何地址都亦可以访问
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Credentials", true);
    res.header("X-Powered-By", ' 3.2.1');
    next();
});

//使用bodyParse解释前端提交数据
app.use(bodyparser.urlencoded({ extended: true }));
app.use(bodyparser.json());
/* 创建传输对象 */
var transporter = nodemailer.createTransport({//邮件传输
    host: "smtp.qq.com", //qq smtp服务器地址
    secureConnection: false, //是否使用安全连接，对https协议的
    port: 465, //qq邮件服务所占用的端口
    auth: {
        user: '*****@qq.com', //用户名
        pass: '*****' // SMTP授权码
    }
});
//记录生成验证码 codes_Arr记录最新验证码 password假设数据库查询密码
let codes_Arr = [["原始验证码是啥子呢，因为你没有请求！"]]
let password = "10086qlssy"
// 接收以后发送 账号，接收密码   验证码 登录方式 并且发邮件//post 客户端post监听端口为:http://127.0.0.1:3000/checkCode
app.post("/checkCode", function (req, res) {
    //调用指定的邮箱给用户发送邮件
    let code = "";
    while (code.length < 5) {
        code += Math.floor(Math.random() * 10);
    }
    console.log(req.body)
    let uername = req.body.username
    var mailOption = {
        from: "****@qq.com",
        to: uername,//收件人
        subject: '【黔灵山书院】请您验证', // 标题
        html: `
        <p>你好！</p>
        <p>您正在使用手机或邮箱登录社区账号</p>
        <p>你的验证码是：<strong style="color: #ff4e2a;">${code}</strong></p>
        <p>为了您的账户安全，请勿泄露你的验证码,请确认是你本人操作！</p>
        <p>***该验证码5分钟内有效***</p>` // html 内容
    };
    transporter.sendMail(mailOption, function (error, info) {
        if (error) {
            res.send("邮箱发送失败");
            return console.info(error);
        } else {
            req.session.yanzhengma = code;
            //储存验证码
            if (codes_Arr.length <= 1)
                codes_Arr.push([code, uername, req.body.type_log])
            else {
                codes_Arr[0] = codes_Arr[1]
                codes_Arr[1] = [code, uername, req.body.type_log]
            }
            console.log(codes_Arr)
            res.send("邮箱发送成功");
            console.info("Message send" + code);
        }
    })
})
//post 客户端post监听端口为:http://127.0.0.1:3000/login
app.post("/login", function (req, res) {
    let pwd = req.body.userpwd
    console.log("登录用户输入密码" + pwd)
    let uername = req.body.username
    console.log("登录用户" + uername)
    let type = req.body.type_log
    console.log("登录类型" + type)
    if (type == "passwds") {
        // 密码登录
        console.log("开始密码验证")
        if (password == pwd) {
            let data = {
                static: true,
                uername: uername,
                password: password

            }
            res.send(data);
            console.log("用户"+uername+"登录授权成功!")
        } else {
            let tip="密码错误！"
            let data = {
                static: false,
                uername: uername,
                tip:tip
            }
            res.send(data);
        }
    } else if (type == "codes") {
        //验证码登录
        console.log("开始邮箱验证")
        let password = codes_Arr[codes_Arr.length - 1][0]
        console.info("邮箱验证码" + password);
        if (password == pwd) {
            let data = {
                static: true,
                uername: uername,
                password: password
            }
            res.send(data);
        } else {
            let tip
            if(password=="原始验证码是啥子呢，因为你没有请求！"){
                tip="未获取验证码或验证码已经失效，请重新获取验证码！"
            }
            let data = {
                static: false,
                uername: uername,
                tip:tip
            }
            res.send(data);
        }
    } else {
        //???
        console.log(pwd)
        res.send("请检查请求方式post或get与服务端是否一致");
    }
})
//验证码正确与否
app.use(express.static(__dirname));
app.listen(3000, function (err) {
    if (err) {
        console.info(err);
    } else {
        console.info("服务器开启成功。。。");
        console.log("监听端口为:http://127.0.0.1:3000");
    }
})

安装完后 node index.js即可运行,效果如下图

​

下图表示端口占用，或者服务已经在运行

​

 四、前端效果展示

1）展示

点击登录

​浏览器控制台输出

​

后端反馈与传输

​ 2）前端源码资源

        注意：JQuy.js,axios.js资源请自行加入，源码未给

        前端源码资源：https://pan.baidu.com/s/1vb0Yg7MerOAwb_vvMdv1KQ  

        链接：https://pan.baidu.com/s/1vb0Yg7MerOAwb_vvMdv1KQ 
        提取码：node

五、声明

        前端部分源码主题样式仅供学习参考需要，未经允许，不得商用。文章未经许可不得转载