思路：
用短信验证码登录一样的思路，只是多了一个密码验证 ：juejin.cn/post/699203…
记得配置页面跳转路由
{
path: '/register',
name: "Register",
component: () => import("../components/my/Register.vue"),
},
前端：
<template>
<div class="register">
<header>
<Header>
<template #tab></template>
<template #middle>
<div class="middle">注册</div>
</template>
<template #login>
<div></div>
</template>
</Header>
</header>
<section>
<div class="section">
<ul>
<li class="tels">
<input type="tel" class="tel" placeholder="请输入手机号" v-model="tel" />
</li>
<li class="codes">
<input type="tel" class="code" placeholder="请输入图形验证码" v-model="code" />
<button class="btnCode" @click="getCode" :disabled="disableds">{{btnText}}</button>
</li>
<li class="pwds">
<input type="password" class="pwd" placeholder="设置密码" v-model="pwd" />
</li>
<li class="register" @click="goRegister">
<button>注册</button>
</li>
</ul>
</div>
</section>
<Tabber></Tabber>
</div>
</template>
<script>
import Tabber from "@/components/common/Tabbar.vue";
import Header from "./Header.vue";
import { Toast } from "mint-ui";
// 引入封装好的 require
import http from "@/common/api/request.js";
export default {
components: {
Header,
Tabber,
},
data() {
return {
// 用户输入的登录信息
tel: "",
pwd: "",
disableds: false,
code: "",
sendCode: "",
btnText: "获取短信验证码",
btnTime: 6,
rules: {
// 手机号校验规则
tel: {
rule: /^1[3589]\d{9}$/,
msg: "手机号不能为空，并以13 15 18 19开头的11位数字",
},
code: {
rule: /\d{4}$/,
msg: "验证码不能为空 并且为4位数字",
},
pwd: {
rule: /\w{6,12}$/,
msg: "密码不能为空 长度为6-12位",
},
},
};
},
methods: {
userLogin() {
this.$router.push("/userLogin");
},
// 获取短信验证码
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);
},
// 判断如果输入的短信验证码 和 后端返回的 短信验证码一致 点击登录按钮 进行登录跳转
async goRegister() {
console.log(this.code.length);
if (this.validate("tel")) {
if (!this.validate("code")) return;
if (!this.validate("pwd")) return;
if (this.code.length > 0 && this.code == this.sendCode) {
// 发送登录请求 验证手机号是否已注册 如果没有注册就注册 如果已注册就查询出来
let res = await http.$axios({
url: "/api/register",
method: "POST",
data: {
tel: this.tel,
pwd: this.pwd,
},
});
console.log(res.data);
Toast(res.msg);
} 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;
},
},
};
</script>
<style lang="less" scoped>
.register {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.middle {
font-size: 0.48rem;
}
section {
flex: 1;
background-color: #f5f5f5;
box-sizing: border-box;
.section {
margin: 0.533333rem 0.8rem;
}
}
ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
li {
width: 100%;
margin-bottom: 0.4rem;
}
input {
padding-left: 0.266667rem;
border-radius: 0.133333rem;
border: 0;
outline: none;
border: 1px solid #ccc;
box-sizing: border-box;
}
.tels,
.pwds {
.tel,
.pwd {
width: 100%;
height: 0.96rem;
}
}
.codes {
display: flex;
justify-content: space-between;
width: 100%;
.code {
width: 60%;
height: 0.96rem;
border-right: none;
border-radius: 0.133333rem 0 0 0.133333rem;
}
.btnCode {
width: 40%;
background-color: #13acf3;
outline: 0;
border: none;
border-radius: 0 0.133333rem 0.133333rem 0;
color: #f5f5f5;
}
}
.register {
width: 100%;
height: 0.96rem;
text-align: center;
button {
height: 0.96rem;
background-color: #13acf3;
outline: 0;
border: none;
border-radius: 0.133333rem;
color: #f5f5f5;
}
}
.mode {
display: flex;
justify-content: space-between;
font-size: 0.373333rem;
}
}
</style>
后端接口：
// 手机号注册接口 /api/register
router.post('/api/register', function (req, res, next) {
// 前端传递过来的手机号
let params = {
tel: req.body.tel,
pwd: req.body.pwd
}
// 先查询前端传递过来的手机号是否已经存在，如果存在就不做插入，如果不存在就插入到表中
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]
}
})
})
})
}
})
})
