jsp之完善用戶管理實例

完善課堂的用戶管理實例，實現以下功能：
（1）用戶的屬性不少於5條；
（2）用戶登錄後能看到所有人的詳細註冊信息；
（3）使用JS完成註冊頁面和登錄頁面的簡單校驗；
（5）具有統計系統在線人數的功能；
（6）具有統計系統歷史訪問人數的功能；
（7）嘗試對頁面進行美化（選做）。
userLogin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用戶登錄</title>
    <style type="text/css">
        body{
            background-image:url(../../pratice_one/image/1.png);
            margin:0;
            padding:0;
            background-repeat: no-repeat;
            background-attachment:fixed;
            over:flow;
            background-size: 100%  100%;
        }
        #form_1{
            color:white;
            width: 300px;
            height: 170px;
            margin:200px;
            background-color:blueyellow;
            border: 1px solid blueyellow;
            /* for IE */
            filter:alpha(opacity=10);
            /* CSS3 standard */
            opacity:0.5;
            float:right;
            word-spacing: 10px;}
        
        }
        #tr_login{
            color:green;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            //獲取password
            var password1 = document.getElementById("password");
            //獲取sbm01
            var sbm01 = document.getElementById("sbm01");
            //爲sbm01綁定單擊響應函數
            sbm01.onclick = function(){
              if(password1.value == ""){
                alert("密碼不能爲空");
                return false;
               }
            
            };         
        
        };
    </script>

</head>
<body >      
    
<form id="form_1" action="checkLogin.jsp" method="post">
<p style="width: 222px;text-align:center; font-size:20px;"><b> 用戶登錄</b></p>
  <table >
  
    <tr>
       <td>用戶名:</td>
       <td><input type="text" name="username" style="width: 154px; "></td>
    </tr>
    <tr>
       <td>密碼:</td>
       <td><input type="password" name="password" id="password" style="width: 154px; "></td>
    </tr>
    <tr>
       <td></td>
       <td><input type="submit" value="登錄" id="sbm01" style="width: 68px; ">
       <input type="reset" value="重置" style="width: 68px; "><br>   <a href="userRegister.jsp">還沒註冊？</a>
         </td>
         
    </tr>
   
  
  </table>

</form></p>


</body>
</html>

userList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.List,java.util.ArrayList"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
用戶信息列表
<font color="red">
<%=request.getParameter("loginSucc") %>
</font>
<br>

<%
    int Num=1;
    String strNum = (String)application.getAttribute("Num");
    if(strNum != null){
        Num = Integer.parseInt(strNum)+1;
    application.setAttribute("Num", String.valueOf(Num));
    } 
 %>
 您已經訪問<%=Num %>次
 <br>
<%

  List userList_name = (ArrayList)session.getAttribute("userList_name");
  List userList_password = (ArrayList)session.getAttribute("userList_password");
  List userList_mail = (ArrayList)session.getAttribute("userList_mail");
  List userList_pNumber = (ArrayList)session.getAttribute("userList_pNumber");
  List userList_QQNumber = (ArrayList)session.getAttribute("userList_QQNumber");
  //打印用戶名
  for(Object obj:userList_name)
     out.println("用戶名"+obj+"&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;");
  out.println("</br>");
  //打印郵箱
  for(Object obj:userList_mail)
     out.println("郵箱："+obj);
  out.println("</br>");
  //打印手機號
  for(Object obj:userList_pNumber)
     out.println("手機號："+obj);
     
  out.println("</br>");
  //打印QQ號
  for(Object obj:userList_QQNumber)
     out.println("QQ："+obj);
  out.println("</br>");   
  
  //設置當前訪問人數，既是當前在線人數
  out.print("當前訪問共有："+ userList_name.size()+"人");
  out.println("</br>");
  
 %>
<input type="button" value="返回" onclick="javascript:history.back();">
 


</body>
</html>

checkLogin.jsp

