思路： 前端：
-
点击获取短信验证码按钮
1.1 前端校验 手机号是否正确
1.2 点击的按钮文案更换成 倒计时按钮，倒计时完成后，回复原来的模样
1.3 向后端发送请求：传递手机号，操作后端去发送验证码 返回给前端
1.4 前端获取到验证码后，点击登录的时候进行验证码校验，同时校验手机号
1.5 校验通过后，继续向后端发送请求：把手机号注册到用户表中
1.6 后端先查一下这个手机号 如果没有注册，就注册到用户表中，如果已经存在就不做处理
后端：
-
接收前端传递过来的手机号
-
根据短信sdk 发送短信验证码 :github.com/qcloudsms/q…
-
随机4位短信验证码： let params = [Math.floor(Math.random() * 9000 + 1000) + ""];
3.1 这里要注意：res 会有多个导致冲突，自己修改 成 ress 避免冲突，不然排查很久
-
前端手机号校验通过后，后端对手机号进行注册操作
4.1 后端先查一下这个手机号 如果没有注册，就注册到用户表中，新insert语句，紧接着又执行查询语句(尤为重要)，确保插入的手机号能查询到，说明已经正确插入，然后后端返回数据给前端处理
一 前端： 获取短信验证码 前端处理 Login.vue
// 获取短信验证码
async getCode() {
//前端 校验手机号
if (!this.validate("tel")) return;
// 向后端发送请求
let res = await http.$axios({
url: "/api/code",
method: "POST",
data: {
tel: this.tel,
},
});
console.log(res);
this.sendCode = res.data;
console.log(this.sendCode);
// 开启定时器
let time = setInterval(() => {
// 校验通过后：让按钮不可继续点击
this.disableds = true;
this.btnTime--;
this.btnText = `重新发送(${this.btnTime})`;
if (this.btnTime <= 0) {
clearInterval(time);
this.btnTime = 6;
this.btnText = "获取短信验证码";
this.disableds = false;
}
}, 1000);
},
一 后端： 发送短信验证码 接口 server文件夹下的 index.js
注意事项：callback回掉函数 默认res 会有多个导致冲突，自己修改 成 ress 避免冲突，不然排查很久
// 发送短信验证码接口（只是发送一个验证码给前端校验）
router.post('/api/code', function (req, res, next) {
// 短信应用SDK AppID
var appid = 1400187558; // SDK AppID是1400开头
// 短信应用SDK AppKey
var appkey = "dc9dc3391896235ddc2325685047edc7";
// 需要发送短信的手机号码 ==》 接收前端过来的数据
var phoneNumbers = [req.body.tel];
// 短信模板ID，需要在短信应用中申请
var templateId = 285590; // NOTE: 这里的模板ID`7839`只是一个示例，真实的模板ID需要在短信控制台中申请
// 签名
var smsSign = "三人行慕课网"; // NOTE: 这里的签名只是示例，请使用真实的已申请的签名, 签名参数使用的是`签名内容`，而不是`签名ID`
// 实例化QcloudSms
var qcloudsms = QcloudSms(appid, appkey);
// 设置请求回调处理, 这里只是演示，用户需要自定义相应处理回调
function callback(err, ress, resData) {
if (err) {
console.log("err: ", err);
} else {
res.send({
code: 200,
data: {
success: true,
data: ress.req.body.params[0]
}
})
// console.log("request data: ", ress);
}
}
// 指定模板ID单发短信 params 就是往手机上发送的短信验证码
var ssender = qcloudsms.SmsSingleSender();
let params = [Math.floor(Math.random() * 9000 + 1000) + ""];
ssender.sendWithParam(86, phoneNumbers[0], templateId,
params, smsSign, "", "", callback); // 签名参数不能为空串
});
二 前端： 获取到短信验证码后 点击登录按钮，前端登录发送请求 Login.vue
// 判断如果输入的短信验证码 和 后端返回的 短信验证码一致 点击登录按钮 进行登录跳转
async goLogin() {
console.log(this.code.length);
if (this.validate("tel")) {
if (this.code.length > 0 && this.code == this.sendCode) {
// 发送登录请求
let res = await http.$axios({
url: "/api/logins",
method: "POST",
data: {
tel: this.tel,
},
});
console.log(res.data);
Toast("登录成功");
} else {
Toast("请输入正确验证码");
}
}
},
validate(key) {
let bool = true;
if (!this.rules[key].rule.test(this[key])) {
Toast(this.rules[key].msg);
bool = false;
return false;
}
return bool;
},
},
};
二 后端：短信验证码登录接口 /api/logins 获取到短信验证码后 点击登录 校验手机号是否已存在数据库，如果存在就查询一下，如果不存在就插入到数据库中，插入完成紧接着要执行查询语句。 server文件夹下的 index.js
注意事项：后端先查一下这个手机号 如果没有注册，就注册到用户表中，
用insert语句，紧接着又执行查询语句(尤为重要)，确保插入的手机号能查询到，
最后，后端返回数据给前端处理
// 短信验证码登录接口 /api/logins
router.post('/api/logins', function (req, res, next) {
// 前端传递过来的手机号
let params = {
tel: req.body.tel
}
// 先查询前端传递过来的手机号是否已经存在，如果存在就不做插入，如果不存在就插入到表中
connection.query(user.queuryTel(params), function (e, r) {
console.log(r);
if (e) throw e
// 手机号已存在 直接返回数据
if (r.length > 0) {
res.send({
code: 200,
data: {
success: true,
msg: "登录成功",
data: r[0]
}
})
} else {
// 手机号不存在 就插入手机号
connection.query(user.insertTel(params), function (e, r) {
// 再查一次 插入的手机号
connection.query(user.queuryTel(params), function (e, r) {
console.log(r, '插入手机号查询成功');
if (e) throw e
res.send({
code: 200,
data: {
success: true,
msg: "登录成功",
data: r[0]
}
})
})
})
}
})
})
