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,等待后续的更新。
现在仍存在的问题为:历史访问次数无法显示,用户列表排列不优雅,登录密码验证存在缺陷
欢迎指点!!感谢!!!

©️2020 CSDN 皮肤主题: Age of Ai 设计师:mmellie 返回首页