<%@ page contentType="text/html; charset=utf-8" import="java.util.List,java.util.ArrayList"%>
<html>
<body>
<%--進行登陸檢查--%>
<!-- 學號20177710232WZ，嚴謹抄襲 -->
<%
	String username = request.getParameter("username");
	String password = request.getParameter("password");
	
	request.setCharacterEncoding("utf-8");
	
	List userList_name = (ArrayList)session.getAttribute("userList_name");
	List userList_password = (ArrayList)session.getAttribute("userList_password");
	 if(userList_name ==null){
	    userList_name = new ArrayList();	   
	}
	if(userList_password == null){
	    userList_password = new ArrayList();
	}
	// if驗證通過，forward-->sucess.jsp
	//else forward-->login.jsp
	//驗證用戶名密碼
	if (userList_name.contains(username)&&userList_password.contains(password)) {
%>
    <jsp:forward page="userList.jsp">
	    <jsp:param value="登錄成功" name="loginSucc"/>
    </jsp:forward>
	
<%
	}//if
	else {
%>
<jsp:forward page="userLogin.jsp"/>

<%
}
%>
</body>
</html>

checkRegister.jsp

<%@ page contentType="text/html; charset=utf-8" import="java.util.List,java.util.ArrayList"%>
<html>


<body>
<%--進行登陸檢查--%>
<!-- 學號20177710232WZ，嚴謹抄襲 -->
<%
	String username = request.getParameter("username");
	String password = request.getParameter("password");
	String mail = request.getParameter("mail");
	String pNumber = request.getParameter("pNumber");
	String QQNumber = request.getParameter("QQNumber");
	
	    List userList_name = (ArrayList)session.getAttribute("userList_name");
	    List userList_password = (ArrayList)session.getAttribute("userList_password");
	    List userList_mail = (ArrayList)session.getAttribute("userList_mail");
	    List userList_pNumber = (ArrayList)session.getAttribute("userList_pNumber");
	    List userList_QQNumber = (ArrayList)session.getAttribute("userList_QQNumber");
	    if(userList_name ==null){
	           userList_name = new ArrayList();           
	           userList_pNumber = new ArrayList();
	           userList_QQNumber = new ArrayList();
	       }
	   if(userList_password == null){
	    userList_password = new ArrayList();
	   }
	   if( userList_mail== null){
	       userList_mail = new ArrayList();
	   }
	   
	   
	    userList_name.add(username);	
	    userList_mail.add(mail);
	    userList_QQNumber.add(QQNumber);
	    userList_password.add(password);
	    userList_pNumber.add(pNumber);
	    
	    session.setAttribute("userList_name", userList_name);
	    session.setAttribute("userList_password",userList_password);
	    session.setAttribute("userList_mail", userList_mail);
	    session.setAttribute("userList_pNumber", userList_pNumber);
	    session.setAttribute("userList_QQNumber",userList_QQNumber);
	    
	    System.out.println(userList_name);
	    System.out.println(userList_mail);
	    System.out.println(userList_pNumber);
	    System.out.println(userList_QQNumber);
	
	
	// if驗證通過，forward-->sucess.jsp
	//else forward-->login.jsp
%>
<jsp:forward page="userLogin.jsp"/>

</body>
</html>

