国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<strong id="q2uc7"><dl id="q2uc7"></dl></strong>

<label id="q2uc7"><s id="q2uc7"></s></label>

<th id="q2uc7"><progress id="q2uc7"></progress></th>

JavaWeb登錄注冊系統(tǒng)/界面（郵箱驗證碼，數(shù)據(jù)庫連接，詳細注釋，可作結(jié)課作業(yè)，可用于學(xué)習(xí)，可接入其他主系統(tǒng)）

2年前作者：山河之書Liu_Zixin分類：Toy博客閱讀(20)違法舉報

這篇具有很好參考價值的文章主要介紹了JavaWeb登錄注冊系統(tǒng)/界面（郵箱驗證碼，數(shù)據(jù)庫連接，詳細注釋，可作結(jié)課作業(yè)，可用于學(xué)習(xí)，可接入其他主系統(tǒng)）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

目錄

1、致謝

2、前言

3、系統(tǒng)實機演示

4、系統(tǒng)分析與設(shè)計

（1）主要軟件與工具

（2）系統(tǒng)分析

（3）系統(tǒng)規(guī)劃

5、系統(tǒng)設(shè)計與構(gòu)建

（1）JavaWeb創(chuàng)建

（2）JavaWeb運行

（3）先期依賴準備：

6、代碼與關(guān)鍵注釋、文件簡析

（1）數(shù)據(jù)庫

（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、系統(tǒng)完成形式與參考代碼

1、致謝

????????特別感謝CSDN用戶水金豬肚雞對本文“6、代碼與關(guān)鍵注釋、文件簡析（1）數(shù)據(jù)庫”新建數(shù)據(jù)表內(nèi)容中指令錯誤的斧正！

? ? ? ? 特別感謝CSDN用戶 ruwosigui?對本文“5、系統(tǒng)設(shè)計與構(gòu)建（1）JavaWeb創(chuàng)建”中兩處鏈接失效問題的指出！

????????特此感謝！

????????同時歡迎各位同志對此文章錯誤與遺漏之處提出批評建議！

2、前言

首先，關(guān)于源碼的獲取，本人提供了三種方式：

直接從文章里面Ctrl+C，Ctrl+V，然后按照我已給的文件結(jié)構(gòu)搞一下即可；
通過積分下載上傳到CSDN的資源；
點開本人的主頁，點擊“查看詳細資料”，添加好友獲取源碼文件（如果有問題同樣可以通過這里問），本人承諾無特殊情況，三小時內(nèi)將無條件提供源碼（所謂特殊情況僅指時間上的，畢竟掛上去的是我的副號，獲取信息可能不及時，見諒）。

（另外，私信沒法發(fā)文件，真的不要再從私信問我要源碼了，我也只能給你再指回到我的個人簡介那里去）

注：關(guān)于第二個獲取方式……實際上用第三種方式就行，和第二種方式獲得的文件沒任何區(qū)別，再不濟可以用第一種，真的真的沒必要用第二種（但是做慈善的話我也歡迎，畢竟我也需要一點積分用來下載資源）

一切的一切要從我心血來潮腦子一熱報了專業(yè)選修——Java說起，我承認我報的時候草率了，我承認我低估了它的難度。但是還是得寫的好一點，畢竟期末結(jié)課嘛，寫的好一點，多一點總歸沒壞處，于是就有了今天這篇改自我的實驗報告和代碼的JavaWeb登錄注冊系統(tǒng)。

本系統(tǒng)基本實現(xiàn)了登錄注冊所需的功能，包括但不限于登錄檢查、注冊檢查、多登錄方式提供、郵箱驗證碼獲取與校驗等功能，還加寫了一個登錄后注銷賬戶的功能。

系統(tǒng)總共分三個界面：

第一個是負責(zé)注冊和常規(guī)密碼登錄的界面；
第二個是負責(zé)郵箱驗證碼登錄的界面；
第三個是主界面，沒有實際意義，就是登陸成功后總得跳轉(zhuǎn)個界面，這個界面上我也沒完全空著，加了個注銷。

3、系統(tǒng)實機演示

實機演示視頻https://live.csdn.net/v/269198?spm=1001.2014.3001.5501

JavaWeb登錄注冊系統(tǒng)/界面（郵箱驗證碼，數(shù)據(jù)庫連接，詳細注釋，可作結(jié)課作業(yè)，可用于學(xué)習(xí)，可接入其他主系統(tǒng)）

