这是一个简单的demo,采用Spring Boot+Vue前后端分离的开发模式
目前已实现以下功能:
- 前后端交互获取验证码
- 将邮箱写入数据库
- 判断数据库是否存已存在邮箱
前端部分
访问页面Register.vue
<template>
<div class="register">
<el-form ref="form" :model="mailForm" label-width="60px" size="mini">
<el-form-item label="邮箱" class="em">
<el-input style="width: 260px;padding-right:12px" v-model="mailForm.email"/>
<el-button type="primary" @click="getCode">
<span v-show="show">发送验证码</span>
<span v-show="!show">{{ count }} s后重发</span>
</el-button>
</el-form-item>
<el-form-item label="密码" class="cd">
<el-input type="password" v-model="mailForm.password"></el-input>
</el-form-item>
<el-form-item label="密码" class="cd">
<el-input type="password" v-model="password2"></el-input>
</el-form-item>
<el-form-item label="验证码" class="cd">
<el-input v-model="mailForm.code"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
const TIME_COUNT = 60 // 设置一个全局的倒计时的时间
export default {
name: "Register",
data() {
return {
show: true,
count: '',
password2: '',
mailForm: {
email: '2659445660@qq.com',
password: '',
code: ''
}
};
},
methods: {
getCode() {
const regexMail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (!regexMail.test(this.mailForm.email)) {
this.$message.warning('请输入正确的邮箱')
} else {
this.axios.post("api/sendMail", this.mailForm).then(res => {
if (res.data.status === 200) {
this.$message.success(res.data.message)
} else {
this.$message.error(res.data.message)
}
}).catch(() => {
this.$message.error('发送失败')
});
// 验证码倒计时
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)
}
}
},
submit() {
// 验证码校验
const regexCode = /^[0-9]{6}$/
if (!regexCode.test(this.mailForm.code)) {
this.$message.warning('请输入正确的验证码')
} else if (this.password2 !== this.mailForm.password) {
this.$message.error('密码不一致');
} else {
this.axios.post("api/insertUser", this.mailForm).then(res => {
if ((res.data.status === 200)) {
this.$message.success(res.data.message)
} else {
this.$message.error(res.data.message)
}
}).catch(() => {
this.$message.error('请重新获取验证码')
});
}
},
}
}
</script>
<style scoped>
.register {
width: 435px;
margin: 180px auto;
border: 1px solid gray;
padding: 20px;
border-radius: 10px;
}
.register el-input{
width: 260px
}
</style>
后端部分
Entity层User.java
package com.zhangz1.maildemo.domain.entity;
import com.baomidou.mybatisplus.annotation.TableName;
/**
* Created by zhangz1 on 2022/2/15 20:41
*/
@TableName("email")
public class User {
private int id;
private String email;
private String password;
private String code;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
@Override
public String toString() {
return "{" +
"id=" + id +
", email='" + email + '\'' +
", password='" + password + '\'' +
", code='" + code + '\'' +
'}';
}
}
Service层UserService.java
package com.zhangz1.maildemo.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.zhangz1.maildemo.domain.entity.User;
import org.springframework.transaction.annotation.Transactional;
/**
* Created by zhang1 on 2022/2/13 17:02
*/
@Transactional(rollbackFor=Exception.class)
public interface UserService extends IService<User> {
/**
* 邮件发送
*
* @param receiver 接收方
* @param title 发送的标题
* @param text 发送的内容
*/
void send(String receiver, String title, String text);
/**
* 添加用户
*
* @param user user
* @return Boolean
*/
@Override
boolean save(User user);
/**
* 判断是否存在邮箱
*
* @param email 查询的邮箱
* @return Boolean
*/
boolean queryByEmail(String email);
}
Service接口层UserServiceImpl.java
package com.zhangz1.maildemo.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.zhangz1.maildemo.domain.entity.User;
import com.zhangz1.maildemo.mapper.UserMapper;
import com.zhangz1.maildemo.service.UserService;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
/**
* Created by zhangz1 on 2022/2/13 22:57
*/
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
@Value("${spring.mail.username}")
private String sender;
@Resource
JavaMailSender mailSender;
/**
* 邮件发送
*
* @param email 接收方
* @param title 发送的标题
* @param text 发送的内容
*/
@Override
public void send(String email, String title, String text) {
try {
SimpleMailMessage message = new SimpleMailMessage();
message.setFrom(sender);
message.setTo(email);
message.setSubject(title);
message.setText(text);
mailSender.send(message);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 添加用户
*
* @param user user
* @return Boolean
*/
@Override
public boolean save(User user) {
return baseMapper.insertUser(user);
}
/**
* 判断是否存在邮箱
*
* @param email 查询的邮箱
* @return Boolean
*/
@Override
public boolean queryByEmail(String email) {
Integer existFlag = baseMapper.queryByEmail(email);
return existFlag == null;
}
}
Mapper层UserMapper.java
package com.zhangz1.maildemo.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zhangz1.maildemo.domain.entity.User;
import org.springframework.stereotype.Repository;
/**
* Created by zhangz1 on 2022/2/16 20:44
*/
@Repository
public interface UserMapper extends BaseMapper<User> {
/**
* 添加
*
* @param user user
* @return Boolean
*/
boolean insertUser(User user);
/**
* 判断是否存在邮箱
*
* @param email 查询的邮箱
* @return 不存在返回0,存在返回1
*/
Integer queryByEmail(String email);
}
Mapper映射文件UserMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zhangz1.maildemo.mapper.UserMapper">
<insert id="insertUser" parameterType="com.zhangz1.maildemo.domain.entity.User" keyProperty="id"
useGeneratedKeys="true">
insert into email (email, password)
values (#{email}, #{password})
</insert>
<select id="queryByEmail" resultType="java.lang.Integer">
select 1
from email
where email = #{email}
limit 1
</select>
</mapper>
Controller层UserController.java
package com.zhangz1.maildemo.controller;
import com.zhangz1.maildemo.constants.enums.MailEnum;
import com.zhangz1.maildemo.constants.enums.UserEnum;
import com.zhangz1.maildemo.domain.entity.User;
import com.zhangz1.maildemo.constants.RestResponse;
import com.zhangz1.maildemo.service.UserService;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
/**
* Created by zhangz1 on 2022/2/13 17:10
*/
@CrossOrigin
@RestController
public class UserController {
@Resource
private UserService userService;
@RequestMapping(value = "/sendMail", method = RequestMethod.POST)
public RestResponse<String> send(@RequestBody User user, HttpServletRequest request) {
RestResponse<String> restResponse = new RestResponse<>();
if (userService.queryByEmail(user.getEmail())) {
String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);
String title = "验证码";
String text = "您的验证码为" + verifyCode + ",请勿泄露此验证码。\n如非本人操作,请忽略该邮件。\n(这是一封自动发送的邮件,请勿回复)";
try {
userService.send(user.getEmail(), title, text);
} catch (Exception e) {
restResponse.setStatus(MailEnum.SEND_FAILURE.getStatus());
restResponse.setMessage(MailEnum.SEND_FAILURE.getMessage());
return restResponse;
}
request.getSession().setAttribute("verifyCode", verifyCode);
request.getSession().setAttribute("email", user.getEmail());
restResponse.setStatus(MailEnum.SEND_SUCCESS.getStatus());
restResponse.setMessage(MailEnum.SEND_SUCCESS.getMessage());
} else {
restResponse.setStatus(MailEnum.EMAIL_REPEAT.getStatus());
restResponse.setMessage(MailEnum.EMAIL_REPEAT.getMessage());
}
return restResponse;
}
@ResponseBody
@RequestMapping(value = "/insertUser", method = RequestMethod.POST)
public RestResponse<String> insertUser(@RequestBody User user, HttpServletRequest request) {
RestResponse<String> restResponse = new RestResponse<>();
String email = (String) request.getSession().getAttribute("email");
String verifyCode = (String) request.getSession().getAttribute("verifyCode");
Map<String, Object> map = new HashMap<>(16);
map.put("verifyCode", user.getCode());
map.put("email", user.getEmail());
if (verifyCode.equals(map.get("verifyCode")) && email.equals(map.get("email"))) {
userService.save(user);
restResponse.setStatus(UserEnum.SAVE_SUCCESS.getStatus());
restResponse.setMessage(UserEnum.SAVE_SUCCESS.getMessage());
restResponse.setData(user.toString());
Enumeration<String> em = request.getSession().getAttributeNames();
while (em.hasMoreElements()) {
request.getSession().removeAttribute(em.nextElement());
}
} else if (!verifyCode.equals(map.get("verifyCode"))) {
restResponse.setStatus(MailEnum.CODE_FAILURE.getStatus());
restResponse.setMessage(MailEnum.CODE_FAILURE.getMessage());
} else if (!email.equals(map.get("email"))) {
restResponse.setStatus(MailEnum.EMAIL_FAILURE.getStatus());
restResponse.setMessage(MailEnum.EMAIL_FAILURE.getMessage());
}
return restResponse;
}
}
响应类RestResponse.java
package com.zhangz1.maildemo.constants;
/**
* 响应类
* Created by zhangz1 on 2022/2/15 21:14
*/
public class RestResponse<T> {
private Integer status;
private String message;
private T data;
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
}
部分截图:
由于目前只是个小demo,所以暂未部署项目
前端项目仓库请点击此处
后端项目仓库请点击此处
版权属于:张子
本文链接:https://www.znzzi.com/articles/223
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。