JavaWeb實現使用者登入與註冊功能
阿新 • • 發佈：2021-08-24
本文例項為大家分享了Web實現使用者登入與註冊的具體程式碼，供大家參考，具體內容如下
所用知識
客戶端：HTML （）
伺服器：JAVA基礎 JSP Servlet JDBC Tomcat
：
用到的Jar包 druid資料庫連線池 dbutils JDBC資料庫操作工具 MySQL jar包
實現效果基本為註冊使用者，註冊成功將資料寫入資料庫，登入過程檢視資料庫中是的使用者名稱，密碼是否匹配，匹配跳轉到登入成功頁面，失敗返回登入頁面。
思路：
1、先寫前端登入註冊介面，把前端的基本外觀框架完成
2、資料庫建立使用者資訊表，儲存註冊使用者的資訊
3、伺服器部分採用JavaEE三層架構
(1)、表現層：通俗講就是展現給使用者的介面，即使用者在使用一個系統的時候他的所見所得。
(3)、資料訪問層：該層所做事務直接操作資料庫，針對資料的增添、刪除、修改、查詢等。
一、客戶端部分
檔案儲存形式
實現程式碼：
index.jsp主頁
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<base href="http://localhost:8080/book_war_exploded/">
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
</head>
<body>
<div id="header">
<img class="logo_img" alt="JavaWeb實現使用者登入與註冊功能" src="static/img/logo.gif" >
<div>
<a href="pages/user/login.jsp" >登入</a> |
<a href="pages/user/regist.jsp" >註冊</a>
</div>
</div>
<div id="bottom">
<span>
hunustNiu
</span>
</div>
</body>
</html>login.jsp登入介面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入頁面</title>
<base href="http://localhost:8080/book_war_exploded/">
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css" >
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="JavaWeb實現使用者登入與註冊功能" src="static/img/logo.gif" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">歡迎登入</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>會員</h1>
<a href="pages/user/regist.jsp" >立即註冊</a>
</div>
<div class="msg_cont">
<span class="errorMsg">請輸入使用者名稱和密碼</span>
</div>
<div class="form">
<form action="${pageContext.request.contextPath}/loginServletl" method="post">
<label>使用者名稱稱：</label>
<input class="itxt" type="text" placeholder="請輸入使用者名稱" autocomplete="off" tabindex="1" name="username" />
<br />
<br />
<label>使用者密碼：</label>
<input class="itxt" type="password" placeholder="請輸入密碼" autocomplete="off" tabindex="1" name="password" />
<br />
<br />
<input type="submit" value="登入" id="sub_btn" />
</form>
</div>
</div>
</div>
<
regist.jsp 註冊頁面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<base href="http://localhost:8080/book_war_exploded/">
<link type="text/css" rel="stylesheet" href="static/css/style.css" rel="external nofollow" rel="external nofollow" >
<script type="text/" src="static/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 頁面載入完成之後
$(function (){
$("#sub_btn").click(function (){
//判斷使用者名稱稱是否合法
//獲取使用者暱稱
var username=$("#username").val();
//獲取使用者暱稱匹配的正則表示式
var zzusername=/^\w{5,12}$/;
//如果不符合正則
if(!zzusername.test(username)){
$("span.errorMsg").text("使用者名稱不合法");
return false;
}
//判斷使用者密碼是否合法
//獲取使用者密碼
var password=$("#password").val();
//獲取使用者密碼匹配的正則表示式
var zzpassword=/^[a-z0-9_-]{6,18}$/;
//如果不符合正則
if(!zzusername.test(username)){
$("span.errorMsg").text("使用者密碼不合法");
return false;
}
//確認密碼
var repwd=$("#repwd").val();
if(repwd!==password){
$("span.errorMsg").text("兩次密碼不一致");
return false;;
}
//電子郵件
zxOEpOpcc var email=$("#email").val();
var zzemail=/[1-9]\d{7,10}@qq\.com/;
if(!zzemail.test(email)){
$("span.errorMsg").text("郵箱格式不符");
return false;
}
//驗證碼
//去掉驗證碼前後空格
var code=$("#code").val();
code=$.trim(code);
if(code!=="6n6np"){
$("span.errorMsg").text("驗證碼錯誤");
return false;
}
});
})
</script>
<style type="text/css">
.login_form{
height:420px;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="JavaWeb實現使用者登入與註冊功能" src="static/img/logo.gif" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">歡迎註冊</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>註冊</h1>
<span class="errorMsg"></span>
</div>
<div class="form">
<form action="${pageContext.request.contextPath}/registServlet" method="post">
<label>使用者名稱稱：</label>
<input class="itxt" type="text" placeholder="請輸入使用者名稱"
autocomplete="off" tabindex="1" name="username" id="username" />
<br />
<br />
<label>使用者密碼：</label>
<input class="itxt" typhttp://www.cppcns.come="password" placeholder="請輸入密碼"
autocomplete="off" tabindex="1" name="password" id="password" />
<br />
<br />
<label>確認密碼：</label>
<input class="itxt" type="password" placeholder="確認密碼"
autocomplete="off" tabindex="1" name="repwd" id="repwd" />
<br />
<br />
<label>電子郵件：</label>
<input class="itxt" type="text" placeholder="請輸入郵箱地址"
autocomplete="off" tabindex="1" name="email" id="email" />
<br />
<br />
<label>驗證碼：</label>
<input class="itxt" type="text" style="width: 150px;" id="code" name="code"/>
<img alt="JavaWeb實現使用者登入與註冊功能" src="static/img/code.bmp" style="float: right; margin-right: 40px">
<br />
<br />
<input type="submit" value="註冊" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<span>
hunustNiu
</span>
</div>
</body>
</html>
login_succe.jsp 和regist_success.jsp功能目前只是返回首頁和退出登入
<div id="header">
<img class="logo_img" alt="JavaWeb實現使用者登入與註冊功能" src="static/img/logo.gif" >
<div>
<a href="index.jsp" >登出</a>
<a href="index.jsp" >返回</a>
</div>
</div>
<div id=http://www.cppcns.com"main">
<h1>歡迎回來 <a href="index.jsp">www.cppcns.com轉到主頁</a></h1>
</div>
二、資料庫部分
檔案儲存形式
實現程式碼：
CREATE DATABASE users
CREATE TABLE users(
id INT PRIMARY KEY AUTO_INCREMENT,username VARCHAR(25) UNIQUE,PASSWORD VARCHAR(25),email VARCHAR(30) UNIQUE
)
SELECT *FROM `users`
INSERT INTO `users`(`username`,`password`,`email`) VALUES('niu123','niu123','[email protected]')/*初始測試資料*/
三、伺服器部分
點選檢視：文章連結
問題總結
1、客戶端部分遇到的bug首先就是在註冊，登入，主頁之間進行頁面跳轉的過程中由於沒有加入<base>標籤總是在一個可以顯示跳到另一個頁面就會產生404錯誤，通過將所有頁面<base>標籤固定為<base href="http://localhost:8080/book_war_exploded/">統一跳轉的基準以解決。
2、利用JQuery在註冊頁面判斷註冊結果是否符合註冊的格式要求，採用正則表示式進行判斷。
3、資料庫中的郵箱資訊，在註冊過程中不能重複。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。