JavaWeb登錄注冊系統(tǒng)/界面（郵箱驗證碼，數(shù)據(jù)庫連接，詳細注釋，可作結(jié)課作業(yè)，可用于學(xué)習(xí)，可接入其他主系統(tǒng)）

JavaWeb登錄注冊系統(tǒng)/界面（郵箱驗證碼，數(shù)據(jù)庫連接，詳細注釋，可作結(jié)課作業(yè)，可用于學(xué)習(xí)，可接入其他主系統(tǒng)）

JavaWeb登錄注冊系統(tǒng)/界面（郵箱驗證碼，數(shù)據(jù)庫連接，詳細注釋，可作結(jié)課作業(yè)，可用于學(xué)習(xí)，可接入其他主系統(tǒng)）

4、系統(tǒng)分析與設(shè)計

（1）主要軟件與工具

工具：HUAWEI MATEBOOK D14（Windows 10）

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

（2）系統(tǒng)分析

登錄注冊系統(tǒng)需要具有的基本功能包括登錄和注冊兩個部分。其中：

顯性需求：提供注冊信息寫入服務(wù)，提供注冊信息格式錯誤排查服務(wù)，提供登錄檢查服務(wù)；
隱性需求：注冊部分應(yīng)當考慮到用戶對于自己設(shè)置的密碼是否存在無意的輸入錯誤（需求：需要二次確認密碼）；登錄部分應(yīng)到考慮到用戶是否會忘記密碼（需求：需要提供多種登錄驗證方式）；
除此之外，還有一些便于后續(xù)開發(fā)而提供的需求，包括保存session以便向其他網(wǎng)頁傳遞用戶基本信息。

（3）系統(tǒng)規(guī)劃

系統(tǒng)主要包括：數(shù)據(jù)庫（MySQL）、后端諸項（Servlet，Util等）、前端諸項（JSP，CSS，JS）。

JavaWeb登錄注冊系統(tǒng)/界面（郵箱驗證碼，數(shù)據(jù)庫連接，詳細注釋，可作結(jié)課作業(yè)，可用于學(xué)習(xí)，可接入其他主系統(tǒng)）

a. 數(shù)據(jù)庫：

需要在MySQL中新建用于存儲用戶信息（包含用戶郵箱和密碼字段）的數(shù)據(jù)庫（database test）及其數(shù)據(jù)表（table user）。為了保障其他數(shù)據(jù)庫的安全性，因此新建訪問該數(shù)據(jù)庫的用戶（"java"@"%"）并賦以相應(yīng)權(quán)限（all on test.*）。

b. 前端：

需要設(shè)計三個界面，即：登錄注冊界面（index.jsp）、忘記密碼登錄界面（forgetPassword .jsp）、主界面（mainPage.jsp），及其附帶的.js和.css文件。其中：

登錄注冊界面需要提供注冊和常規(guī)賬號密碼登錄兩個子系統(tǒng)，并使用滑塊進行子系統(tǒng)的切換。其中登錄部分包含登錄按鈕、用于輸入登錄信息的兩個輸入框、用于切換到忘記密碼登錄界面的鏈接；注冊部分則包含注冊按鈕，用于注冊的三個輸入框；除此之外還包括用于切換模式的兩個按鈕。
主界面為驗證登錄成功的跳轉(zhuǎn)界面，本身無特殊價值和功能，僅加入了注銷賬戶（即刪除賬戶）的按鈕，一鍵注銷賬戶并同時跳轉(zhuǎn)回登錄注冊界面。
忘記密碼登錄界面需要提供忘記密碼登錄服務(wù)，包含獲取驗證碼的動態(tài)按鈕、驗證登錄的按鈕以及用于輸入信息的兩個輸入框。

c. 后端：

DAO：
Util：
1. MailUtil.java：提供郵件發(fā)送的相關(guān)配置和郵件內(nèi)容的擬寫。
2. JDBCUtil.java：提供數(shù)據(jù)庫連接的相關(guān)配置。
3. VCodeUtil.java：隨機生成若干位包含大小寫字母/數(shù)字驗證碼。
4. User.java：提供存儲臨時用戶、寫入信息的方法從而便于傳遞參數(shù)。
Servlet：
1. SignServlet.java：對應(yīng)index.jsp，負責(zé)獲取前端輸入值并按照輸入的信息判斷啟動相應(yīng)的驗證過程完成登錄驗證或注冊。
2. EmailServlet.java：對應(yīng)forgetPassword.jsp，負責(zé)接收前端輸入值并按照按鍵調(diào)用相應(yīng)的方法（郵箱驗證與驗證碼生成、發(fā)送，或核驗驗證碼）。
3. LogoutServlet.java：對應(yīng)mainPage.jsp，主要目的是按照按鍵讀取存儲登錄賬戶郵箱的session并注銷該賬戶。

