1. Toy模板网首页
  2. > Toy博客

JavaWeb登录注册系统/界面（邮箱验证码，数据库连接，详细注释，可作结课作业，可用于学习，可接入其他主系统）

10月前 作者：山河之书Liu_Zixin 分类：Toy博客 阅读(57) 违法举报

这篇具有很好参考价值的文章主要介绍了JavaWeb登录注册系统/界面（邮箱验证码，数据库连接，详细注释，可作结课作业，可用于学习，可接入其他主系统）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

1、致谢

2、前言

3、系统实机演示

4、系统分析与设计

（1）主要软件与工具

（2）系统分析

（3）系统规划

5、系统设计与构建

（1）JavaWeb创建

（2）JavaWeb运行

（3）先期依赖准备：

6、代码与关键注释、文件简析

（1）数据库

（2）前端

index.jsp和styleIndex.css：

forgetPassword.jsp和styleForgetPassword.css、sendMail.js：

mainPage.jsp和styleMainPage.css：

（3）后端（Servlet）：

SignServlet.java：

EmailServlet.java：

LogoutServlet.java：

（4）后端（Util）

MailUtil.java

JDBCUtil.java

VcodeUtil.java

User.java

（5）后端（DAO）

DAO.java：

（6）配置文件

web.xml：

7、系统完成形式与参考代码

1、致谢

        特别感谢CSDN用户 水金猪肚鸡 对本文“6、代码与关键注释、文件简析（1）数据库”新建数据表内容中指令错误的斧正！

        特别感谢CSDN用户 ruwosigui 对本文“5、系统设计与构建（1）JavaWeb创建”中两处链接失效问题的指出！

        特此感谢！

        同时欢迎各位同志对此文章错误与遗漏之处提出批评建议！

2、前言

首先，关于源码的获取，本人提供了三种方式：

  • 直接从文章里面Ctrl+C，Ctrl+V，然后按照我已给的文件结构搞一下即可；
  • 通过积分下载上传到CSDN的资源；
  • 点开本人的主页，点击“查看详细资料”，添加好友获取源码文件（如果有问题同样可以通过这里问），本人承诺无特殊情况，三小时内将无条件提供源码（所谓特殊情况仅指时间上的，毕竟挂上去的是我的副号，获取信息可能不及时，见谅）。

（另外，私信没法发文件，真的不要再从私信问我要源码了，我也只能给你再指回到我的个人简介那里去）

注：关于第二个获取方式……实际上用第三种方式就行，和第二种方式获得的文件没任何区别，再不济可以用第一种，真的真的没必要用第二种（但是做慈善的话我也欢迎，毕竟我也需要一点积分用来下载资源）

一切的一切要从我心血来潮脑子一热报了专业选修——Java说起，我承认我报的时候草率了，我承认我低估了它的难度。但是还是得写的好一点，毕竟期末结课嘛，写的好一点，多一点总归没坏处，于是就有了今天这篇改自我的实验报告和代码的JavaWeb登录注册系统。

本系统基本实现了登录注册所需的功能，包括但不限于登录检查、注册检查、多登录方式提供、邮箱验证码获取与校验等功能，还加写了一个登录后注销账户的功能。

系统总共分三个界面：

  • 第一个是负责注册和常规密码登录的界面；
  • 第二个是负责邮箱验证码登录的界面；
  • 第三个是主界面，没有实际意义，就是登陆成功后总得跳转个界面，这个界面上我也没完全空着，加了个注销。

3、系统实机演示

实机演示视频https://live.csdn.net/v/269198?spm=1001.2014.3001.5501

JavaWeb登录注册系统/界面（邮箱验证码，数据库连接，详细注释，可作结课作业，可用于学习，可接入其他主系统）
JavaWeb登录注册系统/界面（邮箱验证码，数据库连接，详细注释，可作结课作业，可用于学习，可接入其他主系统）
JavaWeb登录注册系统/界面（邮箱验证码，数据库连接，详细注释，可作结课作业，可用于学习，可接入其他主系统）
JavaWeb登录注册系统/界面（邮箱验证码，数据库连接，详细注释，可作结课作业，可用于学习，可接入其他主系统）

4、系统分析与设计

（1）主要软件与工具

工具：HUAWEI MATEBOOK D14（Windows 10）

软件：IntelliJ IDEA 2022.3，MySQL 8.0.28，Adobe Photoshop 2021，Microsoft Edge

（2）系统分析

登录注册系统需要具有的基本功能包括登录和注册两个部分。其中：

  1. 显性需求：提供注册信息写入服务，提供注册信息格式错误排查服务，提供登录检查服务；
  2. 隐性需求：注册部分应当考虑到用户对于自己设置的密码是否存在无意的输入错误（需求：需要二次确认密码）；登录部分应到考虑到用户是否会忘记密码（需求：需要提供多种登录验证方式）；
  3. 除此之外，还有一些便于后续开发而提供的需求，包括保存session以便向其他网页传递用户基本信息。

（3）系统规划

系统主要包括：数据库（MySQL）、后端诸项（Servlet，Util等）、前端诸项（JSP，CSS，JS）。

JavaWeb登录注册系统/界面（邮箱验证码，数据库连接，详细注释，可作结课作业，可用于学习，可接入其他主系统）

a. 数据库：

需要在MySQL中新建用于存储用户信息（包含用户邮箱和密码字段）的数据库（database test）及其数据表（table user）。为了保障其他数据库的安全性，因此新建访问该数据库的用户（"java"@"%"）并赋以相应权限（all on test.*）。

b. 前端：

需要设计三个界面，即：登录注册界面（index.jsp）、忘记密码登录界面（forgetPassword .jsp）、主界面（mainPage.jsp），及其附带的.js和.css文件。其中：

  1. 登录注册界面需要提供注册和常规账号密码登录两个子系统，并使用滑块进行子系统的切换。其中登录部分包含登录按钮、用于输入登录信息的两个输入框、用于切换到忘记密码登录界面的链接；注册部分则包含注册按钮，用于注册的三个输入框；除此之外还包括用于切换模式的两个按钮。
  2. 主界面为验证登录成功的跳转界面，本身无特殊价值和功能，仅加入了注销账户（即删除账户）的按钮，一键注销账户并同时跳转回登录注册界面。
  3. 忘记密码登录界面需要提供忘记密码登录服务，包含获取验证码的动态按钮、验证登录的按钮以及用于输入信息的两个输入框。

