当前位置 博文首页 > Jet_Lover的博客：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
})
})
}
}
到这里功能基本上就能实现了，对了为了方便我还加了个上传功能，当然如果你不想使用也可以删掉，然后关于 一点特别重要一定要勾上看下图：
