（原）vue mutui 实现邮箱注册功能
程序员文章站
2022-07-08 14:47:21
...
一、效果
二、vue组件相关代码
2.1）vue图片验证码
<template>
<div>
<div class="setTop">
<div class="setBack" @click="back()"></div>
<div class="setTit">
Привязка e-mail
</div>
</div>
<div class="setItems">
<input type="text" focus class="search_input" placeholder="Новый e-mail" v-model="newMemberEmail" value="1" @focus="search_site"/>
<div class="searchIcon clear" v-if="newMemberEmail" @click="clearInput('newMemberEmail')"></div>
</div>
<div class="setItems">
<input type="text" focus class="search_code" placeholder="Код отправленный на e-mail" v-model="mailCode" />
<div class="send_code" @click="sendMailCode" >Выслать <br> мне код</div>
</div>
<div class="setItems">
<!--图片验证码-->
<div class="form-group">
<input type="text" focus class="img_code" placeholder="Проверочный код" v-model="verCode" />
<div class="login_code" @click="refreshCode">
<!--验证码组件-->
<Identify :identifyCode="identifyCode" ></Identify>
</div>
</div>
</div>
<div class="changeExitBtn" @click="setNewMemberEmail">
Подтвердить
</div>
</div>
</template>
2.2）js
import Identify from '@/components/identify/identify'
import mui from 'static/js/mui'
export default {
components:{Identify},
data(){
return{
newMemberEmail:'',
code:'',
imgcode:'',
imgcodeImg: require('./img/imgCode.png'),
verCode: "",//图片验证码输入框
identifyCode:'',
identifyCodes:'1234567890',
oldMemberEmail:this.$cookies.get("memberEmail") ? null : '',
newMemberEmail:this.$cookies.get("regMail") ? null : '',
mailCode:'',
memberId:this.$cookies.get("memberId"),
}
},
mounted(){
this.init();
},
methods:{
//发送邮箱验证码
sendMailCode(){
mui.init();
if ( this.newMemberEmail =='' || this.newMemberEmail == null) {
mui.toast('请输入新邮箱账号！')
return;
}
/* if(this.verCode!=this.identifyCode){
mui.toast('请正确输入验证码')
return;
}
*/
this.$axios.post("/wapMy/userSendNewMailCode?memberId="+this.memberId+"&newMemberEmail="+this.newMemberEmail).then(res => {
if (res.data.data.mailInfo!=null && res.data.data.mailInfo.exception=='Invalid Addresses') {
mui.toast('邮箱：[ ' + this.newMemberEmail + ' ] 已存在，请更换新邮箱！');
} else {
mui.toast('邮箱：[ ' + this.newMemberEmail + ' ] 获取验证码成功！');
this.$router.push({path: "/mineSet"});
this.$cookies.set("regMail", res.data.data.mailInfo.newMemberEmail);
this.newMemberEmail = res.data.data.mailInfo.newMemberEmail;
this.mailCode = res.data.data.mailInfo.validEmail;
}
}).catch(err => {
//console.log(err);
mui.toast('邮箱：[ ' + this.newMemberEmail +' ] 注册失败，请刷新后，重新注册！');
});
},
//绑定新邮箱账号
setNewMemberEmail(){
mui.init();
if ( this.newMemberEmail =='' || this.newMemberEmail == null) {
mui.toast('请输入新邮箱账号！')
return;
}
/*if(this.verCode!=this.identifyCode){
mui.toast('请正确输入验证码')
return;
} */
this.$axios.post("/wapMy/userSetNewMemberEmail?memberId="+this.memberId+"&newMemberEmail="+this.newMemberEmail).then(res => {
if (res.data.data.mailInfo!=null && res.data.data.mailInfo.exception=='Invalid Addresses') {
mui.toast('邮箱：[ ' + this.newMemberEmail + ' ] 已存在，请更换新邮箱！');
} else {
mui.toast('邮箱：[ ' + this.newMemberEmail + ' ] 绑定成功！');
this.$router.push({path: "/mineSet"});
this.$cookies.set("regMail", res.data.data.mailInfo.newMemberEmail);
// this.newMemberEmail = res.data.data.mailInfo.newMemberEmail;
this.mailCode = res.data.data.mailInfo.validEmail;
console.log(res.data.data.mailInfo.newMemberEmail);
}
}).catch(err => {
// console.log(err);
mui.toast('邮箱：[ ' + this.newMemberEmail +' ] 绑定失败，请刷新后，重新绑定！');
});
},
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
refreshCode() {
this.identifyCode = "";
this.makeCode(this.identifyCodes, 4);
},
makeCode(o, l) {
for (let i = 0; i < l; i++) {
this.identifyCode += this.identifyCodes[
this.randomNum(0, this.identifyCodes.length)
];
}
}
},
created() {
this.refreshCode();
},
mounted() {
this.identifyCode = "";
this.makeCode(this.identifyCodes, 4);
},
}三、后台springboot 发送邮件功能相关配置
#====================邮箱服务器地址===========
#*************注意：修改一下邮箱相关内容时，要同步修改SysConfigModel.java文件的相关内容
##QQ smtp.qq.com
##sina smtp.sina.cn
##aliyun smtp.aliyun.com
##163 smtp.163.com
#126邮箱SMTP服务器地址:smtp.126.com,端口号:465或者994
#163邮箱SMTP服务器地址:smtp.163.com,端口号:465或者994
#yeah邮箱SMTP服务器地址:smtp.yeah.net,端口号:465或者994
##发送方
spring.mail.host=smtp.qq.com
##邮件地址
aaa@qq.com
#用户名
aaa@qq.com
##客户端授权码（不是邮箱密码，这个在qq邮箱设置里面自动生成的）
spring.mail.password=fewndzzvustgijbf
#端口号465或587
spring.properties.mail.smtp.port: 25
##编码格式
spring.mail.default-encoding=UTF-8
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.starttls.required=true
spring.mail.properties.mail.smtp.ssl.enable=true
配置SysConfigModel.java文件
//----------------邮箱配置文件-------------------------------------------
//发送方邮件的发送地址
@Value("${spring.mail.host:'smtp.qq.com'}")
public static String sendMailHost="smtp.qq.com";
@Value("${spring.mail.from:'aaa@qq.com'}")
public static String sendMailFrom="aaa@qq.com";
//发送方发送邮件的账号
@Value("${spring.mail.username:'aaa@qq.com'}")
public static String sendMailUsername="aaa@qq.com";
//发送方发送邮件的客户端授权码
@Value("${pring.mail.password:'fewndzzvustgijbf'}")
public static String sendMailPassword="fewndzzvustgijbf";
//发送方发送邮件的端口
@Value("${spring.properties.mail.smtp.port:'25'}")
public static String sendMailPort="25";
四、后台springboot 发送邮箱功能代码
@SysLogAspectValue(
describtion = "wap - 我的 - 获取新邮箱账号",
logType = "2",
type="POST",
url="/wapMy/userSendNewMailCode",
table="super_member",
params = "jsonStr",
method = "POST"
)
@ApiOperation(value = "wap - 我的 - 获取新邮箱账号", notes = "/wapMy/userSendNewMailCode")
@CrossOrigin
@PostMapping(value = "/userSendNewMailCode")
@ResponseBody
public Object userSendNewMailCode(@RequestParam String memberId , @RequestParam String newMemberEmail ){
Result resultMemberSet = new Result();
Map<String,Object> mapList = new HashMap<String, Object>();
try {
mapList.put("mailInfo", wapMyService.userSendNewMailCode(memberId , newMemberEmail));
resultMemberSet.setState(0);
resultMemberSet.setData( mapList );
resultMemberSet.setMsg("获取列表成功！");
return resultMemberSet;
} catch (Exception e) {
resultMemberSet.setState(1);
resultMemberSet.setData(OperationCode.OPERATION_NO);
resultMemberSet.setMsg(e.getMessage());
e.printStackTrace();
return resultMemberSet;
}
} @Override
public Object userSendNewMailCode(String memberId , String newMemberEmail) {
Map<String , Object> mapMemberInfo = new HashMap<String, Object>();
if(!"".equals(memberId) && !"".equals(newMemberEmail)) {
Member member = memberService.getOnlyOneMemberInfoByMemberId(memberId);
String validEmail = IdGenerate.random2FiveId();
//邮箱登录注册后，可绑定更改新邮箱
if (member!=null && newMemberEmail.equals(member.getMemberEmail())) {
try {
SendMailUtils.sendSimpleMail(newMemberEmail,"主题：邮箱注册","内容：新邮箱账号：[ "+newMemberEmail+" ]未注册，可放心使用！ \n 请将数字验证码：[ " + validEmail +" ] 填入邮箱***中！");
} catch (Exception e) {
e.printStackTrace();
mapMemberInfo.put("exception", e.getMessage());
}
//邮箱未登录注册后，任意邮箱可绑定
}else if(member!=null && !newMemberEmail.equals(member.getMemberEmail())){
try {
SendMailUtils.sendSimpleMail(newMemberEmail,"主题：邮箱注册","内容：邮箱账号：[ "+newMemberEmail+" ]未注册，可放心使用！ \n 请将数字验证码：[ " + validEmail +" ] 填入邮箱***中！");
} catch (Exception e) {
e.printStackTrace();
mapMemberInfo.put("exception", e.getMessage());
}
}
List<Object> memberInfo = new ArrayList<Object>();
mapMemberInfo.put("newMemberEmail", newMemberEmail);
mapMemberInfo.put("validEmail", validEmail);
memberInfo.add(mapMemberInfo);
return mapMemberInfo;
}
return mapMemberInfo;
}
以上是自己整理的，并测试过，可以直接用
-------------------------------------------------- -------------------------------------------------- ------------
文章中，有问题，可以在评论区评论，一起探讨编程中奥秘！
-------------------------------------------------- -------------------------------------------------- ------------
来都来了，代码看都看了，那就留个言呗，可以互动下！
-------------------------------------------------- ------------------------------------------------- ------------