c. 后端：

  1. DAO：
  2. Util：
    1. MailUtil.java：提供邮件发送的相关配置和邮件内容的拟写。
    2. JDBCUtil.java：提供数据库连接的相关配置。
    3. VCodeUtil.java：随机生成若干位包含大小写字母/数字验证码。
    4. User.java：提供存储临时用户、写入信息的方法从而便于传递参数。
  3. Servlet：
    1. SignServlet.java：对应index.jsp，负责获取前端输入值并按照输入的信息判断启动相应的验证过程完成登录验证或注册。
    2. EmailServlet.java：对应forgetPassword.jsp，负责接收前端输入值并按照按键调用相应的方法（邮箱验证与验证码生成、发送，或核验验证码）。
    3. LogoutServlet.java：对应mainPage.jsp，主要目的是按照按键读取存储登录账户邮箱的session并注销该账户。

d. DAO.java：提供对数据库中的数据进行增删改查的方法。

e. 配置文件

web.xml：提供Servlet配置，并设置初始界面为index.jsp（登录注册界面）（注：这个东西极其重要，一开始的时候Servlet忘了在这里配置，结果前后端连不上，浪费了四五个小时。如何配置可以参考我后面的代码，也可以去其他博主那里查，但是务必要做好，做不好有的是哭的时候）。

5、系统设计与构建

（1）JavaWeb创建

关于JavaWeb创建的问题，由于我是基于IDEA做的，因此我就只给出IDEA创建JavaWeb项目的方法，链接如下：

IDEA社区版创建JavaWeb项目

IDEA专业版创建JavaWeb项目

一般来讲用IDEA专业版更保险，更舒适，更便捷，但是要花钱。不花钱的办法也有三个，其一是申请JetBrains的免费教育许可证（需要学生或教师身份），其二是破解（方法自己查），其三是利用一个月的试用期完成代码（你只有一个月）。

（2）JavaWeb运行

JavaWeb运行可以参见之前创建JavaWeb项目中给出的流程，由于我本人对于IDEA没有很熟悉，因此不过多评述，一切参照其他操作。

（3）先期依赖准备：

  • 依赖包下载方式：
    • 点开本人的主页，点击“查看详细资料”，添加好友获取依赖包（如果有问题同样可以通过这里问），本人承诺无特殊情况，三小时内将无条件提供依赖包（所谓特殊情况仅指时间上的，毕竟挂上去的是我的副号，获取信息可能不及时，见谅）。
    • 源码里面包含所需的包，理论上无需单独下载。
    • 通过本人CSDN资源免积分下载：

                Activation-1.1.jar

                javax.mail-1.6.2.jar

                mysql-connector-j-8.0.31.jar

                fastjson-2.0.21.jar

                (那个fastJSON的本项目不需要）

  • 依赖包添加：
    • 第一步，按照之前给出的项目文件架构，在根目录下新建lib文件夹
    • 把下载好的依赖包（.jar文件）扔进去
    • 在IDEA里左侧的文件结构栏，右键.jar文件，点击“add as library”即可

6、代码与关键注释、文件简析

（注：注释是英文的，问就是写程序一直来回切换中英文实在过于麻烦，不想看英文的参见此处，包你满意）

（1）数据库

  • 新建数据库test：
create database test;
  • 新建用户java，密码为java，设置允许任何主机访问：
create user "java"@"%" identified by "java";
  • 授予用户java对test数据库的所有数据表的全部权限：
grant all on test.* to "java"@"%";
  • 在test库中新建数据表user：
create table user(
user_email char(100) primary key,
user_password char(50)
);

（2）前端

  • index.jsp和styleIndex.css：

JSP文件将登录和注册分置于两个表单，分别设置提交按钮进行表单的提交，从而保障一个servlet可以对应两个功能而不产生数据输入的冲突。利用嵌入的JS进行表单提交的中继。

添加用于切换登录/注册的按钮，切换动作通过更换各层的z-index和使用上层overlay进行不需要的模块的遮盖和切换滑块的移动。

使用轮播图进行背景的更换和展示，具体内容参考自他人代码。

index.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SIGN UP & SIGN IN</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="styleIndex.css">
    <script type="text/javascript">
        window.onload = function () {
            const signInBtn = document.getElementById("SignIn");
            const signUpBtn = document.getElementById("SignUp");
            const container = document.querySelector(".container");
            // Submit information form
            document.getElementById("form1");
            document.getElementById("form2");
            // Listen for switching action events and start related operations
            signInBtn.addEventListener("click", () => {
                container.classList.remove("right-panel-active");
            });

            signUpBtn.addEventListener("click", () => {
                container.classList.add("right-panel-active");
            });
        }
    </script>
</head>
<body>
<div class="container right-panel-active">
    <%--Sign in--%>
    <div class="container_form container--signin">
        <form action="SignServlet" method="post" class="form" id="form1">
            <h2 class="form_title">Sign In</h2>

            <label for="user_email_1"></label>
            <input type="email" id="user_email_1" name="user_email_1" required="required" placeholder="Email" class="input" />
            <label for="user_password_1"></label>
            <input type="password" id="user_password_1" name="user_password_1" required="required" placeholder="Password" class="input" />
            <a href="forgetPassword.jsp" class="link">Forgot password?</a>
            <button type="submit" class="btn" id="login">Sign In</button>
        </form>
    </div>

    <%--Sign up--%>
    <div class="container_form container--signup">
        <form action="SignServlet" method="post" class="form" id="form2">
            <h2 class="form_title">Sign Up</h2>
            <label for="user_email_2"></label>
            <input type="email" id="user_email_2" name="user_email_2" required="required" placeholder="Email" class="input" />
            <label for="user_password_2"></label>
            <input type="password" id="user_password_2" name="user_password_2" required="required" placeholder="Password" class="input" />
            <label for="user_password_confirm"></label>
            <input type="password" id="user_password_confirm" name="user_password_confirm" required="required" placeholder="Confirm Password" class="input" />
            <button type="submit" class="btn" id="register">Sign Up</button>
        </form>
    </div>

    <%--Layer button--%>
    <div class="container_overlay">
        <div class="overlay">
            <div class="overlay_panel overlay--left">
                <button class="btn" id="SignIn">Sign In</button>
            </div>
            <div class="overlay_panel overlay--right">
                <button class="btn" id="SignUp">Sign Up</button>
            </div>
        </div>
    </div>
</div>

<%--Background carousel chart--%>
<div class="slidershow">
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1575138312433-d42e9f176f6b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080&utm_source=unsplash_source&utm_medium=referral&utm_campaign=api-credit');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1668952410266-e86775275752?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMjQ0MQ&ixlib=rb-4.0.3&q=80&w=1080');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1668016910564-3314f9fbd0bb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMjgxMA&ixlib=rb-4.0.3&q=80&w=1080');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1669833526714-0bfa8a3b5cae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMzM5OA&ixlib=rb-4.0.3&q=80&w=1080')"></div>
</div>
</body>
</html>

styleIndex.css

