vue生成验证码,vue登录验证码插件
本文主要介绍了某视频剪辑软件简易注册页面发送验证码功能的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
1.效果展示2.增强版验证码及邮件推送管理（见以后的博客)3.大致思路4.前期准备5.前端代码6.后端
1. 效果展示
2. 增强版验证码及邮件推送管理（见以后的博客）
3. 大致思路
用户角度分析一下注册时候的步骤：
填写自己的邮箱号
点击"发送验证码"按钮
邮箱中收到验证码
填写其余注册信息并填写验证码
注册成功！
系统设计者角度分析一下步骤：
系统随机生成六位数
根据用户提供的邮箱号将验证码发送到其邮箱
根据用户提供的信息，进行验证码的校验
如果校验成功，将数据进行录入，回显用户注册成功！
4. 前期准备
qq邮箱中开启POP3/SMTP服务
这里可以参考
https://www.jb51.net/qq/321090.html
5. 前端代码
模板
div class=" rg _ layout "
div class=rg_left
p新用户注册/p
普瑟寄存器/p
/div
div class=rg_center
div class=rg_form
div style= margin:50px 0；/div
El-form ref= form :model= form :rules= rules label-width= 80px
El-form-item label= Email prop= Email
el-col :span=15
埃尔-输入占位符=请输入邮箱号v-model=form .电子邮件/El-输入
/el-col
el-col :span=9
El-button type= success plain @ click=发送电子邮件发送邮件验证/el-button
/el-col
/El-表单-项目
El-表单-项目标签=用户名
el-col :span=20
埃尔-输入占位符=请输入用户名v-model=形式。用户名/El-输入
/el-col
/El-表单-项目
El-表单-项目标签=密码
埃尔-输入占位符=请输入密码v-model=形式。密码/El-输入
/El-表单-项目
El-表单-项目标签=性别
el-col :span=5
El-radio v-model= form。“单选”标签=“1”男/el-radio
/el-col
el-col :span=3
El-radio v-model= form。“单选”标签=“2”女/el-radio
/el-col
/El-表单-项目
El-表单-项目标签=出生日期
el-col :span=15
El-date-picker type= date placeholder=选择日期v-model=形式。date style= width:100%；/El-日期选择器
/el-col
/El-表单-项目
El-表单-项目标签=验证码
el-col :span=15
埃尔输入
type=text
占位符=验证码将会发送到您的邮箱
v-model=form.text
on input= value=value。替换(/\ D/g，)
maxlength=6
显示字数限制
/el-input
/el-col
/El-表单-项目
埃尔-表单-项目
el-col :span=20
El-button type= primary @ click= on submit 立即注册/el-button
/el-col
/El-表单-项目
/el格式
/div
/div
div class=rg_right
p已有账号？
El-link icon= El-icon-user-solid type= primary @ click= log in _ ASD 立刻登陆/el-link
/p
/div
/div
/模板
脚本
从" axios "导入axios
导出默认值{
已安装(){
这个. store.state.yesOrNo=false
},
姓名：注册，
数据：函数(){
返回{
表单：{
电子邮件： ,
用户名： ,
密码： ,
收音机："1",
日期： ,
文本：""
},
规则：{
电子邮件：[{必填：真，消息： 请输入邮箱，触发器：模糊 }]
},
邮件：""
}
},
方法：{
login_asd(){
这个1000美元路由器。替换({ path:/log in })；
},
open1() {
这个消息({
显示关闭：没错，
消息：this.msg，
类型："警告"
});
},
open2() {
这个消息({
显示关闭：没错，
消息：this.msg，
类型："成功"
});
},
open3() {
这个消息({
显示关闭：没错，
消息：this.msg，
类型："错误"
});
},
sendEmail() {
这个refs.form.validate((有效)={
如果（有效){
让这个=这个
axios.post(这个100美元商店。状态。 URL :8412/user/sendSignUpCode？email= _this.form.Email，
).接住(函数（错误){
_this.msg=邮箱格式不正确!
_this.open1()
}).然后（函数（响应){
if (response.data.code===200) {
_this.msg=response.data.msg
_this.open2()
}否则{
_this.msg=response.data.msg
_this.open3()
}
})
}
})
},
onSubmit(){
这个refs.form.validate((有效)={
如果（有效){
让这个=这个
让终端监督程式（Terminal Monitor Program的缩写）
if(this.form.radio===1){
tmp=男
}否则{
tmp=女
}
axios.post(这个100美元商店。状态。网址:8412/用户/用户注册？code= _this.form.text，
{
邮箱：this.form.Email，
用户名：this.form .用户名，
密码：this.form.password，
性：tmp，
生日：this.form.date
}
).接住(函数（错误){
_this.msg=邮箱格式有问题!
_this.open1()
}).然后（函数（响应){
if (response.data.code===200) {
_this.msg=response.data.msg
_this.open2()
_这个1000美元路由器。替换({ path:/log in })；
}否则{
_this.msg=response.data.msg
_this.open3()
}
})
}
})
}
}
}
/脚本
风格
* {
边距：0px
填充：0px
框大小：边框-框；
}
正文{
背景-图片：网址(https://img-blog。csdnimg。BFA 7 fa 8 e 11。jpg)；
背景-重复：不重复；
背景尺寸：100%;
背景-位置：0px-50px；
}。rg _布局{
宽度：900像素
高度：500像素
边框：5px纯色#咿咿
背景色：白色；
不透明度：0.8;
/*让差异水平居中*/
边距：自动；
边距-顶部：100像素
}。rg _左{
浮动：左；
保证金：15px
宽度：20%;
}。rg_left p:第一个孩子{
颜色：# FFD026
字体大小：20px
}。rg_left p:最后一个孩子{
颜色：# A6A6A6
}。rg_center {
/*边框：1px纯红；*/
浮动：左；
宽度：450像素
/*边距：15px*/
}。rg_right {
浮动：对；
保证金：15px
}。rg_right p:第一个孩子{
字号：15px
}。rg _右平安险
颜色：粉色；
}
/风格
6. 后端
使用的框架是跳羚
主要的依赖
！-雷迪斯-
属国
groupIdorg.springframework.boot/groupId
artifact id spring-boot-starter-data-redis/artifact id
版本2 .5 .2/版本
/依赖关系
！邮件
属国
groupIdjavax.mail/groupId
项目的名称邮件/artifactId
版本1 .4 .7/版本
/依赖关系
正则校验邮箱工具类
包com。举例。韩。util
导入Java。util。正则表达式。matcher
导入Java。util。正则表达式。图案；
公共类检查邮件{
公共静态布尔检查邮件（字符串邮件){
模式模式=模式。编译( \ \ w([-.]\\w )*@\\w ([-.]\ \ w)* \ \ n .\\w ([-.]\ \ w)* )；
//\w @(\w .) [a-z]{2，3}
匹配器matcher=模式。matcher(邮件)；
返回火柴人。匹配()；
}
}
Redis的设置和得到工具类
包com。举例。韩。util
导入org。spring框架。豆子。工厂。注释。自动连线；
导入org。spring框架。数据。雷迪斯。核心。stringdistemplate
导入org。spring框架。刻板印象。组件；
导入Java。util。并发。时间单位；
@组件
公共类再版{
@自动连线
私有string distemplate string distemplate；
public void setRedisKey(String key，String value，long num) {
“设置redis开始！”);
stringRedisTemplate.opsForValue().设置(键，值，数字，时间单位。秒);
系统。出去。println(stringdistemplate。价值得运营().get(key))；
}
公共字符串getRedisValue(字符串键){
如果(!stringdistemplate。haskey(key)){
返回"无";
}
返回stringRedisTemplate.opsForValue().获取(键);
}
}
核心服务层代码
/**
* 验证邮箱是否重复
* @param电子邮件邮箱号
*/
@覆盖
公共结果返回checkEmailRepeat(字符串电子邮件)抛出MyException {
如果(!CheckMail.checkMail(电子邮件)){
抛出新的MyException(400，’邮件格式错误);
}
如果(用户存储库。重复检查电子邮件(电子邮件)){
返回resultreturnutil。失败(USER _ EMAIL _ REPEATED)；
}
返回resultreturnutil。成功(用户_邮件_未_重复，邮件)；
}
/**
* 发送注册验证码
* @param toEamil收件人邮箱
* @返回
*/
@覆盖
公共结果返回sendSignUpCode(字符串到Amil){
//asdasd
SimpleMailMessage SimpleMailMessage=new SimpleMailMessage()；
简单邮件消息。setto(给eamil)；
简单邮件消息。set from(来自电子邮件)；
simpleMailMessage.setSubject(您的注册验证码来了);
Random r=new Random()；
int rate=r . nextint(899999)100000；
redistutil。setrediskey(至eamil 阎正，率 ，60 * 5)；//先存入雷迪斯，关键为发送的邮箱号
字符串内容=
你好，\n \t您的验证码是：\n 速率；
simpleMailMessage.setText(内容);
尝试{
javamail发件人。发送(简单邮件消息)；
} catch(异常e) {
返回ResultReturnUtil.fail(发送失败!);
}
返回ResultReturnUtil.success(发送成功!，toe Amil)；
}
/**
* 用户注册
* @param userSignUpVO注册所需要的用户基本信息
* @param代码注册发到邮箱的验证码
*/
@覆盖
公共结果返回UserSignUp(UserSignUpVO UserSignUpVO，int code)抛出MyException {
如果(!检查邮件。查收邮件(usersignupvo。getemail()){//这种是邮箱格式错误的时候
抛出新的MyException(400，’邮件格式错误);
}
如果(用户存储库。重复检查电子邮件(usersignupvo。getemail()){//邮箱重复注册的时候
返回resultreturnutil。失败(USER _ EMAIL _ REPEATED)；
}
字符串redis code=redis util。getredisvalue(usersignupvo。 getemail()阎正);//将密码与存储的进行比对
如果(!redis代码。等于(代码)){
返回ResultReturnUtil.fail(错误_验证_代码);
}
user do user=new user do()；
用户。设置电子邮件(usersignupvo。getemail())；
用户。设置用户名(usersignupvo。get username())；
用户。设置密码(usersignupvo。get password())；
用户。setsex(usersignupvo。getsex())；
用户。设置生日(usersignupvo。获取生日())；
如果(用户存储库。insertuser(用户)){
返回resultreturnutil。成功(用户_注册_成功，用户。getemail())；
}
返回resultreturnutil。fail(用户注册失败)；
}
到此这篇关于某视频剪辑软件简易注册页面发送验证码功能的实现示例的文章就介绍到这了，更多相关某视频剪辑软件注册页面发送验证码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。