JavaWeb實(shí)現(xiàn)用戶登錄與注冊(cè)功能

更新時(shí)間：2021年08月23日 17:27:37 作者：奈何橋下的一道光線√

這篇文章主要為大家詳細(xì)介紹了JavaWeb實(shí)現(xiàn)用戶登錄與注冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaWeb實(shí)現(xiàn)用戶登錄與注冊(cè)的具體代碼，供大家參考，具體內(nèi)容如下

所用知識(shí)

客戶端：HTML CSS JS （JQuery）

服務(wù)器：JAVA基礎(chǔ) JSP Servlet JDBC Tomcat

數(shù)據(jù)庫：MySQL

用到的Jar包 druid數(shù)據(jù)庫連接池 dbutils JDBC數(shù)據(jù)庫操作工具 MySQL jar包

實(shí)現(xiàn)效果基本為注冊(cè)用戶，注冊(cè)成功將數(shù)據(jù)寫入數(shù)據(jù)庫，登錄過程查看數(shù)據(jù)庫中是的用戶名，密碼是否匹配，匹配跳轉(zhuǎn)到登錄成功頁面，失敗返回登錄頁面。

思路：

1、先寫前端登錄注冊(cè)界面，把前端的基本外觀框架完成

2、數(shù)據(jù)庫創(chuàng)建用戶信息表，儲(chǔ)存注冊(cè)用戶的信息

3、服務(wù)器部分采用JavaEE三層架構(gòu)

(1)、表現(xiàn)層：通俗講就是展現(xiàn)給用戶的界面，即用戶在使用一個(gè)系統(tǒng)的時(shí)候他的所見所得。
(2)、業(yè)務(wù)邏輯層：針對(duì)具體問題的操作，也可以說是對(duì)數(shù)據(jù)層的操作，對(duì)數(shù)據(jù)業(yè)務(wù)邏輯處理。
(3)、數(shù)據(jù)訪問層：該層所做事務(wù)直接操作數(shù)據(jù)庫，針對(duì)數(shù)據(jù)的增添、刪除、修改、查找等。

一、客戶端部分

文件存儲(chǔ)形式

實(shí)現(xiàn)代碼：

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="" src="static/img/logo.gif" >
   <div>
    <a href="pages/user/login.jsp" >登錄</a> |
    <a href="pages/user/regist.jsp" >注冊(cè)</a> &nbsp;&nbsp;
   </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="" 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>會(huì)員</h1>
        <a href="pages/user/regist.jsp" >立即注冊(cè)</a>
       </div>
       <div class="msg_cont">
        <b></b>
        <span class="errorMsg">請(qǐng)輸入用戶名和密碼</span>
       </div>
       <div class="form">
        <form action="${pageContext.request.contextPath}/loginServletl" method="post">
         <label>用戶名稱：</label>
         <input class="itxt" type="text" placeholder="請(qǐng)輸入用戶名" autocomplete="off" tabindex="1" name="username" />
         <br />
         <br />
         <label>用戶密碼：</label>
         <input class="itxt" type="password" placeholder="請(qǐng)輸入密碼" autocomplete="off" tabindex="1" name="password" />
         <br />
         <br />
         <input type="submit" value="登錄" id="sub_btn" />
        </form>
       </div>
       
      </div>
     </div>
    </div>
   </div>
  <div id="bottom">
   <span>
    hunustNiu
   </span>
  </div>
</body>
</html>