/*Declaration: As for this code mainly refers to the achievements of others, some comments may have errors. Sorry about this.*/
:root {
    --white: #e9e9e9;
    --gray: #333;
    --blue: #095c91;
    --blue-r: #315a7491;
    --lightblue: #0393a3;

    --button-radius: 0.7rem;

    --max-width: 758px;
    --max-height: 420px;

    font-size: 16px;
    font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";

}

body {
    align-items: center;
    background-color: var(--white);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    height: 100vh;
    place-items: center;
}

.form_title {
    font-weight: 300;
    margin: 0 0 1.25rem;
}
/*the link jumping to the forgetPassword page*/
.link {
    color: var(--gray);
    font-size: 0.9rem;
    margin: 1.5rem 0;
    text-decoration: none;
    text-align: justify;
}

.container {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--button-radius);
    box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
    height: var(--max-height);
    max-width: var(--max-width);
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 5;
}
/*Set moving elements*/
.container_form {
    height: 100%;
    position: absolute;
    top: 0;
    transition: transform 0.6s ease-in-out;
}
/*signin part*/
.container--signin {
    left: 0;
    width: 50%;
    z-index: 10;
}
/*signin part's moving settings*/
.container.right-panel-active .container--signin {
    transform: translateX(100%);
}
/*the same principal as above*/
.container--signup {
    left: 0;
    opacity: 0;
    width: 50%;
    z-index: 9;
}

.container.right-panel-active .container--signup {
    -webkit-animation: show 0.6s;
            animation: show 0.6s;
    opacity: 1;
    transform: translateX(100%);
    z-index: 11;
}
/*Child body of "body". Set its style and move method*/
.container_overlay {
    height: 100%;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: transform 0.6s ease-in-out;
    width: 50%;
    z-index: 100;
}

.container.right-panel-active .container_overlay {
    transform: translateX(-100%);
}
/*Child container of "container". Set its style and move method*/
.overlay {
    background-color: rgba(255, 255, 255, 0.1);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: -100%;
    position: relative;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    width: 200%
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

/*Set move method of every single module for the button*/
.overlay_panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    width: 50%;
}

.overlay--left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay--left {
    transform: translateX(0);
}

.overlay--right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay--right {
    transform: translateX(20%);
}

.btn {
    background-color: var(--blue);
    background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
    border-radius: 20px;
    border: 1px solid var(--blue-r);
    color: var(--white);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    padding: 0.9rem 4rem;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

.form > .btn {
    margin-top: 1.5rem;
}

.btn:active {
    transform: scale(0.95);
}

.btn:focus {
    outline: none;
}

.form {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 3rem;
    height: 100%;
    text-align: center;
}

.input {
    background-color: #fff;
    border: 1px solid transparent;
    padding: 0.9rem 0.9rem;
    margin:0.5rem 0;
    width: 100%;
}

@-webkit-keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 5;

    }

    50%,
    100% {
        opacity: 1;
        z-index: 6;
    }
}

@keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 5;

    }

    50%,
    100% {
        opacity: 1;
        z-index: 6;
    }
}

.slidershow {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.slidershow--image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    -webkit-animation-name: kenburns;
    animation-name: kenburns;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.slidershow--image:nth-child(1) {
    -webkit-animation-name: kenburns-1;
    animation-name: kenburns-1;
    z-index: 3;
}

.slidershow--image:nth-child(2) {
    -webkit-animation-name: kenburns-2;
    animation-name: kenburns-2;
    z-index: 2;
}

.slidershow--image:nth-child(3) {
    -webkit-animation-name: kenburns-3;
    animation-name: kenburns-3;
    z-index: 1;
}

.slidershow--image:nth-child(4) {
    -webkit-animation-name: kenburns-4;
    animation-name: kenburns-4;
    z-index: 0;
}

@-webkit-keyframes keyburns-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    1.5625% {
        opacity: 1;
    }
    23.4375% {
        opacity: 1;
    }
    26.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform:scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    98.4375% {
        opacity: 0;
        -webkit-transform: scale(1.21176);
        transform: scale(1.21176);
    }
    100% {
        opacity: 1;
    }
}

