用户注册+邮箱验证的简单例子_注册邮箱验证的前端

作者：不正经 | 2024-06-07 17:22:01

踩

注册邮箱验证的前端

在这里插入图片描述
用springboot写的。
输入密码和用户名，再输入邮箱。点击发送，发给你验证码，输入正确的验证码。然后数据库自动记录你的用户名和密码。
写的不好请见谅，适合新手练手。
还有一个问题，就是前端向后端发送用户密码的时候，不安全。这里需要解决。网上说是要写加密算法

怎么发送邮箱
 怎么配置oracle数据库

文章目录

用户类和邮箱类
service层
- 发送邮箱的服务
- 数据库保存的服务
controller层
mail.html文件
测试

用户类和邮箱类

用户类：数据库里面保存的用户

数据里面保存用户名和密码，主键是java 自动生成的一个序列。

BaseBean

package wkp.myspringdemo.bean;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.MappedSuperclass;

@MappedSuperclass
public class BaseBean {

    /**
     * 自增长ID,作为主键
     */
    @Id
    @GeneratedValue
    private Long id;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

user1.java

用户类。

package wkp.myspringdemo.bean;
import javax.persistence.*;

@Entity
@Table(name = "user1")
public class User1 extends BaseBean{
    private String name;
    private String password;

    public String getName() {
        return name;
    }

