静态的登录界面的设计login.htm,代码如下:
<
html
>
< head >
< title > 系统登录 </ title >
< style type ="text/css" > ...
<!--
.style1 {...}{
font-size: 18px;
font-weight: bold;
}
.style2 {...}{font-size: 24px}
.style5 {...}{font-size: 16px}
-->
</ style >
</ head >
< body bgcolor ="papayawhip" width ="300" height ="300" >
< center >
< table border ="2" bordercolor ="black" bgcolor ="lightgreen" >
< tbody >
< tr >
< td >< div align ="center" class ="style1 style2" > 系 统 登 录
</ div ></ td >
</ tr >
< form action ="login.jsp" method ="post" >
< tr >
< td height ="28" >< span class ="style5" > 用户名 </ span > < input type ="text" name ="uid" maxlength ="20" style ="width:150" ></ td ></ tr >< br >
< tr >
< td >< span class ="style5" > 密 码 </ span > < input type ="password" name ="upwd" maxlength ="20" style ="width:150" ></ td ></ tr >< br >
< center >
< tr >< td >< div align ="center" >
< input type ="submit" value ="登录" >
< input type ="reset" value ="取消" >
</ div ></ td ></ tr >
</ center >
</ form >
</ tbody >
</ table >
</ center >
</ body >
</ html >
< head >
< title > 系统登录 </ title >
< style type ="text/css" > ...
<!--
.style1 {...}{
font-size: 18px;
font-weight: bold;
}
.style2 {...}{font-size: 24px}
.style5 {...}{font-size: 16px}
-->
</ style >
</ head >
< body bgcolor ="papayawhip" width ="300" height ="300" >
< center >
< table border ="2" bordercolor ="black" bgcolor ="lightgreen" >
< tbody >
< tr >
< td >< div align ="center" class ="style1 style2" > 系 统 登 录
</ div ></ td >
</ tr >
< form action ="login.jsp" method ="post" >
< tr >
< td height ="28" >< span class ="style5" > 用户名 </ span > < input type ="text" name ="uid" maxlength ="20" style ="width:150" ></ td ></ tr >< br >
< tr >
< td >< span class ="style5" > 密 码 </ span > < input type ="password" name ="upwd" maxlength ="20" style ="width:150" ></ td ></ tr >< br >
< center >
< tr >< td >< div align ="center" >
< input type ="submit" value ="登录" >
< input type ="reset" value ="取消" >
</ div ></ td ></ tr >
</ center >
</ form >
</ tbody >
</ table >
</ center >
</ body >
</ html >
将登录用户输入的信息提交到login.jsp页面机型处理,这里为了方便,不执行数据库的访问操作,直接使用sky2098作为登录用户名和密码,但在实际中是要从数据库中读取的,该jsp页面代码实现如下:
<%
...
@ page contentType="text/html;charset=GB2312"
%>
<% ...
if(request.getParameter("uid").equals("sky2098")&&request.getParameter("upwd").equals("sky2098")){
session.setAttribute("login","ok");
session.setMaxInactiveInterval(-1);
%>
< jsp:forward page ="main.jsp" />
<% ...
}else{
out.println("用户名或密码输入错误!");
}
%>
<% ...
if(request.getParameter("uid").equals("sky2098")&&request.getParameter("upwd").equals("sky2098")){
session.setAttribute("login","ok");
session.setMaxInactiveInterval(-1);
%>
< jsp:forward page ="main.jsp" />
<% ...
}else{
out.println("用户名或密码输入错误!");
}
%>
如果登录成功,则设定login的值为ok,提交到下一步验证页面,则进入main.jsp页面,否则,如果输入的用户名和密码不合法就打印错误信息,main.jsp页面代码如下:
<%
...
@ page contentType="text/html;charset=GB2312"
%>
<% ... @ include file="checkvalid.jsp" %>
< html >
< head >
< title > ~WELCOME TO MY HOMEPAGE~ </ title >
</ head >
< body >
< center >
~WELCOME TO MY HOMEPAGE~
</ center >
</ body >
</ html >
<% ... @ include file="checkvalid.jsp" %>
< html >
< head >
< title > ~WELCOME TO MY HOMEPAGE~ </ title >
</ head >
< body >
< center >
~WELCOME TO MY HOMEPAGE~
</ center >
</ body >
</ html >
这个页面使用<% @ include file="checkvalid.jsp" %>包含了一个jsp页面checkvalid.jsp为了验证输入信息的合法性:
<%
...
if(session.getAttribute("login")==null||!session.getAttribute("login").equals("ok")){
response.sendRedirect("login.htm");
}
%>
if(session.getAttribute("login")==null||!session.getAttribute("login").equals("ok")){
response.sendRedirect("login.htm");
}
%>
如果输入信息有误,则回到登录页面,重新输入登录信息。
测试登录功能。
启动Tomcat服务器,在IE地址栏中键入URL为:
http://localhost:8080/sky2098/login-Advanced/login.htm
可以看到登录界面,如图所示:
键入用户名sky2098,密码sky2098,点击“登录”提交信息,如图所示:
如果输入的用户名或者密码错误,则提示信息如图所示:
这样,就实现了简单的登录验证功能。