Node.js之发送手机验证码简易版功能实现

先看成果这里已经成功了。

接下来先是主页部分

<form id="myform">
    请输入手机号: <input type="text" id="phoneNum" name="phone">
    <button type="button" onclick="sendCode()">获取验证码</button>
    <br>
    验证码: <input type="text" id="code" name="code">
    <br>
    <input type="file" name="myfile">
    <br>
    <button type="button" onclick="verifyCode()">登录</button>
</form>

JS代码

    function sendCode() {
        let phoneNum = $('#phoneNum').val()
        // 这里正则验证手机格式
        $.ajax({
            url:'/sendCode',
            data:{phoneNum},
            type:'post',
            success(respData){
                // 1.验证码发送成功
                respData.data ? alert('验证码已经发送') : alert('手机填写错误')// 2.验证码发送失败
                console.log(respData)
            }
        })
    }
    function verifyCode() {
        let phone = $('#phoneNum').val()
        let code = $('#code').val()
        $.ajax({
            url:'/verifyCode',    
            type:'post',
            data:{phone,code},
            // processData: false,   // jQuery不要去处理发送的数据
            // contentType: false,   // jQuery不要去设置Content-Type请求头
            success(respData){
                console.log(respData)
                if(respData.data ){
                    alert('登录成功')
                    location.href = 'index.html'
                }else {
                    alert('登录失败')
                    console.log(respData.yuanyin)
                }
            }
        })
    }

关于CSS样式每个人有不同的风格这里就不写了
接下来是链接接口app.js ，需下载的包都写在了后面

const express = require('express')         //服务器  npm install express -D
const favicon = require('serve-favicon')   // 小图标 npm install serve-favicon -D
const logger = require('morgan')           // 日志 npm install morgan -D
const bodyParser = require('body-parser')  //  npm install body-parser -D
const smsRouter = require('./router/smsRouter')    //路由文件下的名字
let session = require(`express-session`)   //npm install express-session -D
const  myapp=express()
// //配置日志
myapp.use(logger('dev'))
myapp.use(session({
    name:'yang',
    secret:'123',
    cookie:{maxAge:600000},
    saveUninitialized:true,
    resave:true,
    rolling:true
}))

//配置服务器对象的post解析
myapp.use(bodyParser.urlencoded({extended:false}))
myapp.use(bodyParser.json())

// 服务器对象配置路由
myapp.use(smsRouter)


// 路由之后静态资源之前配置ejs
myapp.set('view',`${__dirname}/src/view`)
myapp.set(`view engine`,`ejs`)//需要告诉express那个写文件是ejs

//配置express的静态资源文件路径
myapp.use(express.static(__dirname+'/src')) //所有静态资源都到src里面去找
myapp.use(favicon(__dirname+'/src/images/p1.jpg'))  //小图标

myapp.listen(8888,()=>{
    console.log ("这是我的第十个服务器")
})

接下来是配置路由

const EXPRESS = require(`express`)
let smsCtrl = require('../controller/smsCtrl')

const ROUTER = EXPRESS.Router()

ROUTER.post('/sendCode',smsCtrl.send)
ROUTER.post('/verifyCode',smsCtrl.verify)




module.exports = ROUTER

配置controller

let sms = require('leancloud-storage')

sms.init({
    appId:'？？？',
    appKey:'？？？',
    serverURLs:'？？？'
})   //这些在官网leanCloud里面能找到，具体位置看下面的图片
module.exports={
    send(req,resp){
        let {phoneNum} = req.body;
        console.log(phoneNum)
        sms.Cloud.requestSmsCode({
            mobilePhoneNumber:phoneNum, //预设手机号，默认为手动输入
            name:'我爱你',//自己设置
            code:'验证码',
            ttl:1,//有效时间为一分钟
            sing:'web'
        }).then(res=>{
            resp.send({
                code:200,
                data:true
            })
        }).catch(err=>{
            console.log(err)
            resp.send({
                code:400,
                data:false
            })
        })
    },
    verify(req,resp){
        console.log(req.body)
        let {phone,code} = req.body
        sms.Cloud.verifySmsCode(code,phone).then(res=>{//匹配
            resp.send({
                code:200,
                data:true
            })
        }).catch(err=>{//不匹配
            resp.send({
                code:400,
                data:false,
                yuanyin:err
            })
        })
    }
}

到这里功能基本上就能实现了，对了为了方便我还加了个上传功能，当然如果你不想使用也可以删掉，然后关于 一点特别重要一定要勾上看下图：