这是一个简单的demo,采用Spring Boot+Vue前后端分离的开发模式

目前已实现以下功能:

  1. 前后端交互获取验证码
  2. 将邮箱写入数据库
  3. 判断数据库是否存已存在邮箱

前端部分

访问页面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;
    }
}

部分截图:

image-20220218004032831

image-20220218004203904

由于目前只是个小demo,所以暂未部署项目

前端项目仓库请点击此处

后端项目仓库请点击此处

最后修改:2023 年 12 月 23 日
点个赞或者请作者喝杯咖啡