springboot+vue实现邮箱登录
导入依赖<!--邮箱--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId></dependency>配置 application.properties# Q
·
导入依赖
<!--邮箱-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency>
配置 application.properties
# QQ邮箱配置-固定的
spring.mail.host=smtp.qq.com
#发件人QQ邮箱地址
spring.mail.username=xxx@qq.com
#QQ邮箱授权码-到qq邮箱获取
spring.mail.password=xxx
#以下三项不用改动
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.starttls.required=true
UserDTO
package com.chen.controller.dto;
import lombok.Data;
/**接受用户数据
* 接受前端登录请求的参数
* @author
* @date 2022/3/9 20:51
*/
@Data
public class UserDTO {
private String username;
private String password;
private String email;
}
UserVoToUser
package com.chen.pojo.vo;
/**
* @author
* @date 2022/2/26 17:14
*/
import com.chen.controller.dto.UserDTO;
import com.chen.pojo.Users;
/**
* 将表单中的对象转化为数据库中存储的用户对象(剔除表单中的code)
* @param
* @return
*/
public class UserVoToUser {
/**
* 将表单中的对象转化为数据库中存储的用户对象(剔除表单中的code)
* @param userVo
* @return
*/
public static Users toUser(UserDTO userVo) {
//创建一个数据库中存储的对象
Users user = new Users();
//传值
user.setUsername(userVo.getUsername());
user.setPassword(userVo.getPassword());
user.setEmail(userVo.getEmail());
// 返回包装后的对象
return user;
}
}
编写邮件类发送邮件
MailService.java
package com.chen.service.Impl;
import com.chen.common.Result;
import com.chen.mapper.UsersMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.MailException;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.Random;
/**
* @author
* @date 2022/2/26 17:11
*/
@Service
public class MailService {
public static String codes;
@Autowired
private JavaMailSender mailSender;//一定要用@Autowired
@Resource
private UsersMapper userMapper;//注入UserMapper,交给bena
//application.properties中已配置的值
@Value("${spring.mail.username}")
private String from;
/**
* 给前端输入的邮箱,发送验证码
* @param email
* @param
* @return
*/
public Result sendMimeMail(String email, String code) {
try {
SimpleMailMessage mailMessage = new SimpleMailMessage();
mailMessage.setSubject("验证码邮件");//主题
//生成随机数
code = randomCode();
codes=code;
//将随机数放置到session中
/* session.setAttribute("email",email);
session.setAttribute("code",code);*/
mailMessage.setText("您收到的验证码是:"+code);//内容
System.out.println(code);
mailMessage.setTo(email);//发给谁
mailMessage.setFrom(from);//你自己的邮箱
try {
mailSender.send(mailMessage);//发送
} catch (MailException e) {
e.printStackTrace();
}
return Result.success("成功");
}catch (Exception e){
e.printStackTrace();
return Result.error(20000,"成功");
}
}
/**
* 随机生成6位数的验证码
* @return String code
*/
public String randomCode(){
StringBuilder str = new StringBuilder();
Random random = new Random();
for (int i = 0; i < 6; i++) {
str.append(random.nextInt(10));
}
return str.toString();
}
/**
* 检验验证码是否一致
* @param userVo
* @param session
* @return
*/
/* public Result loginUser(UserDTO userVo, HttpSession session){
//获取session中的验证信息
String email = (String) session.getAttribute("email");
String code = (String) session.getAttribute("code");
//获取表单中的提交的验证信息
String voCode = userVo.getCode();
//如果email数据为空,或者不一致,注册失败
if (email == null || email.isEmpty()){
//return "error,请重新注册";
return Result.error(2,"数据为空");
}else if (!code.equals(voCode)){
//return "error,请重新注册";
return Result.error(-1,"验证码错误");
}
//保存数据
Users user = UserVoToUser.toUser(userVo);
//将数据写入数据库
userMapper.insert(user);
//跳转成功页面
return Result.success();
}
*//**
* 通过输入email查询password,然后比较两个password,如果一样,登录成功
* @param email
* @param password
* @return
*/
}
实现类
public Result<?> login(UserDTO user) {
QueryWrapper<Users> queryWrapper = new QueryWrapper();
queryWrapper.eq("email", user.getEmail());
queryWrapper.eq("password", user.getPassword());
// queryWrapper.eq("code", MailService.codes);
Users res = users1Mapper.selectOne(queryWrapper);
System.out.println(user.getCode());
if (!user.getCode().equals(MailService.codes)){
System.out.println(MailService.codes);
return Result.error(-1,"验证码错误");
}
if (res==null){
return Result.error(0,"密码错误");
}
return Result.success();
}
controller层
发送邮件
@PostMapping("/sendEmail/{email}")
public Result<?> sendEmail(@PathVariable("email") String email, String code){
System.out.println(email);
return mailService.sendMimeMail(email, code);
}
@PostMapping("/login")
@ApiOperation("登录")
public Result login(@RequestBody UserDTO userDTO) {
return users1Service.login(userDTO);
}
vue
Login.vue
<template>
<div class="wrapper">
<div style="margin: 200px auto; background-color: #fff; width: 350px; height: 300px; padding: 20px; border-radius: 10px">
<div style="margin: 20px 0; text-align: center; font-size: 24px"><b>登 录</b></div>
<el-form :model="user" :rules="rules" ref="userForm">
<el-form-item prop="email">
<el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.email"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.code"></el-input>
<el-button size="small" autocomplete="off" @click="send" :disabled="flag">{{ codeMsg }}</el-button>
</el-form-item>
<el-form-item style="margin: 10px 0; text-align: right">
<el-button type="primary" size="small" autocomplete="off" @click="login">登录</el-button>
<el-button type="warning" size="small" autocomplete="off">注册</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
const validateEmail = (rule, value, callback) => {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
this.flag = !reg.test(value)
if (this.flag) {
callback()
} else {
callback(new Error('请输入正确的邮箱地址'))
}
}
return {
second: 5,
codeMsg:'发送',
flag:true,
user: {code:''},
rules: {
email: [
{validator: validateEmail, trigger: 'blur'}
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
},
timer: null
}
},
methods: {
countDown() {
this.flag = true
this.timer = setInterval(() => {
if (this.second > 0) {
this.second--
this.codeMsg = this.second
} else {
clearInterval(this.timer)
this.timer = null
this.flag = false
this.codeMsg = '发送'
this.second = 5
}
}, 1000)
},
send(){
this.countDown();
this.request.post("/sys/sendEmail/"+this.user.email,this.user.code).then(res=>{
alert("发送成功")
})
},
login() {
this.$refs['userForm'].validate((valid) => {
if (valid) { // 表单校验合法
this.request.post("/sys/login", this.user).then(res => {
if(res.code===20000) {
this.$message.success("登录成功")
}else if(res.code===0){
this.$message.error("用户名或密码错误")
}
else {
// this.$router.push("/")
this.$message({
type:"success",
message:res.msg
})
}
})
} else {
return false;
}
});
}
}
}
</script>
<style>
.wrapper {
height: 100vh;
background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB);
overflow: hidden;
}
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)