完善课堂的用户管理实例，实现以下功能：
（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+"   ");
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，等待后续的更新。
现在仍存在的问题为：历史访问次数无法显示，用户列表排列不优雅，登录密码验证存在缺陷
欢迎指点！！感谢！！！