d. DAO.java：提供對數(shù)據(jù)庫中的數(shù)據(jù)進行增刪改查的方法。

e. 配置文件

web.xml：提供Servlet配置，并設(shè)置初始界面為index.jsp（登錄注冊界面）（注：這個東西極其重要，一開始的時候Servlet忘了在這里配置，結(jié)果前后端連不上，浪費了四五個小時。如何配置可以參考我后面的代碼，也可以去其他博主那里查，但是務(wù)必要做好，做不好有的是哭的時候）。

5、系統(tǒng)設(shè)計與構(gòu)建

（1）JavaWeb創(chuàng)建

關(guān)于JavaWeb創(chuàng)建的問題，由于我是基于IDEA做的，因此我就只給出IDEA創(chuàng)建JavaWeb項目的方法，鏈接如下：

IDEA社區(qū)版創(chuàng)建JavaWeb項目

IDEA專業(yè)版創(chuàng)建JavaWeb項目

一般來講用IDEA專業(yè)版更保險，更舒適，更便捷，但是要花錢。不花錢的辦法也有三個，其一是申請JetBrains的免費教育許可證（需要學(xué)生或教師身份），其二是破解（方法自己查），其三是利用一個月的試用期完成代碼（你只有一個月）。

（2）JavaWeb運行

JavaWeb運行可以參見之前創(chuàng)建JavaWeb項目中給出的流程，由于我本人對于IDEA沒有很熟悉，因此不過多評述，一切參照其他操作。

（3）先期依賴準備：

依賴包下載方式：
- 點開本人的主頁，點擊“查看詳細資料”，添加好友獲取依賴包（如果有問題同樣可以通過這里問），本人承諾無特殊情況，三小時內(nèi)將無條件提供依賴包（所謂特殊情況僅指時間上的，畢竟掛上去的是我的副號，獲取信息可能不及時，見諒）。
- 源碼里面包含所需的包，理論上無需單獨下載。
- 通過本人CSDN資源免積分下載：

????????????????Activation-1.1.jar

????????????????javax.mail-1.6.2.jar

????????????????mysql-connector-j-8.0.31.jar

????????????????fastjson-2.0.21.jar