regist.jsp 注冊(cè)頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>注冊(cè)頁面</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/javascript" src="static/jquery-1.7.2.js"></script>
  <script type="text/javascript">
   // 頁面加載完成之后
   $(function (){
    $("#sub_btn").click(function (){
     //判斷用戶名稱是否合法
     //獲取用戶昵稱
     var username=$("#username").val();
     //獲取用戶昵稱匹配的正則表達(dá)式
     var zzusername=/^\w{5,12}$/;
                    //如果不符合正則
     if(!zzusername.test(username)){
                     $("span.errorMsg").text("用戶名不合法");
                     return false;
     }
 
     //判斷用戶密碼是否合法
     //獲取用戶密碼
     var password=$("#password").val();
     //獲取用戶密碼匹配的正則表達(dá)式
     var zzpassword=/^[a-z0-9_-]{6,18}$/;
     //如果不符合正則
     if(!zzusername.test(username)){
      $("span.errorMsg").text("用戶密碼不合法");
      return false;
     }
 
     //確認(rèn)密碼
     var repwd=$("#repwd").val();
     if(repwd!==password){
      $("span.errorMsg").text("兩次密碼不一致");
      return false;;
     }
 
     //電子郵件
     var email=$("#email").val();
     var zzemail=/[1-9]\d{7,10}@qq\.com/;
     if(!zzemail.test(email)){
      $("span.errorMsg").text("郵箱格式不符");
      return false;
     }
     //驗(yàn)證碼
     //去掉驗(yàn)證碼前后空格
     var code=$("#code").val();
     code=$.trim(code);
     if(code!=="6n6np"){
      $("span.errorMsg").text("驗(yàn)證碼錯(cuò)誤");
      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="" src="static/img/logo.gif" >
  </div>
 
   <div class="login_banner">
 
    <div id="l_content">
     <span class="login_word">歡迎注冊(cè)</span>
    </div>
 
    <div id="content">
     <div class="login_form">
      <div class="login_box">
       <div class="tit">
        <h1>注冊(cè)</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="請(qǐng)輸入用戶名"
             autocomplete="off" tabindex="1" name="username" id="username" />
         <br />
         <br />
         <label>用戶密碼：</label>
         <input class="itxt" type="password" placeholder="請(qǐng)輸入密碼"
             autocomplete="off" tabindex="1" name="password" id="password" />
         <br />
         <br />
         <label>確認(rèn)密碼：</label>
         <input class="itxt" type="password" placeholder="確認(rèn)密碼"
             autocomplete="off" tabindex="1" name="repwd" id="repwd" />
         <br />
         <br />
         <label>電子郵件：</label>
         <input class="itxt" type="text" placeholder="請(qǐng)輸入郵箱地址"
             autocomplete="off" tabindex="1" name="email" id="email" />
         <br />
         <br />
         <label>驗(yàn)證碼：</label>
         <input class="itxt" type="text" style="width: 150px;" id="code" name="code"/>
         <img alt="" src="static/img/code.bmp" style="float: right; margin-right: 40px">
         <br />
         <br />
         <input type="submit" value="注冊(cè)" 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="" src="static/img/logo.gif" >
    <div>
     <a href="index.jsp" >注銷</a>&nbsp;&nbsp;
     <a href="index.jsp" >返回</a>
    </div>
  </div>
  <div id="main">
   <h1>歡迎回來 <a href="index.jsp">轉(zhuǎn)到主頁</a></h1>
</div>

二、數(shù)據(jù)庫部分

文件存儲(chǔ)形式

實(shí)現(xiàn)代碼：

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','190177@qq.com')/*初始測(cè)試數(shù)據(jù)*/

三、服務(wù)器部分

點(diǎn)擊查看：文章鏈接

問題總結(jié)

1、客戶端部分遇到的bug首先就是在注冊(cè)，登錄，主頁之間進(jìn)行頁面跳轉(zhuǎn)的過程中由于沒有加入<base>標(biāo)簽總是在一個(gè)網(wǎng)頁可以顯示跳到另一個(gè)頁面就會(huì)產(chǎn)生404錯(cuò)誤，通過將所有頁面<base>標(biāo)簽固定為<base href="http://localhost:8080/book_war_exploded/">統(tǒng)一跳轉(zhuǎn)的基準(zhǔn)以解決。

2、利用JQuery在注冊(cè)頁面判斷注冊(cè)結(jié)果是否符合注冊(cè)的格式要求，采用正則表達(dá)式進(jìn)行判斷。

3、數(shù)據(jù)庫中的郵箱信息，在注冊(cè)過程中不能重復(fù)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: