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

news/2025/3/6 15:51:41/

目录

1、前言

2、系统实机演示

3、系统分析与设计

（1）主要软件与工具

（2）系统分析

（3）系统规划

4、系统设计与构建

（1）JavaWeb创建

（2）JavaWeb运行

（3）先期依赖准备：

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

（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：

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

1、前言

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

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

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

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

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

系统总共分三个界面：

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

2、系统实机演示

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

3、系统分析与设计

（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）。

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忘了在这里配置，结果前后端连不上，浪费了四五个小时。如何配置可以参考我后面的代码，也可以去其他博主那里查，但是务必要做好，做不好有的是哭的时候）。

4、系统设计与构建

（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”即可

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

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

（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,
yser_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 formdocument.getElementById("form1");document.getElementById("form2");// Listen for switching action events and start related operationssignInBtn.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 methodtype: '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 methodtype: '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 wordsclearInterval(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 compatibilityprotected 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 feedbacksif (user_password_confirm != null) {// Signing upString 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 providedresponse.getWriter().println("<script>alert('This user already exists.')</script>");response.getWriter().println("<script>window.location.href='./index.jsp'</script>");}} else {// Signing inUser 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 sessionsession.setAttribute("email", user_email_1);  // Transferring information to sessionresponse.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 codeprivate String vCodeReceive;  // Entered verification codeprivate PrintWriter out;  // Output streamprivate final EmailUtil emailUtil = EmailUtil.instance;// Class "EmailServlet"'s construction methodpublic 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-endvCodeReceive = request.getParameter("verification_code");  // Parameter "vcode" from fore-endString method = request.getParameter("method");  // Parameter "method" is to choose what method is neededswitch (method) {case "getVCode":  // when "Get Code button" is pressedtry {MGetVCode();} catch (Exception e) {throw new RuntimeException(e);}break;case "verify":  // when "Sign In button" is pressedHttpSession session = request.getSession();  // Get sessionsession.setAttribute("email", user_email);  // Transferring information to sessionMVerify();break;default:break;}out.flush();out.close();}// Method "MGetVCode" is to confirm email address and send verification codeprivate 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 thingsSystem.out.println("Monitoring point: Sending Verification Code");if(!IsEmail(user_email)) {  // Verify format of email addressout.print("-1");  // a label to make judgement of the condition of wrong formatreturn;  // Interrupt process} else {if (!dao.Exist(connection, user)) {  // Verify whether this email address is registeredout.print("0");  // a label to make judgement of the condition of nonexistent email addressreturn;}}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 nowout.print("1");  // a label to make judgement of the condition}// Method "IsEmail" is to provide a method to confirm the format of email addressprivate 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 expressionreturn pattern.matcher(email).matches();}// Method "MVerify" is to verify whether the verification code is correctprivate 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();}@Overridepublic 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 sessionuser_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实现邮件发送功能icon-default.png?t=MBR7http://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";  // Senderprivate static final String fromEmailPw = "################";  // Sender's passwordprivate static final String myEmailSMTPHost = "smtp.qq.com";  // Mail Serverprivate static Session session;  // Session objectprivate String vCode;  // Getting verification codepublic static EmailUtil instance = new EmailUtil();// Method "getVCode" is to get verification codepublic String getVCode() {return vCode;}// Method "EmailUtil" is to configure protocol, server, etcprivate EmailUtil() {Properties props = new Properties();props.setProperty("mail.transport.protocol", "smtp");  // SMTP protocolprops.setProperty("mail.smtp.host", myEmailSMTPHost);  // Recipient's email serverprops.setProperty("mail.smtp.auth", "true");  // Request authenticationsession = Session.getInstance(props);}// Method "CreateMailContent" is to edit messagepublic MimeMessage CreateMailContent(String toEmail) throws Exception {MimeMessage message = new MimeMessage(session);message.setFrom(new InternetAddress(fromEmail, "Verification Code Sending System", "UTF-8"));  // Sender's informationmessage.setRecipient(MimeMessage.RecipientType.TO, new InternetAddress(toEmail));  // Recipient's informationmessage.setSubject("Verification Code", "UTF-8");  // SubjectvCode = VCodeUtil.VerifyCode(6);  // Verification codemessage.setContent("Your verification code is " + vCode + ". Please do not show it to others. ", "text/html;charset=UTF-8");  // Main messagemessage.setSentDate(new Date());  // Datemessage.saveChanges();  // Save messagereturn message;  // Return Message}// Method "SendEmail" is to send message edited just nowpublic void SendEmail(String toEmail) throws Exception {Transport transport = session.getTransport();  // Create connectiontransport.connect(fromEmail, fromEmailPw);MimeMessage message = CreateMailContent(toEmail);transport.sendMessage(message, message.getAllRecipients());  // Sending emailtransport.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 databasepublic Connection GetConn() {try {Class.forName("com.mysql.cj.jdbc.Driver");} catch (Exception e) {e.printStackTrace();}Connection conn = null;try {String dbUsername = "java";  // UsernameString dbPassword = "java";  // Password// Using 103.46.128.49:50691 to form remote connection in order to run this program on other connected deviceString 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 splicingRandom rand = new Random();for(int i = 0; i < n; i++) {int r1 = rand.nextInt(3);int r2 = 0;switch (r1) {  // Different type of characterscase 0:r2 = rand.nextInt(10) + 48;  // ASCII code value of numbersbreak;case 1:r2 = rand.nextInt(26) + 65;  // ASCII code value of uppercase lettersbreak;case 2:r2 = rand.nextInt(26) + 97;  // ASCII code value of lowercase lettersbreak;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 authenticationpublic 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 statementpstatement.setString(1, user.getUser_email());pstatement.setString(2, user.getUser_password());  // Passing parameters to SQL statementResultSet rs = pstatement.executeQuery();  // Getting resultsif (rs.next()) {  // Traversing resultsresultUser = new User();  // Store results to result set prepared beforeresultUser.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 uppublic 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 uppublic 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 registeredString 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 databasepublic 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>

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