????????????????(那個fastJSON的本項目不需要）

依賴包添加：
- 第一步，按照之前給出的項目文件架構(gòu)，在根目錄下新建lib文件夾
- 把下載好的依賴包（.jar文件）扔進去
- 在IDEA里左側(cè)的文件結(jié)構(gòu)欄，右鍵.jar文件，點擊“add as library”即可

6、代碼與關(guān)鍵注釋、文件簡析

（注：注釋是英文的，問就是寫程序一直來回切換中英文實在過于麻煩，不想看英文的參見此處，包你滿意）

（1）數(shù)據(jù)庫

新建數(shù)據(jù)庫test：

create database test;

新建用戶java，密碼為java，設(shè)置允許任何主機訪問：

create user "java"@"%" identified by "java";

授予用戶java對test數(shù)據(jù)庫的所有數(shù)據(jù)表的全部權(quán)限：

grant all on test.* to "java"@"%";

在test庫中新建數(shù)據(jù)表user：

create table user(
user_email char(100) primary key,
user_password char(50)
);

（2）前端

index.jsp和styleIndex.css：

JSP文件將登錄和注冊分置于兩個表單，分別設(shè)置提交按鈕進行表單的提交，從而保障一個servlet可以對應(yīng)兩個功能而不產(chǎn)生數(shù)據(jù)輸入的沖突。利用嵌入的JS進行表單提交的中繼。

添加用于切換登錄/注冊的按鈕，切換動作通過更換各層的z-index和使用上層overlay進行不需要的模塊的遮蓋和切換滑塊的移動。

使用輪播圖進行背景的更換和展示，具體內(nèi)容參考自他人代碼。

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" >
    <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屬性和長度比例顯示實現(xiàn)按鍵和輸入框保持對其狀態(tài)，此處考慮到表單分開提交無法滿足驗證表單需要兩層數(shù)據(jù)的需求，因此將選擇相應(yīng)功能的邏輯交給了后端的EmailServlet。sendMail.js將后端傳來的校驗完成的信息進行響應(yīng)，并提供更改獲取驗證碼按鈕上的倒計時的功能，控制按鈕的啟用和禁用。

（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" >
    <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進行表單的提交，但并不獲取任何內(nèi)容，只負責(zé)啟動后端的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" >
    <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：

獲取前端輸入值后，根據(jù)user_password_confirm這一只存在于注冊界面中的參數(shù)進行簡單的功能判定，調(diào)用后端DAO中進行查詢驗證的Login方法或Register方法，進行登錄或注冊的驗證與相關(guān)操作。在登陸驗證過程中，如果通過驗證，將跳轉(zhuǎn)至主頁面，同時新建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參數(shù)進行方法的選擇（在此處同樣設(shè)置新建session并存儲用戶郵箱信息），然后根據(jù)不同選擇調(diào)用不同的方法，其中利用正則表達式驗證郵箱格式和利用DAO.java中的Exist方法驗證郵箱是否是已注冊郵箱，并將VCodeUtil.java生成并傳到servlet的驗證碼和輸入的驗證碼進行比對。兩個驗證的結(jié)果均添加相應(yīng)標簽傳至前端JS文件以做出相應(yīng)的響應(yīng)。

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：

簡單的調(diào)用session中存儲的信息并調(diào)用DAO.java中提供的logout方法實現(xiàn)退出登錄并注銷賬戶。

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協(xié)議的啟動與關(guān)閉，可參照此文章（來自Wisdom0110）：

使用JAVA實現(xiàn)郵件發(fā)送功能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提供了使用數(shù)據(jù)庫信息的方法。其中寫入了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、系統(tǒng)完成形式與參考代碼

文件	完成形式	參考代碼（或無參考）
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 實現(xiàn)注冊登錄界面Ⅰ【每天一個不會禿頭的前端案例】_嗶哩嗶哩_bilibili

[2]第二篇參考代碼丟失（該部分代碼主要是一個郵箱驗證碼登錄的子系統(tǒng)）

[3]JavaWeb項目(登錄注冊頁面)全過程詳細總結(jié)文章來源地址http://www.zghlxwxcb.cn/news/detail-472992.html

到了這里，關(guān)于JavaWeb登錄注冊系統(tǒng)/界面（郵箱驗證碼，數(shù)據(jù)庫連接，詳細注釋，可作結(jié)課作業(yè)，可用于學(xué)習(xí)，可接入其他主系統(tǒng)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

Python Socket聯(lián)機自動匹配雙人五子棋（含登錄注冊系統(tǒng)與界面，數(shù)據(jù)庫連接，可作結(jié)課作業(yè)，可用于學(xué)習(xí)）
致使用該程序的同志、朋友們： ? ? ? ? 本段代碼存在重大問題，原有描述的局域網(wǎng)連接功能存在紕漏，無法實現(xiàn)多主機對局，但如果單一主機演示則可以正常使用。 ? ? ? ? 關(guān)于此問題的修正方案，由于期末周較為繁忙，截止2023年12月25日尚無完整代碼實現(xiàn)，對此某深表歉
2024年02月07日
瀏覽(97)
（代碼注釋超詳細）JavaWeb連接Mysql數(shù)據(jù)庫完成登錄注冊業(yè)務(wù)
登錄：完成連接數(shù)據(jù)庫判斷登陸信息是否有誤注冊：將信息填寫完畢后點擊注冊，跳轉(zhuǎn)到登陸頁面主頁：展示項目信息并且可以在頁面內(nèi)進行增刪改操作完整文件目錄如下：文件目錄： bean包中填寫的代碼為實體類 dao模型就是寫一個類，把訪問數(shù)據(jù)庫的代碼封裝起來 serv
2023年04月22日
瀏覽(21)
maven如何建立JavaWeb項目并連接數(shù)據(jù)庫，驗證登錄
這里是建立建立web項目：Maven如何創(chuàng)建Java web項目（純干貨版）?。?！_明天更新的博客-CSDN博客我們主要演示如何連接數(shù)據(jù)庫驗證登錄。 1.在webapp目錄下創(chuàng)建我們的登錄頁面：index.jsp??? 還需要再寫一個驗證登錄成功的頁面（如果頁面跳轉(zhuǎn)成功就代表登錄成功） ?內(nèi)容如下：
2024年02月13日
瀏覽(22)
使用javaweb實現(xiàn)登錄注冊頁面，并且對功能和業(yè)務(wù)進行分層用戶登錄成功跳轉(zhuǎn)到主頁并展示數(shù)據(jù)庫的商品的信息
一、Servlet+JSP+JavaBean開發(fā)模式(MVC)介紹 Servlet+JSP+JavaBean模式(MVC)適合開發(fā)復(fù)雜的web應(yīng)用，在這種模式下，servlet負責(zé)處理用戶請求，jsp負責(zé)數(shù)據(jù)顯示，javabean負責(zé)封裝數(shù)據(jù)。 Servlet+JSP+JavaBean模式程序各個模塊之間層次清晰，web開發(fā)推薦采用此種模式。這里以一個最常用的用戶登錄
2024年02月03日
瀏覽(109)
Java實現(xiàn)連接數(shù)據(jù)庫驗證登錄和注冊（附詳細知識點講解）
學(xué)完Java基礎(chǔ)后，一般會做個項目練手（上一篇博客有講到 Java在線聊天室課程設(shè)計）當中肯定會涉及到登錄驗證，但沒學(xué)過數(shù)據(jù)庫 ??，不知道如何操作；只能把用戶賬戶密碼預(yù)存在一個txt文本當中，然后通過IO流讀取驗證 ? 最后去搜相應(yīng)的資料和網(wǎng)課進行學(xué)習(xí)，現(xiàn)在問題
2024年02月02日
瀏覽(19)
手把手教你制作登錄、注冊界面 SpringBoot+Vue.js（cookie的靈活運用，驗證碼功能）
實現(xiàn)思路：用戶在界面輸入用戶名和密碼傳入變量。用post方法傳輸?shù)胶蠖?，后端接收整個實體對象。將用戶名提取出。在dao層方法中通過select注解查詢，返回數(shù)據(jù)庫對應(yīng)的數(shù)據(jù)對象。如果返回為空則return false。不為空則通過比對數(shù)據(jù)庫返回的密碼和用戶輸入的密碼，如果二者
2024年02月03日
瀏覽(20)
JAVAWEB學(xué)生信息管理系統(tǒng)保姆級教程(增刪改查+登錄注冊+Filter+mysql)eclipse版
? ? ? 登陸界面注冊界面? 主界面? ?
2024年02月12日
瀏覽(24)
Springboot整合Mail進行郵箱驗證碼注冊
Spring Mail的配置信息，用于設(shè)置郵件發(fā)送相關(guān)參數(shù)。 host : SMTP服務(wù)器的地址，這里使用QQ郵箱的SMTP服務(wù)器地址。 port : SMTP服務(wù)器監(jiān)聽的端口，默認為25，但QQ郵箱SMTP服務(wù)器采用SSL加密傳輸需要使用465端口。 username : 發(fā)送郵件的郵箱賬號，這里填寫QQ郵箱的賬號。 password : 發(fā)送郵
2024年02月08日
瀏覽(24)
SpringBoot整合郵箱驗證碼實現(xiàn)用戶注冊
嘮嗑部分今天我們來分享一下在系統(tǒng)開發(fā)過程中，如何使用驗證碼來驗證用戶并完成用戶注冊首先來看一下成品界面展示說一下以上注冊功能的設(shè)計：用戶手動輸入用戶名(全數(shù)據(jù)庫唯一)、密碼、確認密碼、郵箱地址(單個郵箱最多可注冊3個用戶)、正確的郵箱驗證碼，即可
2024年02月08日
瀏覽(58)
使用郵箱發(fā)送驗證碼前端完成登錄
在前一篇使用C#發(fā)送郵箱驗證碼已經(jīng)完成使用.net core web api寫了完成往登錄郵箱發(fā)送驗證碼的接口。現(xiàn)在就用前端調(diào)用接口模擬登錄功能。前端使用是layui樣式＋Vue寫的功能。記得把 div id = \\\"app\\\"/div 把前端樣式包含右側(cè)那驗證碼是緩存中的驗證碼，一般是看不見的。前端調(diào)用
2024年01月19日
瀏覽(101)

<th id="ep81s"></th>

<kbd id="ep81s"></kbd>