    public String getPassword() {
        return password;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

邮箱类：前端验证时发给后台的邮箱号码

package wkp.myspringdemo.bean;

public class UserMail {
    private String qqmail;

    public String getQqmail() {
        return qqmail;
    }

    public void setQqmail(String qqmail) {
        this.qqmail = qqmail;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

service层

发送邮箱的服务

package wkp.myspringdemo.service;

public interface IMailService {

    /**
     * 发送文本邮件
     * @param to 收件人
     * @param subject 主题
     * @param content 内容
     */
    void sendSimpleMail(String to, String subject, String content);

//    /**
//     * 发送HTML邮件
//     * @param to 收件人
//     * @param subject 主题
//     * @param content 内容
//     */
//    public void sendHtmlMail(String to, String subject, String content);
//
//
//
//    /**
//     * 发送带附件的邮件
//     * @param to 收件人
//     * @param subject 主题
//     * @param content 内容
//     * @param filePath 附件
//     */
//    public void sendAttachmentsMail(String to, String subject, String content, String filePath);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package wkp.myspringdemo.service;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.FileSystemResource;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Service;
import wkp.myspringdemo.service.IMailService;

import javax.mail.MessagingException;
import javax.mail.internet.MimeMessage;
import java.io.File;

@Service
public class IMailServiceImpl implements IMailService {
    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    /**
     * Spring Boot 提供了一个发送邮件的简单抽象，使用的是下面这个接口，这里直接注入即可使用
     */
    @Autowired
    private JavaMailSender mailSender;

    /**
     * 配置文件中我的qq邮箱
     */
    @Value("${spring.mail.from}")
    private String from;

    /**
     * 简单文本邮件
     * @param to 收件人
     * @param subject 主题
     * @param content 内容
     */
    @Override
    public void sendSimpleMail(String to, String subject, String content) {
        //创建SimpleMailMessage对象
        SimpleMailMessage message = new SimpleMailMessage();
        //邮件发送人
        message.setFrom(from);
        //邮件接收人
        message.setTo(to);
        //邮件主题
        message.setSubject(subject);
        //邮件内容
        message.setText(content);
        //发送邮件
        mailSender.send(message);
    }
//
//    /**
//     * html邮件
//     * @param to 收件人
//     * @param subject 主题
//     * @param content 内容
//     */
//    @Override
//    public void sendHtmlMail(String to, String subject, String content) {
//        //获取MimeMessage对象
//        MimeMessage message = mailSender.createMimeMessage();
//        MimeMessageHelper messageHelper;
//        try {
//            messageHelper = new MimeMessageHelper(message, true);
//            //邮件发送人
//            messageHelper.setFrom(from);
//            //邮件接收人
//            messageHelper.setTo(subject);
//            //邮件主题
//            message.setSubject(subject);
//            //邮件内容，html格式
//            messageHelper.setText(content, true);
//            //发送
//            mailSender.send(message);
//            //日志信息
//            logger.info("邮件已经发送。");
//        } catch (MessagingException e) {
//            logger.error("发送邮件时发生异常！", e);
//        }
//    }
//
//    /**
//     * 带附件的邮件
//     * @param to 收件人
//     * @param subject 主题
//     * @param content 内容
//     * @param filePath 附件
//     */
//    @Override
//    public void sendAttachmentsMail(String to, String subject, String content, String filePath) {
//        MimeMessage message = mailSender.createMimeMessage();
//        try {
//            MimeMessageHelper helper = new MimeMessageHelper(message, true);
//            helper.setFrom(from);
//            helper.setTo(to);
//            helper.setSubject(subject);
//            helper.setText(content, true);
//
//            FileSystemResource file = new FileSystemResource(new File(filePath));
//            String fileName = filePath.substring(filePath.lastIndexOf(File.separator));
//            helper.addAttachment(fileName, file);
//            mailSender.send(message);
//            //日志信息
//            logger.info("邮件已经发送。");
//        } catch (MessagingException e) {
//            logger.error("发送邮件时发生异常！", e);
//        }
//
//
//    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

数据库保存的服务

package wkp.myspringdemo.service;

import wkp.myspringdemo.bean.User1;

import java.util.List;

public interface UserService {

    /**
     * 保存用户对象
     * @param user
     */
    void save(User1 user);
    /**
     * 获取所有用户对象
     * @return
     */
    List<User1> getUserList();
    //生成随机验证码
    String  getRandomString();

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package wkp.myspringdemo.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import wkp.myspringdemo.bean.User1;
import wkp.myspringdemo.dao.UserDao;

import java.util.List;
import java.util.Random;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;

    @Override
    public void save(User1 user) {
        userDao.save(user);

    }
    @Override
    public List<User1> getUserList() {
        return userDao.findAll();
    }

    public String getRandomString(){
        Random random = new Random();
        StringBuilder builder = new StringBuilder();
        builder.append(random.nextInt(9)+1).append(random.nextInt(9)+1).append(random.nextInt(9)+1).append(random.nextInt(9)+1);
        return builder.toString();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

controller层

package wkp.myspringdemo.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import wkp.myspringdemo.service.IMailService;
import wkp.myspringdemo.bean.User1;
import wkp.myspringdemo.bean.UserMail;
import wkp.myspringdemo.service.UserService;

@Controller
public class UserController {


    @Autowired
    private UserService userService;
    @Autowired
    IMailService mailService;
    String code;
    @RequestMapping("/sentMail")
    @ResponseBody
    public void sentMail(UserMail mail){
        code=userService.getRandomString();
        mailService.sendSimpleMail(mail.getQqmail(),"测试",code);
    }

    @RequestMapping("/mail")
    //注册界面
    public String mail(){
        return "mail";
    }
	//保存用户到数据库
    @RequestMapping("/register")
    @ResponseBody
    public boolean register(User1 user){
        userService.save(user);
        return true;
    }
    //验证输入的验证码正确与否
    @RequestMapping("/verifyCode")
    @ResponseBody
    public boolean verifyCode(String input){
        int ans= input.compareTo(code);
        return ans==0?true:false;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

mail.html文件

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>邮箱验证</title>
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
    用户名:<input type="text" id="name"><br/>
    密码:<input type="password" id="password"><br/>
    确认密码:<input type="password" id="password2"><br/>
    邮箱: <input type="text"  name="qqmail" id="qqmail"><br/>
    <button onclick="sendMail()">发送</button>
    <br/>
    验证码:<input type="text" id="code"><br/>
    <button onclick="codeVerify()">确认</button>
<script>
    var issend=false;
    function sendMail() {
        var qqmail=$("#qqmail").val();
        var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
        if(!reg.test(qqmail)){
            alert("输入的邮箱不正确，请重新输入");
            return;
        }
        $.post("sentMail",{qqmail:qqmail},function () {
            document.getElementsByTagName("button")[0].innerText="已发送,请注意查收";
            issend=true;
        });
    };
    function codeVerify() {
        if(!issend) return;
       var password2=$("#password2").val();
       var inputcode=$("#code").val();
       var name=$("#name").val();
       if(password2==$("#password").val()){
           $.post("verifyCode",{input:inputcode},function (res) {
              if(res){
                  $.post("register",{name:name,password:password2},function (ans) {
                       alert("注册成功。请重新登录");
                      // window.location="/logup";
                  });
              }else alert("验证码不正确");
           });

       }else alert("两次输入的密码不一致");

    };
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

测试

输入localhost\mail

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/686345