文件

完成形式

参考代码（或无参考）

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项目(登录注册页面)全过程详细总结


http://www.ppmy.cn/news/11293.html

相关文章

代码随想录训练营第五十七天

代码随想录训练营第五十七天

1.回文子串 题647 ①dp数组含义 判断回文子串可以用头元素和尾元素是否相等的方式&#xff0c;设dp[i] [j]为[i,j]子串是否为回文子串&#xff0c;是则为true&#xff0c;否为false。 ②递推公式 若 s[i] s[j] &#xff0c;分三种情况&#xff1a;i j&#xff0c;即只有一…
阅读更多...
1.3 认识程序开发

1.3 认识程序开发

文章目录1.程序开发流程1.1 软件定义期&#xff08;研究分析阶段&#xff09;1.2 软件开发期&#xff08;开发阶段&#xff09;1.3 软件上线期&#xff08;部署运行阶段&#xff09;2.认识浏览器2.1 浏览器如何实现访问网站的&#xff1f;2.2 HTTP协议2.3 URL地址的构成2.4 如何…
阅读更多...
4.5 集成运放的种类及选择

4.5 集成运放的种类及选择

一、集成运放的发展概述 集成运放自 20 世纪 60 年代问世以来&#xff0c;飞速发展&#xff0c;目前已经历了四代产品。 第一代产品基本沿用了分立元件放大电路的设计思想&#xff0c;采用了集成数字电路的制造工艺&#xff0c;利用了少量横向 PNP 管&#xff0c;构成以电流源…
阅读更多...
Python一学就会系列：02 输出输入及数据类型

Python一学就会系列：02 输出输入及数据类型

系列文章目录 Python一学就会系列&#xff1a;01 开发环境搭建 及 hello world 文章目录系列文章目录一、输出二、输入三、数据类型总结一、输出 用print()在括号中加上字符串&#xff0c;就可以向屏幕上输出指定的文字 print(hello, world)结果&#xff1a;hello, world 多…
阅读更多...
【网络攻击手段之----- DDOS攻击】

【网络攻击手段之----- DDOS攻击】

网络攻击手段之 DDOS攻击前言网络的攻击手段常见的网络攻击手段什么是DDOS攻击如何实现DDOS攻击C代码模拟DDOS攻击如何使用C语言代码来模拟DDOS攻击提升攻击强度如何进一步提升攻击强度前言 本篇文章主要介绍DDOS攻击&#xff0c;以及DDOS攻击的实现方法&#xff0c;DDOS攻击是…
阅读更多...
文件IO操作

文件IO操作

日升时奋斗&#xff0c;日落时自省 目录 1、文件基本认知 1.1、文件路径 1.2、相对路径 1.3、文件类型 2、Java的文件操作 2.1、文件操作类File 3、数据流读写 3.1字节流读文件 3.2、字节流写文件 3.3、字符流读操作 3.4、字符流写操作 4、文件操作案例 4.1、删除…
阅读更多...
【C++】引用详解

【C++】引用详解

作者&#xff1a;阿润菜菜 专栏&#xff1a;C &#x1f3c3;&#x1f3c3;&#x1f3c3;&#x1f3c3;&#x1f3c3;&#x1f3c3; 本文目录 概念及用法 特性 使用场景 1.做参数 2. 做返回值 从函数栈帧角度理解引用 传值、传引用效率比较 引用和指针的区别 概念及用法 引…
阅读更多...
电脑重装系统后文件还能恢复吗？恢复文件的详细图文教程

电脑重装系统后文件还能恢复吗？恢复文件的详细图文教程

电脑重装系统&#xff0c;简单来说就是重新安装电脑的操作系统。一般选择重新安装电脑的系统&#xff0c;无非是电脑蓝屏、系统运行速度慢、崩溃死机等问题。 很多人会有疑惑&#xff0c;电脑重装系统后文件还能恢复吗&#xff1f;重装系统会造成数据全部被清空的情况&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023