Vue簡易注冊頁面+發(fā)送驗(yàn)證碼功能的實(shí)現(xiàn)示例
1. 效果展示
2. 增強(qiáng)版驗(yàn)證碼及郵件推送管理(見以后的博客)
3. 大致思路
用戶角度分析一下注冊時(shí)候的步驟:
- 填寫自己的郵箱號
- 點(diǎn)擊“發(fā)送驗(yàn)證碼”按鈕
- 郵箱中收到驗(yàn)證碼
- 填寫其余注冊信息并填寫驗(yàn)證碼
- 注冊成功!
系統(tǒng)設(shè)計(jì)者角度分析一下步驟:
- 系統(tǒng)隨機(jī)生成六位數(shù)
- 根據(jù)用戶提供的郵箱號將驗(yàn)證碼發(fā)送到其郵箱
- 根據(jù)用戶提供的信息,進(jìn)行驗(yàn)證碼的校驗(yàn)
- 如果校驗(yàn)成功,將數(shù)據(jù)進(jìn)行錄入,回顯用戶注冊成功!
4. 前期準(zhǔn)備
qq郵箱中開啟POP3/SMTP服務(wù)
這里可以參考
5. 前端代碼
<template> <div class="rg_layout"> <div class="rg_left"> <p>新用戶注冊</p> <p>USER REGISTER</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"> <el-input placeholder="請輸入郵箱號" v-model="form.Email"></el-input> </el-col> <el-col :span="9"> <el-button type="success" plain @click="sendEmail">發(fā)送郵件驗(yàn)證</el-button> </el-col> </el-form-item> <el-form-item label="用戶名"> <el-col :span="20"> <el-input placeholder="請輸入用戶名" v-model="form.username"></el-input> </el-col> </el-form-item> <el-form-item label="密碼"> <el-input placeholder="請輸入密碼" v-model="form.password"></el-input> </el-form-item> <el-form-item label="性別"> <el-col :span="5"> <el-radio v-model="form.radio" label="1">男</el-radio> </el-col> <el-col :span="3"> <el-radio v-model="form.radio" label="2">女</el-radio> </el-col> </el-form-item> <el-form-item label="出生日期"> <el-col :span="15"> <el-date-picker type="date" placeholder="選擇日期" v-model="form.date" style="width: 100%;"></el-date-picker> </el-col> </el-form-item> <el-form-item label="驗(yàn)證碼"> <el-col :span="15"> <el-input type="text" placeholder="驗(yàn)證碼將會發(fā)送到您的郵箱" v-model="form.text" oninput="value=value.replace(/\D/g,'')" maxlength="6" show-word-limit > </el-input> </el-col> </el-form-item> <el-form-item> <el-col :span="20"> <el-button type="primary" @click="onSubmit">立即注冊</el-button> </el-col> </el-form-item> </el-form> </div> </div> <div class="rg_right"> <p>已有賬號? <el-link icon="el-icon-user-solid" type="primary" @click="login_asd">立刻登陸</el-link> </p> </div> </div> </template> <script> import axios from "axios"; export default { mounted() { this.$store.state.yesOrNo = false }, name: "signUp", data: function () { return { form: { Email: '', username: "", password: "", radio: '1', date: '', text: '' }, rules: { Email: [{required: true, message: '請輸入郵箱', trigger: 'blur'}] }, msg: '' } }, methods: { login_asd(){ this.$router.replace({path: '/login'}); }, open1() { this.$message({ showClose: true, message: this.msg, type: 'warning' }); }, open2() { this.$message({ showClose: true, message: this.msg, type: 'success' }); }, open3() { this.$message({ showClose: true, message: this.msg, type: 'error' }); }, sendEmail() { this.$refs.form.validate((valid) => { if (valid) { let _this = this axios.post(this.$store.state.url+':8412/user/sendSignUpCode?email='+_this.form.Email, ).catch(function (error) { _this.msg = "郵箱格式不正確!" _this.open1() }).then(function (response) { if (response.data.code === 200) { _this.msg = response.data.msg _this.open2() } else { _this.msg = response.data.msg _this.open3() } }) } }) }, onSubmit(){ this.$refs.form.validate((valid) => { if (valid) { let _this = this; let tmp; if(this.form.radio === "1"){ tmp = '男' }else{ tmp = '女' } axios.post(this.$store.state.url+':8412/user/userSignUp?code='+_this.form.text, { email: this.form.Email, username: this.form.username, password: this.form.password, sex: tmp, birthday: this.form.date } ).catch(function (error) { _this.msg = "郵箱格式有問題!" _this.open1() }).then(function (response) { if (response.data.code === 200) { _this.msg = response.data.msg _this.open2() _this.$router.replace({path: '/login'}); } else { _this.msg = response.data.msg _this.open3() } }) } }) } } } </script> <style> * { margin: 0px; padding: 0px; box-sizing: border-box; } body { background-image: url(https://img-blog.csdnimg.cn/76110abf7fb84ee28c50bfbfa7fa8e11.jpg); background-repeat: no-repeat; background-size: 100%; background-position: 0px -50px; } .rg_layout { width: 900px; height: 500px; border: 5px solid #EEEEEE; background-color: white; opacity: 0.8; /*讓div水平居中*/ margin: auto; margin-top: 100px; } .rg_left { float: left; margin: 15px; width: 20%; } .rg_left > p:first-child { color: #FFD026; font-size: 20px; } .rg_left > p:last-child { color: #A6A6A6; } .rg_center { /*border: 1px solid red;*/ float: left; width: 450px; /*margin: 15px;*/ } .rg_right { float: right; margin: 15px; } .rg_right > p:first-child { font-size: 15px; } .rg_right p a { color: pink; } </style>
6. 后端
使用的框架是springboot
① 主要的依賴
<!-- redis --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> <version>2.5.2</version> </dependency> <!-- mail --> <dependency> <groupId>javax.mail</groupId> <artifactId>mail</artifactId> <version>1.4.7</version> </dependency>
② 正則校驗(yàn)郵箱工具類
package com.example.han.util; import java.util.regex.Matcher; import java.util.regex.Pattern; public class CheckMail { public static boolean checkMail(String mail){ Pattern pattern=Pattern.compile("\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*"); //\w+@(\w+.)+[a-z]{2,3} Matcher matcher=pattern.matcher(mail); return matcher.matches(); } }
③ Redis的set和get工具類
package com.example.han.util; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.StringRedisTemplate; import org.springframework.stereotype.Component; import java.util.concurrent.TimeUnit; @Component public class RedisUtil { @Autowired private StringRedisTemplate stringRedisTemplate; public void setRedisKey(String key, String value, long num) { System.out.println("set redis start!"); stringRedisTemplate.opsForValue().set(key,value,num,TimeUnit.SECONDS); System.out.println(stringRedisTemplate.opsForValue().get(key)); } public String getRedisValue(String key){ if(!stringRedisTemplate.hasKey(key)){ return "None"; } return stringRedisTemplate.opsForValue().get(key); } }
④ 核心service層代碼
/**
* 驗(yàn)證郵箱是否重復(fù)
* @param email 郵箱號
*/
@Override
public ResultReturn checkEmailRepeat(String email) throws MyException {
if (!CheckMail.checkMail(email)) {
throw new MyException(400, "郵件格式錯(cuò)誤");
}
if (userRepository.checkEmaillRepeated(email)) {
return ResultReturnUtil.fail(USER_EMAIL_REPEATED);
}
return ResultReturnUtil.success(USER_EMAIL_NOT_REPEATED, email);
}
/**
* 發(fā)送注冊驗(yàn)證碼
* @param toEamil 收件人郵箱
* @return
*/
@Override
public ResultReturn sendSignUpCode(String toEamil) {
//asdasd
SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
simpleMailMessage.setTo(toEamil);
simpleMailMessage.setFrom(fromEmail);
simpleMailMessage.setSubject("您的注冊驗(yàn)證碼來了");
Random r = new Random();
int rate = r.nextInt(899999) + 100000;
redisUtil.setRedisKey(toEamil + "YanZheng", rate + "", 60 * 5); //先存入redis,key為發(fā)送的郵箱號
String content =
"你好,\n" + "\t您的驗(yàn)證碼是:\n" + rate;
simpleMailMessage.setText(content);
try {
javaMailSender.send(simpleMailMessage);
} catch (Exception e) {
return ResultReturnUtil.fail("發(fā)送失敗!");
}
return ResultReturnUtil.success("發(fā)送成功!", toEamil);
}
/**
* 用戶注冊
* @param userSignUpVO 注冊所需要的用戶基本信息
* @param code 注冊發(fā)到郵箱的驗(yàn)證碼
*/
@Override
public ResultReturn UserSignUp(UserSignUpVO userSignUpVO, int code) throws MyException {
if (!CheckMail.checkMail(userSignUpVO.getEmail())) { //這種是郵箱格式錯(cuò)誤的時(shí)候
throw new MyException(400, "郵件格式錯(cuò)誤");
}
if (userRepository.checkEmaillRepeated(userSignUpVO.getEmail())) { //郵箱重復(fù)注冊的時(shí)候
return ResultReturnUtil.fail(USER_EMAIL_REPEATED);
}
String redisCode = redisUtil.getRedisValue(userSignUpVO.getEmail() + "YanZheng"); //將code與redis的進(jìn)行比對
if (!redisCode.equals("" + code)) {
return ResultReturnUtil.fail(WRONG_VERIFICATION_CODE);
}
UserDO user = new UserDO();
user.setEmail(userSignUpVO.getEmail());
user.setUsername(userSignUpVO.getUsername());
user.setPassword(userSignUpVO.getPassword());
user.setSex(userSignUpVO.getSex());
user.setBirthday(userSignUpVO.getBirthday());
if (userRepository.insertUser(user)) {
return ResultReturnUtil.success(USER_SIGNUP_SUCCESS, user.getEmail());
}
return ResultReturnUtil.fail(USER_SIGNUP_FAILED);
}
到此這篇關(guān)于Vue簡易注冊頁面+發(fā)送驗(yàn)證碼功能的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vue 注冊頁面發(fā)送驗(yàn)證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Vue3實(shí)現(xiàn)數(shù)字華容道游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue編寫一個(gè)數(shù)字華容道游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue-router中 query傳參和params傳參的使用和區(qū)別講解
這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動視圖原理
這篇文章主要介紹了淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動視圖原理,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02Vue 設(shè)置axios請求格式為form-data的操作步驟
今天小編就為大家分享一篇Vue 設(shè)置axios請求格式為form-data的操作步驟,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件詳細(xì)教程
在項(xiàng)目開發(fā)中需要使用vue實(shí)現(xiàn)tab頁簽切換功能,所以這里總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件的相關(guān)資料,需要的朋友可以參考下2023-11-11HBuilder導(dǎo)入vue項(xiàng)目并通過域名訪問的過程詳解
這篇文章主要介紹了HBuilder導(dǎo)入vue項(xiàng)目并通過域名訪問,一般情況下運(yùn)行vue項(xiàng)目需要安裝node.js,通過npm命令來安裝vue組件和運(yùn)行vue項(xiàng)目,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09