2024年最全vue实现手机验证码登录（基于娱乐系统项目），2024前端面经

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

首先要找短信服务商如：梦网、云信使、互亿无线等等申请短信发送接口。

网站实现流程如下：

第一步：用户注册时输入手机号，网站首先要通过JS或者ajax+php验证这个号码是不是正确的手机号。

第二步：用户点击发送手机验证码，通过ajax把手机号传到php，这时php生成一个随机的验证码保存在session中，然后通过短信接口把这个验证码发送到这个手机号中。

第三步：用户输入手机收到的验证码注册。网站用session中的验证码和用户输入的验证码比较。

---

平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候,

1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击

2. 当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了

为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,

https://blog.csdn.net/qq_39581763/article/details/81739428

设置反向代理

https://blog.csdn.net/weixin_43067157/article/details/82079792?utm_source=blogxgwz0

devServer: {

// 设置代理

proxy: {

‘/v1’: {

target: ‘http://localhost:8080/’, // 域名

ws: true, // 是否启用websockets

changOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

pathRewrite: {

‘^/v1’: ‘/’

}

}

}

},

---

element ui 的表单验证

H5学习之路-手机短信验证码的实现

https://blog.csdn.net/qiyongkang520/article/details/55007040

vue 实现通过手机发送验证码注册

https://www.jianshu.com/p/3a96636e7242

vue做一个有验证码的登陆页面和注册页面，敲回车登陆

https://blog.csdn.net/hani_wen/article/details/81545319

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

https://blog.csdn.net/qq_41894865/article/details/80476736

一、element ui 表单验证源码

手机注册

<span v-show=“sendAuthCode” class=“auth_text auth_text_blue” @click=“getAuthCode”>获取验证码

{{auth_time}}

秒之后重新发送验证码

<el-button type=“success” class=“submitBtn” round @click.native.prevent=“submit” :loading=“logining”>

注册

---

已经有账号，马上去

30s倒计时

<button class=“close_tel” v-show=“show” @click=“getCode”>获取验证码

重新获取({{count}}s)

getCode() {

const TIME_COUNT = 30

if (!this.timer) {

this.count = TIME_COUNT

this.show = false

this.timer = setInterval(() => {

if (this.count > 0 && this.count <= TIME_COUNT) {

this.count–

} else {

this.show = true

clearInterval(this.timer)

this.timer = null

}

}, 1000)

}

},

二、自己写

欢迎乘坐

G5XXXX

航班，

重庆-贵阳

为了给您更好的服务，请填写以下信息：

<button class=“close_tel” v-show=“show” @click=“getCode”>获取验证码

重新获取({{count}}s)

娱乐系统安全须知

<cube-button class=“subLogin” @click=“submit”>登录

在线