@keyframes kenburns-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    1.5625% {
        opacity: 1;
    }
    23.4375% {
        opacity: 1;
    }
    26.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform:scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    98.4375% {
        opacity: 0;
        -webkit-transform: scale(1.21176);
        transform: scale(1.21176);
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes kenburns-2 {
    23.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    26.5625% {
        opacity: 1;
    }
    48.4375% {
        opacity: 1;
    }
    51.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes kenburns-2 {
    23.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    26.5625% {
        opacity: 1;
    }
    48.4375% {
        opacity: 1;
    }
    51.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes kenburns-3 {
    48.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    51.5625% {
        opacity: 1;
    }
    73.4375% {
        opacity: 1;
    }
    76.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes kenburns-3 {
    48.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    51.5625% {
        opacity: 1;
    }
    73.4375% {
        opacity: 1;
    }
    76.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes kenburns-4 {
    73.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    76.5625% {
        opacity: 1;
    }
    98.4375% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes kenburns-4 {
    73.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    76.5625% {
        opacity: 1;
    }
    98.4375% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

  • forgetPassword.jsp和styleForgetPassword.css、sendMail.js：

对表单排布进行限定，并利用margin属性和长度比例显示实现按键和输入框保持对其状态，此处考虑到表单分开提交无法满足验证表单需要两层数据的需求，因此将选择相应功能的逻辑交给了后端的EmailServlet。sendMail.js将后端传来的校验完成的信息进行响应，并提供更改获取验证码按钮上的倒计时的功能，控制按钮的启用和禁用。

（forgetPassword.jsp中包含的jquery-1.11.3.js文件需要另行下载，本人提供免积分下载的CSDN资源）

forgetPassword.jsp

<%@ page pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Sign In with Email</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="styleForgetPassword.css">
</head>

<body>
<form class="container" id="form" name="form" AUTOCOMPLETE="OFF">
    <form class="form">
        <h2 class="title">Sign In</h2>
        <table>
            <tr height="35px">
                <td>
                    <label for="user_email"></label>
                    <input type="text" name="user_email" id="user_email" placeholder="Email" class="input1" />
                </td>
                <td>
                    <button id="btnGetVcode" class="btn1" style="cursor:pointer">Get Code</button>
                </td>
            </tr>
            <tr height="35px">
                <td>
                    <label for="verification_code"></label>
                    <input type="text" name="verification_code" id="verification_code" placeholder="Verification Code" class="input2" />
                </td>
                <td id="message"></td>
            </tr>
        </table>
        <a target="_self">
            <button type="button" id="btnVerify" class="btn2" style="cursor:pointer">Sign In</button></a>
    </form>
</form>

<div class="slidershow">
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1575138312433-d42e9f176f6b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080&utm_source=unsplash_source&utm_medium=referral&utm_campaign=api-credit');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1668952410266-e86775275752?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMjQ0MQ&ixlib=rb-4.0.3&q=80&w=1080');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1668016910564-3314f9fbd0bb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMjgxMA&ixlib=rb-4.0.3&q=80&w=1080');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1669833526714-0bfa8a3b5cae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMzM5OA&ixlib=rb-4.0.3&q=80&w=1080')"></div>
</div>
<!-- 引入jQuery -->
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="sendEmail.js"></script>
</body>
</html>

styleForgetPassword.css

/*Basic settings of color and font set*/
:root {
    --white: #e9e9e9;
    --gray: #333;
    --blue: #095c91;
    --blue-r: #315a7491;
    --lightblue: #0393a3;

    --button-radius: 0.7rem;

    --max-width: 758px;
    --max-height: 420px;

    font-size: 16px;
    font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";

}
/*Set body*/
body {
    align-items: center;
    background-color: var(--white);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    height: 100vh;
    place-items: center;
}
/*Set size and outer fill size*/
.title {
    font-weight: 300;
    margin: 0 0 1.25rem;
}
/*Set container*/
.container {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: var(--button-radius);
    box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    height: var(--max-height);
    justify-content: center;
    max-width: 379px;
    overflow: hidden;
    padding: 0 3rem;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 5;
}

.btn1 {
    background-color: var(--blue);
    background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
    border: 0;
    color: var(--white);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    padding: 1.2rem 1.7rem;
}

.btn2 {
    background-color: var(--blue);
    background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
    border-radius: 20px;
    border: 1px solid var(--blue-r);
    color: var(--white);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    padding: 0.9rem 4rem;
    margin: 2rem 0 0 0;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}
/*Animation of click (transition)*/
.form > .btn2 {
    margin-top: 1.5rem;
}

.btn2:active {
    transform: scale(0.95);
}

.btn2:focus {
    outline: none;
}
/*Set input1, input2 to align the input box*/
.input1 {
    background-color: #fff;
    border: 1px solid transparent;
    padding: 0.9rem 0.9rem;
    margin: 0.5rem 0.6rem;
    width: 80%;
}

.input2 {
    background-color: #fff;
    border: 1px solid transparent;
    padding: 0.9rem 0.9rem;
    margin: 0.5rem 0.6rem;
    width: 140%;
}
/*Picture carousel. Just to look good. I haven't got the specific principles. So here will no notes*/
@-webkit-keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 5;

    }

    50%,
    100% {
        opacity: 1;
        z-index: 6;
    }
}

@keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 5;

    }

    50%,
    100% {
        opacity: 1;
        z-index: 6;
    }
}

.slidershow {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.slidershow--image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    -webkit-animation-name: kenburns;
    animation-name: kenburns;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.slidershow--image:nth-child(1) {
    -webkit-animation-name: kenburns-1;
    animation-name: kenburns-1;
    z-index: 3;
}

.slidershow--image:nth-child(2) {
    -webkit-animation-name: kenburns-2;
    animation-name: kenburns-2;
    z-index: 2;
}

.slidershow--image:nth-child(3) {
    -webkit-animation-name: kenburns-3;
    animation-name: kenburns-3;
    z-index: 1;
}

.slidershow--image:nth-child(4) {
    -webkit-animation-name: kenburns-4;
    animation-name: kenburns-4;
    z-index: 0;
}

@-webkit-keyframes keyburns-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    1.5625% {
        opacity: 1;
    }
    23.4375% {
        opacity: 1;
    }
    26.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform:scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    98.4375% {
        opacity: 0;
        -webkit-transform: scale(1.21176);
        transform: scale(1.21176);
    }
    100% {
        opacity: 1;
    }
}

@keyframes kenburns-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    1.5625% {
        opacity: 1;
    }
    23.4375% {
        opacity: 1;
    }
    26.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform:scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    98.4375% {
        opacity: 0;
        -webkit-transform: scale(1.21176);
        transform: scale(1.21176);
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes kenburns-2 {
    23.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    26.5625% {
        opacity: 1;
    }
    48.4375% {
        opacity: 1;
    }
    51.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes kenburns-2 {
    23.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    26.5625% {
        opacity: 1;
    }
    48.4375% {
        opacity: 1;
    }
    51.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes kenburns-3 {
    48.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    51.5625% {
        opacity: 1;
    }
    73.4375% {
        opacity: 1;
    }
    76.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes kenburns-3 {
    48.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    51.5625% {
        opacity: 1;
    }
    73.4375% {
        opacity: 1;
    }
    76.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes kenburns-4 {
    73.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    76.5625% {
        opacity: 1;
    }
    98.4375% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes kenburns-4 {
    73.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    76.5625% {
        opacity: 1;
    }
    98.4375% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

sendMail.js

const time0 = 60;  // Initial time
let time = time0;
let t;  // Timing

$(document).ready(function() {

    // Getting verification code
    $("#btnGetVcode").click(function() {
        const btnGet = document.getElementById("btnGetVcode");
        btnGet.disabled = true;  // to avoid multiple clicks
        $.ajax({
            url: 'EmailServlet?method=getVCode',  // Choosing getCode method
            type: 'post',
            data: {user_email: $("input[name='user_email']").val()},
            dataType: 'text',
            success: function(msg) {
                if(msg === "-1"){
                    window.alert("Incorrect Email.");
                    btnGet.disabled = false;  // Disable button to avoid clicks before countdown being awakened
                }
                else if(msg === "0"){
                    window.alert("No Such User. Please Sign In First.");
                    btnGet.disabled = false;
                }
                else {
                    useChangeBTN();  // If passing the verification, change the button and awake the countdown
                }
            },
            error:function(msg){
            }
        });
    });

    // 验证按钮
    $("#btnVerify").click(function() {
        document.getElementById("message");
        $.ajax({
            url: 'EmailServlet?method=verify',  // Choosing verify method
            type: 'post',
            data: {verification_code: $("input[name='verification_code']").val()},
            dataType: 'text',
            success: function(msg) {
                if(msg === "1"){
                    window.alert("Welcome!")
                    window.location.assign("mainPage.jsp");  // Jump to main page

                }
                else{
                    window.alert("Wrong Verification Code!");
                }
            },
            error:function(msg){
            }
        });
    });
});

// Function "changeBTN" is to start button display countdown and stop the disability of button when countdown ends
function changeBTN(){
    if(time > 0){
        $("#btnGetVcode").text("　 "+time+" s 　");
        time = time - 1;
    }
    else{
        const btnGet = document.getElementById("btnGetVcode");
        btnGet.disabled = false;
        $("#btnGetVcode").text("Get Code");  // Show former words
        clearInterval(t);
        time = time0;  // Set back to the initial time
    }
}

// Function "changeBTN" is to enable function "changeBTN"
function useChangeBTN(){
    $("#btnGetVcode").text("　 "+time+" s 　");
    time = time - 1;
    t = setInterval("changeBTN()", 1000);  // refresh once time per second
}

  • mainPage.jsp和styleMainPage.css：

样使用submit类型的button进行表单的提交，但并不获取任何内容，只负责启动后端的LogoutServlet从而注销账户。

mainPage.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MAIN PAGE</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="styleMainPage.css">
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("form");
        }
    </script>
</head>
<body>
<div class="label">
    <form action="LogoutServlet" class="form">
        <h1 class="title">MAIN PAGE</h1>
        <button type="submit" class="btnWF" id="write_off" name="write_off">Write Off</button>
    </form>
</div>
<%--Background carousel chart--%>
<div class="slidershow">
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1575138312433-d42e9f176f6b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080&utm_source=unsplash_source&utm_medium=referral&utm_campaign=api-credit');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1668952410266-e86775275752?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMjQ0MQ&ixlib=rb-4.0.3&q=80&w=1080');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1668016910564-3314f9fbd0bb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMjgxMA&ixlib=rb-4.0.3&q=80&w=1080');"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1669833526714-0bfa8a3b5cae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3MDMxMzM5OA&ixlib=rb-4.0.3&q=80&w=1080')"></div>
</div>
</body>
</html>

styleMainPage.css

:root {
    --white: #e9e9e9;
    --gray: #333;
    --blue: #095c91;
    --blue-r: #315a7491;
    --lightblue: #0393a3;
    --pink: #ff7f7f;

    --button-radius: 0.7rem;

    --max-width: 758px;
    --max-height: 420px;

    font-size: 16px;
    font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";

}

body {
    align-items: center;
    background-color: var(--white);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    height: 100vh;
    place-items: center;
}

.label {
    background-color: rgba(255, 255, 255, 0);
    border-radius: var(--button-radius);
    box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    height: var(--max-height);
    justify-content: center;
    max-width: 379px;
    overflow: hidden;
    padding: 0 3rem;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 5;
}

.title {
    color: var(--white);
    font-size: 6rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
}

.btnWF {
    background-color: var(--blue);
    background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
    border-radius: 20px;
    border: 1px solid var(--blue-r);
    color: var(--pink);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    padding: 0.9rem 4rem;
    margin: 2rem 0 0 0;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

/*Animation of click (transition)*/
.form > .btnWF {
    margin-top: 1.5rem;
}

.btnWF:active {
    transform: scale(0.95);
}

.btnWF:focus {
    outline: none;
}

@-webkit-keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 5;

    }

    50%,
    100% {
        opacity: 1;
        z-index: 6;
    }
}

@keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 5;

    }

    50%,
    100% {
        opacity: 1;
        z-index: 6;
    }
}

.slidershow {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.slidershow--image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    -webkit-animation-name: kenburns;
    animation-name: kenburns;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.slidershow--image:nth-child(1) {
    -webkit-animation-name: kenburns-1;
    animation-name: kenburns-1;
    z-index: 3;
}

.slidershow--image:nth-child(2) {
    -webkit-animation-name: kenburns-2;
    animation-name: kenburns-2;
    z-index: 2;
}

.slidershow--image:nth-child(3) {
    -webkit-animation-name: kenburns-3;
    animation-name: kenburns-3;
    z-index: 1;
}

.slidershow--image:nth-child(4) {
    -webkit-animation-name: kenburns-4;
    animation-name: kenburns-4;
    z-index: 0;
}

@-webkit-keyframes keyburns-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    1.5625% {
        opacity: 1;
    }
    23.4375% {
        opacity: 1;
    }
    26.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform:scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    98.4375% {
        opacity: 0;
        -webkit-transform: scale(1.21176);
        transform: scale(1.21176);
    }
    100% {
        opacity: 1;
    }
}

@keyframes kenburns-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    1.5625% {
        opacity: 1;
    }
    23.4375% {
        opacity: 1;
    }
    26.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform:scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    98.4375% {
        opacity: 0;
        -webkit-transform: scale(1.21176);
        transform: scale(1.21176);
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes kenburns-2 {
    23.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    26.5625% {
        opacity: 1;
    }
    48.4375% {
        opacity: 1;
    }
    51.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes kenburns-2 {
    23.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    26.5625% {
        opacity: 1;
    }
    48.4375% {
        opacity: 1;
    }
    51.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes kenburns-3 {
    48.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    51.5625% {
        opacity: 1;
    }
    73.4375% {
        opacity: 1;
    }
    76.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes kenburns-3 {
    48.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    51.5625% {
        opacity: 1;
    }
    73.4375% {
        opacity: 1;
    }
    76.5625% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes kenburns-4 {
    73.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    76.5625% {
        opacity: 1;
    }
    98.4375% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes kenburns-4 {
    73.4375% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    76.5625% {
        opacity: 1;
    }
    98.4375% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

（3）后端（Servlet）：

  • SignServlet.java：

获取前端输入值后，根据user_password_confirm这一只存在于注册界面中的参数进行简单的功能判定，调用后端DAO中进行查询验证的Login方法或Register方法，进行登录或注册的验证与相关操作。在登陆验证过程中，如果通过验证，将跳转至主页面，同时新建session对象并获取session id，保存已登录的邮箱的信息。

package main.Servlet;

import java.io.IOException;
import java.sql.Connection;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import main.DAO.DAO;
import main.Util.JDBCUtil;
import main.Util.User;

// Servlet of Signing in and signing up
public class SignServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;  // to ensure version compatibility

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        // Information entered by user when signing in: email, password.
        String user_email_1 = request.getParameter("user_email_1");
        String user_password_1 = request.getParameter("user_password_1");
        // Information entered by user when signing up: email, password and confirm password.
        String user_email_2 = request.getParameter("user_email_2");
        String user_password_2 = request.getParameter("user_password_2");
        String user_password_confirm = request.getParameter("user_password_confirm");

        response.setContentType("text/html;charset=utf8");
        JDBCUtil db = new JDBCUtil();
        DAO dao = new DAO();
        // The following statements are verifying input information and give related feedbacks
        if (user_password_confirm != null) {
            // Signing up
            String pattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[0-9a-zA-Z]{8,12}$";
            boolean re = user_password_2.matches(pattern);
            User user = new User(user_email_2, user_password_2);
            try {
                Connection connection = db.GetConn();
                if (!user_password_2.equals(user_password_confirm)) {
                    response.getWriter().println("<script>alert('Inconsistent passwords.')</script>");
                    response.getWriter().println("<script>window.location.href='./index.jsp'</script>");
                } else if (!re) {
                    response.getWriter().println("<script>alert('Passwords need more than eight digits including numbers and upper and lower case letters')</script>");
                    response.getWriter().println("<script>window.location.href='./index.jsp'</script>");
                } else {
                    dao.Register(connection, user);
                    response.getWriter().println("<script>alert('Sign up successfully.')</script>");
                    response.getWriter().println("<script>window.location.href='./index.jsp'</script>");
                }
            } catch (Exception e) {  // These statements can verify the existence of email address through integrity check service that mysql has provided
                response.getWriter().println("<script>alert('This user already exists.')</script>");
                response.getWriter().println("<script>window.location.href='./index.jsp'</script>");
            }
        } else {
            // Signing in
            User user = new User(user_email_1, user_password_1);
            try {
                Connection connection = db.GetConn();
                if (dao.Login(connection, user) != null) {
                    HttpSession session = request.getSession();  // Get session
                    session.setAttribute("email", user_email_1);  // Transferring information to session
                    response.getWriter().println("<script>alert('Welcome!')</script>");
                    response.getWriter().println("<script>window.location.href='./mainPage.jsp'</script>");
                } else {
                    response.getWriter().println("<script>alert('Incorrect mailbox or password.')</script>");
                    response.getWriter().println("<script>window.location.href='./index.jsp'</script>");
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        this.doPost(request, response);
    }
}

  • EmailServlet.java：

获取前端输入值，并提供由sendMail.js中给出的method参数进行方法的选择（在此处同样设置新建session并存储用户邮箱信息），然后根据不同选择调用不同的方法，其中利用正则表达式验证邮箱格式和利用DAO.java中的Exist方法验证邮箱是否是已注册邮箱，并将VCodeUtil.java生成并传到servlet的验证码和输入的验证码进行比对。两个验证的结果均添加相应标签传至前端JS文件以做出相应的响应。

package main.Servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.util.regex.Pattern;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import main.DAO.DAO;
import main.Util.EmailUtil;
import main.Util.JDBCUtil;
import main.Util.User;
// Servlet of forgetPassword page
// Class "EmailServlet" is to send verification code to user and to check the code
public class EmailServlet extends HttpServlet {
    private String user_email;
    private String vCode;  // Generated verification code
    private String vCodeReceive;  // Entered verification code
    private PrintWriter out;  // Output stream
    private final EmailUtil emailUtil = EmailUtil.instance;

    // Class "EmailServlet"'s construction method
    public EmailServlet() {
        System.out.println("Monitoring point: Email Servlet");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        out = response.getWriter();
        user_email = request.getParameter("user_email");  // Parameter "email" from fore-end
        vCodeReceive = request.getParameter("verification_code");  // Parameter "vcode" from fore-end
        String method = request.getParameter("method");  // Parameter "method" is to choose what method is needed
        switch (method) {
            case "getVCode":  // when "Get Code button" is pressed
                try {
                    MGetVCode();
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }
                break;
            case "verify":  // when "Sign In button" is pressed
                HttpSession session = request.getSession();  // Get session
                session.setAttribute("email", user_email);  // Transferring information to session
                MVerify();
                break;
            default:
                break;
        }

        out.flush();
        out.close();
    }

    // Method "MGetVCode" is to confirm email address and send verification code
    private void MGetVCode() throws Exception {
        DAO dao = new DAO();
        User user = new User(user_email, null);
        JDBCUtil db = new JDBCUtil();
        Connection connection = db.GetConn();  // Configure connection and other things
        System.out.println("Monitoring point: Sending Verification Code");

        if(!IsEmail(user_email)) {  // Verify format of email address
            out.print("-1");  // a label to make judgement of the condition of wrong format
            return;  // Interrupt process
        } else {
            if (!dao.Exist(connection, user)) {  // Verify whether this email address is registered
                out.print("0");  // a label to make judgement of the condition of nonexistent email address
                return;
            }
        }
        try {
            emailUtil.SendEmail(user_email);  // Send verification code to target email address
        } catch (Exception e) {
            e.printStackTrace();
        }
        vCode = emailUtil.getVCode();  // Get and store the verification code sending just now
        out.print("1");  // a label to make judgement of the condition
    }

    // Method "IsEmail" is to provide a method to confirm the format of email address
    private boolean IsEmail(String email) {
        if(email.length() == 0) {
            return false;
        }
        Pattern pattern = Pattern.compile("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");  // Regular expression
        return pattern.matcher(email).matches();
    }

    // Method "MVerify" is to verify whether the verification code is correct
    private void MVerify() {
        System.out.println("Monitoring point: Verify Verification Code");
        if(vCode.equals(vCodeReceive)) {
            out.print("1");  // a label to make judgement of the condition
        }
        else {
            out.print("-1");  // a label to make judgement of the condition
        }
    }

    public void destroy() {
        super.destroy();
    }

    @Override
    public void init() throws ServletException {
        super.init();
    }
}

  • LogoutServlet.java：

简单的调用session中存储的信息并调用DAO.java中提供的logout方法实现退出登录并注销账户。

package main.Servlet;

import java.io.IOException;
import java.sql.Connection;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import main.DAO.DAO;
import main.Util.JDBCUtil;
import main.Util.User;

// Servlet of writing off account
public class LogoutServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        String user_email_str;
        HttpSession session = request.getSession();
        Object user_email = session.getAttribute("email");  // Getting parameter from session
        user_email_str = user_email.toString();

        JDBCUtil db = new JDBCUtil();
        DAO dao = new DAO();
        Connection connection = db.GetConn();
        User user = new User(user_email_str, null);

        if (dao.Logout(connection, user)) {
            response.getWriter().println("<script>alert('Can not write off.')</script>");
            response.getWriter().println("<script>window.location.href='./mainPage.jsp'</script>");
        } else {
            response.getWriter().println("<script>alert('Write off successfully.')</script>");
            response.getWriter().println("<script>window.location.href='./index.jsp'</script>");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        this.doPost(request, response);
    }
}

（4）后端（Util）

  • MailUtil.java

        注：此处涉及邮件SMTP协议的启动与关闭，可参照此文章（来自Wisdom0110）：

使用JAVA实现邮件发送功能http://t.csdn.cn/ONKFk

package main.Util;

import java.util.Date;
import java.util.Properties;

import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;

// Class "EmailUtil" is to configure the method sending email
public class EmailUtil {
    private static final String fromEmail = "2562521178@qq.com";  // Sender
    private static final String fromEmailPw = "################";  // Sender's password
    private static final String myEmailSMTPHost = "smtp.qq.com";  // Mail Server
    private static Session session;  // Session object
    private String vCode;  // Getting verification code
    public static EmailUtil instance = new EmailUtil();

    // Method "getVCode" is to get verification code
    public String getVCode() {
        return vCode;
    }

    // Method "EmailUtil" is to configure protocol, server, etc
    private EmailUtil() {
        Properties props = new Properties();
        props.setProperty("mail.transport.protocol", "smtp");  // SMTP protocol
        props.setProperty("mail.smtp.host", myEmailSMTPHost);  // Recipient's email server
        props.setProperty("mail.smtp.auth", "true");  // Request authentication
        session = Session.getInstance(props);
    }

    // Method "CreateMailContent" is to edit message
    public MimeMessage CreateMailContent(String toEmail) throws Exception {
        MimeMessage message = new MimeMessage(session);
        message.setFrom(new InternetAddress(fromEmail, "Verification Code Sending System", "UTF-8"));  // Sender's information
        message.setRecipient(MimeMessage.RecipientType.TO, new InternetAddress(toEmail));  // Recipient's information
        message.setSubject("Verification Code", "UTF-8");  // Subject
        vCode = VCodeUtil.VerifyCode(6);  // Verification code
        message.setContent("Your verification code is " + vCode + ". Please do not show it to others. ", "text/html;charset=UTF-8");  // Main message
        message.setSentDate(new Date());  // Date
        message.saveChanges();  // Save message
        return message;  // Return Message
    }
    // Method "SendEmail" is to send message edited just now
    public void SendEmail(String toEmail) throws Exception {
        Transport transport = session.getTransport();  // Create connection
        transport.connect(fromEmail, fromEmailPw);
        MimeMessage message = CreateMailContent(toEmail);
        transport.sendMessage(message, message.getAllRecipients());  // Sending email
        transport.close();  // Disconnection
    }
}

  • JDBCUtil.java

package main.Util;

import java.sql.Connection;
import java.sql.DriverManager;

// Class "EmailUtil" is to configure the connection to database
public class JDBCUtil {

    // Method "getConn" is to configure the connection to database
    public Connection GetConn() {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (Exception e) {
            e.printStackTrace();
        }
        Connection conn = null;

        try {
            String dbUsername = "java";  // Username
            String dbPassword = "java";  // Password
            // Using 103.46.128.49:50691 to form remote connection in order to run this program on other connected device
            String dbUrl = "jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai";  // IP address, port, encoding, etc.
            conn = DriverManager.getConnection(dbUrl, dbUsername, dbPassword);  // Get connection
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }
}

  • VcodeUtil.java

package main.Util;

import java.util.Random;

// Class "VCodeUtil" is to generate verification code
public class VCodeUtil {
    public static String VerifyCode(int n) {
        StringBuilder strB = new StringBuilder();  // Character splicing
        Random rand = new Random();
        for(int i = 0; i < n; i++) {
            int r1 = rand.nextInt(3);
            int r2 = 0;
            switch (r1) {  // Different type of characters
                case 0:
                    r2 = rand.nextInt(10) + 48;  // ASCII code value of numbers
                    break;
                case 1:
                    r2 = rand.nextInt(26) + 65;  // ASCII code value of uppercase letters
                    break;
                case 2:
                    r2 = rand.nextInt(26) + 97;  // ASCII code value of lowercase letters
                    break;
                default:
                    break;
            }
            strB.append((char)r2);  // Combine the letters into a six digit verification code
        }
        return strB.toString();
    }
}

  • User.java

package main.Util;

// Class "User" is to access or modify data of user
public class User {
    private String user_email;
    private String user_password;

    public User() {}

    public User(String user_email, String user_password) {
        this.user_email = user_email;
        this.user_password = user_password;
    }

    public String getUser_email() {
        return user_email;
    }

    public String getUser_password() {
        return user_password;
    }

    public void setUser_email(String user_email) {
        this.user_email = user_email;
    }

    public void setUser_password(String user_password) {
        this.user_password = user_password;
    }
}

（5）后端（DAO）

  • DAO.java：

向servlet提供了使用数据库信息的方法。其中写入了Login，Register，Exist，Logout四个方法，分别用于登录校验，注册写入，检查账户存在性，注销账户。

package main.DAO;

import main.Util.User;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.Objects;

// Class "DAO" is to configure the method operating database
public class DAO {
    // Method "login" is to provide data for login authentication
    public User Login(Connection conn, User user)  throws Exception {
        User resultUser = null;  // Prepare result set "resultUser"
        String sql = "select * from user where user_email=? and user_password=?;";
        PreparedStatement pstatement = conn.prepareStatement(sql);  // Execute SQL statement
        pstatement.setString(1, user.getUser_email());
        pstatement.setString(2, user.getUser_password());  // Passing parameters to SQL statement
        ResultSet rs = pstatement.executeQuery();  // Getting results
        if (rs.next()) {  // Traversing results
            resultUser = new User();  // Store results to result set prepared before
            resultUser.setUser_email(rs.getString("user_email"));
            resultUser.setUser_password(rs.getString("user_password"));
        }
        return resultUser;
    }
    // Method "register" is to store data of user while signing up
    public void Register(Connection conn, User user) throws Exception {
        String sql = "insert into user(user_email,user_password) values(?,?);";
        PreparedStatement pstatement = conn.prepareStatement(sql);
        pstatement.setString(1, user.getUser_email());
        pstatement.setString(2, user.getUser_password());
        pstatement.executeUpdate();
    }
    // Method "Exist" is to judge whether the entered email address exists while signing up
    public boolean Exist(Connection conn, User user) throws Exception {
        boolean flag = false;
        String sql = "select * from user;";
        Statement statement = conn.createStatement();
        ResultSet rs = statement.executeQuery(sql);
        String input_email = user.getUser_email();
        while (rs.next()) {  // Traversing results from database to see if entered email address has registered
            String user_email = rs.getString("user_email");
            if (Objects.equals(user_email, input_email)) {
                flag = true;
            }
        }
        return flag;
    }
    // method "Logout" is to delete relevant user from database
    public boolean Logout(Connection conn, User user) {
        boolean flag = false;
        try {
            String sql = "delete from user where user_email=?;";
            PreparedStatement pstatement = conn.prepareStatement(sql);
            pstatement.setString(1, user.getUser_email());
            pstatement.executeUpdate();
        } catch (Exception e) {
            flag = true;
        }
        return flag;
    }
}

（6）配置文件

  • web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <display-name>WebProject</display-name>
    <!--Setting home page-->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    <!--Setting SignServlet-->
    <servlet>
        <servlet-name>SignServlet</servlet-name>
        <servlet-class>main.Servlet.SignServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>SignServlet</servlet-name>
        <url-pattern>/SignServlet</url-pattern>
    </servlet-mapping>
    <!--Setting MailServlet-->
    <servlet>
        <servlet-name>EmailServlet</servlet-name>
        <servlet-class>main.Servlet.EmailServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>EmailServlet</servlet-name>
        <url-pattern>/EmailServlet</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>LogoutServlet</servlet-name>
        <servlet-class>main.Servlet.LogoutServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LogoutServlet</servlet-name>
        <url-pattern>/LogoutServlet</url-pattern>
    </servlet-mapping>
</web-app>

7、系统完成形式与参考代码

文件

完成形式

参考代码（或无参考）

index.jsp

改写

[1]

forgetPassword.jsp

改写

[2]

mainPage.jsp

自写

无参考

styleIndex.css

抄写（改正原代码错误）

[1]

styleForgetPassword.css

仿写、自写

[1]

styleMainPage.css

自写

[1]

sendEmail.js

改写

[2]

DAO.java

自写

[3]

EmailServlet.java

改写

[2]

SignServlet.java

自写

[3]

EmailUtil.java

改写

[2]

JDBCUtil.java

仿写

[3]

User.java

自写

无参考

VCodeUtil.java

抄写

[2]

[1]利用 css 和 Javascript 实现注册登录界面Ⅰ【每天一个不会秃头的前端案例】_哔哩哔哩_bilibili

[2]第二篇参考代码丢失（该部分代码主要是一个邮箱验证码登录的子系统）

[3]JavaWeb项目(登录注册页面)全过程详细总结文章来源地址https://www.toymoban.com/news/detail-472992.html

到了这里，关于JavaWeb登录注册系统/界面（邮箱验证码，数据库连接，详细注释，可作结课作业，可用于学习，可接入其他主系统）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Python Socket联机自动匹配双人五子棋（含登录注册系统与界面，数据库连接，可作结课作业，可用于学习）

    Python Socket联机自动匹配双人五子棋（含登录注册系统与界面，数据库连接，可作结课作业，可用于学习）

    致使用该程序的同志、朋友们：         本段代码存在重大问题，原有描述的局域网连接功能存在纰漏，无法实现多主机对局，但如果单一主机演示则可以正常使用。         关于此问题的修正方案，由于期末周较为繁忙，截止2023年12月25日尚无完整代码实现，对此某深表歉

    2024年02月07日
    浏览(60)
  • （代码注释超详细）JavaWeb连接Mysql数据库完成登录注册业务

    （代码注释超详细）JavaWeb连接Mysql数据库完成登录注册业务

    登录：完成连接数据库判断登陆信息是否有误 注册：将信息填写完毕后点击注册，跳转到登陆页面 主页：展示项目信息并且可以在页面内进行增删改操作 完整文件目录如下： 文件目录： bean包中填写的代码为实体类 dao模型就是写一个类，把访问数据库的代码封装起来 serv

    2023年04月22日
    浏览(95)
  • maven如何建立JavaWeb项目并连接数据库，验证登录

    maven如何建立JavaWeb项目并连接数据库，验证登录

    这里是建立建立web项目：Maven如何创建Java web项目（纯干货版）！！！_明天更新的博客-CSDN博客 我们主要演示如何连接数据库验证登录。 1.在webapp目录下创建我们的登录页面：index.jsp    还需要再写一个验证登录成功的页面（如果页面跳转成功就代表登录成功）  内容如下：

    2024年02月13日
    浏览(46)
  • 使用javaweb实现登录注册页面，并且对功能和业务进行分层 用户登录成功跳转到主页并展示数据库的商品的信息

    使用javaweb实现登录注册页面，并且对功能和业务进行分层 用户登录成功跳转到主页并展示数据库的商品的信息

    一、Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用，在这种模式下，servlet负责处理用户请求，jsp负责数据显示，javabean负责封装数据。 Servlet+JSP+JavaBean模式程序各个模块之间层次清晰，web开发推荐采用此种模式。 这里以一个最常用的用户登录

    2024年02月03日
    浏览(64)
  • Java实现连接数据库验证登录和注册（附详细知识点讲解）

    Java实现连接数据库验证登录和注册（附详细知识点讲解）

    学完Java基础后，一般会做个项目练手（上一篇博客有讲到 Java在线聊天室课程设计 ） 当中肯定会涉及到 登录验证 ，但没学过数据库 😅，不知道如何操作；只能把用户账户密码预存在一个txt文本当中，然后通过IO流读取验证 ⭐ 最后去搜相应的资料和网课进行学习，现在问题

    2024年02月02日
    浏览(48)
  • 手把手教你制作登录、注册界面 SpringBoot+Vue.js（cookie的灵活运用，验证码功能）

    手把手教你制作登录、注册界面 SpringBoot+Vue.js（cookie的灵活运用，验证码功能）

    实现思路：用户在界面输入用户名和密码传入变量。用post方法传输到后端，后端接收整个实体对象。将用户名提取出。在dao层方法中通过select注解查询，返回数据库对应的数据对象。如果返回为空则return false。不为空则通过比对数据库返回的密码和用户输入的密码，如果二者

    2024年02月03日
    浏览(57)
  • JAVAWEB学生信息管理系统保姆级教程(增删改查+登录注册+Filter+mysql)eclipse版

    JAVAWEB学生信息管理系统保姆级教程(增删改查+登录注册+Filter+mysql)eclipse版

          登陆界面 注册界面  主界面   

    2024年02月12日
    浏览(45)

  • Springboot整合Mail进行邮箱验证码注册

    Spring Mail的配置信息，用于设置邮件发送相关参数。 host : SMTP服务器的地址，这里使用QQ邮箱的SMTP服务器地址。 port : SMTP服务器监听的端口，默认为25，但QQ邮箱SMTP服务器采用SSL加密传输需要使用465端口。 username : 发送邮件的邮箱账号，这里填写QQ邮箱的账号。 password : 发送邮

    2024年02月08日
    浏览(47)
  • SpringBoot整合邮箱验证码实现用户注册

    SpringBoot整合邮箱验证码实现用户注册

    唠嗑部分 今天我们来分享一下在系统开发过程中，如何使用验证码来验证用户并完成用户注册 首先来看一下成品界面展示 说一下以上注册功能的设计： 用户手动输入用户名(全数据库唯一)、密码、确认密码、邮箱地址(单个邮箱最多可注册3个用户)、正确的邮箱验证码，即可

    2024年02月08日
    浏览(61)
  • 使用邮箱发送验证码前端完成登录

    使用邮箱发送验证码前端完成登录

    在前一篇使用C#发送邮箱验证码已经完成使用.net core web api写了完成往登录邮箱发送验证码的接口。现在就用前端调用接口模拟登录功能。 前端使用是layui样式＋Vue写的功能。 记得把 div id = \\\"app\\\"/div 把前端样式包含 右侧那验证码是缓存中的验证码，一般是看不见的。 前端调用

    2024年01月19日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包