userRegister.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 學號20177710232WZ，嚴謹抄襲 -->
<title>用戶註冊</title>
<script type="text/javascript">
     window.onload = function(){
      //獲取用戶名
      var userNameId = document.getElementById("usernameId");
      //獲取submitName
      var submitName = document.getElementById("submitName");  
      //獲取密碼
      var password = document.getElementById("password");
      var password_again = document.getElementById("password_again");
      //獲取郵箱
      var mail = document.getElementById("mail");
      //獲取手機號
      var phoneNumber = document.getElementById("phoneNumber");
      //獲取qq號
      var QQNumber = document.getElementById("QQNumber");
      //爲submit綁定單擊響應函數
      submitName.onclick = function(){
          //用戶名檢測，3-7位
          var uPattern = /^[a-zA-Z0-9_-]{3,7}$/;
               /*  
               *var a = /^[a-zA-Z0-9_-]{number1-number2}/;
               *
               */
          if(!uPattern.test(userNameId.value)){
              alert("用戶名必須爲3-7爲字母或數字");
               return false;
             // window.location.reload();              
          }          
          if(password.value == ""){
          alert("密碼不能爲空");
           
           //window.location.reload();
           return false;         
          } 
          if(password.value != password_again.value){
              alert("密碼輸入不一致，請重新輸入");                           
             //password.focus();
              //輸入有誤，重新加載當前頁面 
             //window.location.reload();
             return false;     
          }                   
           //郵箱驗證
          var emailReg = new RegExp( /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/);
          if(!emailReg.test(mail.value)){
              alert("郵箱格式不正確");
              
               return false;
             // window.location.reload(); 
             
          } 
        //手機號驗證，手機號應爲11位，且爲1開頭
         var phoneReg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
         if(!phoneReg.test(phoneNumber.value)){
             alert("手機號不符合規範");
              return false;
             window.location.reload();
            
         } 
         //qq號驗證，6位-10位數字
         var uQQ = /^\d{6,10}$/;
         if(!uQQ.test(QQNumber.value)){
             alert("QQ號不符合規範");
             return false;
          //  window.location.reload();
             
         }
   
      };
      
      /*  function isDigit(phoneNumber){
       var patrn=/^[0-9]{1,20}$/;
        if (!patrn.exec(phoneNumber)) 
          alert("1");
       return true
        } 
         function IsEmail(str) {
	    var reg=/^[\s\S]{6,10}$/;
	    return reg.test(str);
        }
         function fun1(){	
        	
		if(!IsEmail(mail.value)){
		alert("郵箱名稱填寫錯誤或不規範");
		document.getElementById("email").focus();
		return false;
	    }  */
 
    };


</script>

</head>
<body>


<b>用戶註冊</b>
<form action="checkRegister.jsp" method="post">
  <table>
    <tr>
       <td>用戶名</td>
       <td><input type="text" name="username" id="usernameId" style="width: 155px; "></td>
    </tr>
    <tr>
       <td>密碼</td>
       <td><input type="password" name="password" id="password" style="width: 155px; "></td>
    </tr>
    
    <tr>
       <td>重複密碼</td>
       <td><input type="password" id="password_again" style="width: 155px; "></td>
    </tr>
    <tr>
        <td>郵箱</td>
        <td><input type="text" name="mail" id="mail" style="width: 155px; "></td>
    </tr>
    <tr>
        <td>手機號</td>
        <td><input type="text" name="pNumber" id="phoneNumber" style="width: 155px; "></td>
    </tr>
    <tr>
        <td>QQ號</td>
        <td><input type="text" name="QQNumber" id="QQNumber" style="width: 155px; "></td>
    </tr>
    
    <tr>
       <td>性別</td>
       <td>
          <select name="gender">
            <option value="1">男</option>
            <option value="2">女</option>
          </select>
		</td>
    </tr>
    <tr>
       <td><input type="submit" id="submitName" value="註冊"></td>
       <td><input type="reset" value="重置">
          <a href="userLogin.jsp">已有賬號，我要登錄</a>
         </td>
    </tr>
  
  </table>

</form>


</body>
</html>

實現效果：

該頁面存在正則驗證

目前由於個人能力問題，仍存在很多bug，等待後續的更新。
現在仍存在的問題爲：歷史訪問次數無法顯示，用戶列表排列不優雅，登錄密碼驗證存在缺陷
歡迎指點！！感謝！！！

jsp之完善用戶管理實例

Vue打包問題之No module factory available for dependency type: CssDependency

js之遍歷數組的一些方法

webpack的安裝並解決“安裝之後顯示webpack不是內部或外部命令問題”

簡述JSON

jsp之內置對象session過期時間

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結